:root {
      color-scheme: light;
      --ink: #171717;
      --ink-soft: #2f302b;
      --muted: #696761;
      --muted-2: #8a857a;
      --line: #e1ddd4;
      --line-soft: #eee9df;
      --paper: #f6f4ee;
      --ivory: #f6f4ee;
      --paper-warm: #fbfaf6;
      --ivory-warm: #fbfaf6;
      --panel: #ffffff;
      --panel-soft: #fffdf8;
      --obsidian: #0e0f10;
      --charcoal: #1a1b19;
      --night: #121814;
      --night-panel: #1b211d;
      --night-line: #30382f;
      --gold: #c9a86a;
      --gold-strong: #b8945a;
      --gold-soft: #f3ead7;
      --gold-line: #e2cfa0;
      --deep-green: #1f3a33;
      --deep-green-soft: #e8f0ec;
      --deep-green-line: #bbd2c8;
      --scrim-gold: linear-gradient(135deg, rgba(14, 15, 16, .92), rgba(26, 27, 25, .78) 55%, rgba(201, 168, 106, .16));
      --glass-panel: rgba(20, 21, 22, .62);
      --accent: var(--deep-green);
      --accent-strong: var(--deep-green);
      --accent-soft: var(--deep-green-soft);
      --accent-line: var(--deep-green-line);
      --success: #2f7d5f;
      --success-soft: #edf8f2;
      --success-line: #c9e6d7;
      --attention: #b7791f;
      --attention-soft: #fff8e8;
      --attention-line: #efd49b;
      --danger: #b4233a;
      --danger-soft: #fff1f3;
      --danger-line: #f1b8c1;
      --neutral-soft: #f5f4f0;
      --shadow-sm: 0 8px 22px rgba(31, 29, 24, .045);
      --shadow-md: 0 16px 36px rgba(31, 29, 24, .07);
      --radius-sm: 6px;
      --radius: 8px;
      --blue: #3a6ea5;
    }

    * {
      box-sizing: border-box;
    }

    .hidden {
      display: none !important;
    }

    .text-accent-gold {
      color: var(--gold-line) !important;
    }

    .text-gold-soft {
      color: var(--gold-soft) !important;
    }

    .text-accent-deep {
      color: var(--deep-green) !important;
    }

    .bg-accent-soft {
      background-color: var(--deep-green-soft) !important;
    }

    .bg-gold-soft {
      background-color: var(--gold-soft) !important;
    }

    .bg-gold {
      background-color: var(--gold) !important;
    }

    .border-gold-soft {
      border-color: var(--gold-line) !important;
    }

    .accent-gold {
      accent-color: var(--gold) !important;
    }

    body.app-booting #appShell,
    body.app-booting .sidebar,
    body.app-booting .main,
    body.app-booting [data-legacy-workbench],
    body:not(.workbench-mode) .sidebar,
    body:not(.workbench-mode) .main,
    body:not(.workbench-mode) [data-legacy-workbench] {
      display: none !important;
    }

    #twinViewsPanel {
      display: none !important;
    }

    body {
      margin: 0;
      min-height: 100vh;
      background:
        linear-gradient(180deg, #f8f7f2 0%, var(--paper) 100%);
      color: var(--ink);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      letter-spacing: 0;
      overflow-x: hidden;
    }

    html,
    body,
    .app {
      max-width: 100%;
    }

    button,
    input,
    textarea,
    select {
      font: inherit;
    }

    .app {
      display: grid;
      grid-template-columns: minmax(320px, 380px) minmax(0, 1fr);
      min-height: 100vh;
    }

    body.public-mode {
      --landing-bg: var(--obsidian);
      --landing-panel: rgba(20, 21, 22, 0.74);
      --landing-panel-strong: rgba(14, 15, 16, 0.92);
      --landing-line: rgba(226, 207, 160, 0.24);
      --landing-muted: rgba(246, 244, 238, 0.74);
      --landing-gold: var(--gold);
      --landing-gold-line: var(--gold-line);
      background:
        radial-gradient(circle at 50% -8%, rgba(201, 168, 106, 0.26), transparent 28%),
        radial-gradient(circle at 78% 18%, rgba(31, 58, 51, 0.24), transparent 24%),
        radial-gradient(circle at 16% 74%, rgba(184, 148, 90, 0.16), transparent 30%),
        linear-gradient(180deg, #050505 0%, var(--obsidian) 46%, #12140f 100%);
      color: var(--ivory-warm);
      font-family: "SF Pro Display", "Avenir Next", "PingFang SC", "Microsoft YaHei", sans-serif;
      overflow-x: hidden;
    }

    body.public-auth-open {
      overflow: hidden;
    }

    .public-shell {
      position: relative;
      min-height: 100vh;
      overflow: hidden;
      isolation: isolate;
    }

    .public-shell::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(rgba(226, 207, 160, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(226, 207, 160, 0.07) 1px, transparent 1px);
      background-size: 48px 48px;
      mask-image: radial-gradient(circle at 50% 40%, rgba(0, 0, 0, 0.98), rgba(0, 0, 0, 0.2) 76%);
      pointer-events: none;
      opacity: 0.54;
    }

    .public-shell::after {
      content: "";
      position: absolute;
      inset: -22% auto auto 50%;
      width: 940px;
      height: 940px;
      border-radius: 999px;
      background:
        radial-gradient(circle, rgba(201, 168, 106, 0.24) 0%, rgba(201, 168, 106, 0.06) 38%, rgba(201, 168, 106, 0) 70%);
      transform: translateX(-50%);
      filter: blur(10px);
      pointer-events: none;
      z-index: 0;
    }

    .public-shell-inner {
      position: relative;
      z-index: 1;
      width: min(1360px, calc(100% - 32px));
      margin: 0 auto;
      padding: 24px 0 52px;
    }

    .public-topbar {
      position: relative;
      z-index: 6;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 10px 0;
    }

    .public-brand {
      display: flex;
      align-items: center;
      min-width: 0;
    }

    .public-brand-mark {
      display: inline-flex;
      width: fit-content;
      align-items: center;
      gap: 10px;
      border-radius: 999px;
      border: 1px solid rgba(226, 207, 160, 0.24);
      background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025)),
        rgba(14, 15, 16, 0.66);
      color: var(--ivory-warm);
      padding: 9px 14px;
      box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(16px);
    }

    .public-brand-title {
      font-size: 13px;
      font-weight: 900;
      letter-spacing: 0.02em;
    }

    .public-brand-subtitle {
      display: none;
    }

    .public-top-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
      flex-wrap: nowrap;
      border: 1px solid rgba(226, 207, 160, 0.12);
      border-radius: 999px;
      background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025)),
        rgba(14, 15, 16, 0.62);
      box-shadow:
        0 18px 48px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
      padding: 5px;
      backdrop-filter: blur(18px) saturate(1.18);
    }

    .public-shell .btn-primary {
      border-color: rgba(226, 207, 160, 0.82);
      background: linear-gradient(135deg, var(--gold-line), var(--gold) 62%, var(--gold-strong));
      color: #15120d;
      box-shadow:
        0 16px 34px rgba(201, 168, 106, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.38);
    }

    .public-shell .btn-primary:hover,
    .public-shell .btn-primary:focus-visible {
      border-color: rgba(246, 244, 238, 0.72);
      background: linear-gradient(135deg, #ead9ad, var(--gold) 58%, var(--gold-strong));
      color: #15120d;
      outline: none;
      box-shadow:
        0 18px 38px rgba(201, 168, 106, 0.3),
        0 0 0 3px rgba(201, 168, 106, 0.16);
    }

    .public-shell .btn-outline,
    .public-shell .btn-dark {
      border-color: rgba(226, 207, 160, 0.3);
      background: rgba(14, 15, 16, 0.72);
      color: var(--ivory-warm);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 12px 28px rgba(0, 0, 0, 0.22);
    }

    .public-shell .btn-outline:hover,
    .public-shell .btn-outline:focus-visible,
    .public-shell .btn-dark:hover,
    .public-shell .btn-dark:focus-visible {
      border-color: rgba(226, 207, 160, 0.62);
      background: rgba(26, 27, 25, 0.84);
      color: #ffffff;
      outline: none;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 0 0 3px rgba(201, 168, 106, 0.14);
    }

    .public-lang-switch {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 0;
      border: 1px solid rgba(226, 207, 160, 0.2);
      border-radius: 999px;
      padding: 3px;
      background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.035)),
        rgba(14, 15, 16, 0.84);
      box-shadow:
        0 0 0 1px rgba(226, 207, 160, 0.05),
        0 14px 34px rgba(0, 0, 0, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
      backdrop-filter: blur(18px) saturate(1.12);
    }

    .public-lang-switch::before {
      content: "";
      position: absolute;
      top: 3px;
      bottom: 3px;
      left: 3px;
      width: calc(50% - 3px);
      border-radius: 999px;
      background:
        linear-gradient(135deg, rgba(251, 250, 246, .98), rgba(226, 207, 160, .94));
      box-shadow:
        0 10px 22px rgba(201, 168, 106, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.42);
      transition: transform 180ms ease;
      pointer-events: none;
    }

    .public-lang-switch:has(.lang-btn[data-lang="en"].is-active)::before {
      transform: translateX(100%);
    }

    .public-lang-switch .lang-btn {
      position: relative;
      z-index: 1;
      display: inline-flex;
      min-width: 52px;
      min-height: 36px;
      align-items: center;
      justify-content: center;
      border: 0;
      border-radius: 999px;
      background: transparent;
      color: rgba(246, 244, 238, 0.86);
      cursor: pointer;
      font-size: 14px;
      font-weight: 950;
      letter-spacing: 0;
      transition:
        background 180ms ease,
        color 180ms ease,
        box-shadow 180ms ease,
        transform 180ms ease;
    }

    .public-lang-switch .lang-btn.is-active {
      background: transparent;
      color: #16130d;
      box-shadow: none;
    }

    .public-lang-switch .lang-btn:not(.is-active):hover {
      background: rgba(255, 255, 255, 0.07);
      color: #ffffff;
    }

    .app-lang-switch {
      flex: 0 0 auto;
    }

    .public-hero {
      position: relative;
      display: grid;
      place-items: center;
      min-height: clamp(640px, calc(100vh - 168px), 780px);
      margin-top: 4px;
      padding: 6px 0 28px;
    }

    .public-visual-card {
      --orbit-center-top: 48%;
      --center-card-shift: -24px;
      position: relative;
      display: grid;
      place-items: center;
      width: 100%;
      min-height: clamp(640px, calc(100vh - 190px), 760px);
      overflow: hidden;
      border: 0;
      border-radius: 36px;
      background:
        radial-gradient(circle at 50% 38%, rgba(226, 207, 160, 0.17), transparent 30%),
        radial-gradient(circle at 50% 78%, rgba(31, 58, 51, 0.18), transparent 38%),
        linear-gradient(180deg, rgba(14, 15, 16, 0.18), rgba(20, 21, 22, 0.1));
      box-shadow: none;
      clip-path: inset(0 round 36px);
    }

    .public-visual-card::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background:
        radial-gradient(circle at 50% 50%, rgba(226, 207, 160, 0.09), transparent 38%),
        linear-gradient(rgba(226, 207, 160, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(226, 207, 160, 0.045) 1px, transparent 1px);
      background-size: auto, 46px 46px, 46px 46px;
      mask-image: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.92), rgba(0, 0, 0, 0.1) 72%);
      pointer-events: none;
    }

    .public-visual-card::after {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(120deg, rgba(226, 207, 160, 0), rgba(226, 207, 160, 0.08), rgba(226, 207, 160, 0) 42%),
        radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.08), transparent 30%);
      mix-blend-mode: screen;
      opacity: 0.42;
      pointer-events: none;
    }

    .public-visual-glow {
      position: absolute;
      inset: 50% auto auto 50%;
      width: 620px;
      height: 620px;
      border-radius: 999px;
      background:
        radial-gradient(circle, rgba(226, 207, 160, 0.2) 0%, rgba(201, 168, 106, 0.12) 30%, rgba(201, 168, 106, 0) 72%);
      transform: translate(-50%, -50%);
      filter: blur(5px);
      pointer-events: none;
    }

    .public-visual-grid {
      position: absolute;
      inset: 0;
      background:
        linear-gradient(rgba(226, 207, 160, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(226, 207, 160, 0.06) 1px, transparent 1px);
      background-size: 30px 30px;
      mask-image: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0.08) 74%);
      opacity: 0.42;
      pointer-events: none;
    }

    .orbit-track-stage {
      position: absolute;
      inset: 0;
      z-index: 1;
      overflow: hidden;
      perspective: 1800px;
      transform-style: preserve-3d;
      pointer-events: none;
      mask-image:
        linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%),
        linear-gradient(180deg, transparent 0%, #000 9%, #000 90%, transparent 100%);
      mask-composite: intersect;
      -webkit-mask-image:
        linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%),
        linear-gradient(180deg, transparent 0%, #000 9%, #000 90%, transparent 100%);
      -webkit-mask-composite: source-in;
    }

    .orbit-ring-shell {
      position: absolute;
      left: 50%;
      top: var(--orbit-center-top, 50%);
      width: var(--ring-size);
      height: var(--ring-size);
      transform: translate(-50%, -50%) rotateX(var(--ring-tilt, 62deg)) rotateZ(var(--ring-rotate));
      transform-style: preserve-3d;
    }

    .orbit-ring {
      position: relative;
      width: 100%;
      height: 100%;
      animation: orbitSpin var(--orbit-duration) linear infinite;
      transform-style: preserve-3d;
    }

    .orbit-ring.is-reverse {
      animation-name: orbitSpinReverse;
    }

    .orbit-ring::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 999px;
      border: 1px solid rgba(226, 207, 160, 0.26);
      box-shadow:
        inset 0 0 0 1px rgba(226, 207, 160, 0.03),
        0 0 54px rgba(201, 168, 106, 0.1);
      background: linear-gradient(180deg, rgba(26, 27, 25, 0.36), rgba(26, 27, 25, 0));
      transform: translateZ(-8px);
    }

    .platform-node {
      position: absolute;
      left: 50%;
      top: 50%;
      transform-origin: 0 0;
      transform:
        rotate(var(--angle))
        translateX(var(--orbit-radius))
        rotate(calc(var(--angle) * -1))
        translate(-50%, -50%);
      transform-style: preserve-3d;
      will-change: transform;
    }

    .platform-node-orient {
      display: block;
      animation: badgeCounterSpin var(--orbit-duration) linear infinite;
      transform-origin: center;
      transform-style: preserve-3d;
      will-change: transform;
    }

    .orbit-ring.is-reverse .platform-node-orient {
      animation-name: badgeCounterSpinReverse;
    }

    .platform-node-depth {
      display: block;
      transform: rotateX(var(--ring-untilt, -62deg)) translateZ(var(--node-rise, 42px));
      transform-style: preserve-3d;
    }

    .platform-node-badge {
      --node-accent: var(--gold);
      --node-opacity: 1;
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 13px;
      min-width: 168px;
      min-height: 66px;
      overflow: hidden;
      padding: 11px 18px 11px 11px;
      border-radius: 24px;
      border: 1px solid rgba(226, 207, 160, 0.28);
      background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.045) 52%, rgba(226, 207, 160, 0.08)),
        radial-gradient(circle at 18% 10%, color-mix(in srgb, var(--node-accent) 36%, transparent), transparent 44%),
        rgba(14, 15, 16, 0.9);
      color: var(--ivory-warm);
      font-size: 15.5px;
      font-weight: 900;
      letter-spacing: -0.01em;
      opacity: var(--node-opacity);
      white-space: nowrap;
      box-shadow:
        0 28px 56px rgba(0, 0, 0, 0.36),
        0 10px 22px rgba(0, 0, 0, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -18px 34px rgba(0, 0, 0, 0.18),
        0 0 34px color-mix(in srgb, var(--node-accent) 32%, transparent);
      backdrop-filter: blur(20px) saturate(1.2);
      transform: perspective(820px) rotateX(6deg) rotateY(-9deg) translateZ(0);
      transform-style: preserve-3d;
    }

    .public-shell .orbit-ring-shell:nth-child(1) .platform-node-badge,
    .public-shell .orbit-static-grid .platform-node:nth-child(3n+1) .platform-node-badge {
      --node-accent: var(--gold) !important;
    }

    .public-shell .orbit-ring-shell:nth-child(2) .platform-node-badge,
    .public-shell .orbit-static-grid .platform-node:nth-child(3n+2) .platform-node-badge {
      --node-accent: var(--gold-strong) !important;
    }

    .public-shell .orbit-ring-shell:nth-child(3) .platform-node-badge,
    .public-shell .orbit-static-grid .platform-node:nth-child(3n) .platform-node-badge {
      --node-accent: var(--deep-green) !important;
    }

    .platform-node-badge::before {
      content: "";
      position: absolute;
      inset: 1px 1px auto;
      height: 46%;
      border-radius: 25px 25px 18px 18px;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0));
      pointer-events: none;
    }

    .platform-node-badge::after {
      content: "";
      position: absolute;
      right: 13px;
      top: 13px;
      width: 6px;
      height: 6px;
      border-radius: 999px;
      background: var(--node-accent);
      box-shadow: 0 0 16px color-mix(in srgb, var(--node-accent) 78%, transparent);
      pointer-events: none;
    }

    .platform-emblem {
      position: relative;
      display: inline-grid;
      width: 46px;
      height: 46px;
      flex: 0 0 auto;
      place-items: center;
      overflow: hidden;
      border-radius: 17px;
      background:
        radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.42), transparent 28%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.02)),
        color-mix(in srgb, var(--node-accent) 30%, rgba(255, 255, 255, 0.08));
      box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.22),
        inset 0 -10px 18px rgba(0, 0, 0, 0.18),
        0 10px 18px rgba(0, 0, 0, 0.22),
        0 0 24px color-mix(in srgb, var(--node-accent) 42%, transparent);
      transform: translateZ(18px);
    }

    .platform-emblem i {
      position: relative;
      z-index: 1;
      width: 22px;
      height: 22px;
      color: rgba(255, 255, 255, 0.9);
      filter: drop-shadow(0 6px 14px color-mix(in srgb, var(--node-accent) 55%, transparent));
    }

    .platform-copy {
      display: grid;
      min-width: 0;
      text-align: left;
    }

    .platform-name {
      overflow: hidden;
      max-width: 122px;
      color: var(--ivory-warm);
      text-overflow: ellipsis;
    }

    .orbit-center-card {
      position: relative;
      z-index: 2;
      display: grid;
      width: min(820px, calc(100% - 430px));
      justify-items: center;
      border: 0;
      border-radius: 0;
      background:
        radial-gradient(ellipse at 50% 50%, rgba(14, 15, 16, 0.98) 0%, rgba(14, 15, 16, 0.92) 42%, rgba(14, 15, 16, 0.48) 66%, rgba(14, 15, 16, 0) 84%);
      box-shadow: none;
      padding: clamp(18px, 3vw, 34px) clamp(18px, 3vw, 44px);
      text-align: center;
      backdrop-filter: none;
      transform: translateY(var(--center-card-shift, 0));
    }

    .orbit-center-card::before {
      content: "";
      position: absolute;
      inset: -34px -70px;
      z-index: -1;
      border-radius: 999px;
      background:
        radial-gradient(ellipse at 50% 45%, rgba(5, 5, 5, 0.98) 0%, rgba(14, 15, 16, 0.84) 48%, rgba(26, 27, 25, 0.28) 72%, transparent 88%);
      pointer-events: none;
    }

    .public-kicker {
      display: inline-flex;
      width: fit-content;
      align-items: center;
      gap: 8px;
      border-radius: 999px;
      border: 0;
      background: transparent;
      color: var(--gold-line);
      padding: 0;
      font-size: 11px;
      font-weight: 950;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      box-shadow: none;
    }

    .public-title {
      display: grid;
      gap: 12px;
      margin: 20px 0 0;
      color: var(--ivory-warm);
      font-size: clamp(52px, 6.7vw, 92px);
      line-height: 0.94;
      font-weight: 950;
      letter-spacing: -0.065em;
    }

    .title-line {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      justify-content: center;
      gap: 0.1em;
    }

    .title-line-main {
      flex-wrap: nowrap;
    }

    .title-line-mobile {
      display: none;
    }

    .title-word {
      display: inline-block;
    }

    .title-word-wide {
      color: var(--ivory-warm);
      text-shadow:
        0 0 34px rgba(226, 207, 160, 0.1),
        0 8px 34px rgba(0, 0, 0, 0.34);
    }

    .title-typewriter-row {
      min-height: 1.08em;
      color: var(--gold-line);
      font-size: clamp(31px, 3.55vw, 52px);
      line-height: 1.1;
      letter-spacing: -0.035em;
      text-shadow: 0 0 26px rgba(201, 168, 106, 0.2);
    }

    .typewriter-live {
      display: inline-flex;
      width: min(100%, 17em);
      min-height: 1.08em;
      align-items: center;
      justify-content: center;
      white-space: nowrap;
      color: var(--gold-line);
    }

    .typewriter-live-text {
      position: relative;
      display: inline-block;
      max-width: min(100%, 17em);
      overflow: hidden;
      color: transparent;
      background: linear-gradient(90deg, var(--ivory-warm) 0%, var(--gold-line) 48%, var(--gold-line) 100%);
      -webkit-background-clip: text;
      background-clip: text;
      text-align: center;
    }

    .typewriter-live-ghost {
      visibility: hidden;
    }

    .typewriter-live-current {
      position: absolute;
      inset: 0;
      display: inline-flex;
      justify-content: center;
      color: transparent;
      background: inherit;
      -webkit-background-clip: text;
      background-clip: text;
      text-align: center;
    }

    .typewriter-live-caret {
      display: inline-block;
      width: 0.075em;
      height: 0.86em;
      margin-left: 0.1em;
      border-radius: 999px;
      background: var(--gold-line);
      transform: translateY(0.08em);
      animation: typeCaret 900ms steps(2, start) infinite;
      box-shadow: 0 0 18px rgba(226, 207, 160, 0.5);
    }

    .title-rotating-copy {
      display: inline-flex;
      width: min(100%, 720px);
      justify-items: center;
      justify-content: center;
    }

    .public-subtitle {
      display: none;
    }

    .public-cta-row {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 12px;
      margin-top: 24px;
    }

    .public-note-row {
      display: none;
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px;
      margin-top: 18px;
    }

    .public-note-pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      border-radius: 999px;
      border: 1px solid rgba(226, 207, 160, 0.28);
      background: rgba(14, 15, 16, 0.72);
      color: rgba(246, 244, 238, 0.78);
      padding: 8px 12px;
      font-size: 12px;
      font-weight: 820;
      backdrop-filter: blur(10px);
    }

    .orbit-static-grid {
      display: none;
      width: 100%;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 10px;
      padding: 18px;
      overflow-x: auto;
      scrollbar-width: none;
      overscroll-behavior-x: contain;
    }

    .orbit-static-grid::-webkit-scrollbar {
      display: none;
    }

    .public-auth-modal {
      position: fixed;
      inset: 0;
      z-index: 80;
      display: grid;
      place-items: center;
      overflow: hidden;
      isolation: isolate;
      padding: clamp(18px, 3.5vw, 42px);
      background: var(--obsidian);
    }

    .public-auth-modal.hidden {
      display: none !important;
    }

    .auth-video-layer {
      position: absolute;
      inset: 0;
      z-index: 0;
      overflow: hidden;
      background:
        linear-gradient(135deg, rgba(14, 15, 16, 0.74), rgba(14, 15, 16, 0.22)),
        url("./auth-video-poster.v20260621.svg") center / cover no-repeat,
        var(--obsidian);
      pointer-events: none;
    }

    .auth-video-media {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0.72;
      filter: saturate(0.82) contrast(1.08) brightness(0.58);
      transform: scale(1.02);
      background: var(--obsidian);
    }

    .auth-scrim {
      position: absolute;
      inset: 0;
      z-index: 1;
      background:
        linear-gradient(90deg, rgba(4, 5, 5, 0.48) 0%, rgba(4, 5, 5, 0.72) 44%, rgba(4, 5, 5, 0.9) 72%, rgba(4, 5, 5, 0.96) 100%),
        radial-gradient(circle at 24% 26%, rgba(201, 168, 106, 0.18), transparent 32%),
        radial-gradient(circle at 80% 70%, rgba(201, 168, 106, 0.16), transparent 30%),
        var(--scrim-gold);
      backdrop-filter: blur(2px);
    }

    .public-auth-wrap {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(420px, 468px);
      align-items: center;
      gap: clamp(28px, 5vw, 72px);
      width: min(1120px, calc(100vw - 48px));
      min-height: min(680px, calc(100svh - 48px));
      max-height: min(760px, calc(100svh - 48px));
      overflow: visible;
      animation: authModalIn 180ms ease-out both;
    }

    .auth-brand-side {
      position: relative;
      display: flex;
      min-height: min(540px, calc(100svh - 84px));
      align-items: center;
      justify-content: center;
      pointer-events: none;
    }

    .auth-brand-frame {
      position: relative;
      width: min(520px, 100%);
      aspect-ratio: 16 / 10;
      overflow: hidden;
      border: 1px solid rgba(226, 207, 160, 0.16);
      border-radius: 8px;
      background:
        linear-gradient(135deg, rgba(246, 244, 238, 0.08), rgba(201, 168, 106, 0.05)),
        linear-gradient(180deg, rgba(20, 21, 22, 0.1), rgba(20, 21, 22, 0.38));
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 28px 90px rgba(0, 0, 0, 0.28);
    }

    .auth-brand-frame::before,
    .auth-brand-frame::after {
      content: "";
      position: absolute;
      inset: 16%;
      border: 1px solid rgba(226, 207, 160, 0.12);
      transform: skewX(-10deg);
    }

    .auth-brand-frame::after {
      inset: 28% 10% 24% 38%;
      border-color: rgba(31, 58, 51, 0.36);
    }

    .auth-brand-line,
    .auth-brand-grid {
      position: absolute;
      left: 9%;
      right: 16%;
      height: 1px;
      background: linear-gradient(90deg, rgba(226, 207, 160, 0), rgba(226, 207, 160, 0.42), rgba(226, 207, 160, 0));
    }

    .auth-brand-line {
      top: 31%;
    }

    .auth-brand-line.is-short {
      top: 62%;
      left: 24%;
      right: 8%;
      opacity: 0.72;
    }

    .auth-brand-grid {
      top: 46%;
      height: 34%;
      background:
        linear-gradient(90deg, rgba(226, 207, 160, 0.08) 1px, transparent 1px),
        linear-gradient(180deg, rgba(226, 207, 160, 0.08) 1px, transparent 1px);
      background-size: 42px 42px;
      opacity: 0.48;
    }

    .auth-panel {
      position: relative;
      display: grid;
      grid-template-rows: auto minmax(0, 1fr);
      width: min(468px, 100%);
      max-height: min(720px, calc(100svh - 64px));
      min-width: 0;
      overflow: hidden;
      border: 1px solid rgba(226, 207, 160, 0.3);
      border-radius: 8px;
      background:
        linear-gradient(180deg, rgba(20, 21, 22, 0.9), rgba(14, 15, 16, 0.94)),
        var(--glass-panel);
      box-shadow:
        0 36px 96px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 0 0 1px rgba(201, 168, 106, 0.08);
      backdrop-filter: blur(18px);
      padding: 18px;
    }

    .public-auth-close {
      position: absolute;
      right: 16px;
      top: 16px;
      display: inline-flex;
      width: 36px;
      height: 36px;
      align-items: center;
      justify-content: center;
      border: 1px solid rgba(226, 207, 160, 0.16);
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.05);
      color: var(--ivory-warm);
      cursor: pointer;
    }

    .public-auth-close:hover,
    .public-auth-close:focus-visible {
      border-color: rgba(226, 207, 160, 0.44);
      color: #ffffff;
      outline: none;
      box-shadow: 0 0 0 3px rgba(201, 168, 106, 0.14);
    }

    .public-auth-head {
      display: grid;
      gap: 8px;
      margin: 2px 42px 14px 0;
    }

    .public-auth-kicker {
      display: inline-flex;
      width: fit-content;
      align-items: center;
      gap: 7px;
      border-radius: 999px;
      border: 1px solid rgba(201, 168, 106, 0.18);
      background: rgba(31, 58, 51, 0.12);
      color: var(--gold-line);
      padding: 5px 10px;
      font-size: 10px;
      font-weight: 950;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }

    .public-auth-title {
      color: var(--ivory-warm);
      font-size: 22px;
      line-height: 1.3;
      font-weight: 930;
    }

    .public-auth-head p {
      margin: 0;
      color: rgba(246, 244, 238, 0.72);
      font-size: 13px;
      line-height: 1.75;
    }

    .public-auth-wrap .auth-card {
      min-height: 0;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      margin-top: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      padding: 0;
      box-shadow: none;
    }

    .public-auth-wrap .auth-card.is-ready {
      background: transparent;
    }

    .public-auth-wrap .auth-card input {
      border-color: rgba(226, 207, 160, 0.22);
      background: rgba(5, 5, 5, 0.72);
      color: var(--ivory-warm);
      min-height: 46px;
      padding: 11px 13px;
    }

    .public-auth-wrap .auth-card input::placeholder {
      color: rgba(219, 229, 226, 0.42);
    }

    .public-auth-wrap .auth-card input:focus {
      border-color: var(--gold-line);
      box-shadow: 0 0 0 3px rgba(201, 168, 106, 0.16);
    }

    .auth-field {
      display: grid;
      gap: 6px;
    }

    .auth-field-label {
      color: #c6c3ba;
      font-size: 12px;
      font-weight: 850;
      line-height: 1.35;
    }

    .public-auth-wrap .auth-field-label {
      color: rgba(246, 244, 238, 0.78);
    }

    .auth-main-tabs,
    .auth-login-switch {
      display: grid;
      gap: 6px;
      border: 1px solid rgba(226, 207, 160, 0.14);
      background: rgba(255, 255, 255, 0.05);
      padding: 4px;
    }

    .auth-main-tabs {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      border-radius: 14px;
    }

    .auth-login-switch {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      border-radius: 12px;
    }

    .auth-tab-btn,
    .auth-login-mode-btn {
      display: inline-flex;
      min-width: 0;
      min-height: 38px;
      align-items: center;
      justify-content: center;
      gap: 7px;
      border: 0;
      border-radius: 10px;
      background: transparent;
      color: rgba(231, 238, 236, 0.72);
      padding: 8px 10px;
      font-size: 12px;
      font-weight: 900;
      line-height: 1.2;
      cursor: pointer;
    }

    .auth-tab-btn.is-active,
    .auth-login-mode-btn.is-active {
      background: rgba(201, 168, 106, 0.16);
      color: var(--ivory-warm);
      box-shadow: inset 0 0 0 1px rgba(226, 207, 160, 0.22);
    }

    .auth-tab-btn:focus-visible,
    .auth-login-mode-btn:focus-visible {
      outline: none;
      box-shadow: 0 0 0 3px rgba(201, 168, 106, 0.18);
    }

    .auth-tab-panel,
    .auth-login-panel {
      min-height: 0;
    }

    .auth-tab-panel.hidden,
    .auth-login-panel.hidden {
      display: none !important;
    }

    .auth-tab-panel {
      display: grid;
      gap: 10px;
    }

    .auth-login-panel,
    .auth-register-fields {
      display: grid;
      gap: 10px;
    }

    .auth-register-scroll {
      display: grid;
      gap: 10px;
      min-height: 0;
    }

    .public-auth-wrap .auth-tab-panel {
      max-height: min(430px, calc(100svh - 258px));
      overflow-y: auto;
      padding-right: 2px;
      scrollbar-width: thin;
      scrollbar-color: rgba(226, 207, 160, 0.42) rgba(255, 255, 255, 0.06);
    }

    .public-auth-wrap .auth-tab-panel::-webkit-scrollbar {
      width: 6px;
    }

    .public-auth-wrap .auth-tab-panel::-webkit-scrollbar-thumb {
      border-radius: 999px;
      background: rgba(226, 207, 160, 0.38);
    }

    .public-auth-wrap .auth-tab-panel:has(.auth-register-fields) {
      overflow: hidden;
    }

    .public-auth-wrap .auth-register-fields {
      grid-template-rows: minmax(0, 1fr) auto;
      height: min(380px, max(300px, calc(100svh - 310px)));
      max-height: min(380px, max(300px, calc(100svh - 310px)));
    }

    .public-auth-wrap .auth-register-scroll {
      overflow-y: auto;
      padding-right: 2px;
      scrollbar-width: thin;
      scrollbar-color: rgba(226, 207, 160, 0.42) rgba(255, 255, 255, 0.06);
    }

    .public-auth-wrap .auth-register-scroll::-webkit-scrollbar {
      width: 6px;
    }

    .public-auth-wrap .auth-register-scroll::-webkit-scrollbar-thumb {
      border-radius: 999px;
      background: rgba(226, 207, 160, 0.38);
    }

    .auth-inline-actions {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 8px;
    }

    .auth-primary-action {
      position: sticky;
      bottom: 0;
      z-index: 1;
      display: grid;
      gap: 8px;
      padding-top: 8px;
      background: linear-gradient(180deg, rgba(14, 15, 16, 0), rgba(14, 15, 16, 0.96) 30%);
    }

    #appAuthMount .auth-primary-action {
      position: static;
      padding-top: 0;
      background: transparent;
    }

    .auth-method-row {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 2px;
    }

    .auth-method-chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border-radius: 999px;
      border: 1px solid rgba(226, 207, 160, 0.14);
      background: rgba(255, 255, 255, 0.05);
      color: #d6d3d1;
      padding: 6px 10px;
      font-size: 11px;
      font-weight: 820;
      line-height: 1;
    }

    .public-auth-wrap .auth-method-chip {
      border-color: rgba(226, 207, 160, 0.18);
      background: rgba(255, 255, 255, 0.03);
      color: rgba(246, 244, 238, 0.78);
    }

    .auth-help-text {
      margin: 0;
      color: #d6d3d1;
      font-size: 12px;
      line-height: 1.55;
    }

    .auth-agreement-row {
      display: flex;
      align-items: center;
      gap: 10px;
      color: rgba(226, 232, 240, .84);
      font-size: 12px;
      font-weight: 760;
      line-height: 1.55;
      cursor: pointer;
    }

    .auth-agreement-row input {
      flex: 0 0 auto;
      width: 16px;
      height: 16px;
      margin: 0;
      accent-color: var(--gold);
    }

    .public-auth-wrap .auth-card .auth-agreement-row input[type="checkbox"] {
      width: 16px;
      height: 16px;
      min-height: 16px;
      flex: 0 0 16px;
      padding: 0;
      border-radius: 4px;
    }

    .auth-agreement-copy {
      display: inline-block;
      flex: 1 1 auto;
      min-width: 0;
      line-height: 1.55;
    }

    .auth-agreement-row button,
    .public-legal-footer button {
      border: 0;
      background: transparent;
      color: var(--gold-line);
      padding: 0;
      font: inherit;
      font-weight: 900;
      text-decoration: underline;
      text-underline-offset: 3px;
      cursor: pointer;
    }

    .auth-flow-list {
      display: grid;
      gap: 7px;
      margin: 2px 0;
      padding: 0;
      list-style: none;
    }

    .auth-flow-list li {
      display: grid;
      grid-template-columns: 22px minmax(0, 1fr);
      align-items: start;
      gap: 8px;
      color: rgba(226, 232, 240, .86);
      font-size: 12px;
      font-weight: 780;
      line-height: 1.5;
    }

    .auth-flow-list em {
      display: inline-flex;
      width: 22px;
      height: 22px;
      align-items: center;
      justify-content: center;
      border: 1px solid rgba(226, 207, 160, .2);
      border-radius: 999px;
      background: rgba(201, 168, 106, .14);
      color: var(--gold-line);
      font-size: 10px;
      font-style: normal;
      font-weight: 950;
      line-height: 1;
    }

    .public-auth-wrap .auth-help-text,
    .public-auth-wrap .auth-status {
      color: rgba(246, 244, 238, 0.78);
    }

    .public-auth-wrap .quota-box,
    .public-auth-wrap .invite-bind-box,
    .public-auth-wrap .admin-invite-box {
      border-color: rgba(226, 207, 160, 0.18);
      background: rgba(201, 168, 106, 0.08);
    }

    @media (max-width: 980px) {
      .public-auth-modal {
        padding: 14px;
      }

      .public-auth-wrap {
        grid-template-columns: minmax(0, 1fr);
        width: min(560px, calc(100vw - 28px));
        min-height: 0;
        max-height: calc(100svh - 28px);
      }

      .auth-brand-side {
        display: none;
      }

      .auth-panel {
        width: 100%;
        max-height: calc(100svh - 28px);
      }

      .auth-video-media {
        opacity: 0.38;
        filter: saturate(0.72) contrast(1.02) brightness(0.42);
      }

      .auth-scrim {
        background:
          linear-gradient(180deg, rgba(4, 5, 5, 0.72), rgba(4, 5, 5, 0.94)),
          radial-gradient(circle at 50% 12%, rgba(201, 168, 106, 0.16), transparent 34%),
          var(--scrim-gold);
      }
    }

    @media (max-width: 640px) {
      .public-auth-modal {
        align-items: end;
        padding: 10px;
      }

      .public-auth-wrap {
        width: 100%;
        max-height: calc(100svh - 20px);
      }

      .auth-panel {
        max-height: calc(100svh - 20px);
        padding: 14px;
      }

      .public-auth-head {
        margin: 0 42px 12px 0;
      }

      .auth-video-media {
        opacity: 0.16;
      }

      .auth-inline-actions {
        grid-template-columns: minmax(0, 1fr);
      }

      .public-auth-wrap .auth-tab-panel {
        max-height: min(430px, calc(100svh - 260px));
      }

      .public-auth-wrap .auth-register-fields {
        height: min(460px, max(320px, calc(100svh - 296px)));
        max-height: min(460px, max(320px, calc(100svh - 296px)));
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .auth-video-media {
        display: none;
      }

      .auth-video-layer {
        background:
          linear-gradient(135deg, rgba(14, 15, 16, 0.82), rgba(14, 15, 16, 0.38)),
          url("./auth-video-poster.v20260621.svg") center / cover no-repeat,
          var(--obsidian);
      }
    }

    .public-feature-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
      margin-top: 24px;
      border: 0;
      border-radius: 0;
      background: transparent;
      padding: 0;
      box-shadow: none;
      backdrop-filter: none;
    }

    .public-legal-footer {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 8px 14px;
      margin: 20px auto 0;
      color: rgba(226, 232, 240, .66);
      font-size: 12px;
      font-weight: 750;
      line-height: 1.7;
      text-align: center;
    }

    .public-legal-footer a {
      color: var(--gold-line);
      text-decoration: underline;
      text-underline-offset: 3px;
    }

    .public-feature-card {
      position: relative;
      display: grid;
      grid-template-columns: 50px minmax(0, 1fr);
      align-items: start;
      gap: 14px 18px;
      min-height: 174px;
      overflow: hidden;
      border: 1px solid rgba(226, 207, 160, 0.18);
      border-radius: 8px;
      background:
        radial-gradient(circle at 88% 0%, rgba(201, 168, 106, 0.12), transparent 34%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.022)),
        rgba(14, 15, 16, 0.78);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);
      padding: 24px;
      backdrop-filter: none;
    }

    .public-feature-card::before {
      content: "";
      position: absolute;
      inset: 0 0 auto;
      height: 1px;
      background: linear-gradient(90deg, rgba(201, 168, 106, 0), rgba(201, 168, 106, 0.5), rgba(201, 168, 106, 0));
      opacity: 0.5;
    }

    .public-feature-icon {
      display: inline-flex;
      width: 50px;
      height: 50px;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      border: 1px solid rgba(226, 207, 160, 0.18);
      background: rgba(201, 168, 106, 0.11);
      color: var(--gold-line);
      box-shadow: inset 0 0 0 1px rgba(201, 168, 106, 0.12);
    }

    .public-feature-card h3 {
      align-self: center;
      margin: 0;
      color: var(--ivory-warm);
      font-size: 18px;
      line-height: 1.28;
      font-weight: 950;
      letter-spacing: 0;
    }

    .public-feature-card p {
      grid-column: 1 / -1;
      margin: 2px 0 0;
      color: rgba(246, 244, 238, 0.72);
      font-size: 13.5px;
      line-height: 1.78;
    }

    @keyframes orbitSpin {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
    }

    @keyframes orbitSpinReverse {
      from {
        transform: rotate(360deg);
      }
      to {
        transform: rotate(0deg);
      }
    }

    @keyframes badgeCounterSpin {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(-360deg);
      }
    }

    @keyframes badgeCounterSpinReverse {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
    }

    @keyframes typeCaret {
      50% {
        opacity: 0;
      }
    }

    @keyframes authModalIn {
      from {
        opacity: 0;
        transform: translateY(12px) scale(0.97);
      }
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    .sidebar {
      position: sticky;
      top: 0;
      height: 100vh;
      background:
        linear-gradient(180deg, #141b17 0%, #10130f 100%);
      color: #f5f2e9;
      padding: 22px;
      overflow-y: auto;
      border-right: 1px solid var(--night-line);
    }

    .main {
      min-width: 0;
      padding: 22px;
      overflow-x: hidden;
    }

    .main-shell {
      max-width: 1480px;
      margin: 0 auto;
      display: grid;
      gap: 20px;
    }

    .app-view {
      position: relative;
      grid-column: 1 / -1;
      min-height: 100vh;
      overflow: hidden;
      color: #edf8f3;
      background:
        radial-gradient(circle at 18% 6%, rgba(201, 168, 106, .18), transparent 27%),
        radial-gradient(circle at 84% 10%, rgba(226, 207, 160, .13), transparent 22%),
        radial-gradient(circle at 56% 92%, rgba(201, 168, 106, .11), transparent 30%),
        linear-gradient(180deg, #06110f 0%, #091815 52%, #101713 100%);
      isolation: isolate;
    }

    .app-view::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(rgba(148, 163, 184, .075) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148, 163, 184, .075) 1px, transparent 1px);
      background-size: 46px 46px;
      mask-image: radial-gradient(circle at 50% 24%, rgba(0, 0, 0, .95), transparent 74%);
      pointer-events: none;
      opacity: .58;
      z-index: -2;
    }

    .app-view::after {
      content: "";
      position: absolute;
      inset: 10% -16% auto auto;
      width: 560px;
      height: 560px;
      border-radius: 999px;
      background: radial-gradient(circle, rgba(226, 207, 160, .16) 0%, rgba(226, 207, 160, .06) 42%, transparent 72%);
      filter: blur(12px);
      pointer-events: none;
      z-index: -1;
    }

    .saas-shell {
      position: relative;
      display: grid;
      grid-template-columns: minmax(252px, 310px) minmax(0, 1fr);
      min-height: 100vh;
    }

    .replicate-view .saas-shell {
      grid-template-columns: minmax(0, 1fr);
    }

    .replicate-view {
      background:
        radial-gradient(circle at var(--replicate-glow-x, 58%) var(--replicate-glow-y, 18%), rgba(201, 168, 106, .18), transparent 34%),
        radial-gradient(circle at 12% 84%, rgba(250, 204, 21, .08), transparent 30%),
        #061210;
    }

    .replicate-view::before {
      transform: translate3d(var(--replicate-grid-x, 0), var(--replicate-grid-y, 0), 0);
      transition: transform .18s ease-out;
    }

    .replicate-view .saas-main {
      width: 100%;
      max-width: 1680px;
      margin: 0 auto;
      padding-inline: clamp(22px, 3.8vw, 72px);
    }

    .replicate-view .saas-nav {
      display: none;
    }

    .saas-nav {
      position: sticky;
      top: 0;
      height: 100vh;
      overflow-y: auto;
      border-right: 1px solid rgba(148, 163, 184, .16);
      background:
        linear-gradient(180deg, rgba(7, 23, 20, .94) 0%, rgba(6, 16, 14, .98) 100%);
      color: #f5f2e9;
      padding: 24px;
      box-shadow: 24px 0 70px rgba(0, 0, 0, .18);
      backdrop-filter: blur(18px) saturate(1.15);
    }

    .saas-nav::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 35% 12%, rgba(226, 207, 160, .14), transparent 28%),
        linear-gradient(90deg, rgba(226, 207, 160, .08), transparent 36%);
      pointer-events: none;
      opacity: .82;
    }

    .saas-nav > * {
      position: relative;
      z-index: 1;
    }

    .saas-brand {
      display: flex;
      align-items: center;
      gap: 12px;
      padding-bottom: 20px;
      border-bottom: 1px solid rgba(226, 207, 160, .14);
    }

    .saas-brand-icon,
    .product-card-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      border-radius: 16px;
      border: 1px solid rgba(226, 207, 160, .28);
      background:
        linear-gradient(135deg, rgba(201, 168, 106, .28), rgba(226, 207, 160, .12)),
        rgba(255, 255, 255, .055);
      color: #99f6e4;
      box-shadow:
        0 16px 38px rgba(201, 168, 106, .12),
        inset 0 1px 0 rgba(255, 255, 255, .1);
    }

    .saas-brand strong {
      display: block;
      color: #f8faf8;
      font-size: 15px;
      font-weight: 950;
      line-height: 1.25;
    }

    .saas-brand small {
      display: block;
      margin-top: 2px;
      color: rgba(203, 213, 225, .72);
      font-size: 11px;
      font-weight: 850;
      letter-spacing: .06em;
      text-transform: uppercase;
    }

    .saas-nav-list,
    .studio-mode-nav {
      display: grid;
      gap: 9px;
      margin-top: 22px;
    }

    .saas-nav-item,
    .studio-mode-btn {
      position: relative;
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
      min-height: 44px;
      border: 1px solid rgba(226, 207, 160, .08);
      border-radius: 14px;
      background: rgba(255, 255, 255, .035);
      color: rgba(226, 232, 240, .78);
      padding: 11px 12px;
      text-align: left;
      font-size: 13px;
      font-weight: 880;
      cursor: pointer;
      transition: background .18s ease, border-color .18s ease, color .18s ease, transform .16s ease, box-shadow .18s ease;
    }

    .saas-nav-item::after,
    .studio-mode-btn::after {
      content: "";
      position: absolute;
      inset: 10px auto 10px 0;
      width: 3px;
      border-radius: 999px;
      background: linear-gradient(180deg, var(--gold-line), var(--gold-line));
      opacity: 0;
      transform: translateX(-4px);
      transition: opacity .18s ease, transform .18s ease;
    }

    .saas-nav-item:hover,
    .studio-mode-btn:hover,
    .saas-nav-item.is-active,
    .studio-mode-btn.is-active {
      border-color: rgba(226, 207, 160, .26);
      background:
        linear-gradient(135deg, rgba(201, 168, 106, .18), rgba(226, 207, 160, .07)),
        rgba(255, 255, 255, .045);
      color: var(--deep-green-soft);
      box-shadow: 0 16px 34px rgba(0, 0, 0, .18);
      transform: translateY(-1px);
    }

    .saas-nav-item:hover::after,
    .studio-mode-btn:hover::after,
    .saas-nav-item.is-active::after,
    .studio-mode-btn.is-active::after {
      opacity: 1;
      transform: translateX(0);
    }

    .saas-nav-logout {
      margin-top: 8px;
      border-color: rgba(251, 113, 133, .16);
      color: rgba(254, 226, 226, .9);
    }

    .saas-nav-admin-entry {
      border-color: rgba(226, 207, 160, .22);
      background:
        linear-gradient(135deg, rgba(201, 168, 106, .16), rgba(226, 207, 160, .05)),
        rgba(255, 255, 255, .04);
      color: #dffcf6;
    }

    .saas-nav-logout:hover {
      border-color: rgba(251, 113, 133, .3);
      background:
        linear-gradient(135deg, rgba(244, 63, 94, .16), rgba(201, 168, 106, .05)),
        rgba(255, 255, 255, .045);
      color: #fff1f2;
    }

    .saas-nav-logout::after {
      background: linear-gradient(180deg, #fb7185, #facc15);
    }

    .saas-nav-note {
      margin-top: 22px;
      border: 1px solid rgba(226, 207, 160, .2);
      border-radius: 18px;
      background:
        linear-gradient(145deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .035)),
        rgba(5, 20, 17, .52);
      padding: 14px;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
    }

    .saas-nav-note p {
      margin: 9px 0 0;
      color: rgba(226, 232, 240, .76);
      font-size: 12px;
      font-weight: 700;
      line-height: 1.7;
    }

    .saas-account-panel {
      display: none;
      gap: 11px;
      margin-top: 22px;
      border: 1px solid rgba(226, 207, 160, .2);
      border-radius: 18px;
      background:
        radial-gradient(circle at 18% 0%, rgba(226, 207, 160, .13), transparent 34%),
        linear-gradient(145deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .035)),
        rgba(5, 20, 17, .52);
      padding: 14px;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
    }

    .saas-account-panel h3 {
      margin: 0;
      color: var(--ivory-warm);
      font-size: 17px;
      font-weight: 950;
      letter-spacing: -0.02em;
    }

    .saas-account-panel p {
      margin: 0;
      color: rgba(226, 232, 240, .74);
      font-size: 12px;
      font-weight: 700;
      line-height: 1.65;
    }

    .saas-account-actions {
      display: grid;
      gap: 8px;
    }

    .saas-account-action {
      display: flex;
      align-items: center;
      gap: 9px;
      width: 100%;
      border: 1px solid rgba(226, 207, 160, .12);
      border-radius: 13px;
      background: rgba(255, 255, 255, .045);
      color: rgba(251, 250, 246, .9);
      padding: 10px 11px;
      font-size: 12px;
      font-weight: 900;
      cursor: pointer;
      transition: transform .16s ease, background .18s ease, border-color .18s ease, color .18s ease;
    }

    .saas-account-action:hover {
      border-color: rgba(226, 207, 160, .28);
      background: rgba(201, 168, 106, .12);
      color: #ffffff;
      transform: translateY(-1px);
    }

    .saas-account-action.is-disabled {
      opacity: .58;
      cursor: not-allowed;
    }

    .saas-account-action.is-disabled:hover {
      border-color: rgba(226, 207, 160, .12);
      background: rgba(255, 255, 255, .045);
      color: rgba(251, 250, 246, .9);
      transform: none;
    }

    .saas-nav-safe-list {
      display: grid;
      gap: 8px;
      margin-top: 12px;
      color: rgba(226, 207, 160, .78);
      font-size: 11px;
      font-weight: 850;
      line-height: 1.35;
    }

    .saas-nav-safe-list span {
      display: inline-flex;
      align-items: center;
      gap: 7px;
    }

    .saas-nav-safe-list i {
      color: var(--gold-line);
      flex: 0 0 auto;
    }

    .mini-badge {
      display: inline-flex;
      width: fit-content;
      align-items: center;
      gap: 6px;
      border: 1px solid rgba(201, 168, 106, .28);
      border-radius: 999px;
      background: #e8f7f3;
      color: var(--deep-green);
      padding: 7px 10px;
      font-size: 11px;
      font-weight: 950;
      line-height: 1;
      text-transform: uppercase;
      letter-spacing: .04em;
    }

    .saas-nav .mini-badge,
    .product-center-view .mini-badge {
      border-color: rgba(226, 207, 160, .28);
      background: rgba(201, 168, 106, .12);
      color: #99f6e4;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
    }

    .mini-badge.is-warm,
    .product-card-status.is-warm {
      border-color: var(--attention-line);
      background: var(--attention-soft);
      color: #8a5a12;
    }

    .saas-nav .mini-badge.is-warm,
    .product-center-view .mini-badge.is-warm,
    .product-card-status.is-warm {
      border-color: rgba(245, 158, 11, .32);
      background: rgba(245, 158, 11, .12);
      color: #facc15;
    }

    .saas-main {
      min-width: 0;
      width: min(100%, 1540px);
      padding: 28px;
      margin: 0 auto;
    }

    .hub-topbar {
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
      margin-bottom: 18px;
    }

    .hub-topbar-quota {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 9px 16px;
      border-radius: 999px;
      border: 1px solid rgba(201, 168, 106, .42);
      background: linear-gradient(150deg, rgba(201, 168, 106, .18), rgba(15, 19, 16, .92));
      color: var(--gold-soft, #f3ead7);
      font-size: 13px;
      font-weight: 700;
      letter-spacing: .01em;
    }

    .hub-topbar-quota i { color: var(--gold, #c9a86a); }
    .hub-topbar-quota strong { color: var(--gold-soft, #f3ead7); font-weight: 900; }

    .hub-topbar-actions {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-left: auto;
    }

    .hub-topbar-btn {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 8px 14px;
      border-radius: 999px;
      border: 1px solid rgba(226, 207, 160, .22);
      background: rgba(13, 20, 17, .72);
      color: rgba(243, 234, 215, .92);
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: border-color .18s ease, background .18s ease;
    }

    .hub-topbar-btn:hover {
      border-color: rgba(201, 168, 106, .5);
      background: rgba(201, 168, 106, .14);
    }

    .hub-topbar-lang {
      display: inline-flex;
      align-items: center;
      padding: 3px;
      border-radius: 999px;
      border: 1px solid rgba(226, 207, 160, .2);
      background: rgba(13, 20, 17, .72);
    }

    .hub-topbar-lang-btn {
      padding: 5px 12px;
      border: none;
      border-radius: 999px;
      background: transparent;
      color: rgba(243, 234, 215, .7);
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
      transition: color .18s ease, background .18s ease;
    }

    .hub-topbar-lang-btn.is-active {
      background: linear-gradient(150deg, rgba(201, 168, 106, .92), rgba(168, 134, 74, .92));
      color: #1a1408;
    }

    .hub-topbar-user {
      position: relative;
    }

    .hub-topbar-user-trigger {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      padding: 6px 12px 6px 6px;
      border-radius: 999px;
      border: 1px solid rgba(226, 207, 160, .22);
      background: rgba(13, 20, 17, .72);
      color: rgba(243, 234, 215, .92);
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      list-style: none;
      user-select: none;
    }

    .hub-topbar-user-trigger::-webkit-details-marker { display: none; }

    .hub-topbar-avatar {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: linear-gradient(150deg, rgba(201, 168, 106, .9), rgba(168, 134, 74, .9));
      color: #1a1408;
    }

    .hub-topbar-user-email {
      max-width: 180px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .hub-topbar-caret { color: rgba(243, 234, 215, .55); transition: transform .2s ease; }
    .hub-topbar-user[open] .hub-topbar-caret { transform: rotate(180deg); }

    .hub-topbar-menu {
      position: absolute;
      top: calc(100% + 8px);
      right: 0;
      z-index: 40;
      min-width: 210px;
      display: grid;
      gap: 2px;
      padding: 8px;
      border-radius: 16px;
      border: 1px solid rgba(226, 207, 160, .2);
      background: linear-gradient(160deg, rgba(15, 19, 16, .98), rgba(8, 11, 9, .99));
      box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
    }

    .hub-topbar-menu-item {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
      padding: 10px 12px;
      border: none;
      border-radius: 10px;
      background: transparent;
      color: rgba(243, 234, 215, .9);
      font-size: 13px;
      font-weight: 600;
      text-align: left;
      cursor: pointer;
      transition: background .16s ease, color .16s ease;
    }

    .hub-topbar-menu-item i { color: var(--gold, #c9a86a); }

    .hub-topbar-menu-item:hover {
      background: rgba(201, 168, 106, .14);
      color: #f8fffb;
    }

    .hub-topbar-menu-signout { color: rgba(248, 180, 165, .92); }
    .hub-topbar-menu-signout i { color: rgba(231, 111, 81, .95); }
    .hub-topbar-menu-signout:hover { background: rgba(231, 111, 81, .14); color: #ffd9cf; }

    .hub-hero {
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      align-items: stretch;
      gap: 16px;
      overflow: hidden;
      border: 1px solid rgba(226, 207, 160, .18);
      border-radius: 24px;
      background:
        radial-gradient(circle at 72% 12%, rgba(201, 168, 106, .18), transparent 28%),
        radial-gradient(circle at 18% 88%, rgba(226, 207, 160, .11), transparent 30%),
        linear-gradient(135deg, rgba(13, 34, 29, .92), rgba(6, 18, 16, .96));
      box-shadow:
        0 30px 90px rgba(0, 0, 0, .3),
        inset 0 1px 0 rgba(255, 255, 255, .08);
      padding: clamp(20px, 2.2vw, 28px);
      animation: viewRise .28s ease-out both;
    }

    .hub-hero::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(rgba(226, 207, 160, .06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(226, 207, 160, .055) 1px, transparent 1px);
      background-size: 36px 36px;
      mask-image: linear-gradient(90deg, rgba(0, 0, 0, .75), transparent 75%);
      pointer-events: none;
    }

    .hub-hero::after {
      content: "";
      position: absolute;
      right: 22%;
      top: -112px;
      width: 240px;
      height: 240px;
      border: 1px solid rgba(226, 207, 160, .18);
      border-radius: 999px;
      box-shadow:
        0 0 0 32px rgba(226, 207, 160, .028),
        0 0 0 72px rgba(226, 207, 160, .018);
      animation: hubFloat 7s ease-in-out infinite;
      pointer-events: none;
    }

    .hub-hero > * {
      position: relative;
      z-index: 1;
    }

    .hub-hero.compact {
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: start;
    }

    .hero-top-actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 10px;
      margin-bottom: 16px;
    }

    .hero-top-actions .hero-kicker {
      margin: 0;
    }

    .hub-hero-content {
      display: grid;
      align-content: center;
      min-width: 0;
      max-width: 920px;
    }

    .app-view .hero-kicker {
      display: inline-flex;
      width: fit-content;
      align-items: center;
      gap: 7px;
      border: 1px solid rgba(226, 207, 160, .24);
      border-radius: 999px;
      background: rgba(226, 207, 160, .1);
      color: #99f6e4;
      padding: 7px 11px;
      font-size: 11px;
      font-weight: 950;
      text-transform: uppercase;
      letter-spacing: .08em;
    }

    .hub-hero h1 {
      margin: 14px 0 0;
      color: #f8fffb;
      max-width: 700px;
      font-size: clamp(34px, 3.4vw, 52px);
      line-height: 1.04;
      font-weight: 950;
      letter-spacing: 0;
      text-wrap: pretty;
    }

    .hub-hero p {
      margin: 12px 0 0;
      max-width: 660px;
      color: rgba(226, 232, 240, .78);
      font-size: 15px;
      font-weight: 700;
      line-height: 1.68;
    }

    .hub-hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 9px;
      margin-top: 16px;
    }

    .workflow-strip {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 9px;
      width: min(100%, 760px);
      margin-top: 16px;
    }

    .workflow-step {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: 9px;
      align-items: center;
      min-width: 0;
      border: 1px solid rgba(226, 207, 160, .14);
      border-radius: 15px;
      background:
        linear-gradient(145deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .04)),
        rgba(3, 30, 27, .36);
      padding: 10px;
      color: rgba(226, 232, 240, .82);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
    }

    .workflow-step em {
      display: inline-grid;
      place-items: center;
      width: 30px;
      height: 30px;
      border-radius: 11px;
      background: rgba(226, 207, 160, .16);
      color: #99f6e4;
      font-style: normal;
      font-size: 11px;
      font-weight: 950;
    }

    .workflow-step strong,
    .workflow-step small {
      display: block;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .workflow-step strong {
      color: var(--ivory-warm);
      font-size: 12px;
      font-weight: 950;
      line-height: 1.25;
    }

    .workflow-step small {
      margin-top: 2px;
      color: rgba(203, 213, 225, .68);
      font-size: 10.5px;
      font-weight: 760;
      line-height: 1.3;
    }

    .hero-panel .workflow-strip {
      width: min(100%, 820px);
    }

    .hero-panel .workflow-step {
      border-color: rgba(31, 58, 51, .15);
      background:
        linear-gradient(180deg, rgba(251, 250, 246, .78), rgba(255, 253, 248, .96));
      color: #4f5f5a;
      box-shadow: 0 10px 24px rgba(31, 58, 51, .06);
    }

    .hero-panel .workflow-step em {
      background: rgba(31, 58, 51, .1);
      color: var(--deep-green);
    }

    .hero-panel .workflow-step strong {
      color: #173c37;
    }

    .hero-panel .workflow-step small {
      color: #69746f;
    }

    .hub-ai-core {
      display: none;
    }

    .hub-ai-core::before {
      content: "";
      position: absolute;
      inset: 10%;
      border-radius: 999px;
      background:
        radial-gradient(circle at 50% 50%, rgba(226, 207, 160, .18), transparent 37%),
        radial-gradient(circle at 50% 50%, rgba(226, 207, 160, .12), transparent 58%);
      filter: blur(8px);
      opacity: .86;
      animation: aiCoreBreathe 5.8s ease-in-out infinite;
      z-index: -1;
    }

    .ai-orbit {
      position: absolute;
      border: 1px solid rgba(125, 211, 252, .2);
      border-radius: 999px;
      box-shadow:
        inset 0 0 24px rgba(226, 207, 160, .05),
        0 0 30px rgba(226, 207, 160, .08);
    }

    .ai-orbit.outer {
      width: 90%;
      height: 64%;
      transform: rotate(-10deg);
      animation: aiOrbitSpin 18s linear infinite;
    }

    .ai-orbit.middle {
      width: 70%;
      height: 70%;
      border-color: rgba(226, 207, 160, .22);
      transform: rotate(48deg);
      animation: aiOrbitReverse 22s linear infinite;
    }

    .ai-orbit.inner {
      width: 52%;
      height: 42%;
      border-color: rgba(226, 207, 160, .18);
      transform: rotate(18deg);
      animation: aiOrbitSpin 14s linear infinite;
    }

    .ai-orbit::before,
    .ai-orbit::after {
      content: "";
      position: absolute;
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: var(--gold-line);
      box-shadow:
        0 0 14px rgba(226, 207, 160, .85),
        0 0 28px rgba(226, 207, 160, .32);
    }

    .ai-orbit::before {
      top: 50%;
      left: -4px;
    }

    .ai-orbit::after {
      right: 14%;
      bottom: 5%;
      width: 6px;
      height: 6px;
      background: #99f6e4;
    }

    .ai-core-chip {
      position: relative;
      display: grid;
      place-items: center;
      width: clamp(98px, 9.5vw, 126px);
      height: clamp(98px, 9.5vw, 126px);
      overflow: hidden;
      border: 1px solid rgba(226, 207, 160, .28);
      border-radius: 28px;
      background:
        linear-gradient(145deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .045)),
        rgba(4, 18, 17, .72);
      box-shadow:
        0 24px 70px rgba(0, 0, 0, .24),
        0 0 0 8px rgba(226, 207, 160, .035),
        0 0 44px rgba(226, 207, 160, .16),
        inset 0 1px 0 rgba(255, 255, 255, .14);
      backdrop-filter: blur(16px) saturate(1.16);
      animation: aiChipPulse 4.8s ease-in-out infinite;
    }

    .ai-core-chip::before {
      content: "";
      position: absolute;
      inset: 13px;
      border: 1px solid rgba(226, 207, 160, .28);
      border-radius: 20px;
      background:
        linear-gradient(rgba(226, 207, 160, .08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(226, 207, 160, .075) 1px, transparent 1px);
      background-size: 14px 14px;
      mask-image: radial-gradient(circle, rgba(0, 0, 0, .94), transparent 74%);
    }

    .ai-core-chip::after {
      content: "";
      position: absolute;
      width: 120%;
      height: 40%;
      background: linear-gradient(90deg, transparent, rgba(226, 207, 160, .14), transparent);
      transform: translateX(-62%) rotate(-18deg);
      animation: aiScan 4.6s ease-in-out infinite;
    }

    .ai-core-icon {
      position: relative;
      z-index: 1;
      display: grid;
      place-items: center;
      width: 56px;
      height: 56px;
      border: 1px solid rgba(226, 207, 160, .32);
      border-radius: 20px;
      background: rgba(8, 32, 28, .78);
      color: var(--gold-soft);
      box-shadow:
        0 0 28px rgba(226, 207, 160, .24),
        inset 0 1px 0 rgba(255, 255, 255, .12);
    }

    .ai-core-spark {
      position: absolute;
      width: 10px;
      height: 10px;
      border: 1px solid rgba(226, 207, 160, .55);
      border-radius: 4px;
      background: rgba(226, 207, 160, .28);
      box-shadow: 0 0 18px rgba(226, 207, 160, .42);
      transform: rotate(45deg);
      animation: aiSpark 4.2s ease-in-out infinite;
    }

    .ai-core-spark.one {
      top: 17%;
      right: 20%;
    }

    .ai-core-spark.two {
      left: 17%;
      bottom: 23%;
      width: 7px;
      height: 7px;
      border-radius: 3px;
      animation-delay: -1.4s;
    }

    .ai-data-stream {
      position: absolute;
      inset: 16% 6%;
      border-radius: 999px;
      transform: rotate(-12deg);
    }

    .ai-data-stream span {
      position: absolute;
      width: 4px;
      height: 4px;
      border-radius: 999px;
      background: rgba(226, 207, 160, .88);
      box-shadow: 0 0 12px rgba(226, 207, 160, .62);
      offset-path: ellipse(46% 31% at 50% 50%);
      animation: aiDataFlow 7.4s linear infinite;
    }

    .ai-data-stream span:nth-child(2) {
      animation-delay: -1.8s;
      background: rgba(226, 207, 160, .92);
    }

    .ai-data-stream span:nth-child(3) {
      animation-delay: -3.9s;
      opacity: .72;
    }

    .ai-data-stream span:nth-child(4) {
      animation-delay: -5.3s;
      background: rgba(153, 246, 228, .86);
      opacity: .8;
    }

    .hub-account-card {
      position: relative;
      display: none;
      align-content: start;
      gap: 10px;
      width: min(330px, 100%);
      flex: 0 0 auto;
      overflow: hidden;
      border: 1px solid rgba(226, 207, 160, .18);
      border-radius: 24px;
      background:
        linear-gradient(145deg, rgba(255, 255, 255, .115), rgba(255, 255, 255, .045)),
        rgba(5, 18, 16, .58);
      padding: 15px;
      box-shadow:
        0 24px 64px rgba(0, 0, 0, .24),
        inset 0 1px 0 rgba(255, 255, 255, .1);
      backdrop-filter: blur(18px) saturate(1.12);
    }

    .hub-account-card::before {
      content: "";
      position: absolute;
      inset: -40% -20% auto 40%;
      height: 190px;
      border-radius: 999px;
      background: rgba(201, 168, 106, .18);
      filter: blur(24px);
      pointer-events: none;
    }

    .hub-account-card > * {
      position: relative;
      z-index: 1;
    }

    .hub-account-badge {
      display: inline-flex;
      width: fit-content;
      align-items: center;
      gap: 7px;
      border: 1px solid rgba(226, 207, 160, .26);
      border-radius: 999px;
      background: rgba(226, 207, 160, .09);
      color: var(--gold-soft);
      padding: 7px 10px;
      font-size: 11px;
      font-weight: 950;
      letter-spacing: .04em;
      text-transform: uppercase;
    }

    .hub-account-row {
      display: grid;
      gap: 5px;
      min-width: 0;
      border: 1px solid rgba(255, 255, 255, .075);
      border-radius: 16px;
      background: rgba(255, 255, 255, .045);
      padding: 10px;
    }

    .hub-account-row span {
      color: rgba(203, 213, 225, .66);
      font-size: 11px;
      font-weight: 900;
      letter-spacing: .04em;
      text-transform: uppercase;
    }

    .hub-account-row strong {
      color: #f7fffc;
      font-size: 14px;
      font-weight: 950;
      overflow-wrap: anywhere;
    }

    .hub-account-code {
      user-select: all;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
      letter-spacing: .03em;
    }

    .hub-actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: flex-end;
      gap: 10px;
    }

    .hub-account-trigger {
      border-color: rgba(226, 207, 160, .28);
      background: rgba(226, 207, 160, .08);
      color: var(--gold-soft);
    }

    .hub-account-trigger:hover {
      border-color: rgba(226, 207, 160, .48);
      background: rgba(201, 168, 106, .16);
      color: #ffffff;
    }

    .hub-mini-pill {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      border: 1px solid rgba(226, 207, 160, .22);
      border-radius: 999px;
      background: rgba(226, 207, 160, .08);
      color: var(--gold-soft);
      padding: 9px 12px;
      font-size: 12px;
      font-weight: 950;
      white-space: nowrap;
    }

    .workbench-quota-pill {
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      justify-items: stretch;
      gap: 4px;
      min-width: 142px;
      max-width: 178px;
      border-color: rgba(31, 58, 51, .28);
      background:
        linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(251, 250, 246, .94)),
        var(--deep-green-soft);
      color: #14514a;
      padding: 7px 9px 6px;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .78),
        0 8px 18px rgba(31, 58, 51, .07);
      overflow: hidden;
    }

    .workbench-quota-pill.is-muted {
      border-color: rgba(120, 113, 108, .18);
      background: #fffaf0;
      color: #5f5a50;
    }

    .workbench-quota-pill.is-low {
      border-color: rgba(180, 83, 9, .38);
      background:
        linear-gradient(180deg, rgba(255, 251, 235, .98), rgba(255, 247, 237, .96)),
        #fff7ed;
      color: #92400e;
    }

    .workbench-quota-pill.is-loading::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, .58) 42%, transparent 72%);
      background-size: 220% 100%;
      animation: shimmer 1.2s infinite linear;
      pointer-events: none;
    }

    .quota-pill-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 6px;
      min-width: 0;
      font-size: 9.5px;
      line-height: 1.1;
    }

    .quota-pill-top span {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      min-width: 0;
      color: inherit;
      font-weight: 950;
      letter-spacing: 0;
    }

    .workbench-quota-pill i {
      width: 12px;
      height: 12px;
      flex: 0 0 auto;
    }

    .quota-pill-top strong {
      color: inherit;
      font-size: 14px;
      font-weight: 950;
      white-space: nowrap;
    }

    .quota-pill-value {
      display: inline-flex;
      align-items: baseline;
      justify-content: flex-end;
      gap: 3px;
      white-space: nowrap;
    }

    .quota-pill-value em {
      font-size: 10px;
      font-style: normal;
      font-weight: 900;
      opacity: .78;
    }

    .quota-pill-meter {
      position: relative;
      overflow: hidden;
      height: 3px;
      border-radius: 999px;
      background: rgba(31, 58, 51, .13);
    }

    .quota-pill-meter span {
      position: absolute;
      inset: 0 auto 0 0;
      width: var(--quota-progress, 0%);
      min-width: 8px;
      max-width: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, var(--deep-green), var(--gold-line));
      transition: width .32s ease;
    }

    .workbench-quota-pill.is-low .quota-pill-meter {
      background: rgba(180, 83, 9, .16);
    }

    .workbench-quota-pill.is-low .quota-pill-meter span {
      background: linear-gradient(90deg, #f59e0b, #be123c);
    }

    .quota-pill-meta {
      color: rgba(67, 56, 42, .72);
      font-size: 9.5px;
      font-weight: 850;
      line-height: 1.2;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .workbench-toolbar .quota-pill-meta {
      display: none;
    }

    .main .hero-actions .hub-mini-pill {
      border-color: rgba(31, 58, 51, .2);
      background: var(--deep-green-soft);
      color: var(--deep-green);
    }

    .product-center-view .btn-primary {
      border-color: rgba(226, 207, 160, .36);
      background: linear-gradient(135deg, var(--gold), var(--gold-strong));
      color: var(--ink);
      box-shadow:
        0 16px 34px rgba(201, 168, 106, .22),
        inset 0 1px 0 rgba(255, 255, 255, .16);
    }

    .product-center-view .btn-outline {
      border-color: rgba(226, 207, 160, .18);
      background: rgba(255, 255, 255, .06);
      color: var(--gold-soft);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
    }

    .product-center-view .btn-outline:hover {
      border-color: rgba(226, 207, 160, .32);
      background: rgba(226, 207, 160, .1);
    }

    .product-card-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(280px, 1fr));
      gap: 20px;
      margin-top: 22px;
    }

    .product-card {
      position: relative;
      display: grid;
      grid-template-rows: minmax(0, 1fr) auto;
      gap: 16px;
      min-height: 398px;
      overflow: hidden;
      border: 1px solid rgba(226, 207, 160, .15);
      border-radius: 28px;
      background:
        radial-gradient(circle at 78% 8%, rgba(226, 207, 160, .12), transparent 28%),
        linear-gradient(150deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .045)),
        rgba(6, 19, 17, .8);
      padding: 22px;
      box-shadow:
        0 26px 70px rgba(0, 0, 0, .22),
        inset 0 1px 0 rgba(255, 255, 255, .08);
      transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
      animation: viewRise .3s ease-out both;
    }

    .product-card.is-live {
      grid-column: auto;
    }

    .product-card.is-featured {
      grid-column: auto;
      border-color: rgba(226, 207, 160, .3);
      background:
        radial-gradient(circle at 86% 12%, rgba(226, 207, 160, .16), transparent 30%),
        radial-gradient(circle at 12% 92%, rgba(226, 207, 160, .11), transparent 26%),
        linear-gradient(150deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .05)),
        rgba(6, 25, 22, .84);
    }

    .product-card.is-soon {
      grid-column: auto;
    }

    .product-card:nth-child(2) { animation-delay: .05s; }
    .product-card:nth-child(3) { animation-delay: .1s; }

    .product-card::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, .09) 38%, transparent 52%);
      transform: translateX(-105%);
      transition: transform .7s ease;
      pointer-events: none;
    }

    .product-card::after {
      content: "";
      position: absolute;
      inset: auto -18% -30% 22%;
      height: 190px;
      border-radius: 999px;
      background: rgba(201, 168, 106, .1);
      filter: blur(12px);
      pointer-events: none;
    }

    .product-card:hover {
      transform: translateY(-6px);
      border-color: rgba(226, 207, 160, .36);
      box-shadow:
        0 34px 88px rgba(0, 0, 0, .3),
        0 0 0 1px rgba(226, 207, 160, .08);
    }

    .product-card:hover::before {
      transform: translateX(105%);
    }

    .product-card-top,
    .studio-panel-head,
    .studio-results-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 10px;
    }

    .product-card-main,
    .product-card-content {
      position: relative;
      z-index: 1;
      display: grid;
      align-content: start;
      gap: 12px;
      min-width: 0;
    }

    .product-card-status {
      display: inline-flex;
      align-items: center;
      border: 1px solid rgba(226, 207, 160, .26);
      border-radius: 999px;
      background: rgba(226, 207, 160, .08);
      color: #99f6e4;
      padding: 7px 11px;
      font-size: 11px;
      font-weight: 950;
      line-height: 1;
      white-space: nowrap;
    }

    .product-card h2 {
      margin: 0;
      color: #fbfffd;
      font-size: clamp(25px, 2.05vw, 32px);
      line-height: 1.12;
      font-weight: 950;
      letter-spacing: 0;
      text-wrap: balance;
    }

    .studio-panel h2,
    .studio-results-panel h2,
    .replicate-roadmap h2 {
      margin: 0;
      color: #1c1b17;
      font-size: 22px;
      line-height: 1.2;
      font-weight: 950;
      letter-spacing: -0.02em;
    }

    .product-card p {
      margin: 0;
      color: rgba(241, 245, 249, .82);
      font-size: 13.5px;
      font-weight: 690;
      line-height: 1.72;
    }

    .studio-panel-head p,
    .studio-results-head p,
    .replicate-roadmap p {
      margin: 0;
      color: #625e54;
      font-size: 14px;
      font-weight: 620;
      line-height: 1.72;
    }

    .product-card-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
    }

    .product-card-tags span {
      border: 1px solid rgba(226, 207, 160, .16);
      border-radius: 999px;
      background: rgba(255, 255, 255, .055);
      color: rgba(226, 232, 240, .82);
      padding: 7px 9px;
      font-size: 11px;
      font-weight: 850;
      line-height: 1;
      white-space: nowrap;
    }

    .scene-preset-row button {
      border: 1px solid #ded8cb;
      border-radius: 999px;
      background: #faf8f1;
      color: #565148;
      padding: 7px 9px;
      font-size: 12px;
      font-weight: 850;
      line-height: 1;
    }

    .product-card-visual {
      position: relative;
      z-index: 1;
      align-self: end;
      min-height: 116px;
      border: 1px solid rgba(226, 207, 160, .13);
      border-radius: 18px;
      background:
        linear-gradient(145deg, rgba(2, 6, 6, .2), rgba(255, 255, 255, .045)),
        rgba(255, 255, 255, .04);
      padding: 12px;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
      transition: transform .22s ease;
    }

    .product-card:hover .product-card-visual {
      transform: translateY(-2px);
    }

    .mock-window {
      display: grid;
      gap: 8px;
    }

    .mock-window-head,
    .mock-row,
    .mock-stack-card,
    .mock-blueprint-row {
      border: 1px solid rgba(226, 207, 160, .12);
      border-radius: 14px;
      background: rgba(255, 255, 255, .055);
    }

    .mock-window-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 9px 10px;
      color: rgba(226, 232, 240, .76);
      font-size: 11.5px;
      font-weight: 900;
      letter-spacing: 0;
      text-transform: none;
    }

    .mock-dot-row {
      display: flex;
      gap: 5px;
    }

    .mock-dot-row span {
      width: 7px;
      height: 7px;
      border-radius: 999px;
      background: rgba(226, 207, 160, .5);
      box-shadow: 0 0 16px rgba(226, 207, 160, .4);
    }

    .mock-row {
      display: grid;
      grid-template-columns: 32px minmax(0, 1fr) auto;
      align-items: center;
      gap: 10px;
      padding: 9px;
    }

    .mock-thumb {
      width: 28px;
      height: 28px;
      border-radius: 11px;
      background:
        radial-gradient(circle at 38% 30%, rgba(255, 255, 255, .8), transparent 18%),
        linear-gradient(135deg, rgba(226, 207, 160, .34), rgba(226, 207, 160, .1));
    }

    .mock-copy {
      min-width: 0;
    }

    .mock-copy strong,
    .mock-stack-card strong,
    .mock-blueprint-row strong {
      display: block;
      color: var(--ivory-warm);
      font-size: 11px;
      font-weight: 950;
      line-height: 1.25;
    }

    .mock-copy span,
    .mock-stack-card span,
    .mock-blueprint-row span {
      display: block;
      margin-top: 3px;
      color: rgba(203, 213, 225, .66);
      font-size: 10.5px;
      font-weight: 760;
      line-height: 1.45;
    }

    .mock-progress {
      width: 38px;
      height: 6px;
      overflow: hidden;
      border-radius: 999px;
      background: rgba(148, 163, 184, .18);
    }

    .mock-progress::after {
      content: "";
      display: block;
      width: 72%;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, var(--gold-line), var(--gold-line));
      animation: mockPulse 2.6s ease-in-out infinite;
    }

    .mock-stack {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
      gap: 8px;
    }

    .mock-stack-card {
      min-height: 86px;
      padding: 10px;
      background:
        radial-gradient(circle at 50% 32%, rgba(226, 207, 160, .18), transparent 38%),
        rgba(255, 255, 255, .052);
    }

    .mock-stack-card i {
      display: inline-flex;
      margin-bottom: 8px;
      color: var(--gold-line);
    }

    .mock-blueprint {
      display: grid;
      gap: 8px;
    }

    .mock-blueprint-row {
      position: relative;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: 9px;
      padding: 10px;
    }

    .mock-step {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 26px;
      height: 26px;
      border-radius: 9px;
      background: rgba(245, 158, 11, .13);
      color: #facc15;
      font-size: 10px;
      font-weight: 950;
    }

    .product-card-action {
      position: relative;
      z-index: 1;
      align-self: end;
      min-width: 150px;
      margin-top: 0;
    }

    .app-view .hub-hero,
    .product-card,
    .studio-panel,
    .studio-results-panel,
    .replicate-panel,
    .replicate-output-panel,
    .replicate-roadmap article {
      animation: none;
      opacity: 1;
      transform: none;
    }

    .studio-panel,
    .studio-results-panel,
    .replicate-roadmap article {
      border: 1px solid #ded8cb;
      border-radius: 18px;
      background: #fffdf8;
      box-shadow: var(--shadow-md);
      padding: 20px;
    }

    .studio-panel,
    .studio-results-panel {
      margin-top: 16px;
    }

    .studio-form-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
      gap: 16px;
      margin-top: 18px;
    }

    .studio-side-fields {
      display: grid;
      align-content: start;
      gap: 12px;
    }

    .studio-upload-stack {
      display: grid;
      gap: 14px;
    }

    .studio-upload-zone {
      position: relative;
      display: grid;
      place-items: center;
      min-height: 230px;
      border: 1.5px dashed #b8d9d2;
      border-radius: 16px;
      background:
        linear-gradient(180deg, rgba(231, 247, 243, .42), rgba(255, 253, 248, .9));
      color: #2b2a25;
      padding: 22px;
      text-align: center;
      cursor: pointer;
      overflow: hidden;
      transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease;
    }

    .studio-upload-zone.is-compact {
      min-height: 160px;
      padding: 18px;
    }

    .studio-upload-zone:hover {
      border-color: var(--deep-green);
      background: var(--deep-green-soft);
      transform: translateY(-1px);
    }

    .studio-upload-zone:focus-within {
      border-color: var(--deep-green);
      box-shadow: 0 0 0 4px rgba(31, 58, 51, .14);
    }

    .studio-upload-empty {
      position: relative;
      z-index: 1;
      display: grid;
      justify-items: center;
      gap: 8px;
      max-width: 440px;
      margin: 0 auto;
    }

    .studio-upload-hitarea {
      display: grid;
      place-items: center;
      width: 100%;
      height: 100%;
      min-height: inherit;
      cursor: pointer;
    }

    .studio-background-dropzone.has-file .studio-upload-hitarea {
      display: none;
    }

    .studio-upload-preview {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
      gap: 10px;
      margin-top: 12px;
    }

    .studio-upload-preview.is-background-preview {
      grid-template-columns: 1fr;
    }

    .studio-upload-preview.is-reference-board {
      display: block;
      margin-top: 12px;
      min-width: 0;
    }

    .studio-reference-board {
      display: grid;
      gap: 10px;
      max-width: 100%;
      overflow: hidden;
      border: 1px solid rgba(31, 58, 51, .18);
      border-radius: 16px;
      background:
        radial-gradient(circle at 12% 0%, rgba(201, 168, 106, .12), transparent 30%),
        linear-gradient(180deg, rgba(255, 253, 248, .96), rgba(246, 244, 236, .92));
      padding: 12px;
      box-shadow: 0 12px 28px rgba(31, 29, 24, .06);
    }

    .studio-reference-board-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      min-width: 0;
    }

    .studio-reference-board-head > div {
      display: grid;
      gap: 2px;
      min-width: 0;
    }

    .studio-reference-board-head strong {
      color: #25231f;
      font-size: 12px;
      font-weight: 950;
      line-height: 1.3;
    }

    .studio-reference-board-head small {
      color: #787267;
      font-size: 11px;
      font-weight: 760;
      line-height: 1.45;
    }

    .studio-reference-clear {
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      min-height: 32px;
      border: 1px solid rgba(31, 58, 51, .2);
      border-radius: 999px;
      background: rgba(251, 250, 246, .9);
      color: var(--deep-green);
      padding: 7px 10px;
      font-size: 11px;
      font-weight: 900;
      cursor: pointer;
      transition: border-color .16s ease, background .16s ease, color .16s ease, transform .16s ease;
    }

    .studio-reference-clear:hover,
    .studio-reference-clear:focus-visible {
      border-color: rgba(185, 28, 28, .32);
      background: rgba(254, 242, 242, .96);
      color: #b91c1c;
      outline: 0;
      transform: translateY(-1px);
    }

    .studio-reference-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
      gap: 10px;
      min-width: 0;
    }

    .studio-reference-thumb-card {
      position: relative;
      display: grid;
      min-width: 0;
      overflow: hidden;
      border: 1px solid rgba(222, 216, 203, .92);
      border-radius: 14px;
      background: #fff;
      box-shadow: 0 8px 18px rgba(31, 29, 24, .06);
    }

    .studio-reference-preview {
      position: relative;
      display: grid;
      width: 100%;
      aspect-ratio: 1 / 1;
      overflow: hidden;
      border: 0;
      background:
        linear-gradient(45deg, rgba(31, 58, 51, .055) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(31, 58, 51, .055) 25%, transparent 25%),
        #f8f5ed;
      background-size: 18px 18px;
      padding: 0;
      cursor: zoom-in;
    }

    .studio-reference-preview:focus-visible {
      outline: 3px solid rgba(31, 58, 51, .32);
      outline-offset: -3px;
    }

    .studio-reference-preview img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform .18s ease;
    }

    .studio-reference-thumb-card:hover .studio-reference-preview img {
      transform: scale(1.035);
    }

    .studio-reference-index {
      position: absolute;
      z-index: 2;
      left: 7px;
      top: 7px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 26px;
      height: 24px;
      border: 1px solid rgba(255, 255, 255, .68);
      border-radius: 999px;
      background: rgba(37, 35, 31, .72);
      color: #fff;
      padding: 0 7px;
      font-size: 11px;
      font-weight: 950;
      line-height: 1;
      backdrop-filter: blur(10px);
    }

    .studio-reference-icon-btn {
      position: absolute;
      z-index: 3;
      display: inline-grid;
      place-items: center;
      width: 30px;
      height: 30px;
      border: 1px solid rgba(255, 255, 255, .78);
      border-radius: 999px;
      background: rgba(37, 35, 31, .74);
      color: #fff;
      box-shadow: 0 10px 20px rgba(31, 29, 24, .2);
      cursor: pointer;
      transition: background .16s ease, transform .16s ease, box-shadow .16s ease;
    }

    .studio-reference-icon-btn:hover,
    .studio-reference-icon-btn:focus-visible {
      outline: 0;
      transform: translateY(-1px);
    }

    .studio-reference-icon-btn.is-remove {
      top: 7px;
      right: 7px;
    }

    .studio-reference-icon-btn.is-remove:hover,
    .studio-reference-icon-btn.is-remove:focus-visible {
      background: #b91c1c;
      box-shadow: 0 12px 24px rgba(185, 28, 28, .28);
    }

    .studio-reference-icon-btn.is-zoom {
      right: 7px;
      bottom: 48px;
      background: rgba(31, 58, 51, .82);
    }

    .studio-reference-icon-btn.is-zoom:hover,
    .studio-reference-icon-btn.is-zoom:focus-visible {
      background: var(--deep-green);
      box-shadow: 0 12px 24px rgba(31, 58, 51, .25);
    }

    .studio-reference-meta {
      display: grid;
      gap: 2px;
      min-width: 0;
      padding: 9px 10px 10px;
      text-align: left;
    }

    .studio-reference-meta strong,
    .studio-reference-meta small {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .studio-reference-meta strong {
      color: #25231f;
      font-size: 12px;
      font-weight: 950;
    }

    .studio-reference-meta small {
      color: #7a7468;
      font-size: 11px;
      font-weight: 750;
      line-height: 1.45;
    }

    .studio-background-dropzone {
      min-height: clamp(240px, 24vw, 340px);
      padding: 0;
      isolation: isolate;
      background:
        radial-gradient(circle at 18% 10%, rgba(201, 168, 106, .16), transparent 34%),
        linear-gradient(145deg, rgba(251, 250, 246, .76), rgba(255, 253, 248, .96));
    }

    .studio-background-dropzone.is-compact {
      min-height: clamp(190px, 18vw, 260px);
      padding: 0;
    }

    .studio-background-dropzone .studio-upload-empty {
      padding: 22px;
    }

    .studio-background-dropzone.has-file {
      border-style: solid;
      border-color: #cfd8d1;
      background:
        linear-gradient(45deg, rgba(31, 58, 51, .055) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(31, 58, 51, .055) 25%, transparent 25%),
        #f8f5ed;
      background-size: 20px 20px;
    }

    .studio-background-dropzone.has-file .studio-upload-empty {
      display: none;
    }

    .studio-background-dropzone.has-file:hover {
      border-color: #cfd8d1;
      background:
        linear-gradient(45deg, rgba(31, 58, 51, .055) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(31, 58, 51, .055) 25%, transparent 25%),
        #f8f5ed;
      background-size: 20px 20px;
      transform: none;
    }

    .studio-background-dropzone .studio-preview-remove {
      display: none;
    }

    .studio-background-dropzone.has-file .studio-preview-remove {
      display: inline-grid;
    }

    .studio-background-dropzone .studio-upload-preview {
      display: none;
      width: 100%;
      height: 100%;
      min-height: inherit;
      margin: 0;
    }

    .studio-background-dropzone.has-file .studio-upload-preview {
      display: block;
    }

    .studio-preview-card,
    .studio-result-card {
      overflow: hidden;
      border: 1px solid #ded8cb;
      border-radius: 14px;
      background: #fff;
      box-shadow: var(--shadow-sm);
    }

    .studio-preview-card.is-wide-preview {
      display: grid;
      grid-template-columns: minmax(180px, 1fr) minmax(170px, .55fr);
      align-items: stretch;
      min-height: 0;
      background:
        linear-gradient(135deg, rgba(251, 250, 246, .68), rgba(255, 253, 248, .96)),
        #fff;
    }

    .studio-preview-card.is-in-dropzone {
      position: absolute;
      inset: 0;
      display: block;
      border: 0;
      border-radius: inherit;
      background: transparent;
      box-shadow: none;
    }

    .studio-preview-card.is-in-dropzone .thumb-preview {
      position: relative;
      display: grid;
      place-items: stretch;
      width: 100%;
      height: 100%;
      min-height: inherit;
      border: 0;
      background:
        radial-gradient(circle at 18% 12%, rgba(201, 168, 106, .13), transparent 34%),
        linear-gradient(135deg, #f4f1ea, #fffdf8);
      padding: 0;
      cursor: zoom-in;
    }

    .studio-preview-card.is-in-dropzone .thumb-preview:focus-visible {
      outline: 3px solid rgba(31, 58, 51, .4);
      outline-offset: -4px;
    }

    .studio-preview-card.is-in-dropzone .studio-preview-backdrop,
    .studio-preview-card.is-in-dropzone .studio-preview-main {
      width: 100%;
      height: 100%;
      max-height: none;
      aspect-ratio: auto;
      border: 0;
      background:
        linear-gradient(45deg, rgba(31, 58, 51, .06) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(31, 58, 51, .06) 25%, transparent 25%),
        #f8f5ed;
      background-size: 20px 20px;
    }

    .studio-preview-card.is-in-dropzone .studio-preview-backdrop {
      position: absolute;
      inset: 0;
      z-index: 0;
      object-fit: cover;
      filter: blur(16px) saturate(1.08);
      opacity: .34;
      transform: scale(1.08);
    }

    .studio-preview-card.is-in-dropzone .studio-preview-main {
      position: relative;
      z-index: 1;
      object-fit: contain;
      filter: drop-shadow(0 14px 24px rgba(31, 29, 24, .16));
    }

    .studio-preview-card.is-in-dropzone .studio-preview-meta {
      position: absolute;
      z-index: 2;
      left: 12px;
      right: 12px;
      bottom: 12px;
      display: grid;
      gap: 2px;
      min-width: 0;
      border: 1px solid rgba(255, 255, 255, .74);
      border-radius: 12px;
      background: rgba(255, 253, 248, .92);
      box-shadow: 0 12px 24px rgba(31, 29, 24, .16);
      padding: 9px 11px;
      text-align: left;
      backdrop-filter: blur(12px);
    }

    .studio-preview-card.is-in-dropzone .studio-preview-meta strong,
    .studio-preview-card.is-in-dropzone .studio-preview-meta small {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .studio-preview-remove {
      position: absolute;
      z-index: 4;
      top: 10px;
      right: 10px;
      display: inline-grid;
      place-items: center;
      width: 34px;
      height: 34px;
      border: 1px solid rgba(255, 255, 255, .8);
      border-radius: 999px;
      background: rgba(37, 35, 31, .74);
      color: #fff;
      box-shadow: 0 12px 24px rgba(31, 29, 24, .22);
      cursor: pointer;
      transition: background .16s ease, transform .16s ease, box-shadow .16s ease;
    }

    .studio-preview-remove:hover,
    .studio-preview-remove:focus-visible {
      background: #b91c1c;
      box-shadow: 0 14px 28px rgba(185, 28, 28, .28);
      outline: 0;
      transform: translateY(-1px);
    }

    .studio-result-card {
      position: relative;
      display: grid;
    }

    .studio-result-card::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      border-radius: inherit;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
    }

    .studio-preview-card img,
    .studio-result-card img {
      display: block;
      width: 100%;
      aspect-ratio: 1 / 1;
      object-fit: cover;
      background: #f4f1ea;
    }

    .studio-preview-card.is-wide-preview .thumb-preview {
      display: grid;
      min-width: 0;
      height: clamp(190px, 24vw, 320px);
      min-height: 0;
      max-height: 320px;
      overflow: hidden;
      border: 0;
      background:
        radial-gradient(circle at 18% 12%, rgba(201, 168, 106, .14), transparent 34%),
        linear-gradient(135deg, #f4f1ea, #fffdf8);
      padding: 0;
      cursor: pointer;
    }

    .studio-preview-card.is-wide-preview img {
      width: 100%;
      height: 100%;
      max-height: 320px;
      aspect-ratio: auto;
      object-fit: contain;
      border-right: 1px solid #ded8cb;
      background:
        linear-gradient(45deg, rgba(31, 58, 51, .06) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(31, 58, 51, .06) 25%, transparent 25%),
        #f8f5ed;
      background-size: 20px 20px;
    }

    .studio-preview-card.is-wide-preview .studio-preview-meta {
      align-content: center;
      min-width: 0;
      padding: 13px;
    }

    #studioBackgroundPanel .studio-form-grid {
      grid-template-columns: minmax(0, 1fr) minmax(320px, .78fr);
      align-items: start;
    }

    #studioBackgroundPanel .studio-upload-stack,
    #studioBackgroundPanel .studio-side-fields {
      min-width: 0;
    }

    #studioBackgroundPanel .studio-upload-preview {
      max-width: 100%;
      overflow: hidden;
    }

    .studio-retouch-grid .studio-upload-preview {
      grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
    }

    .studio-retouch-upload {
      min-height: 178px;
      border-radius: 16px;
      background:
        radial-gradient(circle at 18% 0%, rgba(201, 168, 106, .12), transparent 34%),
        linear-gradient(180deg, rgba(251, 250, 246, .56), rgba(255, 253, 248, .94));
    }

    .studio-retouch-upload .text-xs {
      max-width: 440px;
      line-height: 1.6;
    }

    .studio-preview-card div,
    .studio-result-card-body {
      display: grid;
      gap: 6px;
      padding: 10px;
    }

    .studio-preview-card strong,
    .studio-result-card strong {
      color: #25231f;
      font-size: 12px;
      font-weight: 950;
      overflow-wrap: anywhere;
    }

    .studio-preview-card small,
    .studio-result-card small {
      color: #7a7468;
      font-size: 11px;
      font-weight: 750;
      line-height: 1.5;
    }

    .studio-field-hint {
      display: block;
      margin-top: 7px;
      color: #787267;
      font-size: 11px;
      font-weight: 750;
      line-height: 1.55;
    }

    .studio-custom-size-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    .replicate-canvas-settings .studio-custom-size-grid {
      margin-top: 8px;
    }

    .replicate-canvas-settings .control:disabled {
      background: #f5f1e8;
      color: #9a9081;
      cursor: not-allowed;
    }

    .studio-size-summary {
      border: 1px solid #d8eee9;
      border-radius: 12px;
      background: var(--deep-green-soft);
      color: #245d56;
      padding: 10px;
      font-size: 12px;
      font-weight: 850;
      line-height: 1.55;
    }

    .skincare-workflow-strip {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
      margin-top: 14px;
    }

    .skincare-workflow-strip span,
    .skincare-console-card,
    .skincare-upload-card {
      border: 1px solid rgba(31, 58, 51, .16);
      border-radius: 14px;
      background: linear-gradient(180deg, rgba(255, 253, 248, .98), rgba(251, 250, 246, .52));
      box-shadow: 0 10px 22px rgba(31, 29, 24, .05);
    }

    .skincare-workflow-strip span {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: 4px 9px;
      padding: 12px;
    }

    .skincare-workflow-strip em {
      grid-row: 1 / span 2;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      border-radius: 10px;
      background: var(--deep-green);
      color: #fff;
      font-size: 11px;
      font-style: normal;
      font-weight: 950;
    }

    .skincare-workflow-strip strong {
      color: #25231f;
      font-size: 12px;
      font-weight: 950;
      line-height: 1.2;
    }

    .skincare-workflow-strip small {
      color: #787267;
      font-size: 11px;
      font-weight: 750;
      line-height: 1.45;
      overflow-wrap: anywhere;
    }

    .skincare-upload-groups {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
      margin-top: 16px;
    }

    .skincare-upload-card {
      display: grid;
      gap: 10px;
      min-width: 0;
      padding: 13px;
    }

    .skincare-upload-card label {
      display: grid;
      gap: 7px;
      min-height: 126px;
      border: 1.5px dashed rgba(31, 58, 51, .28);
      border-radius: 12px;
      background: rgba(251, 250, 246, .56);
      padding: 14px;
      cursor: pointer;
      transition: border-color .16s ease, background .16s ease, transform .16s ease;
    }

    .skincare-upload-card label:hover {
      border-color: var(--deep-green);
      background: var(--deep-green-soft);
      transform: translateY(-1px);
    }

    .skincare-upload-card strong {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 7px;
      color: #25231f;
      font-size: 13px;
      font-weight: 950;
    }

    .skincare-upload-card strong span {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      min-width: 0;
    }

    .skincare-upload-status {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      width: fit-content;
      border: 1px solid rgba(31, 58, 51, .14);
      border-radius: 999px;
      background: rgba(255, 255, 255, .76);
      color: var(--deep-green);
      padding: 3px 7px;
      font-size: 10px;
      font-weight: 950;
      line-height: 1;
      white-space: nowrap;
    }

    .skincare-upload-card small,
    .skincare-upload-card p {
      color: #787267;
      font-size: 11px;
      font-weight: 750;
      line-height: 1.5;
    }

    .skincare-upload-mini-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
      gap: 6px;
      max-height: 150px;
      overflow: auto;
      padding-right: 2px;
    }

    .skincare-upload-thumb {
      position: relative;
      min-width: 0;
      overflow: hidden;
      border: 1px solid rgba(222, 216, 203, .86);
      border-radius: 10px;
      background: #fff;
    }

    .skincare-upload-thumb img,
    .skincare-role-thumb img {
      width: 100%;
      aspect-ratio: 1 / 1;
      border-radius: 9px;
      object-fit: cover;
      background: #f4f1ea;
    }

    .skincare-thumb-actions {
      position: absolute;
      top: 5px;
      right: 5px;
      display: flex;
      gap: 4px;
    }

    .skincare-thumb-action {
      display: inline-grid;
      place-items: center;
      width: 24px;
      height: 24px;
      border: 1px solid rgba(31, 29, 24, .12);
      border-radius: 999px;
      background: rgba(255, 255, 255, .92);
      color: #25231f;
      cursor: pointer;
      box-shadow: 0 6px 14px rgba(31, 29, 24, .12);
    }

    .skincare-thumb-action.is-remove {
      color: #b91c1c;
    }

    .skincare-upload-thumb small {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      padding: 4px 6px 6px;
      color: #787267;
      font-size: 10px;
      font-weight: 800;
    }

    .skincare-console-grid,
    .skincare-fact-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
      gap: 14px;
      margin-top: 16px;
      align-items: start;
    }

    .skincare-fact-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .skincare-console-card {
      min-width: 0;
      padding: 14px;
    }

    .skincare-console-card h3,
    .skincare-section-head h3 {
      margin: 0;
      color: #25231f;
      font-size: 14px;
      font-weight: 950;
      line-height: 1.3;
    }

    .skincare-section-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 12px;
    }

    .skincare-section-head p {
      margin: 3px 0 0;
      color: #787267;
      font-size: 11px;
      font-weight: 750;
      line-height: 1.5;
    }

    .skincare-role-board {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(184px, 1fr));
      gap: 9px;
      max-height: 540px;
      overflow: auto;
      padding-right: 3px;
    }

    .skincare-role-item {
      display: grid;
      grid-template-rows: auto 1fr auto;
      gap: 8px;
      align-items: stretch;
      border: 1px solid #ded8cb;
      border-radius: 12px;
      background: #fff;
      padding: 9px;
    }

    .skincare-role-thumb {
      position: relative;
      display: block;
      overflow: hidden;
      border-radius: 10px;
      border: 0;
      padding: 0;
      background: #f4f1ea;
      cursor: zoom-in;
    }

    .skincare-role-meta {
      display: grid;
      gap: 3px;
      min-width: 0;
    }

    .skincare-role-meta strong,
    .skincare-role-meta small {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .skincare-role-meta strong {
      color: #25231f;
      font-size: 12px;
      font-weight: 950;
    }

    .skincare-role-badges {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
    }

    .skincare-role-badge {
      display: inline-flex;
      align-items: center;
      width: fit-content;
      border-radius: 999px;
      border: 1px solid rgba(31, 58, 51, .14);
      background: rgba(251, 250, 246, .82);
      color: var(--deep-green);
      padding: 3px 7px;
      font-size: 10px;
      font-weight: 950;
      line-height: 1;
      white-space: nowrap;
    }

    .skincare-role-badge.is-review {
      border-color: rgba(217, 119, 6, .22);
      background: #fffbeb;
      color: #92400e;
    }

    .skincare-role-actions {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 7px;
      align-items: center;
    }

    .skincare-role-meta small,
    .skincare-fact-card,
    .skincare-missing-facts,
    .skincare-packaging-map,
    .skincare-package-summary,
    .skincare-copy-preview {
      color: #625d54;
      font-size: 11px;
      font-weight: 750;
      line-height: 1.55;
    }

    .skincare-role-select {
      min-width: 0;
      border: 1px solid #ded8cb;
      border-radius: 10px;
      background: #fffdf8;
      padding: 9px 10px;
      color: #25231f;
      font-size: 12px;
      font-weight: 850;
    }

    .skincare-role-remove {
      display: inline-grid;
      place-items: center;
      width: 36px;
      height: 36px;
      border: 1px solid rgba(185, 28, 28, .18);
      border-radius: 999px;
      background: #fff;
      color: #b91c1c;
      cursor: pointer;
    }

    .skincare-platform-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-top: 10px;
    }

    .skincare-copy-summary-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
    }

    .skincare-copy-summary-card {
      border: 1px solid rgba(222, 216, 203, .75);
      border-radius: 10px;
      background: rgba(255, 255, 255, .74);
      padding: 9px 10px;
    }

    .skincare-copy-summary-card span {
      display: block;
      color: #787267;
      font-size: 10.5px;
      font-weight: 850;
    }

    .skincare-copy-summary-card strong {
      display: block;
      margin-top: 3px;
      color: #25231f;
      font-size: 13px;
      font-weight: 950;
      line-height: 1.25;
    }

    .skincare-copy-details {
      border: 1px solid rgba(222, 216, 203, .78);
      border-radius: 10px;
      background: rgba(255, 255, 255, .72);
      padding: 8px 10px;
    }

    .skincare-copy-details summary {
      cursor: pointer;
      color: var(--deep-green);
      font-size: 11px;
      font-weight: 950;
    }

    .skincare-fact-card,
    .skincare-missing-facts,
    .skincare-packaging-map,
    .skincare-package-summary,
    .skincare-copy-preview {
      display: grid;
      gap: 7px;
      margin-top: 10px;
    }

    .skincare-fact-row,
    .skincare-missing-facts li,
    .skincare-packaging-map li,
    .skincare-package-summary li,
    .skincare-copy-slot {
      border: 1px solid rgba(222, 216, 203, .75);
      border-radius: 10px;
      background: rgba(255, 255, 255, .72);
      padding: 8px 9px;
      overflow-wrap: anywhere;
    }

    .skincare-fact-row b {
      color: var(--deep-green);
      font-weight: 950;
    }

    .skincare-missing-facts ul,
    .skincare-packaging-map ul,
    .skincare-package-summary ul {
      display: grid;
      gap: 7px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .skincare-missing-facts li.is-warn {
      border-color: rgba(217, 119, 6, .28);
      background: rgba(255, 251, 235, .82);
      color: #765314;
    }

    .skincare-copy-slot {
      display: grid;
      gap: 6px;
    }

    .skincare-copy-slot-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 8px;
    }

    .skincare-copy-slot-head strong {
      color: #25231f;
      font-size: 12px;
      font-weight: 950;
      line-height: 1.35;
    }

    .skincare-risk-pill {
      flex: 0 0 auto;
      border-radius: 999px;
      border: 1px solid rgba(31, 58, 51, .16);
      background: var(--deep-green-soft);
      color: var(--deep-green);
      padding: 3px 7px;
      font-size: 10px;
      font-weight: 950;
      line-height: 1;
      white-space: nowrap;
    }

    .skincare-risk-pill.is-high {
      border-color: rgba(185, 28, 28, .22);
      background: #fff1f2;
      color: #b91c1c;
    }

    .skincare-risk-pill.is-review {
      border-color: rgba(217, 119, 6, .24);
      background: #fffbeb;
      color: #92400e;
    }

    .skincare-copy-lines {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
    }

    .skincare-copy-lines span {
      border: 1px solid rgba(31, 58, 51, .14);
      border-radius: 999px;
      background: rgba(251, 250, 246, .78);
      color: #245d56;
      padding: 4px 7px;
      font-size: 10.5px;
      font-weight: 850;
      line-height: 1.25;
    }

    .skincare-copy-lines.is-blocked span {
      border-color: rgba(217, 119, 6, .22);
      background: #fffbeb;
      color: #765314;
    }

    .skincare-analysis-panel {
      display: grid;
      gap: 10px;
      border: 1px solid rgba(201, 168, 106, .18);
      border-radius: 8px;
      background: linear-gradient(135deg, rgba(251, 250, 246, .92), rgba(255, 255, 255, .96));
      padding: 12px;
    }

    .skincare-analysis-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
    }

    .skincare-analysis-head strong,
    .skincare-analysis-head small {
      display: block;
    }

    .skincare-analysis-head strong {
      color: #134e4a;
      font-size: 13px;
      font-weight: 950;
    }

    .skincare-analysis-head small {
      margin-top: 3px;
      color: #64748b;
      font-size: 12px;
      line-height: 1.45;
    }

    .skincare-analysis-status {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      color: var(--deep-green);
      font-size: 12px;
      font-weight: 900;
    }

    .skincare-analysis-status::before {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: #94a3b8;
    }

    .skincare-analysis-status.is-ready::before {
      background: var(--gold);
    }

    .skincare-analysis-status.is-running::before {
      background: #f59e0b;
      animation: pulse 1.1s ease-in-out infinite;
    }

    .skincare-analysis-status.is-error::before {
      background: #e11d48;
    }

    .skincare-analysis-status.is-running {
      position: relative;
      overflow: hidden;
      border: 1px solid rgba(201, 168, 106, .18);
      border-radius: 12px;
      background: linear-gradient(135deg, rgba(255, 255, 255, .92), rgba(251, 250, 246, .86));
      padding: 11px 12px;
      color: #134e4a;
      box-shadow: 0 12px 28px rgba(31, 58, 51, .1);
    }

    .skincare-analysis-status.is-running::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(110deg, transparent 0%, rgba(201, 168, 106, .12) 45%, transparent 70%);
      transform: translateX(-100%);
      animation: skincareStatusSweep 1.35s ease-in-out infinite;
      pointer-events: none;
    }

    .skincare-analysis-loader {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 4px;
      width: 92px;
      height: 34px;
      align-items: end;
      margin-right: 2px;
    }

    .skincare-analysis-loader span {
      display: block;
      border-radius: 999px 999px 4px 4px;
      background: linear-gradient(180deg, var(--gold), #99f6e4);
      animation: skincareBars 1.05s ease-in-out infinite;
    }

    .skincare-analysis-loader span:nth-child(2) { animation-delay: .1s; }
    .skincare-analysis-loader span:nth-child(3) { animation-delay: .2s; }
    .skincare-analysis-loader span:nth-child(4) { animation-delay: .3s; }
    .skincare-analysis-loader span:nth-child(5) { animation-delay: .4s; }

    .skincare-analysis-copy {
      position: relative;
      z-index: 1;
      display: grid;
      gap: 2px;
      min-width: 0;
    }

    .skincare-analysis-copy strong,
    .skincare-analysis-copy small {
      display: block;
      overflow-wrap: anywhere;
    }

    .skincare-analysis-copy strong {
      color: #134e4a;
      font-size: 12px;
      font-weight: 950;
    }

    .skincare-analysis-copy small {
      color: #64748b;
      font-size: 11px;
      font-weight: 750;
      line-height: 1.45;
    }

    .skincare-analysis-action {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-width: 154px;
      min-height: 42px;
      white-space: nowrap;
    }

    .skincare-analysis-spinner {
      display: none;
      width: 16px;
      height: 16px;
      flex: 0 0 16px;
      border: 2px solid currentColor;
      border-top-color: transparent;
      border-radius: 999px;
      animation: skincareButtonSpin .76s linear infinite;
    }

    .skincare-analysis-action.is-loading .skincare-analysis-spinner {
      display: inline-block;
    }

    .skincare-analysis-action.is-loading .skincare-analysis-btn-icon {
      display: none;
    }

    .skincare-analysis-action[aria-busy="true"] {
      cursor: progress;
    }

    @keyframes skincareStatusSweep {
      from { transform: translateX(-100%); }
      to { transform: translateX(100%); }
    }

    @keyframes skincareBars {
      0%, 100% { height: 9px; opacity: .62; }
      50% { height: 30px; opacity: 1; }
    }

    @keyframes skincareButtonSpin {
      to { transform: rotate(360deg); }
    }

    @keyframes pulse {
      0%, 100% { transform: scale(1); opacity: .7; }
      50% { transform: scale(1.4); opacity: 1; }
    }

    .skincare-flow-summary {
      display: grid;
      gap: 8px;
      border: 1px solid rgba(31, 58, 51, .14);
      border-radius: 8px;
      background: rgba(255, 255, 255, .9);
      padding: 10px;
    }

    .skincare-flow-summary-row {
      display: grid;
      grid-template-columns: 92px minmax(0, 1fr);
      gap: 10px;
      font-size: 12px;
      line-height: 1.5;
    }

    .skincare-flow-summary-row b {
      color: var(--deep-green);
      font-weight: 950;
    }

    .skincare-flow-summary-row span {
      min-width: 0;
      color: #334155;
      font-weight: 800;
    }

    .skincare-model-note {
      color: #64748b;
      font-size: 12px;
      font-weight: 750;
      line-height: 1.5;
    }

    .skincare-strategy-panel {
      display: grid;
      gap: 12px;
      grid-column: 1 / -1;
    }

    .skincare-recommendation-grid,
    .skincare-style-grid,
    .skincare-slot-lock-grid {
      display: grid;
      gap: 10px;
    }

    .skincare-recommendation-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .skincare-style-grid {
      grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    }

    .skincare-style-card,
    .skincare-model-card,
    .skincare-slot-lock-card {
      border: 1px solid rgba(222, 216, 203, .78);
      border-radius: 10px;
      background: rgba(255, 255, 255, .78);
      padding: 10px;
      min-width: 0;
    }

    .skincare-style-card.is-selected,
    .skincare-model-card.is-recommended {
      border-color: rgba(31, 58, 51, .38);
      background: linear-gradient(180deg, rgba(251, 250, 246, .9), rgba(255, 255, 255, .84));
      box-shadow: 0 10px 24px rgba(31, 58, 51, .09);
    }

    .skincare-style-card {
      text-align: left;
      cursor: pointer;
    }

    .skincare-style-card strong,
    .skincare-model-card strong,
    .skincare-slot-lock-card strong {
      display: block;
      color: #25231f;
      font-size: 12px;
      font-weight: 950;
      line-height: 1.35;
    }

    .skincare-style-card small,
    .skincare-model-card small,
    .skincare-slot-lock-card small {
      display: block;
      margin-top: 5px;
      color: #64748b;
      font-size: 11px;
      font-weight: 750;
      line-height: 1.45;
      overflow-wrap: anywhere;
    }

    .skincare-slot-lock-grid {
      grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
      max-height: 440px;
      overflow: auto;
      padding-right: 2px;
    }

    .skincare-slot-lock-card {
      display: grid;
      gap: 7px;
    }

    .skincare-slot-lock-card.is-warn {
      border-color: rgba(217, 119, 6, .28);
      background: rgba(255, 251, 235, .82);
    }

    .skincare-lock-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
    }

    .skincare-lock-tags span {
      border-radius: 999px;
      border: 1px solid rgba(31, 58, 51, .14);
      background: rgba(251, 250, 246, .82);
      color: #245d56;
      padding: 3px 7px;
      font-size: 10px;
      font-weight: 900;
      line-height: 1.2;
    }

    .skincare-result-toolbar {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      border: 1px solid rgba(201, 168, 106, .16);
      border-radius: 8px;
      background: rgba(251, 250, 246, .72);
      padding: 10px;
      grid-column: 1 / -1;
    }

    .skincare-result-toolbar strong,
    .skincare-result-toolbar span {
      display: block;
    }

    .skincare-result-toolbar strong {
      color: #134e4a;
      font-size: 13px;
      font-weight: 950;
    }

    .skincare-result-toolbar span {
      margin-top: 2px;
      color: #64748b;
      font-size: 12px;
      font-weight: 750;
    }

    .skincare-result-section {
      display: grid;
      gap: 12px;
      grid-column: 1 / -1;
    }

    .skincare-result-section-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      border-bottom: 1px solid rgba(15, 23, 42, .08);
      padding-bottom: 8px;
    }

    .skincare-result-section-head h3 {
      margin: 0;
      color: #0f172a;
      font-size: 14px;
      font-weight: 950;
    }

    .skincare-result-section-head p {
      margin: 2px 0 0;
      color: #64748b;
      font-size: 12px;
      font-weight: 750;
    }

    .skincare-result-section-grid {
      display: grid;
      gap: 12px;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }

    #studioSkincarePanel {
      overflow: hidden;
      border-color: #d9e2dc;
      border-radius: 10px;
      background: #fbfcfb;
      padding: 0;
      box-shadow: 0 16px 42px rgba(31, 29, 24, .07);
    }

    #studioSkincarePanel > .studio-panel-head {
      align-items: center;
      border-bottom: 1px solid #e1e7e2;
      background: #f7faf6;
      padding: 18px 22px;
    }

    #studioSkincarePanel > .studio-panel-head h2 {
      color: #18221f;
      font-size: 22px;
      letter-spacing: 0;
    }

    #studioSkincarePanel > .studio-panel-head p {
      max-width: 760px;
      color: #66716b;
      font-size: 13px;
      line-height: 1.55;
    }

    #studioSkincarePanel .mini-badge {
      border-color: #cfdad3;
      background: #fff;
      color: #315b50;
    }

    .skincare-flow-shell {
      display: grid;
      grid-template-columns: 226px minmax(0, 1fr);
      min-height: 660px;
    }

    .skincare-step-rail {
      display: grid;
      align-content: start;
      gap: 8px;
      border-right: 1px solid #e1e7e2;
      background: #f4f7f3;
      padding: 16px;
    }

    .skincare-step-btn {
      display: grid;
      grid-template-columns: 34px minmax(0, 1fr);
      gap: 9px;
      width: 100%;
      border: 1px solid transparent;
      border-radius: 8px;
      background: transparent;
      padding: 9px;
      color: #4f5d56;
      text-align: left;
      cursor: pointer;
      transition: background .16s ease, border-color .16s ease, color .16s ease;
    }

    .skincare-step-btn:hover {
      border-color: #d4ded7;
      background: #fff;
    }

    .skincare-step-btn.is-active {
      border-color: #9bc7bd;
      background: #fff;
      color: #102d27;
      box-shadow: 0 8px 18px rgba(31, 29, 24, .06);
    }

    .skincare-step-btn.is-done .skincare-step-index {
      background: var(--deep-green);
      color: #fff;
    }

    .skincare-step-index {
      display: inline-grid;
      place-items: center;
      width: 34px;
      height: 34px;
      border-radius: 8px;
      background: #e5ece7;
      color: #4f5d56;
      font-size: 11px;
      font-weight: 950;
      line-height: 1;
    }

    .skincare-step-label {
      display: grid;
      gap: 2px;
      min-width: 0;
    }

    .skincare-step-label strong {
      overflow: hidden;
      color: inherit;
      font-size: 12px;
      font-weight: 950;
      line-height: 1.25;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .skincare-step-label small {
      overflow: hidden;
      color: #7d8881;
      font-size: 10.5px;
      font-weight: 760;
      line-height: 1.35;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .skincare-step-workbench {
      display: grid;
      grid-template-rows: auto minmax(0, 1fr) auto;
      gap: 16px;
      min-width: 0;
      padding: 18px;
    }

    .skincare-step-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 14px;
      border-bottom: 1px solid #e5ebe6;
      padding-bottom: 14px;
    }

    .skincare-step-top h3 {
      margin: 5px 0 0;
      color: #18221f;
      font-size: 19px;
      font-weight: 950;
      line-height: 1.25;
    }

    .skincare-step-top p {
      max-width: 660px;
      margin: 5px 0 0;
      color: #66716b;
      font-size: 12px;
      font-weight: 760;
      line-height: 1.5;
    }

    .skincare-step-eyebrow {
      color: var(--deep-green);
      font-size: 11px;
      font-weight: 950;
    }

    .skincare-step-chip {
      display: inline-flex;
      align-items: center;
      min-height: 28px;
      border: 1px solid #d5e3dd;
      border-radius: 999px;
      background: #fff;
      color: #315b50;
      padding: 5px 10px;
      font-size: 11px;
      font-weight: 900;
      white-space: nowrap;
    }

    .skincare-step-body {
      min-width: 0;
    }

    .skincare-step-panel {
      display: none;
      gap: 14px;
      min-width: 0;
    }

    .skincare-step-panel.is-active {
      display: grid;
    }

    .skincare-simple-card,
    .skincare-optional-panel {
      min-width: 0;
      border: 1px solid #dde6e0;
      border-radius: 8px;
      background: #fff;
      padding: 14px;
    }

    .skincare-simple-card.is-muted {
      background: #f8faf7;
    }

    .skincare-simple-card h4 {
      margin: 0;
      color: #18221f;
      font-size: 14px;
      font-weight: 950;
      line-height: 1.3;
    }

    .skincare-simple-card p,
    .skincare-optional-panel summary {
      margin: 5px 0 0;
      color: #66716b;
      font-size: 12px;
      font-weight: 760;
      line-height: 1.5;
    }

    .skincare-optional-panel summary {
      margin: 0;
      cursor: pointer;
    }

    .skincare-step-notice {
      display: none;
      border: 1px solid #e6d8aa;
      border-radius: 8px;
      background: #fff8df;
      color: #6d5215;
      padding: 10px 12px;
      font-size: 12px;
      font-weight: 850;
      line-height: 1.45;
    }

    .skincare-step-notice.is-visible {
      display: block;
    }

    .skincare-step-notice strong {
      display: block;
      color: #5b4311;
      font-size: 12px;
      font-weight: 950;
    }

    .skincare-step-notice p {
      margin: 4px 0 0;
    }

    .skincare-step-notice-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 10px;
    }

    .skincare-step-notice-actions .btn {
      min-height: 34px;
      border-radius: 8px;
      padding: 7px 10px;
      font-size: 11px;
    }

    .skincare-metric-row,
    .skincare-plan-summary-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 9px;
    }

    .skincare-metric,
    .skincare-plan-pill {
      min-width: 0;
      border: 1px solid #dde6e0;
      border-radius: 8px;
      background: #fff;
      padding: 10px;
    }

    .skincare-metric span,
    .skincare-plan-pill span {
      display: block;
      color: #7d8881;
      font-size: 10.5px;
      font-weight: 850;
      line-height: 1.25;
    }

    .skincare-metric strong,
    .skincare-plan-pill strong {
      display: block;
      overflow: hidden;
      margin-top: 4px;
      color: #18221f;
      font-size: 13px;
      font-weight: 950;
      line-height: 1.25;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .skincare-step-actions {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      border-top: 1px solid #e5ebe6;
      padding-top: 14px;
    }

    .skincare-step-actions .btn {
      min-height: 42px;
      border-radius: 8px;
    }

    .skincare-inline-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    #studioSkincarePanel .skincare-upload-groups {
      grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
      gap: 10px;
      margin-top: 0;
    }

    #studioSkincarePanel .skincare-upload-card,
    #studioSkincarePanel .skincare-role-item,
    #studioSkincarePanel .skincare-copy-summary-card,
    #studioSkincarePanel .skincare-fact-row,
    #studioSkincarePanel .skincare-copy-slot,
    #studioSkincarePanel .skincare-style-card,
    #studioSkincarePanel .skincare-model-card,
    #studioSkincarePanel .skincare-slot-lock-card {
      border-radius: 8px;
      background: #fff;
      box-shadow: none;
    }

    #studioSkincarePanel .skincare-upload-card {
      border-color: #dde6e0;
      padding: 10px;
    }

    #studioSkincarePanel .skincare-upload-card label {
      min-height: 108px;
      border-color: #c9ddd5;
      border-radius: 8px;
      background: #f9fbf8;
      padding: 11px;
    }

    #studioSkincarePanel .skincare-upload-card strong {
      align-items: flex-start;
      font-size: 12px;
      line-height: 1.25;
    }

    #studioSkincarePanel .skincare-upload-card small,
    #studioSkincarePanel .skincare-upload-card p {
      font-size: 10.5px;
      line-height: 1.42;
    }

    #studioSkincarePanel .skincare-role-board {
      grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
      max-height: 340px;
      gap: 8px;
      margin-top: 12px;
    }

    #studioSkincarePanel .skincare-platform-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
    }

    #studioSkincarePanel .field {
      gap: 6px;
    }

    #studioSkincarePanel .control {
      min-height: 42px;
      border-color: #d7d8cf;
      border-radius: 8px;
      background: #fff;
      font-size: 13px;
    }

    #studioSkincarePanel textarea.control {
      min-height: 92px;
      resize: vertical;
    }

    #studioSkincarePanel .skincare-style-grid {
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 10px;
    }

    #studioSkincarePanel .skincare-style-card {
      min-height: 86px;
      border-color: #dde6e0;
      padding: 12px;
      text-align: left;
    }

    #studioSkincarePanel .skincare-style-card.is-selected {
      border-color: var(--deep-green);
      background: #f2faf7;
    }

    #studioSkincarePanel .skincare-model-card.is-recommended {
      border-color: #9bc7bd;
      background: #f5fbf8;
    }

    #studioSkincareModelRecommendation,
    #studioSkincarePackageSummary,
    #studioSkincareStyleRecommendations {
      display: grid;
      gap: 10px;
    }

    #studioSkincareGenerateBtn,
    #studioSkincarePauseBtn {
      width: 100%;
      min-height: 48px;
      justify-content: center;
      border-radius: 8px;
      font-size: 14px;
    }

    #studioSkincarePanel .studio-empty-state {
      border-radius: 8px;
      background: #f8faf7;
      padding: 18px;
      color: #5c655f;
      text-align: left;
    }

    .scene-preset-row {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .scene-preset-row button {
      cursor: pointer;
      transition: background .16s ease, border-color .16s ease, color .16s ease;
    }

    .scene-preset-row button:hover {
      border-color: var(--accent-line);
      background: var(--accent-soft);
      color: var(--accent-strong);
    }

    .studio-policy-note,
    .studio-confirm-check {
      display: flex;
      align-items: flex-start;
      gap: 9px;
      border: 1px solid var(--accent-line);
      border-radius: 12px;
      background: var(--accent-soft);
      color: #245d56;
      padding: 10px;
      font-size: 12px;
      font-weight: 760;
      line-height: 1.65;
    }

    .studio-policy-note.is-warm {
      border-color: var(--attention-line);
      background: var(--attention-soft);
      color: #765314;
    }

    .studio-confirm-check {
      cursor: pointer;
    }

    .studio-confirm-check input {
      margin-top: 3px;
      accent-color: var(--accent);
    }

    .studio-result-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      gap: 14px;
      margin-top: 14px;
    }

    .studio-result-section-note {
      grid-column: 1 / -1;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      border: 1px solid rgba(31, 58, 51, .14);
      border-radius: 14px;
      background:
        linear-gradient(135deg, rgba(251, 250, 246, .72), rgba(255, 253, 248, .94)),
        #fffdf8;
      color: #42504b;
      padding: 12px 13px;
      font-size: 12px;
      font-weight: 800;
      line-height: 1.55;
    }

    .studio-result-section-note strong {
      color: var(--deep-green);
      font-size: 12px;
      font-weight: 950;
    }

    .studio-result-section-note span {
      min-width: 0;
      overflow-wrap: anywhere;
    }

    .studio-result-actions {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      margin-top: 4px;
    }

    .studio-download-btn {
      border-color: rgba(31, 58, 51, .38) !important;
      background:
        linear-gradient(180deg, rgba(251, 250, 246, .98), rgba(226, 207, 160, .72)) !important;
      color: var(--deep-green) !important;
      box-shadow: 0 10px 22px rgba(31, 58, 51, .12);
    }

    .studio-result-card.is-error {
      border-color: var(--danger-line);
      background: var(--danger-soft);
      padding: 12px;
    }

    .studio-error-guidance {
      display: grid;
      gap: 6px;
      margin-top: 6px;
      color: #7f1d1d;
      font-size: 11px;
      font-weight: 800;
      line-height: 1.55;
    }

    .studio-error-guidance span {
      overflow-wrap: anywhere;
    }

    .studio-error-guidance span:first-child {
      color: #991b1b;
      font-size: 12px;
      font-weight: 950;
    }

    .studio-empty-state {
      border: 1px dashed #d8d3c8;
      border-radius: 14px;
      background: #faf8f1;
      color: #706b61;
      padding: 18px;
      font-size: 13px;
      font-weight: 800;
      text-align: center;
    }

    .replicate-roadmap {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 16px;
      margin-top: 18px;
    }

    .replicate-roadmap article span {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 38px;
      height: 38px;
      border-radius: 14px;
      background: var(--accent-soft);
      color: var(--accent-strong);
      font-size: 12px;
      font-weight: 950;
      margin-bottom: 18px;
    }

    .replicate-workspace {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(360px, 520px);
      gap: clamp(18px, 1.8vw, 28px);
      max-width: 1560px;
      margin: 16px auto 0;
      align-items: start;
    }

    .replicate-sidebar-stack {
      display: grid;
      gap: 12px;
      margin-top: 16px;
    }

    .replicate-side-card {
      position: relative;
      overflow: hidden;
      border: 1px solid rgba(226, 207, 160, .16);
      border-radius: 16px;
      background:
        linear-gradient(145deg, rgba(31, 58, 51, .14), rgba(255, 255, 255, .035)),
        rgba(2, 14, 13, .42);
      color: rgba(226, 232, 240, .9);
      padding: 14px;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
    }

    .replicate-side-card::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background:
        linear-gradient(90deg, rgba(226, 207, 160, .08), transparent 42%),
        linear-gradient(180deg, rgba(255, 255, 255, .045), transparent 34%);
    }

    .replicate-side-title,
    .replicate-flow-steps,
    .replicate-side-stats,
    .replicate-download-groups,
    .replicate-side-card p {
      position: relative;
      z-index: 1;
    }

    .replicate-side-title {
      display: flex;
      align-items: center;
      gap: 8px;
      color: #99f6e4;
      font-size: 12px;
      font-weight: 950;
      letter-spacing: .04em;
      text-transform: uppercase;
    }

    .replicate-side-card p {
      margin: 10px 0 0;
      color: rgba(203, 213, 225, .78);
      font-size: 12px;
      font-weight: 720;
      line-height: 1.65;
    }

    .replicate-flow-steps {
      display: grid;
      gap: 10px;
      margin: 12px 0 0;
      padding: 0;
      list-style: none;
    }

    .replicate-flow-steps li {
      display: grid;
      grid-template-columns: 30px minmax(0, 1fr);
      gap: 10px;
      align-items: center;
      min-height: 48px;
    }

    .replicate-flow-steps li > span {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      border: 1px solid rgba(226, 207, 160, .26);
      border-radius: 10px;
      background: rgba(201, 168, 106, .13);
      color: var(--gold-soft);
      font-size: 11px;
      font-weight: 950;
    }

    .replicate-flow-steps strong {
      display: block;
      color: var(--ivory-warm);
      font-size: 12px;
      font-weight: 950;
      line-height: 1.25;
    }

    .replicate-flow-steps small {
      display: block;
      margin-top: 3px;
      color: rgba(203, 213, 225, .66);
      font-size: 10.5px;
      font-weight: 720;
      line-height: 1.35;
    }

    .replicate-side-stats {
      display: grid;
      gap: 8px;
      margin-top: 12px;
    }

    .replicate-stat-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 8px;
      align-items: center;
      border: 1px solid rgba(226, 207, 160, .11);
      border-radius: 12px;
      background: rgba(255, 255, 255, .045);
      padding: 9px 10px;
    }

    .replicate-stat-row span {
      color: rgba(226, 232, 240, .76);
      font-size: 11px;
      font-weight: 820;
      line-height: 1.3;
    }

    .replicate-stat-row strong {
      color: var(--gold-soft);
      font-size: 12px;
      font-weight: 950;
      white-space: nowrap;
    }

    .replicate-download-groups {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
      margin-top: 12px;
    }

    .replicate-download-groups span {
      border: 1px solid rgba(226, 207, 160, .2);
      border-radius: 999px;
      background: rgba(226, 207, 160, .08);
      color: rgba(224, 252, 255, .9);
      padding: 6px 8px;
      font-size: 10.5px;
      font-weight: 860;
      line-height: 1;
    }

    .replicate-sidebar-model-panel {
      padding: 14px;
      background:
        linear-gradient(150deg, rgba(8, 47, 42, .82), rgba(2, 14, 13, .52)),
        rgba(2, 14, 13, .5);
    }

    .replicate-sidebar-model-head {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 10px;
      min-width: 0;
    }

    .replicate-sidebar-model-head h3 {
      margin: 0;
      color: var(--deep-green-soft);
      font-size: 16px;
      font-weight: 950;
      line-height: 1.18;
    }

    .replicate-sidebar-model-head p {
      margin: 5px 0 0;
      color: rgba(203, 213, 225, .74);
      font-size: 11px;
      font-weight: 760;
      line-height: 1.55;
    }

    .replicate-sidebar-model-selected {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 58px minmax(0, 1fr);
      gap: 10px;
      align-items: center;
      border: 1px solid rgba(226, 207, 160, .18);
      border-radius: 14px;
      background: rgba(255, 255, 255, .055);
      padding: 9px;
      margin-top: 12px;
    }

    .replicate-sidebar-model-selected img,
    .replicate-sidebar-model-selected .model-placeholder {
      width: 58px;
      height: 58px;
      border-radius: 12px;
      object-fit: cover;
      background: rgba(226, 207, 160, .09);
      border: 1px solid rgba(226, 207, 160, .2);
    }

    .replicate-sidebar-model-selected strong {
      display: block;
      color: var(--ivory-warm);
      font-size: 12px;
      font-weight: 950;
      line-height: 1.3;
    }

    .replicate-sidebar-model-selected span {
      display: block;
      margin-top: 3px;
      color: rgba(203, 213, 225, .72);
      font-size: 10.5px;
      font-weight: 760;
      line-height: 1.35;
    }

    .replicate-model-advanced {
      position: relative;
      z-index: 1;
      margin-top: 12px;
      border: 1px solid rgba(226, 207, 160, .16);
      border-radius: 14px;
      background: rgba(255, 255, 255, .035);
      overflow: hidden;
    }

    .replicate-model-advanced summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      cursor: pointer;
      list-style: none;
      color: var(--gold-soft);
      padding: 10px 11px;
      font-size: 11px;
      font-weight: 950;
      line-height: 1;
    }

    .replicate-model-advanced summary::-webkit-details-marker {
      display: none;
    }

    .replicate-model-advanced summary::after {
      content: "+";
      color: rgba(203, 213, 225, .72);
      font-size: 15px;
      line-height: 1;
    }

    .replicate-model-advanced[open] summary::after {
      content: "-";
    }

    .replicate-model-advanced .replicate-model-filter-bar {
      padding: 0 10px 10px;
      margin: 0;
    }

    .replicate-sidebar-model-panel .replicate-model-filter-row {
      gap: 6px;
    }

    .replicate-sidebar-model-panel .replicate-model-filter-row > span {
      width: 100%;
      color: rgba(226, 232, 240, .78);
      font-size: 10px;
    }

    .replicate-sidebar-model-panel .replicate-model-filter-row button {
      border-color: rgba(226, 232, 240, .18);
      background: rgba(255, 255, 255, .06);
      color: rgba(226, 232, 240, .82);
      padding: 5px 7px;
      font-size: 9.5px;
    }

    .replicate-sidebar-model-panel .replicate-model-filter-row button.is-active {
      border-color: rgba(226, 207, 160, .48);
      background: rgba(201, 168, 106, .18);
      color: var(--gold-soft);
    }

    .replicate-sidebar-model-panel .replicate-model-grid {
      position: relative;
      z-index: 1;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      max-height: 520px;
      overflow: auto;
      padding-right: 2px;
      margin-top: 12px;
    }

    .replicate-sidebar-model-panel .replicate-model-card {
      border-color: rgba(226, 232, 240, .14);
      border-radius: 14px;
      background: rgba(255, 255, 255, .055);
      color: var(--ivory-warm);
      padding: 8px;
      box-shadow: none;
    }

    .replicate-sidebar-model-panel .replicate-model-card:hover,
    .replicate-sidebar-model-panel .replicate-model-card.is-selected {
      border-color: rgba(226, 207, 160, .55);
      background: rgba(201, 168, 106, .14);
    }

    .replicate-sidebar-model-panel .replicate-model-visual {
      border-radius: 12px;
      background:
        linear-gradient(140deg, rgba(201, 168, 106, .16), rgba(226, 207, 160, .08)),
        rgba(2, 14, 13, .4);
      aspect-ratio: 1 / 1;
    }

    .replicate-sidebar-model-panel .replicate-model-card strong {
      color: var(--ivory-warm);
      font-size: 10.5px;
    }

    .replicate-sidebar-model-panel .replicate-model-card small,
    .replicate-sidebar-model-panel .replicate-model-tags {
      color: rgba(203, 213, 225, .66);
      font-size: 9.5px;
    }

    .replicate-sidebar-model-panel .replicate-model-tags {
      color: #99f6e4;
    }

    .replicate-sidebar-model-panel .replicate-model-meta span {
      border-color: rgba(226, 207, 160, .25);
      background: rgba(201, 168, 106, .12);
      color: var(--gold-soft);
      font-size: 9px;
    }

    .replicate-sidebar-model-panel .replicate-model-card.is-selected {
      box-shadow:
        0 0 0 1px rgba(226, 207, 160, .26),
        0 18px 38px rgba(5, 46, 41, .22);
    }

    .replicate-sidebar-model-panel .replicate-model-card.is-selected::after {
      content: none;
    }

    .replicate-sidebar-model-panel .replicate-model-footer {
      position: relative;
      z-index: 1;
      margin-top: 12px;
      border-color: rgba(226, 207, 160, .16);
      background:
        linear-gradient(135deg, rgba(201, 168, 106, .13), rgba(226, 207, 160, .045)),
        rgba(255, 255, 255, .04);
      color: rgba(203, 213, 225, .72);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
    }

    .replicate-sidebar-model-panel .replicate-model-count-chip {
      color: var(--gold-soft);
    }

    .replicate-sidebar-model-panel .replicate-model-more-btn {
      border-color: rgba(226, 207, 160, .28);
      background: rgba(3, 34, 31, .58);
      color: var(--gold-soft);
    }

    .replicate-sidebar-model-panel .replicate-model-more-btn:hover {
      border-color: rgba(226, 207, 160, .54);
      background: rgba(201, 168, 106, .18);
    }

    .replicate-side-details {
      position: relative;
      z-index: 1;
      border: 1px solid rgba(226, 207, 160, .11);
      border-radius: 14px;
      background: rgba(255, 255, 255, .035);
      overflow: hidden;
    }

    .replicate-side-details + .replicate-side-details {
      margin-top: 10px;
    }

    .replicate-side-details summary {
      cursor: pointer;
      list-style: none;
      color: var(--gold-soft);
      padding: 10px 11px;
      font-size: 11px;
      font-weight: 950;
    }

    .replicate-side-details summary::-webkit-details-marker {
      display: none;
    }

    .replicate-side-details-inner {
      padding: 0 11px 11px;
    }

    .replicate-panel,
    .replicate-output-panel {
      border: 1px solid #ded8cb;
      border-radius: 18px;
      background: #fffdf8;
      box-shadow: var(--shadow-md);
      padding: 20px;
    }

    .replicate-panel-head,
    .replicate-output-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 16px;
    }

    .replicate-panel-head h2,
    .replicate-output-head h2 {
      margin: 0;
      color: #1c1b17;
      font-size: 21px;
      line-height: 1.2;
      font-weight: 950;
      letter-spacing: 0;
    }

    .replicate-panel-head p,
    .replicate-output-head p {
      margin: 5px 0 0;
      color: #625e54;
      font-size: 13px;
      font-weight: 720;
      line-height: 1.65;
    }

    .replicate-form-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }

    .replicate-form-grid .field.is-wide,
    .replicate-upload-row,
    .replicate-policy-box,
    .replicate-actions,
    .replicate-output-actions,
    .replicate-token-grid,
    .replicate-screen-list,
    .replicate-prompt-box,
    .replicate-subsection.is-wide,
    .replicate-link-box.is-wide,
    .replicate-asset-workbench.is-wide,
    .replicate-advanced.is-wide,
    .replicate-model-library.is-wide {
      grid-column: 1 / -1;
    }

    .replicate-subsection,
    .replicate-link-box,
    .replicate-asset-workbench,
    .replicate-model-library {
      border: 1px solid #d8eee9;
      border-radius: 16px;
      background:
        linear-gradient(180deg, rgba(251, 250, 246, .78), rgba(255, 253, 248, .96));
      padding: 14px;
    }

    #replicateInlineModelPanel {
      background:
        linear-gradient(180deg, rgba(251, 250, 246, .62), rgba(255, 253, 248, .98));
    }

    #replicateInlineModelPanel .replicate-sidebar-model-selected {
      margin-top: 0;
      margin-bottom: 12px;
      background: rgba(255, 255, 255, .74);
      border-color: rgba(31, 58, 51, .16);
      color: #193d38;
    }

    #replicateInlineModelPanel .replicate-sidebar-model-selected strong,
    #replicateInlineModelPanel .model-library-selected-copy strong {
      color: #193d38;
    }

    #replicateInlineModelPanel .replicate-sidebar-model-selected span,
    #replicateInlineModelPanel .model-library-selected-copy span {
      color: #68766f;
    }

    .replicate-inline-model-grid {
      grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
      max-height: 620px;
      overflow: auto;
      padding-right: 3px;
    }

    .replicate-subsection,
    .replicate-link-box {
      position: relative;
      overflow: hidden;
    }

    .replicate-subsection::after,
    .replicate-link-box::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background:
        radial-gradient(circle at 8% 0%, rgba(201, 168, 106, .12), transparent 28%),
        linear-gradient(135deg, rgba(255, 255, 255, .56), transparent 42%);
      opacity: .86;
    }

    .replicate-subsection > *,
    .replicate-link-box > * {
      position: relative;
      z-index: 1;
    }

    .replicate-subsection-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 12px;
    }

    .replicate-subsection-head h3 {
      margin: 0;
      color: #193d38;
      font-size: 15px;
      font-weight: 950;
      line-height: 1.3;
    }

    .replicate-subsection-head p {
      margin: 4px 0 0;
      color: #68766f;
      font-size: 12px;
      font-weight: 760;
      line-height: 1.55;
    }

    .replicate-asset-actions {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: 8px;
    }

    .replicate-asset-actions .replicate-reset-btn {
      color: #b91c1c;
      border-color: rgba(185, 28, 28, .35);
      background: rgba(254, 226, 226, .6);
    }

    .replicate-asset-actions .replicate-reset-btn:hover {
      background: rgba(254, 202, 202, .9);
      border-color: rgba(185, 28, 28, .55);
    }

    @keyframes replicateProxyPreviewShimmer {
      0% { background-position: 0% 0%; }
      100% { background-position: 220% 0%; }
    }

    .replicate-asset-thumb img.is-replicate-proxy-loading {
      background:
        linear-gradient(110deg,
          rgba(201, 168, 106, .12) 12%,
          rgba(255, 253, 248, .85) 38%,
          rgba(201, 168, 106, .18) 58%,
          rgba(255, 253, 248, .85) 82%,
          rgba(201, 168, 106, .12)) 0% 0% / 220% 100% no-repeat;
      animation: replicateProxyPreviewShimmer 1.6s linear infinite;
    }

    .replicate-type-toggle {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
    }

    .replicate-type-toggle label {
      cursor: pointer;
    }

    .replicate-type-toggle input {
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }

    .replicate-type-toggle span {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      min-height: 42px;
      border: 1px solid #d6d0c3;
      border-radius: 12px;
      background: #fffdf8;
      color: #3e3a34;
      padding: 9px 10px;
      font-size: 12px;
      font-weight: 900;
      line-height: 1.2;
      text-align: center;
      transition: border-color .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease;
    }

    .replicate-type-toggle input:checked + span {
      border-color: rgba(31, 58, 51, .55);
      background: var(--accent-soft);
      color: var(--deep-green);
      box-shadow: inset 0 0 0 1px rgba(31, 58, 51, .12);
    }

    .replicate-workflow-toggle {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    .replicate-workflow-toggle label {
      min-width: 0;
      cursor: pointer;
    }

    .replicate-workflow-toggle input {
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }

    .replicate-workflow-toggle span {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: 8px 10px;
      min-height: 136px;
      border: 1px solid #d6d0c3;
      border-radius: 14px;
      background: rgba(255, 253, 248, .9);
      color: #3e3a34;
      padding: 14px;
      transition: border-color .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease;
    }

    .replicate-workflow-toggle span > i {
      grid-row: span 2;
      margin-top: 2px;
      color: var(--deep-green);
    }

    .replicate-workflow-toggle strong {
      min-width: 0;
      color: #193d38;
      font-size: 13px;
      font-weight: 950;
      line-height: 1.35;
    }

    .replicate-workflow-toggle small {
      min-width: 0;
      color: #68766f;
      font-size: 11px;
      font-weight: 760;
      line-height: 1.55;
    }

    .replicate-workflow-toggle input:checked + span {
      border-color: rgba(31, 58, 51, .55);
      background:
        radial-gradient(circle at 14% 10%, rgba(201, 168, 106, .16), transparent 30%),
        var(--accent-soft);
      box-shadow:
        inset 0 0 0 1px rgba(31, 58, 51, .12),
        0 16px 34px rgba(31, 58, 51, .11);
      transform: translateY(-1px);
    }

    .replicate-upload-card.is-required {
      border-color: rgba(31, 58, 51, .6);
      background:
        radial-gradient(circle at 12% 0%, rgba(201, 168, 106, .14), transparent 34%),
        linear-gradient(180deg, rgba(231, 247, 243, .72), rgba(255, 253, 248, .96));
    }

    .replicate-upload-card.is-optional {
      opacity: .9;
    }

    .replicate-scope-summary {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
      margin-top: 12px;
    }

    .replicate-scope-summary span {
      display: grid;
      gap: 3px;
      border: 1px solid rgba(31, 58, 51, .16);
      border-radius: 13px;
      background: rgba(255, 253, 248, .78);
      color: #5f6f6b;
      padding: 9px 10px;
      font-size: 10.5px;
      font-weight: 850;
      line-height: 1.35;
    }

    .replicate-scope-summary strong {
      color: #143c37;
      font-size: 12px;
      font-weight: 950;
      line-height: 1.25;
    }

    .replicate-canvas-settings {
      display: grid;
      grid-column: 1 / -1;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }

    .replicate-canvas-settings .field {
      min-width: 0;
    }

    .replicate-canvas-settings[data-scope="main"] {
      grid-template-columns: minmax(0, 1fr);
    }

    .replicate-canvas-settings[data-scope="main"] [data-replicate-detail-setting],
    .replicate-canvas-settings[data-scope="detail"] [data-replicate-main-setting] {
      display: none;
    }

    .replicate-canvas-settings[data-scope="detail"] {
      grid-template-columns: minmax(0, 1fr);
    }

    .replicate-link-box {
      display: grid;
      gap: 10px;
    }

    .replicate-link-copy strong {
      display: flex;
      align-items: center;
      gap: 8px;
      color: #193d38;
      font-size: 14px;
      font-weight: 950;
    }

    .replicate-link-copy small,
    .replicate-link-status {
      display: block;
      margin-top: 6px;
      color: #68766f;
      font-size: 11.5px;
      font-weight: 760;
      line-height: 1.6;
    }

    .replicate-link-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 8px;
      align-items: center;
    }

    .replicate-link-status.is-error {
      color: #8c1d18;
    }

    .replicate-link-status.is-ready {
      color: var(--deep-green);
    }

    .replicate-upload-row {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }

    .replicate-upload-card {
      display: grid;
      gap: 10px;
      min-height: 170px;
      border: 1.5px dashed #b8d9d2;
      border-radius: 16px;
      background:
        linear-gradient(180deg, rgba(231, 247, 243, .48), rgba(255, 253, 248, .94));
      padding: 16px;
      cursor: pointer;
      transition: border-color .16s ease, background .16s ease, transform .16s ease;
    }

    .replicate-upload-card:hover {
      border-color: var(--accent);
      background: var(--deep-green-soft);
      transform: translateY(-1px);
    }

    .replicate-upload-card strong {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      color: #1f2d2a;
      font-size: 13px;
      font-weight: 950;
    }

    .replicate-upload-card strong span {
      display: inline-flex;
      align-items: center;
      border: 1px solid rgba(31, 58, 51, .22);
      border-radius: 999px;
      background: rgba(251, 250, 246, .9);
      color: var(--deep-green);
      padding: 5px 7px;
      font-size: 10.5px;
      font-weight: 950;
      white-space: nowrap;
    }

    .replicate-upload-card small {
      color: #6b665d;
      font-size: 11px;
      font-weight: 780;
      line-height: 1.55;
    }

    .replicate-preview-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
      gap: 8px;
    }

    .replicate-preview-card {
      position: relative;
      overflow: hidden;
      border: 1px solid #ded8cb;
      border-radius: 12px;
      background: #fff;
      box-shadow: var(--shadow-sm);
      padding: 0;
      text-align: left;
      cursor: pointer;
    }

    .replicate-preview-thumb {
      display: block;
      width: 100%;
      border: 0;
      background: transparent;
      padding: 0;
      cursor: pointer;
    }

    .replicate-preview-card img {
      display: block;
      width: 100%;
      aspect-ratio: 4 / 3;
      object-fit: cover;
      background: #f4f1ea;
    }

    .replicate-preview-card span {
      display: block;
      padding: 7px;
      color: #5f5a50;
      font-size: 10px;
      font-weight: 850;
      line-height: 1.35;
      overflow-wrap: anywhere;
    }

    .replicate-preview-delete,
    .replicate-asset-delete {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 30px;
      height: 30px;
      border: 1px solid rgba(127, 29, 29, .18);
      border-radius: 999px;
      background: rgba(255, 255, 255, .94);
      color: #8c1d18;
      cursor: pointer;
      box-shadow: 0 10px 24px rgba(31, 29, 24, .15);
      transition: transform .16s ease, background .16s ease, border-color .16s ease, color .16s ease;
      z-index: 3;
    }

    .replicate-preview-delete {
      position: absolute;
      top: 7px;
      right: 7px;
    }

    .replicate-asset-delete {
      position: absolute;
      top: 8px;
      right: 8px;
    }

    .replicate-preview-delete:hover,
    .replicate-preview-delete:focus-visible,
    .replicate-asset-delete:hover,
    .replicate-asset-delete:focus-visible {
      border-color: rgba(185, 28, 28, .5);
      background: #fee2e2;
      color: #7f1d1d;
      outline: 2px solid rgba(248, 113, 113, .28);
      outline-offset: 2px;
      transform: translateY(-1px);
    }

    .replicate-group-tabs {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 12px;
    }

    .replicate-group-tabs button {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border: 1px solid #d6d0c3;
      border-radius: 999px;
      background: #fffdf8;
      color: #5f5a50;
      padding: 7px 9px;
      font-size: 11px;
      font-weight: 900;
      line-height: 1;
      cursor: pointer;
      transition: border-color .16s ease, background .16s ease, color .16s ease;
    }

    .replicate-group-tabs button.is-active {
      border-color: rgba(31, 58, 51, .45);
      background: var(--accent-soft);
      color: var(--deep-green);
    }

    .replicate-asset-board {
      display: grid;
      gap: 12px;
    }

    .replicate-asset-group {
      border: 1px solid #e2ddd3;
      border-radius: 14px;
      background: rgba(255, 255, 255, .74);
      padding: 12px;
    }

    .replicate-asset-group-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 10px;
      color: #322f2a;
      font-size: 12px;
      font-weight: 950;
    }

    .replicate-asset-group-head small {
      color: #766f64;
      font-size: 11px;
      font-weight: 820;
    }

    .replicate-asset-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
      gap: 10px;
    }

    .replicate-asset-card {
      position: relative;
      overflow: hidden;
      border: 1px solid #ded8cb;
      border-radius: 13px;
      background: #fffdf8;
      box-shadow: var(--shadow-sm);
    }

    .replicate-asset-card.is-unselected {
      opacity: .66;
    }

    .replicate-asset-card.is-selected {
      border-color: rgba(31, 58, 51, .5);
      box-shadow:
        0 0 0 1px rgba(31, 58, 51, .1),
        var(--shadow-sm);
    }

    .replicate-asset-card.is-candidate {
      border-color: rgba(180, 126, 38, .35);
      background:
        linear-gradient(180deg, rgba(255, 251, 235, .86), rgba(255, 253, 248, .96));
    }

    .replicate-asset-thumb {
      position: relative;
      overflow: hidden;
      display: block;
      width: 100%;
      border: 0;
      background:
        radial-gradient(circle at 28% 24%, rgba(226, 207, 160, .18), transparent 34%),
        linear-gradient(135deg, rgba(31, 58, 51, .09), rgba(255, 253, 248, .94));
      padding: 0;
      cursor: pointer;
    }

    .replicate-asset-thumb img {
      display: block;
      width: 100%;
      aspect-ratio: 4 / 3;
      object-fit: cover;
      background:
        linear-gradient(135deg, rgba(201, 168, 106, .08), rgba(255, 253, 248, .8));
    }

    .replicate-asset-fallback {
      display: grid;
      place-items: center;
      width: 100%;
      aspect-ratio: 4 / 3;
      padding: 14px;
      color: #53736d;
      font-size: 11px;
      font-weight: 950;
      line-height: 1.45;
      text-align: center;
    }

    .replicate-asset-meta {
      display: grid;
      gap: 7px;
      padding: 9px;
    }

    .replicate-asset-title {
      color: #3d3932;
      font-size: 11px;
      font-weight: 900;
      line-height: 1.35;
      overflow-wrap: anywhere;
    }

    .replicate-asset-quality {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      color: #6b665d;
      font-size: 10px;
      font-weight: 880;
      line-height: 1.25;
    }

    .replicate-asset-quality span {
      border: 1px solid rgba(31, 58, 51, .2);
      border-radius: 999px;
      background: rgba(251, 250, 246, .78);
      padding: 4px 6px;
    }

    .replicate-asset-card.is-candidate .replicate-asset-quality span {
      border-color: rgba(180, 126, 38, .25);
      background: rgba(255, 251, 235, .9);
      color: #7c4a03;
    }

    .replicate-asset-controls {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 6px;
      align-items: center;
    }

    .replicate-asset-controls select {
      min-width: 0;
      border: 1px solid #d6d0c3;
      border-radius: 9px;
      background: #fff;
      color: #38342f;
      padding: 5px 6px;
      font-size: 10.5px;
      font-weight: 850;
    }

    .replicate-asset-check {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      border: 1px solid #d6d0c3;
      border-radius: 9px;
      background: #fff;
      color: #3c3933;
      cursor: pointer;
    }

    .replicate-asset-check input {
      width: 14px;
      height: 14px;
      accent-color: var(--accent);
    }

    .replicate-asset-badge {
      position: absolute;
      top: 8px;
      left: 8px;
      border: 1px solid rgba(31, 58, 51, .32);
      border-radius: 999px;
      background: rgba(251, 250, 246, .94);
      color: var(--deep-green);
      padding: 5px 7px;
      font-size: 10px;
      font-weight: 950;
      line-height: 1;
      box-shadow: 0 6px 18px rgba(31, 58, 51, .1);
    }

    .replicate-asset-select-state {
      position: absolute;
      top: 8px;
      right: 44px;
      border: 1px solid rgba(31, 58, 51, .26);
      border-radius: 999px;
      background: rgba(255, 253, 248, .94);
      color: var(--deep-green);
      padding: 5px 7px;
      font-size: 10px;
      font-weight: 950;
      line-height: 1;
      box-shadow: 0 6px 18px rgba(31, 58, 51, .08);
    }

    .replicate-asset-card.is-unselected .replicate-asset-select-state {
      border-color: rgba(95, 90, 80, .18);
      color: #756f64;
    }

    .replicate-asset-card.is-candidate .replicate-asset-badge {
      border-color: rgba(180, 126, 38, .32);
      background: rgba(255, 251, 235, .96);
      color: #8a4b05;
    }

    .replicate-asset-empty {
      border: 1px dashed #d8d3c8;
      border-radius: 12px;
      background: #faf8f1;
      color: #716a60;
      padding: 14px;
      font-size: 12px;
      font-weight: 800;
      line-height: 1.6;
      text-align: center;
    }

    .replicate-policy-box {
      display: flex;
      gap: 10px;
      align-items: flex-start;
      border: 1px solid var(--attention-line);
      border-radius: 14px;
      background: var(--attention-soft);
      color: #765314;
      padding: 12px;
      font-size: 12px;
      font-weight: 780;
      line-height: 1.65;
    }

    .replicate-policy-box input {
      margin-top: 4px;
      accent-color: var(--deep-green);
    }

    .replicate-model-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
      gap: 10px;
    }

    .replicate-model-filter-bar {
      display: grid;
      gap: 8px;
      margin-bottom: 12px;
    }

    .replicate-model-filter-row {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
      align-items: center;
    }

    .replicate-model-filter-row > span {
      color: #5f5a50;
      font-size: 11px;
      font-weight: 950;
      line-height: 1;
    }

    .replicate-model-filter-row button {
      border: 1px solid #d6d0c3;
      border-radius: 999px;
      background: #fffdf8;
      color: #5f5a50;
      padding: 6px 8px;
      font-size: 10.5px;
      font-weight: 900;
      line-height: 1;
      cursor: pointer;
    }

    .replicate-model-filter-row button.is-active {
      border-color: rgba(31, 58, 51, .48);
      background: var(--accent-soft);
      color: var(--deep-green);
    }

    .replicate-model-card {
      overflow: hidden;
      border: 1px solid #ded8cb;
      border-radius: 14px;
      background: #fffdf8;
      padding: 9px;
      text-align: left;
      box-shadow: var(--shadow-sm);
      cursor: pointer;
      transition: border-color .16s ease, background .16s ease, transform .16s ease;
    }

    .replicate-model-card:hover {
      transform: translateY(-1px);
      border-color: rgba(31, 58, 51, .36);
    }

    .replicate-model-card.is-selected {
      border-color: rgba(31, 58, 51, .64);
      background: var(--accent-soft);
    }

    .replicate-model-card.is-pending {
      border-style: dashed;
    }

    .replicate-model-visual {
      position: relative;
      display: grid;
      place-items: center;
      overflow: hidden;
      border-radius: 11px;
      background:
        linear-gradient(140deg, rgba(31, 58, 51, .12), rgba(226, 207, 160, .08)),
        #f7f4ec;
      aspect-ratio: 4 / 3;
    }

    .replicate-model-visual img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .replicate-model-status {
      position: absolute;
      left: 7px;
      bottom: 7px;
      max-width: calc(100% - 14px);
      border: 1px solid rgba(95, 90, 80, .18);
      border-radius: 999px;
      background: rgba(255, 253, 248, .9);
      color: #6d665b;
      padding: 4px 6px;
      font-size: 9.5px;
      font-weight: 950;
      line-height: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      backdrop-filter: blur(8px);
    }

    .replicate-model-status.is-approved {
      border-color: rgba(31, 58, 51, .3);
      background: rgba(251, 250, 246, .92);
      color: var(--deep-green);
    }

    .replicate-model-status.is-review {
      border-color: rgba(217, 119, 6, .26);
      background: rgba(255, 251, 235, .92);
      color: #92400e;
    }

    .replicate-model-card strong {
      display: block;
      margin-top: 8px;
      color: #243c38;
      font-size: 12px;
      font-weight: 950;
      line-height: 1.3;
    }

    .replicate-model-card small,
    .replicate-model-tags {
      display: block;
      margin-top: 5px;
      color: #6d665b;
      font-size: 10.5px;
      font-weight: 760;
      line-height: 1.45;
    }

    .replicate-model-tags {
      color: var(--deep-green);
      font-weight: 900;
    }

    .replicate-model-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      margin-top: 7px;
    }

    .replicate-model-meta span {
      border: 1px solid rgba(31, 58, 51, .18);
      border-radius: 999px;
      background: rgba(251, 250, 246, .82);
      color: var(--deep-green);
      padding: 4px 6px;
      font-size: 10px;
      font-weight: 950;
      line-height: 1;
    }

    .replicate-model-footer {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      border: 1px solid rgba(31, 58, 51, .18);
      border-radius: 14px;
      background:
        linear-gradient(180deg, rgba(251, 250, 246, .72), rgba(255, 253, 248, .94));
      color: #4d5f58;
      padding: 9px 10px;
      font-size: 11px;
      font-weight: 820;
      line-height: 1.45;
    }

    .replicate-model-count-chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: var(--deep-green);
      font-size: 11px;
      font-weight: 950;
    }

    .replicate-model-more-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      min-height: 30px;
      border: 1px solid rgba(31, 58, 51, .28);
      border-radius: 999px;
      background: rgba(255, 255, 255, .82);
      color: var(--deep-green);
      padding: 6px 9px;
      font-size: 10.5px;
      font-weight: 950;
      line-height: 1;
      cursor: pointer;
      transition: border-color .16s ease, background .16s ease, transform .16s ease;
    }

    .replicate-model-more-btn:hover {
      transform: translateY(-1px);
      border-color: rgba(31, 58, 51, .48);
      background: var(--deep-green-soft);
    }

    .replicate-actions,
    .replicate-output-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
    }

    .replicate-output-actions .btn[disabled],
    .replicate-generated-head .btn[disabled] {
      opacity: .55;
      cursor: not-allowed;
      transform: none;
    }

    .replicate-output-panel {
      align-self: start;
      max-height: calc(100vh - 104px);
      overflow: hidden;
      position: sticky;
      top: 18px;
    }

    .replicate-token-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      margin-bottom: 14px;
    }

    .replicate-token-card {
      border: 1px solid #d8eee9;
      border-radius: 14px;
      background: var(--deep-green-soft);
      padding: 11px;
    }

    .replicate-token-card span {
      display: block;
      color: #5f6f6b;
      font-size: 10px;
      font-weight: 900;
      letter-spacing: .04em;
      text-transform: uppercase;
    }

    .replicate-token-card strong {
      display: block;
      margin-top: 5px;
      color: #123c37;
      font-size: 13px;
      font-weight: 950;
      line-height: 1.35;
    }

    .replicate-validation {
      display: grid;
      gap: 7px;
      border: 1px solid #d8d3c8;
      border-radius: 14px;
      background: #faf8f1;
      padding: 12px;
      margin-bottom: 14px;
      color: #4c4840;
      font-size: 12px;
      font-weight: 780;
      line-height: 1.6;
    }

    .replicate-validation.is-valid {
      border-color: var(--accent-line);
      background: var(--accent-soft);
      color: #245d56;
    }

    .replicate-validation.is-error {
      border-color: var(--danger-line);
      background: var(--danger-soft);
      color: #8c1d18;
    }

    .replicate-summary-strip {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
      margin-bottom: 14px;
    }

    .replicate-summary-chip {
      border: 1px solid #d8eee9;
      border-radius: 14px;
      background: var(--deep-green-soft);
      color: #245d56;
      padding: 10px;
      font-size: 11px;
      font-weight: 860;
      line-height: 1.45;
    }

    .replicate-summary-chip strong {
      display: block;
      margin-top: 3px;
      color: #123c37;
      font-size: 13px;
      font-weight: 950;
    }

    .replicate-screen-list {
      display: grid;
      gap: 10px;
      max-height: 440px;
      overflow: auto;
      padding-right: 4px;
    }

    .replicate-screen-card,
    .replicate-prompt-box {
      border: 1px solid #ded8cb;
      border-radius: 14px;
      background: #fff;
      box-shadow: var(--shadow-sm);
      padding: 12px;
    }

    .replicate-screen-card-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 8px;
    }

    .replicate-screen-card h3 {
      margin: 0;
      color: #1d1c19;
      font-size: 14px;
      font-weight: 950;
      line-height: 1.35;
    }

    .replicate-screen-card small {
      display: block;
      margin-top: 3px;
      color: #756f64;
      font-size: 11px;
      font-weight: 780;
      line-height: 1.45;
    }

    .replicate-screen-card pre,
    .replicate-prompt-box pre {
      max-height: 210px;
      overflow: auto;
      margin: 0;
      border-radius: 12px;
      background: #111815;
      color: #d7fff5;
      padding: 12px;
      font-size: 11px;
      line-height: 1.6;
      white-space: pre-wrap;
      word-break: break-word;
    }

    .replicate-prompt-box {
      margin-top: 12px;
    }

    .replicate-prompt-box.is-muted {
      background: #faf8f1;
    }

    .replicate-output-note {
      border: 1px solid rgba(31, 58, 51, .18);
      border-radius: 14px;
      background:
        linear-gradient(135deg, rgba(251, 250, 246, .86), rgba(255, 253, 248, .94));
      color: #245d56;
      padding: 12px;
      margin-bottom: 12px;
      font-size: 12px;
      font-weight: 820;
      line-height: 1.65;
    }

    .replicate-output-grid {
      display: grid;
      gap: 12px;
    }

    .replicate-generated-section {
      display: grid;
      gap: 12px;
      margin-bottom: 14px;
    }

    .replicate-generated-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      border: 1px solid rgba(31, 58, 51, .2);
      border-radius: 14px;
      background: var(--deep-green-soft);
      padding: 12px;
      color: #245d56;
    }

    .replicate-generated-head strong {
      display: block;
      color: #123c37;
      font-size: 14px;
      font-weight: 950;
      line-height: 1.3;
    }

    .replicate-generated-head span {
      display: block;
      margin-top: 3px;
      color: #5f6f6b;
      font-size: 11px;
      font-weight: 820;
      line-height: 1.45;
    }

    .replicate-generated-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }

    .replicate-generated-card {
      overflow: hidden;
      border: 1px solid #ded8cb;
      border-radius: 14px;
      background: #fff;
      box-shadow: var(--shadow-sm);
    }

    .replicate-generated-media {
      position: relative;
      display: grid;
      place-items: center;
      width: 100%;
      min-height: 210px;
      border: 0;
      background:
        radial-gradient(circle at 20% 15%, rgba(201, 168, 106, .16), transparent 38%),
        linear-gradient(135deg, rgba(31, 58, 51, .08), rgba(250, 248, 241, .98));
      padding: 0;
      cursor: pointer;
    }

    .replicate-generated-media img {
      display: block;
      width: 100%;
      height: 100%;
      min-height: 210px;
      object-fit: contain;
      background: #faf8f1;
    }

    /* F4·S4:复刻结果图缓冲期显示骨架 shimmer,而不是空白纯白闪一下(真机『慢慢缓冲出图很奇怪』)。
       图片始终可见——onload 移除 is-loading;即使 onload 意外不触发,已加载的图片也会盖住骨架,不会隐藏图。 */
    .replicate-generated-media.is-loading {
      background:
        linear-gradient(135deg, rgba(31, 58, 51, .08), rgba(250, 248, 241, .98)),
        linear-gradient(100deg, transparent 22%, rgba(201, 168, 106, .28) 50%, transparent 78%);
      background-size: 100% 100%, 220% 100%;
      background-repeat: no-repeat;
      animation: replicateMediaShimmer 1.15s ease-in-out infinite;
    }
    .replicate-generated-media.is-loading img { background: transparent; }
    @keyframes replicateMediaShimmer {
      0% { background-position: 0 0, 200% 0; }
      100% { background-position: 0 0, -100% 0; }
    }
    @media (prefers-reduced-motion: reduce) {
      .replicate-generated-media.is-loading { animation: none; }
    }

    .replicate-generated-state {
      display: grid;
      place-items: center;
      gap: 8px;
      min-height: 210px;
      padding: 18px;
      color: #245d56;
      text-align: center;
      font-size: 12px;
      font-weight: 850;
      line-height: 1.55;
    }

    .replicate-generated-state.is-error {
      color: #8c1d18;
      background: #fff1f1;
    }

    .replicate-generated-body {
      display: grid;
      gap: 8px;
      padding: 11px;
    }

    .replicate-generated-title {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 8px;
    }

    .replicate-generated-title strong {
      color: #1d1c19;
      font-size: 13px;
      font-weight: 950;
      line-height: 1.35;
    }

    .replicate-generated-title span {
      flex: 0 0 auto;
      border-radius: 999px;
      background: var(--deep-green-soft);
      color: var(--deep-green);
      padding: 5px 7px;
      font-size: 10px;
      font-weight: 950;
      line-height: 1;
      white-space: nowrap;
    }

    .replicate-generated-body small {
      color: #6b665d;
      font-size: 11px;
      font-weight: 780;
      line-height: 1.45;
    }

    .replicate-generated-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
    }

    .replicate-plan-details {
      margin-top: 14px;
      border: 1px solid #ded8cb;
      border-radius: 14px;
      background: #fff;
      box-shadow: var(--shadow-sm);
      overflow: hidden;
    }

    .replicate-plan-details > summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 12px;
      color: #193d38;
      font-size: 13px;
      font-weight: 950;
      cursor: pointer;
      list-style: none;
    }

    .replicate-plan-details > summary::-webkit-details-marker {
      display: none;
    }

    .replicate-plan-details > summary::after {
      content: "+";
      color: var(--deep-green);
      font-size: 16px;
      font-weight: 950;
    }

    .replicate-plan-details[open] > summary::after {
      content: "-";
    }

    .replicate-plan-details-body {
      padding: 0 12px 12px;
    }

    .replicate-download-plan {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    .replicate-download-plan div {
      border: 1px solid #d8eee9;
      border-radius: 13px;
      background: var(--deep-green-soft);
      color: #245d56;
      padding: 10px;
      font-size: 12px;
      font-weight: 820;
      line-height: 1.55;
    }

    .replicate-download-plan strong {
      display: block;
      color: #123c37;
      font-size: 13px;
      font-weight: 950;
      margin-bottom: 4px;
    }

    .replicate-empty {
      border: 1px dashed #d8d3c8;
      border-radius: 14px;
      background: #faf8f1;
      color: #706b61;
      padding: 18px;
      font-size: 13px;
      font-weight: 800;
      line-height: 1.7;
      text-align: center;
    }

    #replicateResultRoot {
      max-height: calc(100vh - 242px);
      overflow: auto;
      padding-right: 4px;
    }

    @keyframes viewRise {
      from {
        opacity: 0;
        transform: translateY(8px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes hubFloat {
      0%, 100% {
        transform: translate3d(0, 0, 0) scale(1);
      }
      50% {
        transform: translate3d(10px, 14px, 0) scale(1.03);
      }
    }

    @keyframes aiCoreBreathe {
      0%, 100% {
        opacity: .68;
        transform: scale(.96);
      }
      50% {
        opacity: .98;
        transform: scale(1.04);
      }
    }

    @keyframes aiOrbitSpin {
      to {
        rotate: 360deg;
      }
    }

    @keyframes aiOrbitReverse {
      to {
        rotate: -360deg;
      }
    }

    @keyframes aiChipPulse {
      0%, 100% {
        transform: translateY(0);
        box-shadow:
          0 24px 70px rgba(0, 0, 0, .24),
          0 0 0 8px rgba(226, 207, 160, .035),
          0 0 44px rgba(226, 207, 160, .16),
          inset 0 1px 0 rgba(255, 255, 255, .14);
      }
      50% {
        transform: translateY(-3px);
        box-shadow:
          0 28px 76px rgba(0, 0, 0, .28),
          0 0 0 10px rgba(226, 207, 160, .05),
          0 0 56px rgba(226, 207, 160, .2),
          inset 0 1px 0 rgba(255, 255, 255, .14);
      }
    }

    @keyframes aiScan {
      0%, 36% {
        transform: translateX(-68%) rotate(-18deg);
        opacity: 0;
      }
      48% {
        opacity: .86;
      }
      70%, 100% {
        transform: translateX(68%) rotate(-18deg);
        opacity: 0;
      }
    }

    @keyframes aiSpark {
      0%, 100% {
        opacity: .42;
        transform: rotate(45deg) scale(.82);
      }
      50% {
        opacity: 1;
        transform: rotate(45deg) scale(1.12);
      }
    }

    @keyframes aiDataFlow {
      to {
        offset-distance: 100%;
      }
    }

    @keyframes mockPulse {
      0%, 100% {
        transform: translateX(-16%);
        opacity: .72;
      }
      50% {
        transform: translateX(18%);
        opacity: 1;
      }
    }

    .panel {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow-md);
    }

    .hero-panel {
      border-color: #d8d2c4;
      background: #fffdf8;
      box-shadow: 0 18px 42px rgba(32, 29, 24, .07);
    }

    .hero-kicker {
      display: inline-flex;
      width: fit-content;
      align-items: center;
      gap: 7px;
      border-radius: 999px;
      background: #e7f5f1;
      color: var(--deep-green);
      padding: 5px 9px;
      font-size: 11px;
      font-weight: 950;
      text-transform: uppercase;
    }

    .hero-title {
      margin-top: 10px;
      font-size: 32px;
      line-height: 1.08;
      font-weight: 950;
      color: #171717;
    }

    @media (max-width: 520px) {
      .hero-title {
        font-size: 26px;
      }
    }

    .hero-copy {
      margin-top: 10px;
      max-width: 720px;
      color: #5f5b52;
      font-size: 14px;
      font-weight: 650;
      line-height: 1.75;
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: center;
      justify-content: flex-end;
    }

    .quick-metric-grid {
      display: none;
      gap: 10px;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }

    .quick-metric {
      border: 1px solid #e3ded4;
      border-radius: 8px;
      background: #faf8f2;
      padding: 11px 12px;
      min-width: 0;
    }

    .quick-metric .metric-label {
      display: flex;
      align-items: center;
      gap: 6px;
      color: #706b61;
      font-size: 11px;
      font-weight: 850;
    }

    .quick-metric .metric-value {
      margin-top: 5px;
      color: #171717;
      font-size: 15px;
      font-weight: 950;
      line-height: 1.25;
      overflow-wrap: anywhere;
    }

    .workbench-next-action {
      position: sticky;
      bottom: 16px;
      z-index: 12;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      gap: 12px;
      align-items: center;
      margin-top: 14px;
      border: 1px solid rgba(31, 58, 51, .2);
      border-radius: 8px;
      background:
        linear-gradient(135deg, rgba(251, 250, 246, .98) 0%, rgba(255, 253, 248, .98) 100%);
      padding: 12px;
      box-shadow: 0 14px 30px rgba(31, 58, 51, .12), 0 4px 12px rgba(28, 25, 23, .08);
      overflow: hidden;
    }

    .workbench-next-action::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(105deg, transparent 0%, rgba(201, 168, 106, .12) 44%, transparent 72%);
      transform: translateX(-110%);
      animation: prepStageShimmer 3.6s ease-in-out infinite;
      pointer-events: none;
    }

    .workbench-next-action-icon {
      position: relative;
      display: grid;
      width: 38px;
      height: 38px;
      place-items: center;
      border-radius: 8px;
      background: var(--deep-green);
      color: #fff;
      box-shadow: 0 10px 20px rgba(31, 58, 51, .18);
    }

    .workbench-next-action-icon::after {
      content: "";
      position: absolute;
      inset: -5px;
      border-radius: 12px;
      border: 1px solid rgba(201, 168, 106, .24);
      animation: flowPulse 2.2s ease-in-out infinite;
      pointer-events: none;
    }

    .workbench-next-action-copy {
      min-width: 0;
    }

    .workbench-next-action-copy strong {
      display: block;
      color: #1c1917;
      font-size: 13px;
      font-weight: 950;
      line-height: 1.35;
    }

    .workbench-next-action-copy small {
      display: block;
      margin-top: 3px;
      color: #69645b;
      font-size: 11.5px;
      font-weight: 750;
      line-height: 1.45;
      overflow-wrap: anywhere;
    }

    .workbench-next-action .btn {
      white-space: nowrap;
      position: relative;
      z-index: 1;
    }

    .workbench-next-action.is-disabled {
      opacity: .74;
    }

    .workbench-next-action.is-disabled::after,
    .workbench-next-action.is-disabled .workbench-next-action-icon::after {
      animation: none;
    }

    @media (max-width: 680px) {
      .workbench-next-action {
        grid-template-columns: minmax(0, 1fr);
      }

      .workbench-next-action .btn {
        width: fit-content;
      }
    }

    @keyframes flowPulse {
      0%, 100% { opacity: .28; transform: scale(.94); }
      50% { opacity: .72; transform: scale(1); }
    }

    .sidebar .panel {
      background: rgba(27, 33, 29, .96);
      border-color: var(--night-line);
      box-shadow: none;
    }

    #appAuthMount {
      display: none !important;
    }

    body.workbench-mode #appShell #appAuthMount,
    body.workbench-mode #appShell #authPanel,
    body.workbench-mode #appShell #authUserBox,
    body.workbench-mode #appShell #inviteBindBox,
    body.workbench-mode #appShell #adminInviteBox,
    body.workbench-mode #appShell #signOutBtn,
    body.workbench-mode #appShell #authStatus {
      display: none !important;
    }

    body.workbench-mode #appShell > .sidebar #prepFlowIntro {
      display: block !important;
    }

    #onboardingRail,
    #twinGuide {
      display: none !important;
    }

    .workbench-toolbar {
      position: sticky;
      top: 12px;
      z-index: 20;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: flex-end;
      gap: 10px;
      border-radius: 12px;
      backdrop-filter: blur(12px) saturate(1.08);
    }

    .workbench-toolbar .back-to-hub-btn {
      margin-right: auto;
    }

    .workbench-reset-btn {
      border-color: rgba(120, 113, 108, .24);
      background: #fffaf0;
      color: #4a4036;
    }

    .workbench-reset-btn:hover {
      border-color: rgba(31, 58, 51, .32);
      color: var(--deep-green);
      background: var(--deep-green-soft);
    }

    .guided-panel-actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
      min-width: 0;
    }

    .guided-reset-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      min-height: 34px;
      border: 1px solid rgba(180, 83, 9, .2);
      border-radius: 999px;
      background:
        linear-gradient(180deg, rgba(255, 251, 235, .92), rgba(255, 255, 255, .96));
      color: #7c4a12;
      padding: 8px 11px;
      font-size: 11px;
      font-weight: 950;
      line-height: 1;
      white-space: nowrap;
      box-shadow: 0 10px 22px rgba(120, 83, 30, .06);
      transition: transform .14s ease, border-color .16s ease, background .16s ease, color .16s ease;
    }

    .guided-reset-btn:hover {
      transform: translateY(-1px);
      border-color: rgba(31, 58, 51, .28);
      background: var(--deep-green-soft);
      color: var(--deep-green);
    }

    .workbench-current-pill {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      min-height: 36px;
      border: 1px solid rgba(31, 58, 51, .18);
      border-radius: 999px;
      background: var(--deep-green-soft);
      color: var(--deep-green);
      padding: 7px 11px;
      font-size: 12px;
      font-weight: 950;
      white-space: nowrap;
    }

    .workbench-current-pill.is-hidden {
      display: none;
    }

    .guided-workbench-panel {
      display: grid;
      gap: 16px;
      border-color: rgba(31, 58, 51, .18);
      background:
        linear-gradient(180deg, rgba(255, 255, 255, .98) 0%, rgba(255, 253, 248, .98) 100%);
    }

    .guided-panel-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 14px;
    }

    .guided-panel-head h1 {
      margin: 8px 0 0;
      color: #171717;
      font-size: 22px;
      font-weight: 950;
      line-height: 1.15;
    }

    .guided-panel-mark {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 30px;
      border-radius: 999px;
      background: #171717;
      color: #fff;
      padding: 7px 10px;
      font-size: 11px;
      font-weight: 950;
      white-space: nowrap;
    }

    .main-flow-stage {
      display: grid;
      gap: 14px;
      min-height: 340px;
    }

    .main-flow-stage > .flow-step-card,
    .main-flow-stage > .panel {
      margin: 0 !important;
      border-color: rgba(31, 58, 51, .18);
      background: #ffffff;
      color: #292524;
      box-shadow: 0 18px 38px rgba(32, 29, 24, .07);
      animation: guideFadeUp .24s ease both;
    }

    .main-flow-stage .flow-step-card::before {
      width: 4px;
      background: var(--deep-green);
    }

    .main-flow-stage .flow-step-card.is-active {
      border-color: rgba(31, 58, 51, .28);
      background:
        linear-gradient(145deg, #ffffff 0%, #fbfffd 62%, #fffdf8 100%);
      box-shadow: 0 20px 44px rgba(31, 58, 51, .09);
    }

    .main-flow-stage .flow-step-title {
      color: #1c1917;
      font-size: 18px;
      letter-spacing: 0;
    }

    .main-flow-stage .flow-step-why,
    .main-flow-stage .prep-stage-footer small,
    .main-flow-stage .prep-summary-copy small {
      color: #69645b;
    }

    .main-flow-stage .flow-step-why {
      display: block;
      font-size: 12.5px;
    }

    .main-flow-stage .flow-step-need {
      border-left-color: var(--deep-green);
      background: var(--deep-green-soft);
      color: #32534e;
      font-size: 12px;
    }

    .main-flow-stage .prep-stage-footer,
    .main-flow-stage .prep-stage-summary {
      border-color: #e4ded3;
      background: #fbfaf6;
    }

    .main-flow-stage .prep-stage-action,
    .main-flow-stage .prep-summary-action {
      border-color: rgba(31, 58, 51, .22);
      background: #e7f5f1;
      color: var(--deep-green);
    }

    .main-flow-stage .confirm-box,
    .main-flow-stage .twin-locked,
    .main-flow-stage .twin-action-guide {
      background: #fbfaf6;
      color: #292524;
    }

    .main-flow-stage .confirm-box span,
    .main-flow-stage .twin-panel small,
    .main-flow-stage .twin-status-body,
    .main-flow-stage .twin-step-desc,
    .main-flow-stage .twin-mesh-hint,
    .main-flow-stage .twin-views-panel p {
      color: #57534e;
    }

    .main-flow-stage .confirm-box .text-stone-100,
    .main-flow-stage .twin-panel .text-stone-100,
    .main-flow-stage .twin-panel h3 {
      color: #1c1917 !important;
    }

    .main-flow-stage .text-stone-300,
    .main-flow-stage .text-stone-400,
    .main-flow-stage .text-stone-500 {
      color: #69645b !important;
    }

    .main-flow-stage .model-reference-auth,
    .main-flow-stage .language-policy-note,
    .main-flow-stage .size-summary,
    .main-flow-stage .settings-alert-panel {
      background: #fbfaf6;
      color: #292524;
    }

    .main-flow-stage .settings-header h2,
    .main-flow-stage .settings-section-title h3,
    .main-flow-stage .main-model-library-head h4,
    .main-flow-stage .slot-card-title,
    .main-flow-stage .result-section-header h3 {
      color: #1c1917;
    }

    .guided-summary-panel {
      display: grid;
      gap: 12px;
      border: 1px solid #e4ded3;
      border-radius: 10px;
      background: #fbfaf6;
      padding: 12px;
    }

    .guided-summary-panel strong {
      display: flex;
      align-items: center;
      gap: 7px;
      color: #1c1917;
      font-size: 13px;
      font-weight: 950;
    }

    .guided-summary-panel p {
      margin: 0;
      color: #69645b;
      font-size: 12px;
      font-weight: 700;
      line-height: 1.55;
    }

    .guided-flow-actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: flex-end;
      gap: 10px;
      border-top: 1px solid #ece6dc;
      padding-top: 12px;
    }

    #workbenchWizardHostPanel,
    #workbenchLegacyGrid,
    #platformStepPanel,
    #settingsStepPanel,
    #slotPlanStepPanel,
    #resultsStepPanel {
      display: none;
    }

    #workbenchLegacyGrid.is-mounted {
      display: contents;
    }

    .main-flow-stage #platformStepPanel,
    .main-flow-stage #settingsStepPanel,
    .main-flow-stage #slotPlanStepPanel,
    .main-flow-stage #resultsStepPanel {
      display: block;
    }

    .main-flow-stage #workbenchLegacyGrid {
      display: contents;
    }

    .main-flow-stage #settingsStepPanel {
      min-width: 0;
    }

    .main-flow-stage #slotPlanStepPanel {
      min-width: 0;
    }

    .main-flow-stage #resultsStepPanel {
      min-width: 0;
    }

    #appAuthMount .auth-card.is-ready {
      margin-top: 14px;
      padding: 10px;
      border-color: rgba(226, 207, 160, .34);
      background: rgba(10, 46, 40, .56);
    }

    #appAuthMount .auth-card.is-ready .auth-card-head {
      align-items: center;
    }

    #appAuthMount .auth-card.is-ready .auth-card-copy p,
    #appAuthMount .auth-card.is-ready .quota-hint-text,
    #appAuthMount .auth-card.is-ready #adminInviteBox {
      display: none;
    }

    #appAuthMount .auth-card.is-ready #authUserBox {
      display: grid;
      gap: 8px;
    }

    #appAuthMount .auth-card.is-ready #authUserEmail {
      margin: 0;
      color: #e7fffb;
      font-size: 12px;
      line-height: 1.35;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    #appAuthMount .auth-card.is-ready #quotaBox {
      margin-top: 0;
      padding: 8px;
      background: rgba(226, 207, 160, .08);
    }

    #appAuthMount .auth-card.is-ready #quotaBox strong {
      font-size: 12px;
    }

    #appAuthMount .auth-card.is-ready #signOutBtn {
      margin-top: 0;
      min-height: 32px;
      width: 100%;
    }

    #appShell {
      grid-template-columns: minmax(340px, 370px) minmax(0, 1fr);
      gap: 0;
    }

    body.workbench-mode #appShell {
      display: grid !important;
      grid-template-columns: minmax(340px, 420px) minmax(0, 1fr);
      align-items: stretch;
      min-height: 100vh;
      overflow: visible;
    }

    body.workbench-mode #appShell > .sidebar {
      display: block !important;
      grid-column: 1;
      grid-row: 1;
      position: sticky;
      top: 0;
      height: 100vh;
      max-height: 100vh;
      min-width: 0;
      overflow-y: auto;
    }

    body.workbench-mode #appShell > .main {
      display: block !important;
      grid-column: 2;
      grid-row: 1;
      min-width: 0;
      width: 100%;
    }

    body.workbench-mode #appShell > .main .main-shell {
      width: min(100%, 1480px);
      max-width: 1480px;
      margin: 0 auto;
    }

    #appShell > .sidebar > .flow-step-card {
      display: none;
    }

    body.workbench-mode #appShell > .sidebar {
      padding: 24px 22px;
    }

    body.workbench-mode #appShell > .sidebar .text-xl {
      font-size: 20px;
      line-height: 1.22;
    }

    body.workbench-mode #appShell > .sidebar [data-i18n="appSubtitle"] {
      display: none;
    }

    .field {
      display: flex;
      flex-direction: column;
      gap: 6px;
      min-width: 0;
    }

    .field label,
    .label {
      color: var(--muted);
      font-size: 12px;
      font-weight: 650;
    }

    .sidebar .field label,
    .sidebar .label {
      color: #bbb6aa;
    }

    .control {
      width: 100%;
      min-width: 0;
      border: 1px solid #d9d5cc;
      border-radius: var(--radius-sm);
      background: #fff;
      color: #171717;
      padding: 10px 11px;
      outline: none;
      transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
    }

    .control:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px rgba(31, 58, 51, 0.14);
    }

    .sidebar .control {
      background: #141611;
      border-color: #34362f;
      color: #f7f3e9;
    }

    .sidebar .control:focus {
      border-color: #63b3a9;
      box-shadow: 0 0 0 3px rgba(201, 168, 106, 0.16);
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      border: 1px solid transparent;
      border-radius: var(--radius-sm);
      padding: 10px 12px;
      font-weight: 750;
      line-height: 1.1;
      cursor: pointer;
      transition: transform .12s ease, background .16s ease, border-color .16s ease, color .16s ease;
      white-space: nowrap;
      min-width: 0;
    }

    .btn-primary {
      box-shadow: 0 8px 18px rgba(201, 168, 106, .22);
    }

    .btn:hover {
      transform: translateY(-1px);
    }

    .btn:disabled {
      cursor: not-allowed;
      opacity: .48;
      transform: none;
    }

    .needs-action {
      box-shadow: 0 0 0 3px rgba(192, 132, 50, .16);
    }

    .attention-flash {
      animation: attention-flash 1.2s ease-out 1;
    }

    @keyframes attention-flash {
      0%, 100% { box-shadow: none; }
      35% { box-shadow: 0 0 0 4px rgba(201, 168, 106, .28); }
    }

    .btn-primary { background: var(--gold); color: var(--ink); border-color: var(--gold-strong); }

    .btn-dark {
      background: var(--night);
      color: #fff;
    }

    .btn-soft {
      background: var(--neutral-soft);
      border-color: var(--line);
      color: #24231f;
    }

    .btn-outline {
      border-color: #d8d3c8;
      color: #24231f;
      background: #fff;
    }

    .sidebar .btn-outline {
      border-color: #46483f;
      color: #f5f2e9;
      background: transparent;
    }

    .chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border: 1px solid #d8d3c7;
      background: #fff;
      border-radius: 999px;
      padding: 7px 10px;
      font-size: 12px;
      font-weight: 750;
      color: #2a2924;
      cursor: pointer;
    }

    .chip.active {
      background: var(--accent-soft);
      border-color: var(--accent-line);
      color: var(--accent-strong);
    }

    .settings-panel {
      border-color: #ded8cd;
      background:
        linear-gradient(180deg, #fff 0%, #fffdf9 100%);
      box-shadow: 0 16px 34px rgba(31, 29, 24, .055);
    }

    .settings-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
    }

    .settings-header h2 {
      margin: 0;
      color: #14130f;
      font-size: 18px;
      font-weight: 950;
      line-height: 1.25;
    }

    .settings-header p {
      margin-top: 4px;
      color: #78716c;
      font-size: 12px;
      font-weight: 750;
      line-height: 1.55;
    }

    .settings-step-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border-radius: 999px;
      border: 1px solid var(--accent-line);
      background: var(--accent-soft);
      color: var(--accent-strong);
      padding: 7px 10px;
      font-size: 11px;
      font-weight: 950;
      white-space: nowrap;
    }

    .settings-stack {
      display: grid;
      gap: 10px;
    }

    .settings-section {
      border: 1px solid var(--line-soft);
      border-radius: var(--radius);
      background: #fff;
      padding: 12px;
      box-shadow: 0 8px 20px rgba(31, 29, 24, .028);
    }

    .settings-section.flow-panel {
      padding: 0;
      overflow: hidden;
    }

    .settings-section.flow-panel > summary {
      list-style: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 12px;
    }

    .settings-section.flow-panel > summary::-webkit-details-marker {
      display: none;
    }

    .settings-section.flow-panel > summary::after {
      content: "";
      width: 9px;
      height: 9px;
      border-right: 2px solid #78716c;
      border-bottom: 2px solid #78716c;
      transform: rotate(45deg);
      transition: transform .16s ease;
      flex: 0 0 auto;
      margin-right: 3px;
    }

    .settings-section.flow-panel[open] > summary::after {
      transform: rotate(225deg);
      margin-top: 6px;
    }

    .settings-section.flow-panel > .settings-section-body {
      padding: 0 12px 12px;
      display: grid;
      gap: 10px;
    }

    .settings-section.flow-panel.is-recommended {
      border-color: var(--accent-line);
      background: #fbfffd;
    }

    .settings-section.flow-panel.is-advanced {
      background: #fffdf8;
    }

    .settings-section-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 12px;
    }

    .settings-section-title h3 {
      margin: 0;
      color: #1c1917;
      font-size: 14px;
      font-weight: 950;
      line-height: 1.25;
    }

    .settings-section-title p {
      margin: 4px 0 0;
      color: #78716c;
      font-size: 12px;
      font-weight: 700;
      line-height: 1.55;
    }

    .settings-two-col {
      display: grid;
      gap: 10px;
    }

    @media (min-width: 560px) {
      .settings-two-col {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    .language-settings-panel {
      border-color: var(--line-soft);
      background: #fff;
    }

    .language-chip-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
      gap: 6px;
    }

    .language-chip-grid .chip {
      min-height: 36px;
      justify-content: center;
      border-radius: var(--radius-sm);
      background: var(--paper-warm);
      padding: 6px 8px;
      text-align: center;
      font-size: 11px;
      border-color: #e2ddd2;
      color: #3e3b35;
    }

    .language-chip-grid .chip.active {
      background: var(--accent-soft);
      border-color: var(--accent-line);
      color: var(--accent-strong);
      box-shadow: inset 0 0 0 1px rgba(31, 58, 51, .12);
    }

    .language-policy-note {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      border-radius: var(--radius);
      border: 1px solid #e7dcc5;
      background: #fffaf0;
      color: #7a5417;
      padding: 10px;
      font-size: 12px;
      font-weight: 800;
      line-height: 1.55;
    }

    .settings-alert-panel {
      border: 1px solid var(--line-soft);
      border-radius: var(--radius);
      background: #fff;
      padding: 12px;
      display: grid;
      gap: 10px;
      color: #27312f;
      box-shadow: none;
    }

    .settings-alert-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 10px;
      min-width: 0;
    }

    .settings-alert-copy {
      min-width: 0;
    }

    .settings-alert-head h3 {
      margin: 0;
      color: #242622;
      font-size: 15px;
      font-weight: 950;
      line-height: 1.25;
    }

    .settings-alert-head p {
      margin-top: 4px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 750;
      line-height: 1.55;
    }

    .settings-alert-grid {
      display: grid;
      gap: 7px;
      grid-template-columns: 1fr;
    }

    @media (min-width: 900px) {
      .settings-alert-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
    }

    .settings-alert-item {
      border: 1px solid transparent;
      border-radius: var(--radius);
      background: #fff;
      padding: 9px 10px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 5px 10px;
      align-items: center;
      min-width: 0;
      cursor: pointer;
      text-align: left;
      transition: border-color .16s ease, box-shadow .16s ease, transform .12s ease;
    }

    .settings-alert-item.is-active {
      border-color: rgba(31, 58, 51, .46);
      background:
        linear-gradient(180deg, rgba(247, 255, 252, .98), rgba(255, 253, 248, .98));
      box-shadow:
        inset 0 0 0 1px rgba(31, 58, 51, .1),
        0 14px 30px rgba(31, 58, 51, .1);
    }

    .settings-alert-item:hover {
      border-color: var(--accent-line);
      box-shadow: 0 8px 20px rgba(31, 58, 51, .06);
      transform: translateY(-1px);
    }

    .settings-alert-item.ready {
      background: var(--success-soft);
      border-color: var(--success-line);
    }

    .settings-alert-item.warn {
      border-color: var(--attention-line);
      background: var(--attention-soft);
    }

    .settings-alert-item.danger {
      border-color: var(--danger-line);
      background: var(--danger-soft);
    }

    .settings-alert-item strong {
      display: flex;
      align-items: center;
      gap: 6px;
      color: #242622;
      font-size: 12px;
      font-weight: 950;
      line-height: 1.35;
    }

    .settings-alert-item small {
      grid-column: 1 / -1;
      color: #5f5b51;
      font-size: 11px;
      font-weight: 750;
      line-height: 1.55;
    }

	    .settings-alert-cta {
	      display: inline-flex;
	      align-items: center;
	      gap: 5px;
	      grid-column: 1 / -1;
	      color: var(--accent-strong);
	      font-size: 11px;
	      font-weight: 950;
	    }

	    .settings-confirm-row {
	      display: flex;
	      flex-wrap: wrap;
	      align-items: center;
	      justify-content: space-between;
	      gap: 10px;
	      border-top: 1px solid var(--line-soft);
	      padding-top: 10px;
	    }

	    .settings-confirm-row small {
	      flex: 1 1 220px;
	      color: var(--muted);
	      font-size: 11px;
	      font-weight: 750;
	      line-height: 1.55;
	    }

    .settings-inline-panel {
      display: grid;
      gap: 10px;
      min-width: 0;
    }

    .settings-inline-panel:empty {
      display: none;
    }

    .settings-inline-panel > .settings-section,
    .settings-inline-panel > .size-settings-panel {
      margin: 0 !important;
      animation: settingsInlineReveal .2s ease both;
    }

    .settings-inline-panel > .settings-section {
      border-color: rgba(31, 58, 51, .22);
      background: #ffffff;
    }

    .settings-inline-next {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      border: 1px solid rgba(31, 58, 51, .16);
      border-radius: var(--radius);
      background: #fbfaf6;
      padding: 10px;
    }

    .settings-inline-next small {
      flex: 1 1 220px;
      color: #625e54;
      font-size: 11px;
      font-weight: 760;
      line-height: 1.55;
    }

    .model-choice-flow {
      display: grid;
      gap: 10px;
    }

    .model-choice-step {
      border: 1px solid #e3ded4;
      border-radius: var(--radius);
      background: #fff;
      padding: 11px;
      display: grid;
      gap: 9px;
    }

    .model-choice-step.is-active {
      border-color: rgba(31, 58, 51, .34);
      background: #fbfffd;
      box-shadow: 0 10px 22px rgba(31, 58, 51, .06);
    }

    .model-choice-step strong {
      display: flex;
      align-items: center;
      gap: 7px;
      color: #1c1917;
      font-size: 13px;
      font-weight: 950;
      line-height: 1.3;
    }

    .model-choice-step small {
      color: #69645b;
      font-size: 11.5px;
      font-weight: 740;
      line-height: 1.55;
    }

    .model-choice-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .model-choice-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      border: 1px solid #d8d2c4;
      border-radius: 999px;
      background: #fff;
      color: #292524;
      padding: 8px 11px;
      font-size: 11.5px;
      font-weight: 950;
      line-height: 1;
      cursor: pointer;
      transition: border-color .16s ease, background .16s ease, color .16s ease, transform .12s ease;
    }

    .model-choice-btn:hover {
      transform: translateY(-1px);
      border-color: rgba(31, 58, 51, .34);
    }

    .model-choice-btn.is-active {
      border-color: rgba(31, 58, 51, .46);
      background: var(--deep-green);
      color: #fff;
    }

    .model-choice-content {
      display: none;
      animation: settingsInlineReveal .2s ease both;
    }

    .model-choice-content.is-visible {
      display: grid !important;
      gap: 10px;
    }

    .model-choice-content:not(.is-visible) {
      display: none !important;
    }

    .model-auto-mode-hidden {
      display: none !important;
    }

    .model-custom-panel {
      display: grid;
      gap: 10px;
      border: 1px solid rgba(31, 58, 51, .18);
      border-radius: var(--radius);
      background: #fbfffd;
      padding: 11px;
    }

    @keyframes settingsInlineReveal {
      from {
        opacity: 0;
        transform: translateY(-4px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

	    .settings-status-badge {
      display: inline-flex;
      width: max-content;
      max-width: 100%;
      align-items: center;
      gap: 5px;
      border-radius: 999px;
      padding: 5px 9px;
      font-size: 10px;
      font-weight: 950;
      line-height: 1;
      background: var(--neutral-soft);
      color: #475569;
      white-space: nowrap;
      flex: 0 0 auto;
    }

    .settings-status-badge i {
      flex: 0 0 auto;
    }

    .settings-status-badge span {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .settings-status-badge.platform-badge {
      align-self: flex-start;
      border: 1px solid var(--accent-line);
      background: var(--accent-soft);
      color: var(--accent-strong);
      padding: 7px 10px;
      font-size: 12px;
      box-shadow: inset 0 0 0 1px rgba(31, 58, 51, .06);
    }

    .settings-status-badge.ready {
      background: #dff1e7;
      color: #276749;
    }

    .settings-status-badge.warn {
      background: #f8e8c2;
      color: #7a5417;
    }

    .settings-status-badge.danger {
      background: #f9dbe1;
      color: var(--danger);
    }

    .settings-anchor {
      scroll-margin-top: 18px;
    }

    .workbench-stepper {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
      gap: 10px;
      margin-top: 16px;
    }

    .workbench-stepper-item {
      position: relative;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: 10px;
      min-width: 0;
      border: 1px solid #e3ded4;
      border-radius: 8px;
      background: #fff;
      padding: 12px;
      box-shadow: 0 10px 24px rgba(28, 25, 23, .045);
      overflow: hidden;
    }

    .workbench-stepper-item {
      cursor: pointer;
    }

    .workbench-stepper-item::after {
      content: "";
      position: absolute;
      inset: auto 12px 0 48px;
      height: 3px;
      border-radius: 999px;
      background: #e7e1d6;
      transform-origin: left center;
      transform: scaleX(.28);
      transition: transform .22s ease, background .22s ease;
    }

    .workbench-stepper-item.done {
      border-color: #bae6d7;
      background: #f7fffb;
    }

    .workbench-stepper-item.locked {
      cursor: not-allowed;
      opacity: .54;
      box-shadow: none;
    }

    .workbench-stepper-item.active {
      border-color: rgba(31, 58, 51, .42);
      box-shadow: 0 16px 34px rgba(31, 58, 51, .1);
      animation: guideFadeUp .22s ease both;
    }

    .workbench-stepper-item.done::after,
    .workbench-stepper-item.active::after {
      transform: scaleX(1);
      background: var(--deep-green);
    }

    .workbench-stepper-index {
      display: inline-grid;
      width: 34px;
      height: 34px;
      place-items: center;
      border-radius: 8px;
      background: #f1eee7;
      color: #57534e;
      font-size: 12px;
      font-weight: 950;
    }

    .workbench-stepper-item.done .workbench-stepper-index,
    .workbench-stepper-item.active .workbench-stepper-index {
      background: var(--deep-green);
      color: #fff;
    }

    .workbench-stepper-item.active .workbench-stepper-index {
      animation: wizardPulse 1.8s ease-in-out infinite;
    }

    .workbench-stepper-copy {
      min-width: 0;
      padding-bottom: 5px;
    }

    .workbench-stepper-copy strong {
      display: flex;
      align-items: center;
      gap: 6px;
      color: #292524;
      font-size: 12px;
      font-weight: 950;
      line-height: 1.3;
    }

    .workbench-stepper-copy small {
      display: block;
      margin-top: 4px;
      color: #78716c;
      font-size: 11px;
      font-weight: 650;
      line-height: 1.45;
      overflow-wrap: anywhere;
    }

    .model-reference-count {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 44px;
      border-radius: 999px;
      background: #f3f4f6;
      color: #44403c;
      padding: 6px 10px;
      font-size: 12px;
      font-weight: 950;
    }

    .platform-nav {
      display: grid;
      gap: 12px;
      width: 100%;
    }

    .platform-current-card {
      position: relative;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      gap: 14px;
      align-items: center;
      min-width: 0;
      border: 1px solid rgba(31, 58, 51, .26);
      border-radius: 8px;
      background:
        linear-gradient(135deg, rgba(255, 255, 255, .96) 0%, rgba(248, 255, 251, .98) 54%, rgba(244, 250, 247, .98) 100%);
      padding: 14px;
      box-shadow: 0 16px 34px rgba(31, 58, 51, .08);
      overflow: hidden;
    }

    .platform-current-card::before {
      content: "";
      position: absolute;
      inset: 0 auto 0 0;
      width: 4px;
      background: var(--deep-green);
    }

    .platform-current-icon {
      display: grid;
      width: 44px;
      height: 44px;
      place-items: center;
      border-radius: 8px;
      background: var(--deep-green);
      color: #fff;
      box-shadow: 0 12px 28px rgba(31, 58, 51, .22);
    }

    .platform-current-copy {
      min-width: 0;
    }

    .platform-current-copy span {
      display: inline-flex;
      width: fit-content;
      border-radius: 999px;
      background: #e7f5f1;
      color: var(--deep-green);
      padding: 4px 8px;
      font-size: 10px;
      font-weight: 950;
      line-height: 1;
    }

    .platform-current-copy h3 {
      margin: 6px 0 0;
      color: #1c1917;
      font-size: 18px;
      font-weight: 950;
      line-height: 1.2;
    }

    .platform-current-copy p {
      margin: 4px 0 0;
      color: #57534e;
      font-size: 12px;
      font-weight: 700;
      line-height: 1.55;
      overflow-wrap: anywhere;
    }

    .platform-change-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      border: 1px solid #d8d2c4;
      border-radius: 999px;
      background: #fff;
      color: #292524;
      padding: 9px 12px;
      font-size: 12px;
      font-weight: 950;
      white-space: nowrap;
      cursor: pointer;
      transition: border-color .16s ease, transform .12s ease, box-shadow .16s ease;
    }

    .platform-change-btn.active {
      border-color: rgba(31, 58, 51, .5);
      background: var(--deep-green);
      color: #fff;
      box-shadow: 0 10px 22px rgba(31, 58, 51, .16);
    }

	    .platform-change-btn:hover {
	      transform: translateY(-1px);
	      border-color: rgba(31, 58, 51, .42);
	      box-shadow: 0 10px 22px rgba(28, 25, 23, .08);
	    }

	    .platform-current-actions {
	      display: flex;
	      flex-wrap: wrap;
	      justify-content: flex-end;
	      gap: 8px;
	    }

	    .platform-confirm-btn {
	      display: inline-flex;
	      align-items: center;
	      justify-content: center;
	      gap: 7px;
	      border: 1px solid rgba(31, 58, 51, .45);
	      border-radius: 999px;
	      background: var(--deep-green);
	      color: #fff;
	      padding: 9px 12px;
	      font-size: 12px;
	      font-weight: 950;
	      white-space: nowrap;
	      cursor: pointer;
	      box-shadow: 0 12px 26px rgba(31, 58, 51, .18);
	      transition: transform .12s ease, box-shadow .16s ease;
	    }

	    .platform-confirm-btn:hover {
	      transform: translateY(-1px);
	      box-shadow: 0 14px 30px rgba(31, 58, 51, .24);
	    }

    .platform-picker {
      display: grid;
      gap: 12px;
      border: 1px solid rgba(31, 58, 51, .22);
      border-radius: 8px;
      background:
        linear-gradient(180deg, #ffffff 0%, #f8fffb 100%);
      padding: 14px;
      animation: platformPickerReveal .24s ease both;
      box-shadow: 0 18px 38px rgba(31, 58, 51, .08);
    }

    .platform-picker-note {
      display: flex;
      align-items: center;
      gap: 8px;
      color: var(--deep-green);
      font-size: 12px;
      font-weight: 850;
      line-height: 1.45;
    }

    .platform-collapse-note {
      display: inline-flex;
      width: fit-content;
      align-items: center;
      gap: 7px;
      border-radius: 999px;
      background: #f1eee7;
      color: #57534e;
      padding: 7px 10px;
      font-size: 11px;
      font-weight: 900;
      line-height: 1;
    }

    .platform-filter-row {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
    }

    .platform-filter-chip {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      border: 1px solid #ded8cc;
      border-radius: 999px;
      background: #fff;
      color: #57534e;
      padding: 8px 11px;
      font-size: 12px;
      font-weight: 950;
      cursor: pointer;
      transition: background .16s ease, border-color .16s ease, color .16s ease, transform .12s ease;
    }

    .platform-filter-chip:hover {
      transform: translateY(-1px);
      border-color: #c7bfae;
    }

    .platform-filter-chip.active {
      border-color: rgba(31, 58, 51, .5);
      background: var(--deep-green);
      color: #fff;
    }

    .platform-nav-group {
      display: grid;
      gap: 10px;
      min-width: 0;
    }

    .platform-nav-group.is-hidden {
      display: none;
    }

    .platform-nav-group-toggle {
      width: 100%;
      border: 1px solid #e3ded4;
      border-radius: 8px;
      background: #fffdf8;
      color: #1c1917;
      padding: 11px 12px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 12px;
      align-items: center;
      text-align: left;
    }

    .platform-nav-title-row {
      display: flex;
      align-items: center;
      gap: 9px;
      min-width: 0;
    }

    .platform-nav-title-icon {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      display: grid;
      place-items: center;
      background: var(--deep-green-soft);
      color: var(--deep-green);
      flex: 0 0 auto;
    }

    .platform-nav-title-text {
      min-width: 0;
    }

    .platform-nav-title-text h3 {
      margin: 0;
      font-size: 14px;
      font-weight: 950;
      color: #1c1917;
      line-height: 1.2;
    }

    .platform-nav-title-text p {
      margin-top: 3px;
      color: #78716c;
      font-size: 11px;
      font-weight: 700;
      line-height: 1.4;
      overflow-wrap: anywhere;
    }

    .platform-nav-group-meta {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
    }

    .platform-nav-count {
      border-radius: 999px;
      background: #f1eee7;
      color: #57534e;
      padding: 5px 8px;
      font-size: 10px;
      font-weight: 950;
      line-height: 1;
      white-space: nowrap;
    }

    .platform-nav-selected {
      border-radius: 999px;
      background: rgba(31, 58, 51, .1);
      color: var(--deep-green);
      padding: 5px 8px;
      font-size: 10px;
      font-weight: 950;
      line-height: 1;
      white-space: nowrap;
    }

    .platform-nav-chevron {
      width: 28px;
      height: 28px;
      border-radius: 8px;
      display: grid;
      place-items: center;
      background: #fff;
      color: #57534e;
      border: 1px solid #e7e1d6;
      flex: 0 0 auto;
    }

    .platform-nav-group-body {
      display: block;
      padding: 0;
      border: 0;
      background: transparent;
    }

    .platform-nav-group:not(.is-open) .platform-nav-group-body {
      display: none;
    }

    .platform-nav-grid {
      display: grid;
      gap: 10px;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    }

    .platform-nav-group.is-active .platform-nav-grid {
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    }

    .platform-nav:not(.is-choosing) .platform-picker {
      display: none;
    }

    .platform-nav-change {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      width: fit-content;
      max-width: 100%;
      margin-top: 10px;
      border: 1px solid var(--accent-line);
      border-radius: 999px;
      background: var(--accent-soft);
      color: var(--accent-strong);
      padding: 7px 10px;
      font-size: 11px;
      font-weight: 950;
      cursor: pointer;
    }

    .platform-card-btn {
      width: 100%;
      min-height: 92px;
      border: 1px solid #ddd8cc;
      border-radius: 8px;
      background: #fff;
      color: #24231f;
      padding: 10px;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      gap: 9px;
      align-items: center;
      text-align: left;
      cursor: pointer;
      transition: border-color .16s ease, box-shadow .16s ease, transform .12s ease, background .16s ease;
    }

    .platform-card-btn:hover {
      transform: translateY(-1px);
      border-color: #bfb7a6;
      background: #fffefa;
    }

    .platform-card-btn.active {
      border-color: rgba(31, 58, 51, .72);
      background: var(--deep-green-soft);
      box-shadow: 0 0 0 3px rgba(31, 58, 51, .1);
    }

    .platform-card-icon {
      width: 34px;
      height: 34px;
      border-radius: 8px;
      display: grid;
      place-items: center;
      background: #f4f1ea;
      color: #57534e;
    }

    .platform-card-btn.active .platform-card-icon {
      background: var(--deep-green);
      color: #fff;
    }

    .platform-card-text {
      min-width: 0;
    }

    .platform-card-btn strong {
      display: block;
      font-size: 13px;
      font-weight: 950;
      line-height: 1.25;
    }

    .platform-card-btn small {
      display: -webkit-box;
      margin-top: 3px;
      color: #78716c;
      font-size: 11px;
      font-weight: 650;
      line-height: 1.4;
      overflow: hidden;
      overflow-wrap: anywhere;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }

    .platform-card-tag {
      align-self: start;
      border-radius: 999px;
      background: #f1eee7;
      color: #57534e;
      padding: 4px 7px;
      font-size: 10px;
      font-weight: 900;
      line-height: 1;
      white-space: nowrap;
    }

    .platform-card-btn.active .platform-card-tag {
      background: rgba(31, 58, 51, .12);
      color: var(--deep-green);
    }

    .onboarding-rail {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 10px;
    }

    .onboarding-step {
      border: 1px solid #e3ded4;
      border-radius: 8px;
      background: #fff;
      padding: 12px;
      min-width: 0;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: 10px;
      align-items: start;
    }

    .onboarding-step-index {
      display: inline-grid;
      width: 34px;
      height: 34px;
      place-items: center;
      border-radius: 10px;
      background: #f1eee7;
      color: #57534e;
      font-size: 12px;
      font-weight: 950;
    }

    .onboarding-step strong {
      display: flex;
      align-items: center;
      gap: 6px;
      color: #292524;
      font-size: 12px;
      font-weight: 950;
      line-height: 1.35;
    }

    .onboarding-step small {
      display: block;
      margin-top: 4px;
      color: #78716c;
      font-size: 11px;
      font-weight: 650;
      line-height: 1.45;
    }

    .onboarding-step.done {
      border-color: #b9e5d8;
      background: var(--deep-green-soft);
    }

    .onboarding-step.done .onboarding-step-index {
      background: #dff1e7;
      color: #276749;
    }

    .onboarding-step.active {
      border-color: rgba(31, 58, 51, .34);
      background: #fbfffd;
      box-shadow: 0 10px 24px rgba(31, 58, 51, .08);
    }

    .onboarding-step.active .onboarding-step-index {
      background: var(--accent);
      color: #fff;
    }

    .platform-shell {
      display: grid;
      gap: 14px;
    }

    .platform-shell-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 14px;
    }

    .platform-shell-head p {
      max-width: 740px;
    }

    .platform-live-pill {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      border-radius: 999px;
      background: var(--deep-green-soft);
      color: var(--deep-green);
      padding: 7px 10px;
      font-size: 12px;
      font-weight: 900;
      white-space: nowrap;
    }

    .platform-workflow {
      display: grid;
      gap: 12px;
    }

    .platform-flow-grid,
    .platform-qa-grid {
      display: grid;
      gap: 10px;
    }

    @media (min-width: 1024px) {
      .platform-flow-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .platform-qa-grid {
        grid-template-columns: 1.1fr 1fr 1fr;
      }
    }

    .platform-flow-card,
    .platform-qa-card {
      border: 1px solid #ddd8cc;
      border-radius: 8px;
      background: #fff;
      padding: 12px;
    }

    .platform-flow-index {
      display: inline-grid;
      width: 26px;
      height: 26px;
      place-items: center;
      border-radius: 7px;
      background: var(--deep-green);
      color: #fff;
      font-size: 12px;
      font-weight: 900;
    }

    .platform-flow-card ul,
    .platform-qa-card ul {
      margin: 8px 0 0 18px;
      color: #57534e;
      font-size: 12px;
      font-weight: 650;
      line-height: 1.7;
    }

    .platform-qa-card {
      background: #f8faf6;
    }

    .platform-qa-card.is-fail {
      border-color: #fecaca;
      background: #fff7f7;
    }

    .platform-qa-card.is-warn {
      border-color: #fed7aa;
      background: #fffaf1;
    }

    .wizard-panel {
      display: grid;
      gap: 14px;
    }

    .wizard-panel-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 14px;
    }

    .wizard-panel-head h2 {
      margin: 0;
      color: #1c1917;
      font-size: 18px;
      font-weight: 950;
      line-height: 1.25;
    }

    .wizard-panel-head p {
      margin: 5px 0 0;
      color: #69645b;
      font-size: 13px;
      font-weight: 700;
      line-height: 1.6;
    }

    .wizard-path {
      display: grid;
      gap: 10px;
    }

    .wizard-step-card {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      gap: 12px;
      align-items: center;
      min-width: 0;
      border: 1px solid #e4ded3;
      border-radius: 8px;
      background: #fff;
      padding: 13px;
      transition: border-color .16s ease, box-shadow .16s ease, transform .12s ease;
    }

    .wizard-step-card:hover {
      transform: translateY(-1px);
      border-color: #d2cabb;
      box-shadow: 0 12px 26px rgba(28, 25, 23, .055);
    }

    .wizard-step-card.done {
      border-color: #b9e5d8;
      background: #f7fffb;
    }

    .wizard-step-card.active {
      border-color: rgba(31, 58, 51, .42);
      box-shadow: 0 14px 30px rgba(31, 58, 51, .08);
    }

    .wizard-step-icon {
      display: grid;
      width: 38px;
      height: 38px;
      place-items: center;
      border-radius: 8px;
      background: #f1eee7;
      color: #57534e;
      font-weight: 950;
    }

    .wizard-step-card.done .wizard-step-icon,
    .wizard-step-card.active .wizard-step-icon {
      background: var(--deep-green);
      color: #fff;
    }

    .wizard-step-copy {
      min-width: 0;
    }

    .wizard-step-copy strong {
      display: block;
      color: #292524;
      font-size: 13px;
      font-weight: 950;
      line-height: 1.3;
    }

    .wizard-step-copy small {
      display: block;
      margin-top: 4px;
      color: #78716c;
      font-size: 11.5px;
      font-weight: 700;
      line-height: 1.45;
      overflow-wrap: anywhere;
    }

    .wizard-step-action {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      border: 1px solid #d8d2c4;
      border-radius: 999px;
      background: #fff;
      color: #292524;
      padding: 8px 10px;
      font-size: 11px;
      font-weight: 950;
      white-space: nowrap;
      cursor: pointer;
    }

    .wizard-step-card.active .wizard-step-action,
    .wizard-step-card.done .wizard-step-action {
      border-color: rgba(31, 58, 51, .28);
      background: #e7f5f1;
      color: var(--deep-green);
    }

    .wizard-recommendation {
      position: relative;
      display: grid;
      gap: 12px;
      border: 1px solid rgba(31, 58, 51, .24);
      border-radius: 8px;
      background:
        linear-gradient(145deg, #ffffff 0%, #f8fffb 58%, #fffdf8 100%);
      padding: 14px;
      overflow: hidden;
      box-shadow: 0 18px 36px rgba(31, 58, 51, .08);
    }

    .wizard-recommendation:not(.is-revealed) {
      border-style: dashed;
    }

    .wizard-recommendation::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(110deg, transparent 0%, rgba(31, 58, 51, .06) 45%, transparent 70%);
      transform: translateX(-100%);
      animation: wizardShimmer 3s ease-in-out infinite;
      pointer-events: none;
    }

    .wizard-recommendation.is-revealed::before {
      display: none;
    }

    .wizard-ai-status {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    .wizard-ai-copy strong {
      display: flex;
      align-items: center;
      gap: 7px;
      color: #1c1917;
      font-size: 14px;
      font-weight: 950;
    }

    .wizard-ai-copy p {
      margin-top: 5px;
      color: #69645b;
      font-size: 12px;
      font-weight: 700;
      line-height: 1.55;
    }

    .wizard-ai-pulse {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border-radius: 999px;
      background: #e7f5f1;
      color: var(--deep-green);
      padding: 7px 10px;
      font-size: 11px;
      font-weight: 950;
    }

    .wizard-ai-pulse i {
      animation: wizardPulse 1.6s ease-in-out infinite;
    }

    .wizard-plan-grid {
      display: grid;
      gap: 10px;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
    }

    .wizard-plan-card {
      border: 1px solid #e3ded4;
      border-radius: 8px;
      background: #fff;
      padding: 12px;
      min-width: 0;
    }

    .wizard-plan-card span {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: var(--deep-green);
      font-size: 11px;
      font-weight: 950;
    }

    .wizard-plan-card strong {
      display: block;
      margin-top: 7px;
      color: #1c1917;
      font-size: 18px;
      font-weight: 950;
      line-height: 1.1;
    }

    .wizard-plan-card small {
      display: block;
      margin-top: 6px;
      color: #69645b;
      font-size: 11.5px;
      font-weight: 700;
      line-height: 1.45;
      overflow-wrap: anywhere;
    }

    .wizard-analysis {
      display: grid;
      gap: 10px;
      border: 1px dashed rgba(31, 58, 51, .28);
      border-radius: 8px;
      background: rgba(251, 250, 246, .52);
      padding: 12px;
    }

    .wizard-reveal-stage {
      position: relative;
      display: grid;
      gap: 12px;
      border: 1px dashed rgba(31, 58, 51, .32);
      border-radius: 8px;
      background:
        linear-gradient(135deg, rgba(251, 250, 246, .72) 0%, rgba(255, 255, 255, .92) 50%, rgba(255, 253, 248, .92) 100%);
      padding: 14px;
      overflow: hidden;
    }

    .wizard-reveal-stage::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(90deg, transparent 0%, rgba(201, 168, 106, .09) 45%, transparent 72%);
      transform: translateX(-100%);
      animation: wizardShimmer 2.4s ease-in-out infinite;
      pointer-events: none;
    }

    .wizard-reveal-stage strong {
      display: flex;
      align-items: center;
      gap: 8px;
      color: #134e4a;
      font-size: 13px;
      font-weight: 950;
      line-height: 1.35;
    }

    .wizard-reveal-stage p {
      margin: 0;
      color: #57534e;
      font-size: 12px;
      font-weight: 750;
      line-height: 1.6;
    }

    .wizard-analysis-row {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      gap: 9px;
      align-items: center;
      color: #134e4a;
      font-size: 12px;
      font-weight: 850;
    }

    .wizard-analysis-line {
      position: relative;
      height: 8px;
      overflow: hidden;
      border-radius: 999px;
      background: rgba(31, 58, 51, .12);
    }

    .wizard-analysis-line::after {
      content: "";
      position: absolute;
      inset: 0;
      width: 42%;
      border-radius: inherit;
      background: linear-gradient(90deg, rgba(31, 58, 51, .18), rgba(201, 168, 106, .82), rgba(226, 207, 160, .42));
      animation: wizardScanLine 1.8s ease-in-out infinite;
    }

    .wizard-model-choice {
      display: grid;
      gap: 10px;
      border: 1px solid rgba(31, 58, 51, .2);
      border-radius: 8px;
      background: #ffffff;
      padding: 12px;
    }

    .wizard-model-choice strong {
      display: flex;
      align-items: center;
      gap: 7px;
      color: #134e4a;
      font-size: 13px;
      font-weight: 950;
      line-height: 1.35;
    }

    .wizard-model-choice p {
      margin: 0;
      color: #57534e;
      font-size: 12px;
      font-weight: 750;
      line-height: 1.55;
    }

    .slot-preview-strip {
      display: grid;
      gap: 8px;
    }

    .slot-preview-item {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      gap: 9px;
      align-items: center;
      border: 1px solid #ece6dc;
      border-radius: 8px;
      background: #fff;
      padding: 9px;
      min-width: 0;
    }

    .slot-preview-icon {
      display: grid;
      width: 30px;
      height: 30px;
      place-items: center;
      border-radius: 7px;
      background: var(--deep-green-soft);
      color: var(--deep-green);
    }

    .slot-preview-item strong {
      display: block;
      color: #292524;
      font-size: 12px;
      font-weight: 950;
      line-height: 1.25;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .slot-preview-item small {
      display: block;
      margin-top: 2px;
      color: #78716c;
      font-size: 10.5px;
      font-weight: 700;
      line-height: 1.35;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .slot-preview-item em {
      border-radius: 999px;
      background: #f1eee7;
      color: #57534e;
      padding: 5px 7px;
      font-size: 10px;
      font-style: normal;
      font-weight: 950;
      white-space: nowrap;
    }

    .slot-suite-locked {
      display: grid;
      place-items: center;
      min-height: 220px;
      border: 1px dashed rgba(31, 58, 51, .28);
      border-radius: 8px;
      background:
        linear-gradient(145deg, #ffffff 0%, #f7fffd 58%, #fffdf8 100%);
      padding: 18px;
      text-align: center;
      overflow: hidden;
    }

    .slot-suite-locked strong {
      display: block;
      color: #292524;
      font-size: 15px;
      font-weight: 950;
    }

    .slot-suite-locked p {
      max-width: 520px;
      margin: 8px auto 0;
      color: #69645b;
      font-size: 13px;
      font-weight: 700;
      line-height: 1.65;
    }

    .slot-suite-locked .btn {
      margin-top: 14px;
    }

    .slot-action-toolbar.is-hidden {
      display: none !important;
    }

    .slot-suite-reveal {
      animation: guideFadeUp .24s ease both;
    }

    @keyframes guideFadeUp {
      from {
        opacity: 0;
        transform: translateY(8px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes wizardPulse {
      0%, 100% {
        transform: scale(1);
        opacity: .72;
      }
      50% {
        transform: scale(1.14);
        opacity: 1;
      }
    }

    @keyframes wizardShimmer {
      0%, 45% {
        transform: translateX(-100%);
      }
      80%, 100% {
        transform: translateX(100%);
      }
    }

    @keyframes wizardScanLine {
      0% {
        transform: translateX(-110%);
      }
      58% {
        transform: translateX(178%);
      }
      100% {
        transform: translateX(178%);
      }
    }

    @keyframes platformPickerReveal {
      from {
        opacity: 0;
        transform: translateY(-6px) scale(.992);
      }
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    .slot-card {
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: #fff;
      padding: 12px;
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 8px;
      transition: border-color .16s ease, box-shadow .16s ease, transform .12s ease;
    }

    .slot-card:hover {
      transform: translateY(-1px);
      border-color: #cfc7b8;
      box-shadow: var(--shadow-sm);
    }

    .slot-card.selected {
      border-color: rgba(31, 58, 51, .48);
      background: #fcfffd;
      box-shadow: 0 0 0 3px rgba(31, 58, 51, .06), var(--shadow-sm);
    }

    .slot-card.guidance-focus {
      border-color: var(--attention-line);
      box-shadow: 0 0 0 3px rgba(183, 121, 31, .10);
    }

    .slot-action-row {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }
    .slot-action-btn {
      border: 1px solid var(--attention-line);
      border-radius: var(--radius-sm);
      background: #fff;
      color: #7a5417;
      padding: 6px 8px;
      font-size: 11px;
      font-weight: 850;
      line-height: 1.1;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
    }
    .slot-action-btn:hover {
      border-color: #d6aa55;
      color: #5d3e10;
      background: var(--attention-soft);
    }

    .slot-action-btn.is-soft {
      border-color: var(--accent-line);
      color: var(--accent-strong);
      background: var(--accent-soft);
    }

    .slot-action-btn.is-soft:hover {
      border-color: var(--deep-green);
      background: #e6fffb;
    }

    .slot-card input[type="checkbox"] {
      width: 18px;
      height: 18px;
    }

    .slot-model-override {
      margin-top: 8px;
      padding-top: 8px;
      border-top: 1px solid var(--line-soft);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      min-width: 0;
    }

    .slot-model-override.is-active {
      border-top-color: rgba(31, 58, 51, .18);
    }

    .slot-model-override-copy {
      min-width: 0;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      color: #78716c;
      font-size: 11px;
      font-weight: 850;
      line-height: 1.2;
    }

    .slot-model-override-kicker {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      border-radius: 999px;
      background: var(--neutral-soft);
      color: #57534e;
      padding: 5px 8px;
      white-space: nowrap;
    }

    .slot-model-override.is-active .slot-model-override-kicker {
      background: var(--accent-soft);
      color: var(--accent-strong);
    }

    .slot-model-override-hint {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .slot-model-override select {
      min-height: 32px;
      width: min(190px, 42vw);
      padding: 5px 30px 5px 11px;
      border-radius: 999px;
      border: 1px solid var(--line);
      background: #fffdf8;
      color: #292524;
      font-size: 11px;
      font-weight: 900;
      line-height: 1.2;
      cursor: pointer;
      box-shadow: 0 1px 0 rgba(32, 29, 24, .03);
    }

    .slot-model-override select:hover,
    .slot-model-override select:focus {
      border-color: var(--accent-line);
      outline: 0;
      box-shadow: 0 0 0 3px rgba(31, 58, 51, .08);
    }

    .slot-model-override.is-active select {
      border-color: var(--accent-line);
      background: #f7fffd;
      color: var(--accent-strong);
    }

    .slot-model-risk {
      margin-top: 7px;
      border-radius: var(--radius-sm);
      border: 1px solid var(--attention-line);
      background: var(--attention-soft);
      color: #7a5417;
      padding: 7px 8px;
      font-size: 11px;
      font-weight: 750;
      line-height: 1.5;
    }

    @media (max-width: 520px) {
      .slot-model-override {
        align-items: stretch;
        flex-direction: column;
        gap: 7px;
      }

      .slot-model-override select {
        width: 100%;
      }
    }

    .slot-card-head {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      gap: 10px;
      align-items: start;
    }

    .slot-select-wrap {
      padding-top: 3px;
    }

    .slot-card-main {
      min-width: 0;
      display: grid;
      gap: 7px;
    }

    .slot-title-row {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 10px;
    }

    .slot-card-title {
      margin: 0;
      color: #1c1917;
      font-size: 14px;
      font-weight: 950;
      line-height: 1.35;
    }

    .slot-card-brief {
      margin: 2px 0 0;
      color: #6f6a60;
      font-size: 12px;
      font-weight: 700;
      line-height: 1.45;
      display: -webkit-box;
      overflow: hidden;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }

    .slot-ratio-pill {
      border-radius: 999px;
      background: var(--neutral-soft);
      color: #44403c;
      padding: 5px 8px;
      font-size: 11px;
      font-weight: 950;
      white-space: nowrap;
    }

    .slot-meta-row {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .slot-meta-pill {
      border-radius: 999px;
      background: var(--neutral-soft);
      color: #57534e;
      padding: 4px 7px;
      font-size: 11px;
      font-weight: 850;
      line-height: 1.1;
    }

    .slot-meta-pill.primary {
      background: var(--accent-soft);
      color: var(--accent-strong);
    }

    .slot-meta-pill.ready {
      background: var(--success-soft);
      color: #276749;
    }

    .slot-meta-pill.warn {
      background: var(--attention-soft);
      color: #7a5417;
    }

    .slot-detail-toggle {
      margin-top: 2px;
      border: 0;
      background: transparent;
      color: var(--deep-green);
      padding: 0;
      width: fit-content;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 11px;
      font-weight: 950;
      cursor: pointer;
    }

    .slot-detail-body {
      margin-top: 8px;
      border: 1px solid var(--line-soft);
      border-radius: var(--radius);
      background: var(--paper-warm);
      padding: 9px;
      color: #68635a;
      font-size: 11px;
      font-weight: 750;
      line-height: 1.6;
    }

    .slot-strategy-grid {
      display: grid;
      gap: 6px;
    }

    .slot-strategy-row {
      display: grid;
      grid-template-columns: minmax(72px, .28fr) minmax(0, 1fr);
      gap: 8px;
      align-items: start;
      min-width: 0;
    }

    .slot-strategy-row strong {
      color: #292524;
      font-weight: 950;
      white-space: nowrap;
    }

    .slot-strategy-row span,
    .slot-meta-pill {
      min-width: 0;
      overflow-wrap: anywhere;
      word-break: break-word;
    }

    .slot-detail:not([open]) .slot-detail-body {
      display: none;
    }

    .generation-guidance-panel {
      flex-basis: 100%;
      width: 100%;
      border: 1px solid rgba(251, 191, 36, .38);
      border-radius: 12px;
      background: linear-gradient(180deg, rgba(255, 251, 235, .86), rgba(255, 255, 255, .92));
      padding: 0;
      display: grid;
      gap: 0;
      color: #9a3412;
      overflow: hidden;
    }

    .generation-guidance-panel > summary {
      list-style: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 12px 14px;
    }

    .generation-guidance-panel > summary::-webkit-details-marker {
      display: none;
    }

    .generation-guidance-summary-copy {
      display: grid;
      gap: 4px;
      min-width: 0;
    }

    .generation-guidance-summary-copy span {
      color: #9a3412;
      font-size: 12px;
      font-weight: 820;
      line-height: 1.45;
    }

    .generation-guidance-count {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      width: fit-content;
      border-radius: 999px;
      background: var(--deep-green-soft);
      color: var(--deep-green);
      padding: 7px 10px;
      font-size: 12px;
      font-weight: 950;
      white-space: nowrap;
    }

    .generation-guidance-panel[open] .generation-guidance-count i {
      transform: rotate(180deg);
    }

    .generation-guidance-body {
      display: grid;
      gap: 8px;
      border-top: 1px solid rgba(251, 191, 36, .28);
      padding: 12px 14px 14px;
    }

    .generation-guidance-panel strong {
      display: block;
      font-size: 13px;
      font-weight: 900;
      color: #92400e;
    }
    .generation-guidance-panel p {
      margin: 0;
      font-size: 12px;
      line-height: 1.6;
    }
    .generation-guidance-panel .guidance-list {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }
    .generation-guidance-panel .guidance-chip {
      border-radius: 999px;
      background: #fff;
      border: 1px solid #fed7aa;
      padding: 5px 9px;
      font-size: 11px;
      font-weight: 800;
      color: #9a3412;
    }
    .generation-guidance-panel .guidance-item {
      border-radius: 10px;
      border: 1px solid rgba(251, 191, 36, .34);
      background: #fff;
      padding: 8px 10px;
      display: grid;
      gap: 6px;
    }
    .generation-guidance-panel .guidance-item strong {
      font-size: 12px;
      color: #7c2d12;
    }
    .generation-guidance-panel .guidance-item small {
      color: #9a3412;
      font-size: 11px;
      line-height: 1.5;
    }

    .generation-guidance-panel .guidance-focus-note {
      border-radius: 10px;
      border: 1px solid rgba(251, 191, 36, .36);
      background: #fff;
      padding: 8px 10px;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      line-height: 1.5;
      color: #7c2d12;
    }

    .size-settings-panel {
      border: 1px solid var(--line-soft);
      border-radius: var(--radius);
      background: #fff;
      padding: 12px;
      display: grid;
      gap: 10px;
      box-shadow: 0 8px 20px rgba(31, 29, 24, .028);
    }

    .size-settings-panel.beginner-size-panel {
      border-color: #d8e9e4;
      background: #fbfffd;
    }

    .beginner-size-grid {
      display: grid;
      gap: 10px;
    }

    @media (min-width: 720px) {
      .beginner-size-grid {
        grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
      }
    }

    .size-recommend-card {
      border: 1px solid var(--accent-line);
      border-radius: var(--radius);
      background: var(--accent-soft);
      color: var(--accent-strong);
      padding: 12px;
      display: grid;
      gap: 8px;
    }

    .size-recommend-card strong {
      font-size: 13px;
      font-weight: 950;
      line-height: 1.35;
    }

    .size-recommend-card p {
      margin: 0;
      font-size: 12px;
      font-weight: 780;
      line-height: 1.6;
    }

    .size-recommend-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .size-recommend-actions .chip {
      background: #fff;
    }

    .size-cost-grid {
      display: grid;
      gap: 8px;
    }

    @media (min-width: 560px) {
      .size-cost-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
    }

    .size-cost-item {
      border: 1px solid #e3ded4;
      border-radius: var(--radius-sm);
      background: #fff;
      padding: 9px 10px;
      min-width: 0;
    }

    .size-cost-item span {
      display: block;
      color: #78716c;
      font-size: 10px;
      font-weight: 900;
      line-height: 1.25;
    }

    .size-cost-item strong {
      display: block;
      margin-top: 4px;
      color: #292524;
      font-size: 12px;
      font-weight: 950;
      line-height: 1.3;
      overflow-wrap: anywhere;
    }

    .size-advanced-drawer {
      border: 1px solid #e3ded4;
      border-radius: var(--radius);
      background: #fff;
    }

    .size-advanced-drawer[open] {
      border-color: rgba(31, 58, 51, .22);
      background: linear-gradient(180deg, #ffffff, #f8fffc);
      box-shadow: 0 10px 24px rgba(31, 58, 51, .06);
    }

    .size-advanced-drawer > summary {
      list-style: none;
      cursor: pointer;
      padding: 10px 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      color: #44403c;
      font-size: 12px;
      font-weight: 900;
    }

    .size-advanced-drawer > summary::-webkit-details-marker {
      display: none;
    }

    .size-advanced-drawer[open] > summary i {
      transform: rotate(180deg);
    }

    .size-advanced-body {
      padding: 0 12px 12px;
      display: grid;
      gap: 10px;
    }

    .size-settings-panel .chip {
      border-radius: 7px;
    }

    .size-summary {
      border-radius: var(--radius-sm);
      border: 1px solid var(--accent-line);
      background: var(--accent-soft);
      color: var(--accent-strong);
      padding: 8px 10px;
      font-size: 11px;
      font-weight: 800;
      line-height: 1.55;
    }

    .size-control-grid {
      display: grid;
      gap: 10px;
    }

    @media (min-width: 640px) {
      .size-control-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    .resolution-tier-row {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .resolution-tier-row .chip.is-disabled {
      cursor: not-allowed;
      opacity: 0.48;
    }

    .studio-resolution-panel {
      border: 1px solid var(--accent-line);
      border-radius: var(--radius-sm);
      background: var(--accent-soft);
      padding: 10px;
      display: grid;
      gap: 8px;
    }

    .studio-resolution-panel .resolution-tier-row .chip {
      background: #fff;
      border-radius: 7px;
      padding-block: 8px;
      min-height: 36px;
    }

    .studio-resolution-panel small {
      color: var(--deep-green);
      font-size: 11px;
      font-weight: 800;
      line-height: 1.45;
    }

    .slot-size-note {
      border-color: #99d6cd !important;
      background: var(--deep-green-soft) !important;
      color: var(--deep-green) !important;
    }

    .amazon-package-panel {
      border: 1px solid var(--accent-line);
      border-radius: var(--radius);
      background: #f7fffd;
      padding: 12px;
      display: grid;
      gap: 10px;
    }

    .amazon-package-panel.is-hidden {
      display: none;
    }

    .size-settings-panel.is-hidden,
    #slotHealth.is-hidden {
      display: none;
    }

    .amazon-package-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
    }

    .amazon-package-head h3 {
      margin: 0;
      color: #134e4a;
      font-size: 14px;
      font-weight: 950;
      line-height: 1.35;
    }

    .amazon-package-head p {
      margin: 3px 0 0;
      color: var(--deep-green);
      font-size: 12px;
      font-weight: 750;
      line-height: 1.55;
    }

    .amazon-package-options {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .amazon-package-option {
      border-radius: 8px;
      padding: 8px 10px;
      min-height: 42px;
      align-items: center;
    }

    .amazon-package-option.is-locked {
      cursor: not-allowed;
      opacity: .58;
    }

    .amazon-package-summary {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .amazon-package-note {
      margin: 0;
      color: #7a5417;
      font-size: 11px;
      font-weight: 800;
      line-height: 1.55;
    }

    .slot-beginner-guide {
      border: 1px solid #e7dcc5;
      border-radius: var(--radius);
      background: #fffaf0;
      color: #7a5417;
      padding: 10px 12px;
      flex: 1 1 100%;
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }

    .slot-beginner-guide strong {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      color: #7a5417;
      font-size: 13px;
      font-weight: 950;
      line-height: 1.35;
    }

    .slot-beginner-guide p {
      margin: 4px 0 0;
      color: #8a6425;
      font-size: 12px;
      font-weight: 750;
      line-height: 1.55;
    }

    .conversion-plan-recommender {
      grid-column: 1 / -1;
      position: relative;
      display: grid;
      gap: 14px;
      border: 1px solid rgba(31, 58, 51, .22);
      border-left: 4px solid var(--deep-green);
      border-radius: 14px;
      background:
        radial-gradient(circle at 92% 8%, rgba(201, 168, 106, .11), transparent 26%),
        linear-gradient(145deg, #ffffff 0%, #f7fffb 56%, #fffaf0 100%);
      padding: 16px;
      box-shadow: 0 18px 42px rgba(31, 58, 51, .08);
      overflow: hidden;
    }

    .conversion-plan-recommender.is-blocked {
      border-style: dashed;
      border-left-style: solid;
    }

    .conversion-plan-head,
    .conversion-plan-footer,
    .conversion-plan-actions {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 14px;
      align-items: start;
      position: relative;
      z-index: 1;
    }

    .conversion-plan-eyebrow,
    .conversion-plan-rank {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      width: fit-content;
      border-radius: 999px;
      background: #e7f5f1;
      color: var(--deep-green);
      padding: 6px 9px;
      font-size: 11px;
      font-weight: 950;
      line-height: 1;
    }

    .conversion-plan-head h3 {
      margin: 8px 0 0;
      color: #1c1917;
      font-size: 20px;
      font-weight: 950;
      line-height: 1.16;
    }

    .conversion-plan-head p {
      margin: 6px 0 0;
      color: #57534e;
      font-size: 12.5px;
      font-weight: 760;
      line-height: 1.52;
      max-width: 760px;
    }

    .conversion-plan-count {
      min-width: 150px;
      border: 1px solid rgba(31, 58, 51, .18);
      border-radius: 10px;
      background: rgba(255, 255, 255, .78);
      padding: 10px;
      text-align: right;
    }

    .conversion-plan-count strong {
      display: block;
      color: #134e4a;
      font-size: 18px;
      font-weight: 950;
      line-height: 1.2;
    }

    .conversion-plan-count small {
      display: block;
      margin-top: 6px;
      color: #69645b;
      font-size: 11.5px;
      font-weight: 750;
      line-height: 1.45;
    }

    .conversion-plan-missing {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .conversion-plan-missing span {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border-radius: 999px;
      background: #fff7ed;
      color: #9a5b11;
      padding: 7px 10px;
      font-size: 12px;
      font-weight: 900;
    }

    .conversion-plan-card-row {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
      gap: 10px;
    }

    .conversion-plan-expert {
      position: relative;
      z-index: 1;
      display: grid;
      gap: 8px;
      border: 1px solid rgba(31, 58, 51, .16);
      border-radius: 12px;
      background: rgba(255, 255, 255, .74);
      padding: 13px 14px;
    }

    .conversion-plan-expert strong {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      color: #134e4a;
      font-size: 13px;
      font-weight: 950;
      line-height: 1.35;
    }

    .conversion-plan-expert p {
      margin: 0;
      color: #57534e;
      font-size: 12.5px;
      font-weight: 750;
      line-height: 1.6;
    }

    .conversion-plan-expert div {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
    }

    .conversion-plan-card {
      display: grid;
      gap: 8px;
      min-width: 0;
      border: 1px solid #ded8cc;
      border-radius: 12px;
      background: rgba(255, 255, 255, .92);
      padding: 13px;
      text-align: left;
      cursor: pointer;
      transition: transform .14s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
    }

    .conversion-plan-card:hover,
    .conversion-plan-card.is-selected {
      transform: translateY(-1px);
      border-color: rgba(31, 58, 51, .58);
      background: #f7fffb;
      box-shadow: 0 18px 38px rgba(31, 58, 51, .11);
    }

    .conversion-plan-card:disabled {
      cursor: not-allowed;
      opacity: .62;
      transform: none;
      box-shadow: none;
    }

    .conversion-plan-card strong {
      color: #1c1917;
      font-size: 15px;
      font-weight: 950;
      line-height: 1.28;
    }

    .conversion-plan-card small,
    .conversion-plan-meta {
      color: #64726d;
      font-size: 11.8px;
      font-weight: 750;
      line-height: 1.45;
    }

    .conversion-plan-card-brief {
      display: -webkit-box;
      overflow: hidden;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    .conversion-plan-score {
      width: fit-content;
      border-radius: 999px;
      background: var(--deep-green-soft);
      color: var(--deep-green);
      padding: 5px 8px;
      font-size: 11px;
      font-weight: 950;
    }

    .conversion-plan-mini-stats {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .conversion-plan-mini-stats span {
      border-radius: 999px;
      background: #f6f3ea;
      color: #4f4740;
      padding: 5px 7px;
      font-size: 11px;
      font-weight: 900;
      line-height: 1;
    }

    .conversion-plan-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .conversion-plan-tags em,
    .conversion-plan-focus span,
    .conversion-plan-uploads span,
    .conversion-plan-expert span {
      border-radius: 999px;
      background: #edf7f4;
      color: #285d56;
      padding: 6px 9px;
      font-size: 11.5px;
      font-style: normal;
      font-weight: 900;
      line-height: 1;
    }

    .conversion-plan-body {
      display: grid;
      grid-template-columns: minmax(260px, .82fr) minmax(320px, 1.18fr);
      gap: 12px;
      position: relative;
      z-index: 1;
    }

    .conversion-plan-selected-summary {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 12px;
      align-items: center;
      border: 1px solid rgba(31, 58, 51, .16);
      border-radius: 12px;
      background: rgba(255, 255, 255, .74);
      padding: 12px 14px;
    }

    .conversion-plan-selected-summary strong {
      display: block;
      color: #134e4a;
      font-size: 14px;
      font-weight: 950;
      line-height: 1.32;
    }

    .conversion-plan-selected-summary small {
      display: block;
      margin-top: 4px;
      color: #5f6f69;
      font-size: 11.5px;
      font-weight: 800;
      line-height: 1.45;
    }

    .conversion-plan-toggle-row {
      display: flex;
      justify-content: flex-end;
      position: relative;
      z-index: 1;
    }

    .conversion-plan-switcher {
      grid-column: 1 / -1;
      border: 1px solid rgba(226, 220, 210, .9);
      border-radius: 12px;
      background: rgba(255, 255, 255, .7);
      position: relative;
      z-index: 1;
    }

    .conversion-plan-switcher > summary {
      list-style: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 10px 12px;
      color: #4f4740;
      font-size: 12px;
      font-weight: 950;
    }

    .conversion-plan-switcher > summary::-webkit-details-marker {
      display: none;
    }

    .conversion-plan-switcher[open] > summary i {
      transform: rotate(180deg);
    }

    .conversion-plan-switcher .conversion-plan-card-row {
      padding: 0 12px 12px;
      grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    }

    .conversion-plan-switcher:not([open]) .conversion-plan-card-row {
      display: none;
    }

    .conversion-plan-recommender:not(.is-revealed) .conversion-plan-expert,
    .conversion-plan-recommender:not(.is-revealed) .conversion-plan-body,
    .conversion-plan-recommender:not(.is-revealed) .conversion-plan-footer {
      display: none;
    }

    .conversion-plan-detail,
    .conversion-plan-risk,
    .conversion-plan-uploads {
      border: 1px solid #e4ded3;
      border-radius: 12px;
      background: rgba(255, 255, 255, .8);
      padding: 14px;
      min-width: 0;
    }

    .conversion-plan-detail.is-plan-overview {
      background: linear-gradient(180deg, rgba(251, 250, 246, .76), rgba(255, 255, 255, .86));
    }

    .conversion-plan-detail.is-slot-list {
      padding: 12px;
    }

    .conversion-plan-slot-columns {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    @media (max-width: 860px) {
      .conversion-plan-body,
      .conversion-plan-selected-summary,
      .conversion-plan-slot-columns {
        grid-template-columns: 1fr;
      }
    }

    .conversion-plan-detail > span,
    .conversion-plan-risk strong,
    .conversion-plan-uploads strong {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: var(--deep-green);
      font-size: 12px;
      font-weight: 950;
    }

    .conversion-plan-detail h4 {
      margin: 8px 0 0;
      color: #1c1917;
      font-size: 18px;
      font-weight: 950;
      line-height: 1.2;
    }

    .conversion-plan-detail p {
      margin: 8px 0 0;
      color: #57534e;
      font-size: 12.5px;
      font-weight: 750;
      line-height: 1.62;
    }

    .conversion-plan-focus,
    .conversion-plan-uploads div {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
      margin-top: 10px;
    }

    .conversion-plan-detail ul,
    .conversion-plan-risk ul {
      display: grid;
      gap: 8px;
      margin: 10px 0 0;
      padding: 0;
      list-style: none;
    }

    .conversion-plan-detail li {
      display: grid;
      gap: 3px;
      border-bottom: 1px solid rgba(226, 220, 210, .82);
      padding-bottom: 8px;
    }

    .conversion-plan-detail li:last-child {
      border-bottom: 0;
      padding-bottom: 0;
    }

    .conversion-plan-detail li span {
      color: #292524;
      font-size: 12.5px;
      font-weight: 950;
      line-height: 1.35;
    }

    .conversion-plan-detail li small,
    .conversion-plan-risk li {
      color: #69645b;
      font-size: 11.5px;
      font-weight: 750;
      line-height: 1.48;
    }

    .conversion-plan-risk li {
      padding-left: 14px;
      position: relative;
    }

    .conversion-plan-risk li::before {
      content: "";
      position: absolute;
      top: .62em;
      left: 0;
      width: 5px;
      height: 5px;
      border-radius: 999px;
      background: #d97706;
    }

    .conversion-plan-actions {
      align-items: center;
      border: 1px solid rgba(31, 58, 51, .16);
      border-radius: 12px;
      background: rgba(251, 250, 246, .76);
      padding: 12px;
    }

    .conversion-plan-actions span {
      color: #285d56;
      font-size: 13px;
      font-weight: 900;
      line-height: 1.5;
    }

    .btn.is-await-requirements {
      opacity: .62;
      filter: saturate(.85);
    }

    .slot-section-head {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      border: 1px solid #e3ded4;
      border-radius: var(--radius);
      background: #fbfaf6;
      padding: 12px;
    }

    .slot-section-copy {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: 10px;
      align-items: start;
      min-width: min(100%, 280px);
    }

    .slot-section-index {
      display: inline-grid;
      width: 30px;
      height: 30px;
      place-items: center;
      border-radius: 8px;
      background: var(--accent);
      color: #fff;
      font-size: 12px;
      font-weight: 950;
    }

    .slot-section-copy h3 {
      margin: 0;
      color: #1c1917;
      font-size: 14px;
      font-weight: 950;
      line-height: 1.3;
    }

    .slot-section-copy p {
      margin-top: 4px;
      color: #68635a;
      font-size: 12px;
      font-weight: 750;
      line-height: 1.55;
    }

    .slot-section {
      display: grid;
      gap: 12px;
      grid-column: 1 / -1;
    }

    .slot-section-grid {
      display: grid;
      gap: 12px;
    }

    @media (min-width: 1024px) {
      .slot-section-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    .slot-icon {
      width: 38px;
      height: 38px;
      border-radius: 8px;
      display: grid;
      place-items: center;
      background: var(--deep-green-soft);
      color: var(--accent);
      flex: 0 0 auto;
    }

    .upload-zone {
      border: 1px dashed #5a5c52;
      border-radius: 8px;
      padding: 22px 18px;
      background: #171a15;
      display: grid;
      gap: 10px;
      place-items: center;
      text-align: center;
      cursor: pointer;
      transition: border-color .16s ease, background .16s ease, transform .12s ease;
    }

    .upload-zone:hover {
      transform: translateY(-1px);
      border-color: #74c4b8;
      background: #1b211d;
    }

    .upload-zone.dragover {
      border-color: #74c4b8;
      background: #1b2723;
    }

    .upload-size-pill {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      max-width: 100%;
      border: 1px solid rgba(226, 207, 160, .2);
      border-radius: 999px;
      background: rgba(201, 168, 106, .1);
      color: #a7f3d0;
      padding: 7px 10px;
      font-size: 11px;
      font-weight: 900;
      letter-spacing: .03em;
    }

    .upload-size-note {
      max-width: 320px;
      color: #969185;
      font-size: 11px;
      line-height: 1.7;
    }

    .thumb-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
      gap: 8px;
    }

    .thumb {
      position: relative;
      aspect-ratio: 1;
      overflow: hidden;
      border-radius: 8px;
      border: 1px solid #3f4238;
      background: #11130f;
    }

    .thumb-preview {
      width: 100%;
      height: 100%;
      padding: 0;
      border: 0;
      background: transparent;
      display: block;
      cursor: zoom-in;
    }

    .thumb-preview img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .thumb-index,
    .sequence-badge {
      position: absolute;
      left: 7px;
      top: 7px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 28px;
      height: 26px;
      border-radius: 999px;
      background: rgba(23,25,21,.78);
      color: #fff;
      font-size: 12px;
      font-weight: 900;
      padding: 0 8px;
      z-index: 2;
    }

    .sequence-badge {
      left: 10px;
      top: 10px;
      min-width: auto;
      height: 30px;
      background: rgba(31, 58, 51, .92);
    }

    .thumb-remove {
      position: absolute;
      top: 5px;
      right: 5px;
      width: 24px;
      height: 24px;
      border-radius: 999px;
      border: 0;
      background: rgba(0,0,0,.64);
      color: #fff;
      cursor: pointer;
      z-index: 3;
    }

    .thumb-zoom {
      position: absolute;
      inset-inline: 0;
      bottom: 0;
      padding: 5px 6px;
      background: rgba(0,0,0,.58);
      color: #fff;
      font-size: 11px;
      font-weight: 850;
      text-align: center;
      transform: translateY(100%);
      transition: transform .16s ease;
      pointer-events: none;
    }

    .thumb:hover .thumb-zoom {
      transform: translateY(0);
    }

    .thumb-evidence-role {
      position: absolute;
      left: 5px;
      right: 5px;
      bottom: 5px;
      z-index: 2;
      padding: 4px 6px;
      border-radius: 6px;
      background: rgba(31, 58, 51, .9);
      color: #fff;
      font-size: 10px;
      font-weight: 900;
      line-height: 1.2;
      text-align: center;
      pointer-events: none;
    }

    .prep-flow {
      display: grid;
      gap: 8px;
    }

    .flow-step {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: 10px;
      align-items: start;
      border: 1px solid #34362f;
      border-radius: 8px;
      background: #181a15;
      padding: 10px;
    }

    .flow-step-number {
      display: inline-flex;
      width: 28px;
      height: 28px;
      align-items: center;
      justify-content: center;
      border-radius: 999px;
      background: rgba(31, 58, 51, .22);
      color: #8ef0e2;
      font-size: 12px;
      font-weight: 950;
    }

    .flow-step small {
      display: block;
      margin-top: 3px;
      color: #aaa59b;
      font-size: 11px;
      line-height: 1.45;
    }

    .twin-guide {
      display: grid;
      gap: 8px;
    }

    .twin-limit-card {
      border: 1px solid #34362f;
      border-radius: 8px;
      background: #181a15;
      padding: 10px;
    }

    .twin-guide .twin-limit-card {
      padding: 10px 10px 8px;
    }

    .twin-guide .coverage-list {
      display: none;
    }

    .twin-guide-details {
      margin-top: 8px;
      border: 1px solid rgba(116, 196, 184, .18);
      border-radius: 8px;
      background: rgba(15, 25, 22, .38);
    }

    .twin-guide-details > summary {
      list-style: none;
      cursor: pointer;
      padding: 8px 10px;
      color: #9af0e5;
      font-size: 11px;
      font-weight: 900;
    }

    .twin-guide-details > summary::-webkit-details-marker {
      display: none;
    }

    .twin-guide-details .coverage-list {
      display: flex;
      padding: 0 10px 10px;
    }

    .twin-limit-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 6px;
      margin-top: 8px;
    }

    .twin-metric {
      border-radius: 7px;
      background: #11130f;
      padding: 8px;
      text-align: center;
      border: 1px solid #2d3029;
    }

    .twin-metric strong {
      display: block;
      color: #8ef0e2;
      font-size: 14px;
      font-weight: 950;
    }

    .twin-metric span {
      display: block;
      margin-top: 2px;
      color: #aaa59b;
      font-size: 10px;
      font-weight: 800;
      line-height: 1.25;
    }

    .coverage-list {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 8px;
    }

    .coverage-pill {
      border-radius: 999px;
      background: rgba(31, 58, 51, .18);
      color: #9af0e5;
      border: 1px solid rgba(116, 196, 184, .28);
      padding: 4px 8px;
      font-size: 11px;
      font-weight: 850;
    }

    .twin-preview {
      border: 1px solid #34362f;
      border-radius: 8px;
      background: #181a15;
      overflow: hidden;
    }

    .twin-preview-media {
      min-height: 160px;
      aspect-ratio: 1;
      display: grid;
      place-items: center;
      background: #11130f;
      color: #aaa59b;
      text-align: center;
      padding: 14px;
      position: relative;
    }

    .twin-preview-media img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      background: #fff;
      display: block;
      cursor: zoom-in;
    }

    .twin-preview-body {
      padding: 10px;
      display: grid;
      gap: 8px;
    }

    .twin-status {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border-radius: 999px;
      padding: 5px 9px;
      width: fit-content;
      background: rgba(192, 132, 50, .16);
      color: #f4d7a9;
      font-size: 11px;
      font-weight: 900;
    }

    .twin-state-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border-radius: 999px;
      padding: 5px 10px;
      font-size: 11px;
      font-weight: 900;
      flex-shrink: 0;
      flex-grow: 0;
      align-self: flex-start;
      width: fit-content;
      white-space: nowrap;
    }
    .twin-state-idle  { background: rgba(190, 190, 190, .12); color: #d4d0c4; border: 1px solid rgba(190, 190, 190, .22); }
    .twin-state-busy  { background: rgba(192, 132, 50, .18); color: #f4d7a9; border: 1px solid rgba(192, 132, 50, .36); }
    .twin-state-busy i { animation: twin-spin 1.1s linear infinite; }
    .twin-state-ready { background: rgba(31, 58, 51, .22); color: #9af0e5; border: 1px solid rgba(116, 196, 184, .42); }

    @keyframes twin-spin { to { transform: rotate(360deg); } }

    .twin-status-body { display: grid; gap: 10px; }
    .twin-status-body:empty { display: none; }

    .twin-decision {
      display: grid;
      gap: 12px;
      border: 1px solid rgba(116, 196, 184, .24);
      border-radius: 12px;
      background: linear-gradient(145deg, rgba(15, 25, 22, .82), rgba(17, 19, 15, .9));
      padding: 12px;
      box-shadow: inset 0 0 0 1px rgba(154, 240, 229, .06);
    }

    .twin-decision.is-busy {
      border-color: rgba(31, 58, 51, .26);
      background:
        linear-gradient(145deg, rgba(255, 255, 255, .96), rgba(251, 250, 246, .92)),
        #ffffff;
      color: #173b36;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .8),
        0 18px 38px rgba(31, 58, 51, .08);
    }

    .main-flow-stage .twin-decision.is-busy .twin-decision-title,
    .twin-decision.is-busy .twin-decision-title {
      color: #173b36;
    }

    .main-flow-stage .twin-decision.is-busy .twin-decision-copy,
    .twin-decision.is-busy .twin-decision-copy {
      color: #5f6c66;
    }

    .twin-work-motion {
      display: grid;
      gap: 12px;
    }

    .twin-work-scan {
      position: relative;
      overflow: hidden;
      height: 86px;
      border: 1px solid rgba(31, 58, 51, .16);
      border-radius: 12px;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, .78), rgba(236, 253, 245, .72)),
        #f7fffc;
    }

    .twin-work-scan::before {
      content: "";
      position: absolute;
      inset: 13px;
      border-radius: 9px;
      border: 1px solid rgba(31, 58, 51, .14);
      background:
        linear-gradient(90deg, rgba(31, 58, 51, .05) 1px, transparent 1px),
        linear-gradient(180deg, rgba(31, 58, 51, .05) 1px, transparent 1px);
      background-size: 22px 22px;
    }

    .twin-work-scan::after {
      content: "";
      position: absolute;
      inset-inline: 16px;
      top: 12px;
      height: 2px;
      border-radius: 999px;
      background: linear-gradient(90deg, transparent, var(--deep-green), var(--gold-line), transparent);
      box-shadow: 0 0 18px rgba(201, 168, 106, .42);
      animation: twinWorkScan 1.45s ease-in-out infinite;
    }

    .twin-work-shimmer {
      position: absolute;
      inset: 0;
      background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, .64) 44%, transparent 70%);
      background-size: 220% 100%;
      animation: shimmer 1.4s infinite linear;
      opacity: .56;
    }

    .twin-work-steps {
      display: grid;
      gap: 7px;
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .twin-work-step {
      display: grid;
      justify-items: center;
      gap: 5px;
      min-width: 0;
      border: 1px solid rgba(31, 58, 51, .12);
      border-radius: 9px;
      background: rgba(255, 255, 255, .7);
      padding: 8px 5px;
      color: #66736d;
      font-size: 10px;
      font-weight: 900;
      line-height: 1.25;
      text-align: center;
    }

    .twin-work-step i {
      color: #8b9a92;
    }

    .twin-work-step.is-done {
      border-color: rgba(31, 58, 51, .22);
      background: var(--deep-green-soft);
      color: var(--deep-green);
    }

    .twin-work-step.is-active {
      border-color: rgba(31, 58, 51, .34);
      background: var(--deep-green-soft);
      color: var(--deep-green);
      box-shadow: 0 10px 22px rgba(31, 58, 51, .08);
    }

    .twin-work-step.is-active i {
      animation: twin-spin 1.1s linear infinite;
    }

    .twin-work-step.is-warn {
      border-color: rgba(180, 83, 9, .24);
      background: #fff7ed;
      color: #92400e;
    }

    @keyframes twinWorkScan {
      0%, 100% {
        transform: translateY(4px);
      }
      50% {
        transform: translateY(56px);
      }
    }

    .twin-decision-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
    }

    .twin-decision-title {
      display: flex;
      align-items: center;
      gap: 8px;
      color: #f5f2e9;
      font-size: 14px;
      font-weight: 950;
      line-height: 1.25;
    }

    .twin-decision-title i {
      color: #9af0e5;
      flex-shrink: 0;
    }

    .twin-decision-copy {
      margin-top: 4px;
      color: #a8a59a;
      font-size: 11.5px;
      font-weight: 700;
      line-height: 1.55;
    }

    .twin-decision-status {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border-radius: 999px;
      border: 1px solid rgba(116, 196, 184, .28);
      background: rgba(201, 168, 106, .12);
      color: #9af0e5;
      padding: 5px 8px;
      font-size: 10.5px;
      font-weight: 950;
      white-space: nowrap;
    }

    .twin-decision-options {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    .twin-decision-card {
      position: relative;
      display: grid;
      gap: 8px;
      align-content: start;
      min-height: 132px;
      border: 1px solid rgba(116, 196, 184, .2);
      border-radius: 10px;
      background: rgba(20, 28, 25, .64);
      padding: 11px;
    }

    .twin-decision-card.is-primary {
      border-color: rgba(154, 240, 229, .46);
      background: linear-gradient(145deg, rgba(31, 58, 51, .2), rgba(20, 28, 25, .72));
    }

    .twin-decision-card.is-warn {
      border-color: rgba(192, 132, 50, .42);
      background: rgba(76, 48, 20, .24);
    }

    .twin-decision-card strong {
      display: flex;
      align-items: center;
      gap: 7px;
      color: #f5f2e9;
      font-size: 12.5px;
      font-weight: 950;
      line-height: 1.25;
    }

    .twin-decision-card small {
      color: #b8b2a6;
      font-size: 11px;
      font-weight: 700;
      line-height: 1.5;
    }

    .twin-decision-card .prep-stage-action {
      width: fit-content;
      margin-top: auto;
    }

    .twin-fact-snapshot {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 6px;
    }

    .twin-fact-chip {
      min-width: 0;
      border-radius: 8px;
      border: 1px solid rgba(245, 242, 233, .1);
      background: rgba(17, 19, 15, .62);
      padding: 7px 9px;
      color: #e6e1d5;
      font-size: 11px;
      font-weight: 800;
      line-height: 1.35;
      overflow-wrap: anywhere;
    }

    .twin-fact-chip span {
      display: block;
      margin-bottom: 2px;
      color: #9aa191;
      font-size: 10px;
      font-weight: 950;
    }

    .twin-detail-drawer {
      border: 1px solid rgba(116, 196, 184, .18);
      border-radius: 10px;
      background: rgba(15, 25, 22, .42);
      overflow: hidden;
      scroll-margin-top: 88px;
    }

    .twin-detail-drawer > summary {
      list-style: none;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      cursor: pointer;
      padding: 10px 12px;
      min-height: 44px;
      color: #dff7f2;
      font-size: 12px;
      font-weight: 950;
    }

    .twin-detail-drawer > summary::-webkit-details-marker { display: none; }

    .twin-detail-drawer > summary::after {
      content: "▸";
      color: #74c4b8;
      transition: transform .16s ease;
    }

    .twin-detail-drawer[open] > summary::after {
      transform: rotate(90deg);
    }

    .twin-detail-drawer small {
      color: #a8a59a;
      font-size: 10.5px;
      font-weight: 700;
    }

    .twin-detail-drawer .twin-detail-inner {
      display: grid;
      gap: 10px;
      padding: 0 12px 12px;
    }

    .twin-angle-cell.is-document {
      border-style: dashed;
      background: color-mix(in srgb, var(--gold, #caa55f) 7%, #fff);
    }

    .twin-document-note {
      color: var(--muted, #6b7280);
      font-size: 10px;
      font-weight: 700;
      line-height: 1.45;
    }

    .twin-pass-row {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 6px;
    }

    .twin-pass {
      display: grid;
      gap: 4px;
      border-radius: 7px;
      background: #11130f;
      border: 1px solid #2d3029;
      padding: 8px 6px;
      text-align: center;
      color: #aaa59b;
      font-size: 10px;
      font-weight: 800;
    }
    .twin-pass i { margin: 0 auto; }
    .twin-pass strong {
      display: block;
      font-size: 11px;
      font-weight: 900;
      color: #d4d0c4;
    }
    .twin-pass.ok { border-color: rgba(116, 196, 184, .4); background: rgba(31, 58, 51, .14); }
    .twin-pass.ok strong { color: #8ef0e2; }
    .twin-pass.busy { border-color: rgba(192, 132, 50, .48); background: rgba(192, 132, 50, .14); }
    .twin-pass.busy strong { color: #f4d7a9; }
    .twin-pass.busy i { animation: twin-spin 1.1s linear infinite; }
    .twin-pass.warn { border-color: rgba(192, 132, 50, .42); background: rgba(192, 132, 50, .12); }
    .twin-pass.warn strong { color: #f4d7a9; }

    .twin-anchor {
      border-radius: 8px;
      background: rgba(31, 58, 51, .12);
      border: 1px solid rgba(116, 196, 184, .3);
      padding: 9px 11px;
      font-size: 11px;
      line-height: 1.6;
      color: #e3faf6;
    }
    .twin-anchor strong {
      display: block;
      font-size: 10px;
      color: #74c4b8;
      font-weight: 900;
      margin-bottom: 4px;
      letter-spacing: .04em;
    }

    .twin-summary-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 6px;
    }
    .twin-summary-cell {
      border-radius: 7px;
      background: rgba(17, 19, 15, .7);
      border: 1px solid rgba(245, 242, 233, .1);
      padding: 7px 9px;
      font-size: 11px;
      color: #e1ddd1;
      line-height: 1.5;
      min-width: 0;
    }
    .twin-summary-cell strong {
      display: block;
      font-size: 10px;
      color: #c0c4ae;
      font-weight: 900;
      margin-bottom: 3px;
      letter-spacing: .04em;
    }

    .twin-coverage { display: grid; gap: 5px; }
    .twin-coverage h4 {
      margin: 0;
      font-size: 10px;
      font-weight: 900;
      color: #c0c4ae;
      letter-spacing: .04em;
    }
    .twin-coverage-row { display: flex; flex-wrap: wrap; gap: 6px; }
    .twin-coverage-empty { font-size: 11px; color: #807c70; }

    .coverage-pill.is-missing {
      background: rgba(162, 61, 75, .14);
      color: #f4b8c1;
      border: 1px dashed rgba(162, 61, 75, .42);
    }

    .twin-warn {
      border-radius: 8px;
      background: rgba(162, 61, 75, .12);
      border: 1px solid rgba(162, 61, 75, .35);
      padding: 8px 10px;
      font-size: 11px;
      line-height: 1.55;
      color: #f4d3d8;
      display: flex;
      gap: 8px;
      align-items: flex-start;
    }
    .twin-warn strong {
      display: block;
      font-size: 10px;
      color: #f4b8c1;
      font-weight: 900;
      margin-bottom: 3px;
      letter-spacing: .04em;
    }
    .twin-warn i { margin-top: 2px; flex-shrink: 0; }

    .twin-meta-foot {
      font-size: 10px;
      color: #807c70;
      letter-spacing: .02em;
    }

    .twin-locked {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      padding: 10px 12px;
      border-radius: 8px;
      border: 1px solid rgba(192, 132, 50, .35);
      background: rgba(192, 132, 50, .12);
      color: #f4d7a9;
    }
    .twin-locked i { margin-top: 2px; flex-shrink: 0; }
    .twin-locked strong { display: block; font-size: 12px; font-weight: 900; }
    .twin-locked small { display: block; margin-top: 2px; font-size: 11px; line-height: 1.5; color: #e7c997; }

    .twin-actions { display: flex; flex-wrap: wrap; gap: 8px; }
    .twin-panel .twin-actions { display: none; }

    .twin-panel.is-recognizing .flow-step-need,
    .twin-panel.is-recognizing .prep-stage-footer,
    .twin-panel.is-recognizing .twin-locked,
    .twin-panel.is-recognizing .twin-actions {
      display: none !important;
    }

    .twin-progress {
      border-radius: 8px;
      border: 1px solid rgba(116, 196, 184, .22);
      background: rgba(31, 58, 51, .14);
      padding: 8px 10px;
      color: #d8f7f2;
      font-size: 11px;
      line-height: 1.55;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .twin-progress i { animation: twin-spin 1.1s linear infinite; }

    .twin-views-panel {
      border-top: 1px dashed rgba(245, 242, 233, .12);
      padding-top: 12px;
    }
    .twin-views-grid {
      display: grid;
      gap: 8px;
      grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }
    .twin-view {
      display: flex;
      flex-direction: column;
      border: 1px solid #34362f;
      border-radius: 8px;
      overflow: hidden;
      background: #11130f;
    }
    .twin-view-thumb {
      position: relative;
      aspect-ratio: 1;
      background: #1a1c17;
    }
    .twin-view-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      cursor: zoom-in;
    }
    .twin-view-thumb.empty {
      display: flex;
      align-items: center;
      justify-content: center;
      color: #67645f;
      font-size: 10px;
      letter-spacing: .04em;
      text-align: center;
      padding: 8px;
    }
    .twin-view-meta {
      padding: 6px 8px;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .twin-view-angle {
      font-size: 11px;
      font-weight: 900;
      color: #f5f2e9;
      line-height: 1.3;
    }
    .twin-view-source {
      font-size: 10px;
      color: #9aa191;
      letter-spacing: .02em;
    }
    .twin-view-source.user { color: #9af0e5; }
    .twin-view-source.synth { color: #f4d7a9; }
    .twin-view-source.missing { color: #f4a8b1; }
    .twin-view-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      padding: 0 6px 6px;
    }
    .twin-view-actions button {
      flex: 1 1 auto;
      font-size: 10px;
      padding: 3px 6px;
      border-radius: 6px;
      border: 1px solid #34362f;
      background: #1a1c17;
      color: #d4d0c4;
      cursor: pointer;
    }
    .twin-view-actions button:hover { border-color: rgba(116, 196, 184, .42); color: #9af0e5; }
    .twin-view-actions button:disabled { opacity: .5; cursor: not-allowed; }
    .twin-view-busy {
      position: absolute; inset: 0;
      display: flex; align-items: center; justify-content: center;
      background: rgba(11, 13, 9, .72);
      color: #f4d7a9;
      font-size: 11px;
      font-weight: 900;
      letter-spacing: .04em;
      gap: 6px;
    }
    .twin-view-busy i { animation: twin-spin 1.1s linear infinite; }

    .twin-usefulness {
      border-radius: 8px;
      border: 1px solid rgba(116, 196, 184, .22);
      background: rgba(31, 58, 51, .12);
      padding: 8px;
      color: #d8f7f2;
      font-size: 11px;
      line-height: 1.55;
    }

    .twin-asset-toggle {
      border: 1px dashed rgba(116, 196, 184, .25);
      border-radius: 8px;
      padding: 8px 10px;
      cursor: pointer;
    }

    .twin-asset-toggle input { accent-color: var(--gold); }

    .twin-spec-grid {
      display: grid;
      gap: 6px;
    }

    .twin-spec-block {
      margin: 0;
      border-radius: 8px;
      border: 1px solid rgba(245, 242, 233, .12);
      background: rgba(17, 19, 15, .55);
      padding: 8px 10px;
      color: #f5f2e9;
      font-size: 11px;
      line-height: 1.55;
    }

    .twin-spec-block dt {
      color: #c0c4ae;
      font-weight: 900;
      letter-spacing: .02em;
      margin-bottom: 2px;
    }

    .twin-spec-block dd {
      margin: 0;
      white-space: pre-wrap;
      word-break: break-word;
    }

    .twin-asset-grid,
    .edit-reference-grid {
      display: grid;
      gap: 8px;
    }

    .twin-asset-grid {
      grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
    }

    .twin-asset {
      border: 1px solid #34362f;
      border-radius: 8px;
      overflow: hidden;
      background: #11130f;
    }

    .twin-asset button,
    .edit-reference button {
      width: 100%;
      padding: 0;
      border: 0;
      background: transparent;
      cursor: zoom-in;
    }

    .twin-asset img,
    .edit-reference img {
      width: 100%;
      aspect-ratio: 1;
      object-fit: cover;
      display: block;
    }

    .twin-asset span {
      display: block;
      padding: 6px;
      color: #f5f2e9;
      font-size: 10px;
      font-weight: 850;
      line-height: 1.3;
      text-align: center;
    }

    .twin-step {
      display: grid;
      gap: 10px;
      padding: 12px;
      border-radius: 12px;
      border: 1px solid rgba(116, 196, 184, .18);
      background: rgba(15, 25, 22, .35);
    }

    .twin-step + .twin-step { margin-top: 12px; }

    .twin-step-head {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .twin-step-index {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: rgba(31, 58, 51, .28);
      color: #9af0e5;
      font-size: 11px;
      font-weight: 900;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .twin-step-title {
      font-size: 12px;
      font-weight: 900;
      color: #f5f2e9;
      letter-spacing: .02em;
    }

    .twin-step-desc {
      font-size: 11px;
      line-height: 1.6;
      color: #a8a59a;
    }

    .twin-coverage-body { display: grid; gap: 12px; }
    .twin-coverage-body:empty { display: none; }

    .prep-flow-intro {
      position: relative;
      overflow: hidden;
      border: 1px solid rgba(116, 196, 184, .22);
      border-radius: 12px;
      background:
        linear-gradient(145deg, rgba(20, 28, 25, .96), rgba(13, 23, 20, .96)),
        radial-gradient(circle at 10% 0%, rgba(201, 168, 106, .16), transparent 35%);
      padding: 13px;
      box-shadow: 0 14px 30px rgba(0, 0, 0, .18);
    }

    .prep-flow-intro::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(105deg, transparent 0%, rgba(154, 240, 229, .08) 44%, transparent 72%);
      transform: translateX(-100%);
      animation: prepStageShimmer 3.4s ease-in-out infinite;
      pointer-events: none;
    }

    .prep-flow-intro-head {
      position: relative;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 10px;
    }

    .prep-flow-intro h2 {
      margin: 0;
      color: #f5f2e9;
      font-size: 14px;
      font-weight: 950;
      line-height: 1.25;
    }

    .prep-flow-intro p {
      margin: 4px 0 0;
      color: #a8a59a;
      font-size: 11.5px;
      font-weight: 650;
      line-height: 1.55;
    }

    .prep-flow-count {
      flex-shrink: 0;
      border: 1px solid rgba(116, 196, 184, .28);
      border-radius: 999px;
      background: rgba(201, 168, 106, .1);
      color: #9af0e5;
      padding: 6px 9px;
      font-size: 11px;
      font-weight: 950;
      white-space: nowrap;
    }

    .prep-flow-rail {
      position: relative;
      display: grid;
      gap: 14px;
      margin-top: 16px;
    }

    .prep-flow-chip {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      gap: 14px;
      align-items: center;
      border: 1px solid rgba(116, 196, 184, .16);
      border-radius: 14px;
      background: rgba(15, 25, 22, .62);
      color: #d6d2c5;
      padding: 16px 15px;
      text-align: left;
      cursor: pointer;
      transition: border-color .16s ease, background .16s ease, transform .12s ease;
    }

    .prep-flow-chip:hover {
      transform: translateY(-1px);
      border-color: rgba(154, 240, 229, .4);
      background: rgba(20, 34, 30, .8);
    }

    .prep-flow-chip.is-active {
      border-color: rgba(154, 240, 229, .6);
      background: rgba(31, 58, 51, .2);
      box-shadow: inset 0 0 0 1px rgba(154, 240, 229, .1);
    }

    .prep-flow-chip.is-done {
      border-color: rgba(201, 168, 106, .34);
      background: rgba(201, 168, 106, .12);
    }

    .prep-flow-chip.is-locked {
      opacity: .58;
      cursor: not-allowed;
    }

    .prep-chip-index {
      display: inline-grid;
      width: 38px;
      height: 38px;
      place-items: center;
      border-radius: 999px;
      background: rgba(116, 196, 184, .13);
      color: #9af0e5;
      font-size: 14px;
      font-weight: 950;
    }

    .prep-flow-chip.is-done .prep-chip-index,
    .prep-flow-chip.is-active .prep-chip-index {
      background: var(--gold);
      color: #07211d;
    }

    .prep-chip-copy {
      min-width: 0;
    }

    .prep-chip-copy strong {
      display: block;
      color: #f5f2e9;
      font-size: 14px;
      font-weight: 950;
      line-height: 1.28;
      overflow-wrap: anywhere;
    }

    .prep-chip-copy small {
      display: block;
      margin-top: 5px;
      color: #a8a59a;
      font-size: 12px;
      font-weight: 750;
      line-height: 1.5;
      overflow-wrap: anywhere;
    }

    .prep-chip-state {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      border-radius: 999px;
      background: rgba(31, 58, 51, .22);
      color: #9af0e5;
      padding: 8px 10px;
      font-size: 11.5px;
      font-weight: 950;
      white-space: nowrap;
    }

    .flow-step-card {
      position: relative;
      overflow: hidden;
      transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .14s ease;
    }

    .flow-step-card::before {
      content: "";
      position: absolute;
      inset: 0 auto 0 0;
      width: 3px;
      background: rgba(201, 168, 106, .72);
    }

    .flow-step-card::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(105deg, transparent 0%, rgba(154, 240, 229, .07) 44%, transparent 72%);
      transform: translateX(-100%);
      opacity: 0;
      pointer-events: none;
    }

    .flow-step-card.is-active {
      border-color: rgba(154, 240, 229, .48);
      background:
        linear-gradient(145deg, rgba(26, 33, 28, .98), rgba(16, 27, 24, .98));
      box-shadow: 0 18px 38px rgba(0, 0, 0, .2), inset 0 0 0 1px rgba(154, 240, 229, .08);
    }

    .flow-step-card.is-active::after {
      opacity: 1;
      animation: prepStageShimmer 2.8s ease-in-out infinite;
    }

    .flow-step-card.is-complete:not(.is-active)::before {
      background: rgba(201, 168, 106, .42);
    }

    .flow-step-card.is-locked:not(.is-active) {
      opacity: .68;
    }

    .flow-step-card + .flow-step-card { margin-top: 16px; }

    #appShell > .sidebar .flow-step-card + .flow-step-card {
      margin-top: 18px;
    }

    #appShell > .sidebar .flow-step-card {
      border-radius: 14px;
      padding: 18px 18px 16px;
    }

    #appShell > .sidebar .flow-step-header {
      gap: 14px;
      align-items: center;
    }

    #appShell > .sidebar .flow-step-badge {
      width: 38px;
      height: 38px;
      font-size: 15px;
      border-radius: 50%;
    }

    #appShell > .sidebar .flow-step-title {
      font-size: 15.5px;
      line-height: 1.25;
    }

    #appShell > .sidebar .flow-step-why {
      display: block;
      margin-top: 5px;
      font-size: 12.5px;
      line-height: 1.55;
      color: #b9b4a9;
    }

    #appShell > .sidebar .prep-stage-summary {
      margin-top: 13px;
      border-radius: 12px;
      padding: 12px;
    }

    #appShell > .sidebar .prep-summary-copy strong {
      font-size: 13px;
    }

    #appShell > .sidebar .prep-summary-copy small {
      margin-top: 5px;
      font-size: 11.5px;
      line-height: 1.5;
    }

    #appShell > .sidebar .prep-chip-state,
    #appShell > .sidebar .prep-summary-action {
      font-size: 11.5px;
      padding: 8px 10px;
    }

    .flow-step-header {
      display: flex;
      align-items: flex-start;
      gap: 12px;
    }
    .flow-step-badge {
      flex-shrink: 0;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--gold), #0d9488);
      color: #f5f2e9;
      font-size: 13px;
      font-weight: 900;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 0 0 3px rgba(201, 168, 106, .15);
      position: relative;
      z-index: 1;
    }
    .flow-step-title-wrap { flex: 1 1 auto; min-width: 0; }
    .flow-step-title {
      font-size: 14px;
      font-weight: 900;
      color: #f5f2e9;
      letter-spacing: .02em;
    }
    .flow-step-why {
      margin-top: 4px;
      font-size: 11px;
      line-height: 1.6;
      color: #a8a59a;
    }

    .sidebar .flow-step-why {
      display: none;
    }

    .prep-stage-summary {
      display: none;
      position: relative;
      z-index: 1;
      margin-top: 10px;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 10px;
      align-items: center;
      border: 1px solid rgba(116, 196, 184, .16);
      border-radius: 10px;
      background: rgba(15, 25, 22, .48);
      padding: 10px;
    }

    .prep-summary-copy {
      min-width: 0;
    }

    .prep-summary-copy strong {
      display: flex;
      align-items: center;
      gap: 6px;
      color: #f5f2e9;
      font-size: 12px;
      font-weight: 950;
      line-height: 1.3;
    }

    .prep-summary-copy small {
      display: block;
      margin-top: 3px;
      color: #a8a59a;
      font-size: 10.8px;
      font-weight: 700;
      line-height: 1.45;
      overflow-wrap: anywhere;
    }

    .prep-summary-action,
    .prep-stage-action {
      border: 1px solid rgba(116, 196, 184, .28);
      border-radius: 8px;
      background: rgba(201, 168, 106, .12);
      color: #dff7f2;
      padding: 8px 10px;
      font-size: 10.5px;
      font-weight: 950;
      white-space: nowrap;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      transition: border-color .16s ease, background .16s ease, transform .12s ease;
    }

    .prep-summary-action:hover,
    .prep-stage-action:hover {
      transform: translateY(-1px);
      border-color: rgba(154, 240, 229, .62);
      background: rgba(201, 168, 106, .18);
    }

    .prep-summary-action:disabled,
    .prep-stage-action:disabled {
      cursor: not-allowed;
      opacity: .6;
      transform: none;
    }

    .flow-step-card.is-locked .prep-summary-action,
    .prep-flow-chip.is-locked .prep-chip-state {
      color: #8d897e;
    }

    .flow-step-card:not(.is-active) .prep-stage-summary {
      display: grid;
    }

    .prep-stage-content {
      position: relative;
      z-index: 1;
      display: grid;
      gap: 12px;
      transition: opacity .18s ease, max-height .2s ease, transform .18s ease, margin .18s ease;
      max-height: 1600px;
      opacity: 1;
      transform: translateY(0);
    }

    .flow-step-card:not(.is-active) .prep-stage-content {
      max-height: 0;
      opacity: 0;
      overflow: hidden;
      pointer-events: none;
      transform: translateY(-4px);
      margin: 0 !important;
    }

    .flow-step-card.is-active .prep-stage-content {
      animation: prepStageReveal .22s ease both;
    }

    .prep-stage-footer {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      border: 1px solid rgba(116, 196, 184, .16);
      border-radius: 10px;
      background: rgba(15, 25, 22, .42);
      padding: 10px;
    }

    .prep-stage-footer small {
      min-width: min(100%, 180px);
      flex: 1 1 180px;
      color: #a8a59a;
      font-size: 10.8px;
      font-weight: 700;
      line-height: 1.45;
    }

    .prep-stage-action.is-primary {
      border-color: rgba(154, 240, 229, .52);
      background: linear-gradient(135deg, var(--gold), var(--deep-green));
      color: #fff;
      box-shadow: 0 8px 22px rgba(201, 168, 106, .18);
    }

    .flow-step-need {
      margin-top: 8px;
      padding: 8px 10px;
      border-radius: 8px;
      background: rgba(201, 168, 106, .08);
      border-left: 3px solid var(--gold);
      font-size: 11px;
      line-height: 1.6;
      color: #c8e2dc;
    }

    @keyframes prepStageReveal {
      from {
        opacity: 0;
        transform: translateY(8px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes prepStageShimmer {
      0%, 45% {
        transform: translateX(-100%);
      }
      82%, 100% {
        transform: translateX(100%);
      }
    }

    .angles-checklist {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }
    .angles-checklist:empty { display: none; }
    .angle-chip {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 4px 9px;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 700;
      border: 1px solid rgba(116, 196, 184, .35);
      background: rgba(15, 25, 22, .45);
      color: #c8e2dc;
    }
    .angle-chip.is-required {
      border-color: rgba(201, 168, 106, .55);
      color: #9af0e5;
    }
    .angle-chip.is-covered {
      background: rgba(201, 168, 106, .18);
      border-color: var(--gold);
      color: #f5f2e9;
    }
    .angle-chip.is-missing {
      background: rgba(220, 90, 80, .12);
      border-color: rgba(220, 90, 80, .55);
      color: #f5b6b0;
    }
    .angle-chip .angle-chip-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: currentColor;
      opacity: .8;
    }

    .profile-fields-details {
      border: 1px solid rgba(116, 196, 184, .18);
      border-radius: 10px;
      background: rgba(15, 25, 22, .35);
    }
    .profile-fields-details > summary {
      list-style: none;
      cursor: pointer;
      padding: 10px 12px;
      font-size: 12px;
      font-weight: 700;
      color: #c8e2dc;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .profile-fields-details > summary::-webkit-details-marker { display: none; }
    .profile-fields-details > summary::before {
      content: "▸";
      transition: transform .15s;
      color: #74c4b8;
    }
    .profile-fields-details[open] > summary::before { transform: rotate(90deg); }
    .profile-fields-details > div { padding: 0 12px 12px 12px; }

    .twin-coverage-step {
      border-top: 1px dashed rgba(116, 196, 184, .25);
      padding-top: 12px;
    }

    .twin-detail-drawer.twin-coverage-step {
      border-top: 0;
      padding-top: 0;
    }

    .twin-coverage-head h3 { font-size: 12px; font-weight: 900; color: #f5f2e9; }
    .twin-coverage-head small {
      display: block;
      margin-top: 4px;
      font-size: 11px;
      line-height: 1.5;
      color: #a8a59a;
    }

    .twin-coverage-section h4 {
      font-size: 11px;
      font-weight: 900;
      color: #d6d2c5;
      margin: 0 0 6px;
      letter-spacing: .03em;
      text-transform: uppercase;
    }
    .twin-coverage-section .twin-coverage-summary {
      font-size: 11px;
      line-height: 1.55;
      color: #a8a59a;
      margin-bottom: 6px;
    }

    .twin-action-guide {
      border: 1px solid rgba(116, 196, 184, .28);
      border-radius: 10px;
      background: rgba(31, 58, 51, .12);
      padding: 10px;
      display: grid;
      gap: 8px;
    }
    .twin-action-guide strong {
      color: #e9fffb;
      font-size: 11px;
      font-weight: 900;
    }
    .twin-action-guide p {
      margin: 0;
      color: #c8e2dc;
      font-size: 11px;
      line-height: 1.55;
    }
    .twin-action-guide .twin-action-row {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }
    .twin-action-guide button,
    .twin-angle-action {
      border: 1px solid rgba(116, 196, 184, .34);
      background: rgba(20, 28, 25, .72);
      color: #dff7f2;
      border-radius: 7px;
      padding: 7px 9px;
      font-size: 10.5px;
      font-weight: 850;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      line-height: 1.1;
    }
    .twin-action-guide button:hover,
    .twin-angle-action:hover {
      border-color: rgba(154, 240, 229, .62);
      color: #fff;
    }

    .twin-action-guide.is-soft-warn {
      border-color: rgba(192, 132, 50, .36);
      background: rgba(192, 132, 50, .11);
    }
    .twin-action-guide.is-soft-warn strong { color: #f8dfb7; }
    .twin-action-guide.is-soft-warn p { color: #f1dfbf; }

    .twin-angle-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
      gap: 8px;
    }
    .twin-angle-cell {
      border-radius: 10px;
      padding: 8px;
      border: 1px solid rgba(116, 196, 184, .2);
      background: rgba(20, 28, 25, .55);
      display: grid;
      gap: 6px;
      font-size: 10.5px;
      line-height: 1.4;
    }
    .twin-angle-cell .twin-angle-thumb {
      width: 100%;
      aspect-ratio: 1;
      border-radius: 8px;
      overflow: hidden;
      background: rgba(0, 0, 0, .4);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #80796b;
      font-size: 10px;
      border: 0;
      padding: 0;
      cursor: default;
    }
    button.twin-angle-thumb { cursor: zoom-in; }
    button.twin-angle-thumb:focus-visible {
      outline: 2px solid #9af0e5;
      outline-offset: 2px;
    }
    .twin-angle-cell .twin-angle-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .twin-angle-cell .twin-angle-name { font-weight: 800; color: #e9e6da; }
    .twin-angle-cell .twin-angle-meta { color: #a09c8e; font-size: 10px; }
    .twin-angle-cell.is-missing {
      border-color: rgba(244, 168, 177, .35);
      background: rgba(80, 30, 38, .25);
    }
    .twin-angle-cell.is-missing .twin-angle-thumb {
      color: #f4a8b1;
      background: rgba(120, 40, 48, .25);
      border: 1px dashed rgba(244, 168, 177, .35);
    }
    .twin-angle-cell.is-missing .twin-angle-name { color: #f4d0d6; }
    .twin-angle-actions { display: flex; flex-wrap: wrap; gap: 6px; }
    .twin-angle-action.is-warn {
      border-color: rgba(244, 168, 177, .42);
      background: rgba(120, 40, 48, .32);
      color: #ffd5dc;
    }

    .twin-pending-rescan-card {
      position: relative;
      overflow: hidden;
      margin-top: 12px;
      border-radius: 10px;
      border: 1px solid rgba(226, 207, 160, .38);
      background:
        linear-gradient(135deg, rgba(201, 168, 106, .2), rgba(15, 23, 20, .62)),
        rgba(31, 58, 51, .14);
      padding: 11px;
      display: grid;
      gap: 10px;
    }

    .twin-pending-rescan-card::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(105deg, transparent 0%, rgba(226, 207, 160, .16) 42%, transparent 70%);
      transform: translateX(-100%);
      animation: twinPendingShimmer 2.2s ease-in-out infinite;
      pointer-events: none;
    }

    .twin-pending-rescan-card > * {
      position: relative;
      z-index: 1;
    }

    .twin-pending-rescan-head {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    .twin-pending-rescan-head strong {
      color: #eafffb;
      font-size: 13px;
      font-weight: 950;
    }

    .twin-pending-rescan-head p {
      margin-top: 4px;
      color: #c8e2dc;
      font-size: 11px;
      font-weight: 750;
      line-height: 1.55;
    }

    .twin-pending-rescan-card [data-pending-rescan] {
      border-color: rgba(154, 240, 229, .56);
      background: var(--deep-green);
      color: #ffffff;
      box-shadow: 0 10px 24px rgba(31, 58, 51, .18);
      animation: twinPendingPulse 1.9s ease-in-out infinite;
    }

    @keyframes twinPendingShimmer {
      0%, 45% { transform: translateX(-100%); }
      80%, 100% { transform: translateX(100%); }
    }

    @keyframes twinPendingPulse {
      0%, 100% { box-shadow: 0 10px 24px rgba(31, 58, 51, .16); }
      50% { box-shadow: 0 12px 30px rgba(201, 168, 106, .28); }
    }

    @media (max-width: 720px) {
      .twin-decision-head {
        flex-direction: column;
      }

      .twin-decision-status {
        align-self: flex-start;
      }

      .twin-decision-options,
      .twin-work-steps,
      .twin-fact-snapshot {
        grid-template-columns: minmax(0, 1fr);
      }
    }

    .twin-variant-card {
      border-radius: 10px;
      padding: 10px;
      border: 1px solid rgba(192, 132, 50, .35);
      background: rgba(60, 38, 18, .25);
      display: grid;
      gap: 6px;
      font-size: 11px;
      line-height: 1.55;
    }
    .twin-variant-card strong { color: #f4d7a9; font-size: 11px; font-weight: 900; }
    .twin-variant-card .twin-variant-summary { color: #f0e8d3; }
    .twin-variant-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
    .twin-variant-row .twin-variant-tag {
      padding: 2px 8px;
      border-radius: 999px;
      font-size: 10px;
      font-weight: 700;
    }
    .twin-variant-row.is-vary .twin-variant-tag {
      background: rgba(192, 132, 50, .22);
      color: #f4d7a9;
      border: 1px solid rgba(192, 132, 50, .42);
    }
    .twin-variant-row.is-lock .twin-variant-tag {
      background: rgba(31, 58, 51, .22);
      color: #9af0e5;
      border: 1px solid rgba(116, 196, 184, .42);
    }
    .twin-variant-row .twin-variant-label {
      font-size: 10px;
      font-weight: 700;
      color: #c8c4b8;
      text-transform: uppercase;
      letter-spacing: .04em;
    }

    .twin-cat-table {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6px 12px;
      border-radius: 10px;
      padding: 10px;
      border: 1px solid rgba(116, 196, 184, .2);
      background: rgba(20, 28, 25, .55);
      font-size: 11px;
      line-height: 1.55;
    }
    .twin-cat-row { display: contents; }
    .twin-cat-row dt {
      color: #a09c8e;
      font-weight: 700;
      font-size: 10.5px;
    }
    .twin-cat-row dd {
      margin: 0;
      color: #e9e6da;
      word-break: break-word;
    }
    .twin-cat-row dd.is-empty { color: #6b6859; font-style: italic; }

    .edit-reference-grid {
      grid-template-columns: repeat(auto-fill, minmax(66px, 1fr));
    }

    .edit-reference {
      position: relative;
      border-radius: 8px;
      overflow: hidden;
      border: 1px solid #ddd8cc;
      background: #f7f4ec;
    }

    .edit-reference-remove {
      position: absolute;
      top: 4px;
      right: 4px;
      width: 22px;
      height: 22px;
      border-radius: 999px;
      border: 0;
      background: rgba(0,0,0,.68);
      color: #fff;
      font-size: 12px;
      cursor: pointer;
    }

    .model-reference-panel {
      border: 1px solid var(--line-soft);
      border-radius: var(--radius);
      background: var(--paper-warm);
      padding: 12px;
    }

    .model-reference-actions {
      display: grid;
      gap: 8px;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: stretch;
    }

    .model-reference-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
      gap: 8px;
    }

    .model-reference-thumb {
      position: relative;
      aspect-ratio: 1;
      overflow: hidden;
      border-radius: 8px;
      border: 1px solid #ddd8cc;
      background: #f7f4ec;
    }

    .model-reference-thumb button:first-child {
      width: 100%;
      height: 100%;
      padding: 0;
      border: 0;
      background: transparent;
      cursor: zoom-in;
    }

    .model-reference-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .model-reference-remove {
      position: absolute;
      top: 4px;
      right: 4px;
      width: 22px;
      height: 22px;
      border-radius: 999px;
      border: 0;
      background: rgba(0,0,0,.68);
      color: #fff;
      font-size: 12px;
      cursor: pointer;
    }

    .model-reference-empty {
      min-height: 72px;
      display: grid;
      place-items: center;
      border-radius: var(--radius);
      border: 1px dashed var(--accent-line);
      background: #fbfffd;
      color: var(--accent-strong);
      font-size: 12px;
      font-weight: 900;
      text-align: center;
      padding: 8px;
    }

    .model-reference-auth {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      border: 1px solid #e2dccf;
      border-radius: var(--radius);
      background: #fff;
      color: #2f2b24;
      padding: 10px;
      font-size: 12px;
      line-height: 1.5;
      font-weight: 900;
    }

    .model-reference-auth:has(input:checked) {
      border-color: var(--success-line);
      background: var(--success-soft);
      color: #276749;
    }

    .model-reference-auth input {
      margin-top: 2px;
      width: 16px;
      height: 16px;
      accent-color: var(--deep-green);
      flex: 0 0 auto;
    }

    .model-reference-mode-group {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 4px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: #f3f1eb;
      padding: 4px;
    }

    .model-reference-mode {
      min-height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      border: 1px solid transparent;
      border-radius: var(--radius-sm);
      background: transparent;
      color: #57534e;
      font-size: 12px;
      font-weight: 900;
      text-align: center;
      cursor: pointer;
      padding: 6px 8px;
    }

    .model-reference-mode input {
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }

    .model-reference-mode:has(input:checked) {
      border-color: var(--accent-line);
      background: #fff;
      color: var(--accent-strong);
      box-shadow: 0 1px 2px rgba(31, 29, 24, .08);
    }

    .model-reference-mode:has(input:checked) span {
      color: var(--accent-strong);
    }

    .main-model-library {
      display: grid;
      gap: 10px;
      border: 1px solid #d8eee9;
      border-radius: var(--radius);
      background:
        linear-gradient(180deg, rgba(251, 250, 246, .7), rgba(255, 253, 248, .94));
      padding: 12px;
    }

    .main-model-library-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 10px;
      min-width: 0;
    }

    .main-model-library-head h4 {
      margin: 0;
      color: #193d38;
      font-size: 13px;
      font-weight: 950;
      line-height: 1.25;
    }

    .main-model-library-head p {
      margin-top: 4px;
      color: #5f6f69;
      font-size: 11px;
      font-weight: 760;
      line-height: 1.55;
    }

    .main-model-filter-bar {
      margin-bottom: 0;
    }

    .main-model-filter-bar .replicate-model-filter-row button {
      font-size: 10px;
      padding: 5px 7px;
    }

    .main-model-grid {
      max-height: 420px;
      overflow: auto;
      padding-right: 2px;
      grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
    }

    .main-model-grid .replicate-model-card {
      padding: 8px;
      border-radius: 12px;
    }

    .main-model-grid .replicate-model-card strong {
      font-size: 11px;
    }

    .main-model-grid .replicate-model-card small,
    .main-model-grid .replicate-model-tags {
      font-size: 10px;
    }

    .main-model-footer {
      margin-top: -2px;
    }

    .main-model-selected {
      display: grid;
      gap: 5px;
      border: 1px solid rgba(31, 58, 51, .2);
      border-radius: 12px;
      background: rgba(251, 250, 246, .72);
      color: #245d56;
      padding: 9px;
      font-size: 11px;
      font-weight: 820;
      line-height: 1.55;
    }

    .main-model-selected strong {
      color: #113f39;
      font-size: 12px;
      font-weight: 950;
    }

    .back-to-hub-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      width: fit-content;
      min-height: 48px;
      border-color: rgba(226, 207, 160, .56);
      border-radius: 16px;
      background:
        linear-gradient(135deg, rgba(201, 168, 106, .34), rgba(226, 207, 160, .12)),
        rgba(4, 30, 27, .9);
      color: #eafffb;
      padding: 12px 17px 12px 12px;
      font-size: 14px;
      font-weight: 950;
      box-shadow:
        0 18px 38px rgba(2, 44, 40, .22),
        inset 0 1px 0 rgba(255, 255, 255, .12);
      white-space: nowrap;
      transition: transform .16s ease, border-color .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease;
    }

    .back-to-hub-btn i {
      width: 19px;
      height: 19px;
      padding: 3px;
      border-radius: 50%;
      background: rgba(226, 207, 160, .18);
      box-sizing: content-box;
    }

    .back-to-hub-btn:hover {
      transform: translateY(-1px);
      border-color: rgba(125, 249, 231, .66);
      background:
        linear-gradient(135deg, rgba(201, 168, 106, .34), rgba(226, 207, 160, .14)),
        rgba(4, 30, 27, .82);
      color: #ffffff;
      box-shadow:
        0 20px 42px rgba(2, 44, 40, .28),
        0 0 0 1px rgba(226, 207, 160, .12);
    }

    .hero-panel .back-to-hub-btn {
      border-color: rgba(31, 58, 51, .5);
      background:
        linear-gradient(135deg, rgba(31, 58, 51, .18), rgba(201, 168, 106, .08)),
        #ebfffb;
      color: #0f4f49;
      box-shadow:
        0 12px 28px rgba(31, 58, 51, .12),
        inset 0 1px 0 rgba(255, 255, 255, .72);
    }

    .hero-panel .back-to-hub-btn:hover {
      border-color: rgba(31, 58, 51, .68);
      background: #e6fffa;
      color: #0b3f3a;
    }

    .app-view .hub-hero.compact,
    .hero-panel {
      border-radius: 22px;
      border-color: rgba(226, 207, 160, .2);
    }

    .studio-panel,
    .studio-results-panel,
    .replicate-panel,
    .replicate-output-panel {
      border-radius: 20px;
      box-shadow:
        0 22px 48px rgba(4, 24, 21, .12),
        inset 0 1px 0 rgba(255, 255, 255, .78);
    }

    .studio-panel-head,
    .studio-results-head,
    .replicate-panel-head,
    .replicate-output-head {
      padding-bottom: 12px;
      border-bottom: 1px solid rgba(216, 211, 200, .72);
    }

    .studio-panel-head + .studio-form-grid,
    .replicate-panel-head + .replicate-form-grid {
      margin-top: 16px;
    }

    .model-library-clear-btn,
    .model-library-select-btn,
    .model-library-preview-btn,
    .model-library-scroll-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      border: 1px solid rgba(226, 207, 160, .3);
      border-radius: 999px;
      background: rgba(6, 42, 38, .68);
      color: var(--gold-soft);
      min-height: 30px;
      padding: 7px 10px;
      font-size: 10.5px;
      font-weight: 950;
      line-height: 1;
      cursor: pointer;
      transition: transform .16s ease, border-color .16s ease, background .16s ease, color .16s ease;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
    }

    .model-library-clear-btn {
      border-color: rgba(226, 207, 160, .22);
      background: rgba(255, 255, 255, .065);
      color: rgba(224, 242, 241, .9);
    }

    .model-library-clear-btn.is-muted {
      border-color: rgba(203, 213, 225, .14);
      background: rgba(2, 14, 13, .32);
      color: rgba(203, 213, 225, .72);
    }

    .model-library-clear-btn:hover,
    .model-library-select-btn:hover,
    .model-library-preview-btn:hover,
    .model-library-scroll-btn:hover {
      transform: translateY(-1px);
      border-color: rgba(226, 207, 160, .62);
      background: rgba(201, 168, 106, .22);
      color: var(--deep-green-soft);
    }

    .model-library-clear-btn:disabled,
    .model-library-select-btn:disabled,
    .model-library-scroll-btn:disabled {
      cursor: default;
      opacity: .58;
      transform: none;
    }

    .replicate-sidebar-model-head .model-library-clear-btn,
    .main-model-library-head .model-library-clear-btn {
      display: none !important;
    }

    .replicate-sidebar-model-selected,
    .main-model-selected {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 12px;
      border: 1px solid rgba(226, 207, 160, .22);
      border-radius: 18px;
      background:
        linear-gradient(135deg, rgba(201, 168, 106, .13), rgba(226, 207, 160, .05)),
        rgba(6, 38, 34, .54);
      color: rgba(224, 242, 241, .9);
      padding: 12px;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .06),
        0 16px 36px rgba(2, 20, 18, .12);
    }

    .replicate-sidebar-model-selected.is-empty,
    .main-model-selected.is-empty {
      grid-template-columns: minmax(0, 1fr);
      align-items: stretch;
      gap: 10px;
      background:
        linear-gradient(135deg, rgba(201, 168, 106, .12), rgba(8, 47, 42, .48)),
        rgba(2, 14, 13, .5);
    }

    .replicate-sidebar-model-selected.is-empty .model-library-scroll-btn,
    .main-model-selected.is-empty .model-library-scroll-btn {
      width: 100%;
      min-height: 38px;
      border-radius: 13px;
      background:
        linear-gradient(135deg, rgba(201, 168, 106, .22), rgba(226, 207, 160, .08)),
        rgba(6, 42, 38, .68);
      color: #ecfffb;
    }

    .model-library-empty-state {
      position: relative;
      display: grid;
      grid-template-columns: 42px minmax(0, 1fr);
      gap: 11px;
      align-items: center;
      min-width: 0;
    }

    .model-library-empty-state::before {
      content: none;
    }

    .model-library-empty-avatar {
      display: inline-grid;
      place-items: center;
      width: 42px;
      height: 42px;
      border-radius: 15px;
      border: 1px solid rgba(226, 207, 160, .18);
      background:
        radial-gradient(circle at 50% 34%, rgba(226, 207, 160, .22) 0 8px, transparent 9px),
        linear-gradient(145deg, rgba(201, 168, 106, .18), rgba(226, 207, 160, .055)),
        rgba(2, 14, 13, .44);
      color: rgba(226, 207, 160, .9);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .06),
        0 10px 26px rgba(2, 14, 13, .16);
    }

    .model-library-empty-copy {
      display: grid;
      gap: 3px;
      min-width: 0;
    }

    .model-library-empty-state strong,
    .model-library-empty-state span {
      min-width: 0;
    }

    .model-library-empty-state strong {
      margin: 0;
      letter-spacing: 0;
    }

    .model-library-empty-state span {
      margin-top: 0;
    }

    .model-library-selected-media {
      display: grid;
      grid-template-columns: 64px minmax(0, 1fr);
      align-items: center;
      gap: 11px;
      min-width: 0;
    }

    .model-library-selected-thumb {
      position: relative;
      display: block;
      width: 64px;
      height: 64px;
      border-radius: 16px;
      overflow: hidden;
      background:
        radial-gradient(circle at 50% 32%, rgba(226, 207, 160, .18), transparent 44%),
        linear-gradient(140deg, rgba(201, 168, 106, .14), rgba(226, 207, 160, .08)),
        rgba(2, 14, 13, .56);
      border: 1px solid rgba(226, 207, 160, .26);
    }

    .model-library-selected-thumb::before {
      content: "暂无可用图片";
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      padding: 8px;
      color: rgba(226, 207, 160, .64);
      font-size: 10px;
      font-weight: 900;
      line-height: 1.25;
      text-align: center;
    }

    .model-library-selected-thumb.is-loaded::before {
      opacity: 0;
    }

    .model-library-selected-thumb.is-fallback::before {
      opacity: 1;
    }

    .model-library-selected-copy {
      display: grid;
      gap: 4px;
      min-width: 0;
    }

    .model-library-selected-media img {
      width: 64px;
      height: 64px;
      border-radius: 16px;
      object-fit: cover;
      background: rgba(226, 207, 160, .09);
      border: 1px solid rgba(226, 207, 160, .26);
    }

    .model-library-selected-thumb img {
      position: absolute;
      inset: 0;
      z-index: 1;
      width: 100%;
      height: 100%;
      border: 0;
      border-radius: 0;
    }

    .model-library-selected-thumb.is-fallback img {
      display: none;
    }

    .replicate-sidebar-model-selected strong,
    .main-model-selected strong {
      color: var(--ivory-warm);
      font-size: 13px;
      font-weight: 950;
      line-height: 1.25;
    }

    .replicate-sidebar-model-selected span,
    .main-model-selected span {
      display: block;
      margin-top: 4px;
      color: rgba(203, 213, 225, .78);
      font-size: 11px;
      font-weight: 760;
      line-height: 1.45;
    }

    .model-library-selected-actions {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: 7px;
    }

    .main-model-library {
      border-color: rgba(201, 168, 106, .18);
      border-radius: 18px;
      background:
        linear-gradient(150deg, rgba(8, 47, 42, .92), rgba(2, 14, 13, .68)),
        rgba(2, 14, 13, .56);
      box-shadow:
        0 18px 48px rgba(2, 14, 13, .18),
        inset 0 1px 0 rgba(255, 255, 255, .05);
      min-width: 0;
    }

    .main-model-library-head {
      order: 0;
      align-items: center;
    }

    .main-model-library-head h4 {
      color: var(--deep-green-soft);
      font-size: 14px;
    }

    .main-model-library-head p {
      color: rgba(203, 213, 225, .76);
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      font-size: 10.5px;
      line-height: 1.45;
    }

    .main-model-selected {
      order: 1;
    }

    .main-model-selected.is-empty {
      padding: 11px;
    }

    .main-model-selected.is-empty .model-library-empty-state {
      grid-template-columns: 36px minmax(0, 1fr);
      gap: 9px;
    }

    .main-model-selected.is-empty .model-library-empty-avatar {
      width: 36px;
      height: 36px;
      border-radius: 13px;
    }

    .main-model-selected.is-empty .model-library-empty-copy span {
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .main-model-selected.is-empty .model-library-scroll-btn {
      justify-self: start;
      width: auto;
      min-height: 32px;
      border-radius: 999px;
      padding: 7px 12px;
    }

    .main-model-selected:not(.is-empty) {
      grid-template-columns: minmax(0, 1fr);
      align-items: stretch;
      gap: 11px;
    }

    .main-model-selected:not(.is-empty) .model-library-selected-media {
      grid-template-columns: 58px minmax(0, 1fr);
      align-items: center;
      gap: 10px;
    }

    .main-model-selected:not(.is-empty) .model-library-selected-thumb {
      width: 58px;
      height: 58px;
      border-radius: 15px;
    }

    .main-model-selected:not(.is-empty) .model-library-selected-media img {
      width: 58px;
      height: 58px;
      border-radius: 15px;
    }

    .main-model-selected:not(.is-empty) .model-library-selected-copy strong,
    .main-model-selected:not(.is-empty) .model-library-selected-copy span {
      margin: 0;
      min-width: 0;
      word-break: keep-all;
      overflow-wrap: break-word;
    }

    .main-model-selected:not(.is-empty) .model-library-selected-actions {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      justify-content: stretch;
      width: 100%;
    }

    .main-model-selected:not(.is-empty) .model-library-selected-actions .model-library-clear-btn {
      width: 100%;
      min-height: 34px;
      border-radius: 12px;
    }

    .main-model-filter-drawer {
      order: 2;
      border: 1px solid rgba(226, 207, 160, .13);
      border-radius: 14px;
      background:
        linear-gradient(135deg, rgba(201, 168, 106, .09), rgba(226, 207, 160, .035)),
        rgba(2, 14, 13, .22);
      margin: 0;
      overflow: hidden;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
    }

    .main-model-filter-drawer summary {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 8px;
      min-height: 38px;
      padding: 8px 10px;
      color: #e7fffb;
      cursor: pointer;
      list-style: none;
      user-select: none;
    }

    .main-model-filter-drawer summary::-webkit-details-marker {
      display: none;
    }

    .main-model-filter-trigger {
      display: grid;
      gap: 3px;
      min-width: 0;
    }

    .main-model-filter-title {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      color: var(--deep-green-soft);
      font-size: 11.5px;
      font-weight: 950;
      line-height: 1.1;
    }

    .main-model-filter-summary {
      color: rgba(203, 213, 225, .72);
      font-size: 10px;
      font-weight: 780;
      line-height: 1.35;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .main-model-filter-drawer.has-active .main-model-filter-summary {
      color: #99f6e4;
    }

    .main-model-filter-chevron {
      color: rgba(226, 207, 160, .76);
      transition: transform .16s ease;
    }

    .main-model-filter-drawer[open] .main-model-filter-chevron {
      transform: rotate(180deg);
    }

    .main-model-filter-drawer .main-model-filter-bar {
      border: 0;
      border-top: 1px solid rgba(226, 207, 160, .12);
      background: transparent;
      padding: 9px 10px 11px;
      margin: 0;
    }

    .main-model-filter-bar {
      margin-bottom: 0;
    }

    .replicate-model-filter-bar,
    .main-model-filter-bar {
      gap: 9px;
    }

    .replicate-model-filter-row {
      display: grid;
      grid-template-columns: 40px minmax(0, 1fr);
      gap: 8px 10px;
      align-items: start;
    }

    .replicate-model-filter-row > span {
      min-width: 0;
      color: rgba(226, 232, 240, .76);
      font-size: 10px;
      font-weight: 950;
      letter-spacing: 0;
      line-height: 30px;
    }

    .replicate-model-filter-options {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
      min-width: 0;
    }

    .replicate-model-filter-row button {
      border-color: rgba(226, 232, 240, .18);
      background: rgba(255, 255, 255, .06);
      color: rgba(226, 232, 240, .82);
      padding: 7px 10px;
      font-size: 10px;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
    }

    .replicate-model-filter-row button.is-active {
      border-color: rgba(226, 207, 160, .52);
      background: rgba(201, 168, 106, .2);
      color: var(--gold-soft);
    }

    .replicate-model-grid,
    .main-model-grid,
    .replicate-sidebar-model-panel .replicate-model-grid {
      grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
      gap: 14px;
      align-items: stretch;
    }

    .replicate-sidebar-model-panel .replicate-model-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      max-height: 620px;
      overflow: auto;
      overflow-x: hidden;
    }

    .main-model-grid {
      order: 3;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      max-height: min(66vh, 620px);
      overflow: auto;
      overflow-x: hidden;
      padding-right: 4px;
      gap: 12px;
      scrollbar-color: rgba(226, 207, 160, .45) rgba(255, 255, 255, .06);
    }

    .main-library-card {
      position: relative;
      display: grid;
      grid-template-columns: 96px minmax(0, 1fr);
      align-items: stretch;
      gap: 10px;
      min-width: 0;
      max-width: 100%;
      flex: 0 0 auto;
      border: 1px solid rgba(226, 207, 160, .2);
      border-radius: 18px;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, .082), rgba(255, 255, 255, .038)),
        rgba(3, 30, 27, .62);
      color: var(--ivory-warm);
      padding: 8px;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .055),
        0 18px 34px rgba(2, 14, 13, .18);
      cursor: pointer;
      overflow: hidden;
      transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
    }

    .main-library-card:hover {
      transform: translateY(-2px);
      border-color: rgba(226, 207, 160, .45);
      background:
        linear-gradient(180deg, rgba(201, 168, 106, .15), rgba(255, 255, 255, .05)),
        rgba(3, 30, 27, .68);
    }

    .main-library-card.is-selected {
      border-color: rgba(226, 207, 160, .72);
      background:
        linear-gradient(180deg, rgba(201, 168, 106, .22), rgba(8, 47, 42, .52)),
        rgba(3, 30, 27, .72);
      box-shadow:
        0 0 0 1px rgba(226, 207, 160, .24),
        0 20px 42px rgba(2, 44, 40, .24);
    }

    .main-library-photo {
      position: relative;
      display: block;
      width: 100%;
      height: 136px;
      min-height: 0;
      aspect-ratio: auto;
      border: 1px solid rgba(226, 207, 160, .16);
      border-radius: 15px;
      background:
        radial-gradient(circle at 50% 22%, rgba(226, 207, 160, .18), transparent 42%),
        linear-gradient(140deg, rgba(201, 168, 106, .16), rgba(226, 207, 160, .08)),
        rgba(2, 14, 13, .56);
      overflow: hidden;
      isolation: isolate;
      contain: paint;
    }

    .main-library-photo::before {
      content: "";
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      color: rgba(226, 207, 160, .58);
      font-size: 11px;
      font-weight: 900;
      transition: opacity .16s ease;
    }

    .main-library-photo.is-loaded::before {
      opacity: 0;
    }

    .main-library-photo.is-fallback::before {
      content: "暂无可用图片";
      opacity: 1;
    }

    .main-library-photo img {
      position: absolute;
      inset: 0;
      z-index: 1;
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center top;
    }

    .main-library-photo.is-fallback img {
      display: none;
    }

    .main-library-preview-btn {
      position: absolute;
      z-index: 2;
      top: 9px;
      right: 9px;
      display: inline-grid;
      place-items: center;
      width: 34px;
      height: 34px;
      border: 1px solid rgba(226, 207, 160, .34);
      border-radius: 999px;
      background: rgba(2, 14, 13, .58);
      color: var(--deep-green-soft);
      cursor: zoom-in;
      backdrop-filter: blur(10px);
      box-shadow: 0 10px 24px rgba(2, 14, 13, .24);
    }

    .main-library-preview-btn:hover {
      background: rgba(31, 58, 51, .78);
    }

    .main-library-body {
      display: grid;
      align-content: start;
      gap: 7px;
      min-width: 0;
    }

    .main-library-title-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: start;
      gap: 8px;
      min-width: 0;
    }

    .main-library-title-row strong {
      color: var(--ivory-warm);
      font-size: 13px;
      font-weight: 950;
      line-height: 1.34;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .main-library-age-pill {
      border: 1px solid rgba(226, 207, 160, .26);
      border-radius: 999px;
      background: rgba(201, 168, 106, .15);
      color: var(--gold-soft);
      padding: 5px 7px;
      font-size: 10px;
      font-weight: 950;
      line-height: 1;
      white-space: nowrap;
    }

    .main-library-chip-row {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      min-width: 0;
    }

    .main-library-chip-row span {
      max-width: 100%;
      border: 1px solid rgba(226, 207, 160, .22);
      border-radius: 999px;
      background: rgba(201, 168, 106, .11);
      color: rgba(226, 207, 160, .9);
      padding: 5px 7px;
      font-size: 9.5px;
      font-weight: 900;
      line-height: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .main-library-usage {
      color: #b5fff1;
      font-size: 11px;
      font-weight: 900;
      line-height: 1.35;
    }

    .main-library-fit,
    .replicate-model-fit {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      align-items: flex-start;
      align-content: flex-start;
      align-self: start;
      min-width: 0;
      max-width: 100%;
      overflow: hidden;
    }

    .main-library-fit span,
    .replicate-model-fit span {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 1 auto;
      width: auto;
      max-width: 100%;
      min-width: 0;
      min-height: 0;
      height: auto;
      border: 1px solid rgba(251, 191, 36, .24);
      border-radius: 999px;
      background: rgba(251, 191, 36, .095);
      color: rgba(254, 240, 138, .92);
      padding: 4px 6px;
      font-size: 9px;
      font-weight: 950;
      line-height: 1.1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .main-library-card .model-library-select-btn {
      width: 100%;
      min-height: 32px;
      border-radius: 12px;
    }

    .replicate-sidebar-model-panel .replicate-model-grid {
      grid-template-columns: minmax(0, 1fr);
      gap: 12px;
      max-height: min(68vh, 640px);
      overflow-x: hidden;
      padding-right: 4px;
      scrollbar-color: rgba(226, 207, 160, .45) rgba(255, 255, 255, .06);
    }

    .main-model-footer {
      order: 4;
    }

    .replicate-model-library.is-wide .replicate-model-grid {
      grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
    }

    .replicate-model-card,
    .replicate-sidebar-model-panel .replicate-model-card,
    .main-model-grid .replicate-model-card {
      display: grid;
      grid-template-rows: auto auto auto 1fr auto;
      gap: 8px;
      min-width: 0;
      min-height: 0;
      max-width: 100%;
      border: 1px solid rgba(226, 207, 160, .16);
      border-radius: 18px;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .035)),
        rgba(3, 30, 27, .56);
      color: var(--ivory-warm);
      padding: 10px;
      text-align: left;
      cursor: default;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .05),
        0 16px 32px rgba(2, 14, 13, .16);
      transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
    }

    .replicate-sidebar-model-panel .replicate-model-card,
    .main-model-grid .replicate-model-card {
      grid-template-columns: minmax(118px, 40%) minmax(0, 1fr);
      grid-template-rows: auto auto auto auto auto;
      align-items: start;
      align-content: start;
      min-height: 0;
      gap: 9px 11px;
      padding: 10px;
      border-radius: 16px;
      cursor: pointer;
    }

    .replicate-model-card:hover,
    .replicate-sidebar-model-panel .replicate-model-card:hover {
      transform: translateY(-2px);
      border-color: rgba(226, 207, 160, .42);
      background:
        linear-gradient(180deg, rgba(201, 168, 106, .14), rgba(255, 255, 255, .045)),
        rgba(3, 30, 27, .62);
    }

    .replicate-model-card.is-selected,
    .replicate-sidebar-model-panel .replicate-model-card.is-selected,
    .main-model-grid .replicate-model-card.is-selected {
      border-color: rgba(226, 207, 160, .72);
      background:
        linear-gradient(180deg, rgba(201, 168, 106, .22), rgba(8, 47, 42, .5)),
        rgba(3, 30, 27, .68);
      box-shadow:
        0 0 0 1px rgba(226, 207, 160, .24),
        0 20px 40px rgba(2, 44, 40, .24);
    }

    .replicate-sidebar-model-panel .replicate-model-card.is-selected::after {
      content: none;
    }

    .replicate-model-card.is-pending {
      border-style: solid;
      opacity: .9;
    }

    .replicate-model-visual,
    .replicate-sidebar-model-panel .replicate-model-visual {
      position: relative;
      display: block;
      width: 100%;
      height: auto;
      min-height: 0;
      border-radius: 14px;
      background:
        radial-gradient(circle at 50% 20%, rgba(226, 207, 160, .18), transparent 42%),
        linear-gradient(140deg, rgba(201, 168, 106, .16), rgba(226, 207, 160, .08)),
        rgba(2, 14, 13, .54);
      aspect-ratio: 4 / 5;
      border: 1px solid rgba(226, 207, 160, .16);
      overflow: hidden;
      contain: paint;
      isolation: isolate;
    }

    .replicate-model-visual::after {
      content: "";
      position: absolute;
      inset: 10px;
      z-index: 0;
      border: 1px solid rgba(226, 207, 160, .14);
      border-radius: 12px;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, .09), transparent 36%),
        radial-gradient(circle at 50% 24%, rgba(226, 207, 160, .16), transparent 36%);
      opacity: .85;
      pointer-events: none;
    }

    .replicate-sidebar-model-panel .replicate-model-visual,
    .main-model-grid .replicate-model-visual {
      grid-row: 1 / -1;
      min-height: 168px;
      height: 100%;
      border-radius: 13px;
      aspect-ratio: auto;
    }

    .replicate-sidebar-model-panel .replicate-model-card > :not(.replicate-model-visual),
    .main-model-grid .replicate-model-card > :not(.replicate-model-visual) {
      min-width: 0;
    }

    .replicate-model-visual::before {
      content: "";
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      color: rgba(226, 207, 160, .58);
      font-size: 11px;
      font-weight: 900;
      letter-spacing: .02em;
      transition: opacity .16s ease;
    }

    .replicate-model-visual.is-loaded::before {
      opacity: 0;
    }

    .replicate-model-visual.is-loaded::after {
      opacity: 0;
    }

    .replicate-model-visual.is-fallback::before {
      content: "暂无可用图片";
      opacity: 1;
    }

    .replicate-model-visual img {
      position: absolute;
      inset: 0;
      z-index: 1;
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center top;
    }

    .replicate-model-visual.is-fallback img {
      display: none;
    }

    .model-library-preview-btn {
      position: absolute;
      z-index: 2;
      top: 8px;
      right: 8px;
      width: 32px;
      height: 32px;
      min-height: 32px;
      padding: 0;
      border-color: rgba(226, 207, 160, .34);
      background: rgba(2, 14, 13, .58);
      color: var(--deep-green-soft);
      backdrop-filter: blur(10px);
      box-shadow: 0 10px 24px rgba(2, 14, 13, .24);
    }

    .model-library-preview-btn:hover {
      background: rgba(31, 58, 51, .74);
    }

    .replicate-model-status {
      display: none;
    }

    .replicate-model-card strong,
    .replicate-sidebar-model-panel .replicate-model-card strong,
    .main-model-grid .replicate-model-card strong {
      color: var(--ivory-warm);
      font-size: 12.5px;
      margin-top: 0;
      line-height: 1.32;
      min-height: 0;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .replicate-sidebar-model-panel .replicate-model-card strong,
    .main-model-grid .replicate-model-card strong {
      display: block;
      align-self: end;
      font-size: 13px;
      line-height: 1.28;
      -webkit-line-clamp: 2;
    }

    .replicate-model-card small,
    .replicate-model-tags,
    .replicate-sidebar-model-panel .replicate-model-card small,
    .replicate-sidebar-model-panel .replicate-model-tags,
    .main-model-grid .replicate-model-card small,
    .main-model-grid .replicate-model-tags {
      color: rgba(203, 213, 225, .7);
      font-size: 10.5px;
      margin-top: 0;
      line-height: 1.38;
    }

    .replicate-sidebar-model-panel .replicate-model-region,
    .main-model-grid .replicate-model-region {
      display: none;
    }

    .replicate-model-tags,
    .replicate-sidebar-model-panel .replicate-model-tags {
      color: #99f6e4;
      font-weight: 900;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .replicate-sidebar-model-panel .replicate-model-tags,
    .main-model-grid .replicate-model-tags {
      align-self: start;
      -webkit-line-clamp: 2;
      color: #b5fff1;
    }

    .replicate-sidebar-model-panel .replicate-model-fit,
    .main-model-grid .replicate-model-fit {
      align-self: start;
      margin-top: -1px;
      max-height: 44px;
    }

    .replicate-sidebar-model-panel .replicate-model-fit span,
    .main-model-grid .replicate-model-fit span {
      max-width: calc(100% - 2px);
      border-color: rgba(251, 191, 36, .2);
      background: rgba(251, 191, 36, .08);
      padding: 4px 6px;
      font-size: 8.8px;
    }

    .replicate-model-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      margin-top: 0;
      min-width: 0;
      overflow: hidden;
    }

    .replicate-model-meta span,
    .replicate-sidebar-model-panel .replicate-model-meta span {
      border-color: rgba(226, 207, 160, .25);
      background: rgba(201, 168, 106, .13);
      color: var(--gold-soft);
      font-size: 9.5px;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .replicate-model-actions {
      display: grid;
      grid-template-columns: 1fr;
      align-items: end;
      gap: 8px;
      margin-top: 0;
    }

    .replicate-sidebar-model-panel .replicate-model-actions,
    .main-model-grid .replicate-model-actions {
      align-self: start;
      min-width: 0;
    }

    .replicate-model-region {
      color: rgba(203, 213, 225, .58);
      font-size: 10px;
      font-weight: 850;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      white-space: normal;
      line-height: 1.35;
    }

    .replicate-model-card .model-library-select-btn {
      width: 100%;
      min-height: 32px;
      border-radius: 12px;
    }

    .replicate-sidebar-model-panel .model-library-select-btn,
    .main-model-grid .model-library-select-btn {
      min-height: 34px;
    }

    .model-library-select-btn.is-selected {
      border-color: rgba(226, 207, 160, .54);
      background: rgba(226, 207, 160, .18);
      color: var(--deep-green-soft);
    }

    .replicate-model-footer,
    .replicate-sidebar-model-panel .replicate-model-footer,
    .main-model-footer {
      border-color: rgba(226, 207, 160, .18);
      background:
        linear-gradient(135deg, rgba(201, 168, 106, .12), rgba(226, 207, 160, .045)),
        rgba(3, 30, 27, .4);
      color: rgba(203, 213, 225, .74);
    }

    .replicate-model-count-chip,
    .replicate-sidebar-model-panel .replicate-model-count-chip {
      color: var(--gold-soft);
    }

    .replicate-asset-empty.model-library-empty {
      display: grid;
      place-items: center;
      min-height: 160px;
      border-radius: 16px;
      border: 1px solid rgba(226, 207, 160, .14);
      background: rgba(3, 30, 27, .46);
      color: rgba(226, 207, 160, .72);
      text-align: center;
    }

    .replicate-workspace {
      grid-template-columns: minmax(0, 1fr);
      gap: clamp(16px, 1.7vw, 24px);
    }

    .replicate-workspace-main {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(360px, 520px);
      gap: clamp(18px, 1.8vw, 28px);
      align-items: start;
      min-width: 0;
    }

    .replicate-workflow-toggle {
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
      gap: 12px;
    }

    .replicate-workflow-toggle span {
      position: relative;
      grid-template-columns: 48px minmax(0, 1fr);
      grid-template-rows: auto auto 1fr;
      align-items: start;
      gap: 7px 12px;
      min-height: 142px;
      border-color: rgba(87, 83, 74, .18);
      border-radius: 18px;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 253, 248, .98)),
        #fffdf8;
      color: #2f332f;
      padding: 16px;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .78),
        0 10px 22px rgba(31, 29, 24, .035);
    }

    .replicate-workflow-toggle span > i {
      display: inline-flex;
      grid-column: 1;
      grid-row: 1 / span 3;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      margin-top: 0;
      border: 1px solid rgba(31, 58, 51, .18);
      border-radius: 15px;
      background: rgba(251, 250, 246, .84);
      color: var(--deep-green);
      padding: 10px;
      box-sizing: border-box;
    }

    .replicate-workflow-toggle em {
      display: inline-flex;
      grid-column: 2;
      justify-self: start;
      align-items: center;
      width: fit-content;
      max-width: 100%;
      min-width: 0;
      border: 1px solid rgba(31, 58, 51, .16);
      border-radius: 999px;
      background: rgba(251, 250, 246, .74);
      color: var(--deep-green);
      padding: 5px 8px;
      font-size: 10px;
      font-style: normal;
      font-weight: 950;
      line-height: 1;
      white-space: nowrap;
    }

    .replicate-workflow-toggle strong,
    .replicate-workflow-toggle small {
      display: block;
      grid-column: 2;
      width: 100%;
      min-width: 0;
      text-align: left;
      word-break: normal;
      overflow-wrap: break-word;
    }

    .replicate-workflow-toggle strong {
      color: #173b36;
      font-size: 14px;
      font-weight: 950;
      line-height: 1.32;
      letter-spacing: 0;
    }

    .replicate-workflow-toggle small {
      color: #69706a;
      font-size: 12px;
      font-weight: 760;
      line-height: 1.62;
    }

    .replicate-workflow-fit {
      display: inline-flex;
      grid-column: 2;
      align-items: center;
      width: fit-content;
      max-width: 100%;
      min-width: 0;
      border-top: 1px solid rgba(31, 58, 51, .1);
      color: #46534e;
      padding-top: 8px;
      font-size: 11px;
      font-style: normal;
      font-weight: 850;
      line-height: 1.4;
      overflow-wrap: break-word;
    }

    .replicate-workflow-toggle input:focus-visible + span {
      outline: 2px solid rgba(31, 58, 51, .32);
      outline-offset: 3px;
    }

    .replicate-workflow-toggle input:checked + span {
      border-color: rgba(31, 58, 51, .46);
      background:
        linear-gradient(180deg, rgba(247, 255, 252, .98), rgba(236, 253, 248, .96)),
        #f7fffc;
      box-shadow:
        inset 0 0 0 1px rgba(31, 58, 51, .12),
        0 18px 36px rgba(31, 58, 51, .12);
      transform: translateY(-1px);
    }

    .replicate-workflow-toggle input:checked + span::after {
      content: "当前方式";
      position: absolute;
      top: 14px;
      right: 14px;
      border: 1px solid rgba(31, 58, 51, .24);
      border-radius: 999px;
      background: rgba(255, 255, 255, .78);
      color: var(--deep-green);
      padding: 5px 8px;
      font-size: 10px;
      font-weight: 950;
      line-height: 1;
      white-space: nowrap;
    }

    #replicateInlineModelPanel {
      display: grid;
      grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
      gap: 16px 20px;
      align-items: start;
      width: 100%;
      border-color: rgba(31, 58, 51, .16);
      border-radius: 20px;
      background:
        linear-gradient(180deg, rgba(251, 255, 253, .98), rgba(255, 253, 248, .99));
      box-shadow:
        0 24px 54px rgba(4, 24, 21, .11),
        inset 0 1px 0 rgba(255, 255, 255, .8);
      padding: 18px 18px 20px;
    }

    #replicateInlineModelPanel .replicate-subsection-head {
      grid-column: 1 / -1;
      align-items: center;
      margin-bottom: 0;
      padding-bottom: 13px;
      border-bottom: 1px solid rgba(31, 58, 51, .12);
    }

    #replicateInlineModelPanel .model-library-clear-btn,
    #replicateInlineModelPanel .model-library-scroll-btn {
      border-color: rgba(31, 58, 51, .18);
      background: rgba(255, 253, 248, .92);
      color: var(--deep-green);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72);
    }

    #replicateInlineModelPanel .model-library-clear-btn.is-muted {
      border-color: rgba(87, 83, 74, .14);
      background: rgba(255, 255, 255, .78);
      color: #657069;
    }

    #replicateInlineModelPanel .model-library-clear-btn:hover,
    #replicateInlineModelPanel .model-library-scroll-btn:hover {
      border-color: rgba(31, 58, 51, .42);
      background: #ecfdf8;
      color: #0b5f57;
    }

    #replicateInlineModelPanel .replicate-subsection-head h3 {
      color: #173b36;
      font-size: 16px;
    }

    #replicateInlineModelPanel .replicate-subsection-head p {
      max-width: 760px;
      color: #61716b;
    }

    #replicateInlineModelPanel .replicate-model-control-rail {
      grid-column: 1;
      width: 100%;
      display: grid;
      gap: 12px;
      align-self: start;
      position: sticky;
      top: 18px;
      min-width: 0;
    }

    .replicate-model-rail-title,
    .replicate-model-catalog-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      min-width: 0;
    }

    .replicate-model-rail-title {
      display: grid;
      gap: 5px;
      border: 1px solid rgba(31, 58, 51, .14);
      border-radius: 16px;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, .78), rgba(255, 253, 248, .9));
      padding: 12px;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .66);
    }

    .replicate-model-rail-title span,
    .replicate-model-catalog-head span {
      color: #65736d;
      font-size: 11px;
      font-weight: 820;
      line-height: 1.5;
    }

    .replicate-model-rail-title strong,
    .replicate-model-catalog-head strong {
      color: #173b36;
      font-size: 13px;
      font-weight: 950;
      line-height: 1.25;
    }

    #replicateInlineModelPanel .replicate-model-catalog {
      grid-column: 2;
      display: grid;
      gap: 12px;
      min-width: 0;
      width: 100%;
    }

    .replicate-model-catalog-head {
      align-items: center;
      border: 1px solid rgba(31, 58, 51, .12);
      border-radius: 16px;
      background: rgba(255, 255, 255, .7);
      padding: 12px 13px;
    }

    .replicate-model-catalog-head > div {
      display: grid;
      gap: 3px;
      min-width: 0;
    }

    .replicate-model-catalog-chip {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
      border: 1px solid rgba(31, 58, 51, .16);
      border-radius: 999px;
      background: rgba(251, 250, 246, .78);
      color: var(--deep-green);
      padding: 6px 9px;
      font-size: 10px;
      font-weight: 950;
      line-height: 1;
      white-space: nowrap;
    }

    #replicateInlineModelPanel .replicate-sidebar-model-selected {
      align-items: stretch;
      min-height: 124px;
      margin: 0;
      border-color: rgba(31, 58, 51, .16);
      border-radius: 16px;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, .86), rgba(255, 253, 248, .9));
      color: #193d38;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .72),
        0 12px 24px rgba(31, 58, 51, .055);
    }

    #replicateInlineModelPanel .replicate-sidebar-model-selected.is-empty {
      display: grid;
      grid-template-columns: 1fr;
      gap: 12px;
      align-items: stretch;
    }

    #replicateInlineModelPanel .replicate-sidebar-model-selected:not(.is-empty) {
      grid-template-columns: minmax(0, 1fr);
      gap: 12px;
    }

    #replicateInlineModelPanel .model-library-empty-avatar {
      border-color: rgba(31, 58, 51, .16);
      background:
        radial-gradient(circle at 50% 34%, rgba(31, 58, 51, .12) 0 8px, transparent 9px),
        rgba(251, 250, 246, .86);
      color: var(--deep-green);
      box-shadow: none;
    }

    #replicateInlineModelPanel .replicate-sidebar-model-selected strong,
    #replicateInlineModelPanel .model-library-selected-copy strong {
      color: #193d38;
    }

    #replicateInlineModelPanel .replicate-sidebar-model-selected span,
    #replicateInlineModelPanel .model-library-selected-copy span {
      color: #66736d;
      line-height: 1.5;
    }

    #replicateInlineModelPanel .model-library-selected-actions {
      justify-content: stretch;
    }

    #replicateInlineModelPanel .model-library-selected-actions .model-library-clear-btn,
    #replicateInlineModelPanel .model-library-scroll-btn {
      width: 100%;
      min-height: 38px;
      border-radius: 12px;
    }

    #replicateInlineModelPanel .replicate-model-advanced {
      margin-top: 0;
      border-color: rgba(31, 58, 51, .16);
      border-radius: 16px;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, .82), rgba(255, 253, 248, .9));
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .66),
        0 12px 24px rgba(31, 58, 51, .045);
    }

    #replicateInlineModelPanel .replicate-model-advanced summary {
      min-height: 42px;
      color: #14514a;
      padding: 12px 13px;
      font-size: 12px;
    }

    #replicateInlineModelPanel .replicate-model-filter-row {
      grid-template-columns: 42px minmax(0, 1fr);
    }

    #replicateInlineModelPanel .replicate-model-filter-row > span {
      color: #55716b;
      line-height: 32px;
    }

    #replicateInlineModelPanel .replicate-model-filter-row button {
      border-color: rgba(31, 58, 51, .16);
      background: rgba(255, 253, 248, .92);
      color: #55716b;
      box-shadow: none;
    }

    #replicateInlineModelPanel .replicate-model-filter-row button.is-active {
      border-color: rgba(31, 58, 51, .42);
      background: rgba(226, 252, 247, .92);
      color: var(--deep-green);
    }

    #replicateInlineModelPanel .replicate-inline-model-grid,
    #replicateInlineModelPanel .replicate-model-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(186px, 1fr));
      max-height: none;
      overflow: visible;
      overflow-x: hidden;
      padding-right: 0;
      gap: 14px;
    }

    #replicateInlineModelPanel .replicate-model-card {
      position: relative;
      display: grid;
      grid-template-rows: auto auto auto auto 1fr;
      grid-template-columns: minmax(0, 1fr);
      gap: 8px;
      min-width: 0;
      overflow: hidden;
      border-color: rgba(31, 58, 51, .14);
      border-radius: 18px;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(255, 253, 248, .96));
      color: #1f2d2a;
      padding: 10px;
      box-shadow:
        0 14px 28px rgba(31, 58, 51, .07),
        inset 0 1px 0 rgba(255, 255, 255, .75);
      cursor: pointer;
    }

    #replicateInlineModelPanel .replicate-model-card:hover,
    #replicateInlineModelPanel .replicate-model-card.is-selected {
      border-color: rgba(31, 58, 51, .5);
      background:
        linear-gradient(180deg, rgba(247, 255, 252, .98), rgba(255, 253, 248, .98));
      box-shadow:
        0 0 0 1px rgba(31, 58, 51, .08),
        0 18px 34px rgba(31, 58, 51, .11);
    }

    #replicateInlineModelPanel .replicate-model-card.is-selected {
      border-color: rgba(31, 58, 51, .62);
    }

    #replicateInlineModelPanel .replicate-model-card.is-selected::after {
      content: "已选";
      position: absolute;
      z-index: 3;
      top: 16px;
      left: 16px;
      border: 1px solid rgba(31, 58, 51, .24);
      border-radius: 999px;
      background: rgba(255, 255, 255, .88);
      color: var(--deep-green);
      padding: 5px 8px;
      font-size: 10px;
      font-weight: 950;
      line-height: 1;
      backdrop-filter: blur(8px);
    }

    #replicateInlineModelPanel .replicate-model-visual {
      min-height: 0;
      height: auto;
      aspect-ratio: 4 / 5;
      border-color: rgba(31, 58, 51, .14);
      border-radius: 14px;
      background:
        linear-gradient(180deg, rgba(251, 250, 246, .72), rgba(250, 247, 240, .96));
    }

    #replicateInlineModelPanel .replicate-model-visual::after {
      border-color: rgba(31, 58, 51, .08);
      background:
        linear-gradient(180deg, rgba(255, 255, 255, .6), transparent 36%),
        radial-gradient(circle at 50% 24%, rgba(31, 58, 51, .08), transparent 36%);
    }

    #replicateInlineModelPanel .replicate-model-visual img {
      object-fit: contain;
      object-position: center top;
    }

    #replicateInlineModelPanel .model-library-preview-btn {
      top: 8px;
      right: 8px;
      width: 32px;
      height: 32px;
      min-height: 32px;
      border-color: rgba(31, 58, 51, .22);
      background: rgba(255, 253, 248, .92);
      color: var(--deep-green);
      box-shadow: 0 10px 22px rgba(31, 29, 24, .12);
      cursor: zoom-in;
    }

    #replicateInlineModelPanel .model-library-preview-btn:hover {
      background: #e4fbf6;
      color: #0b5f57;
    }

    #replicateInlineModelPanel .replicate-model-card strong,
    #replicateInlineModelPanel .replicate-model-tags,
    #replicateInlineModelPanel .replicate-model-region {
      color: #193d38;
    }

    #replicateInlineModelPanel .replicate-model-card strong {
      font-size: 12.5px;
      line-height: 1.32;
    }

    #replicateInlineModelPanel .replicate-model-tags {
      color: var(--deep-green);
      -webkit-line-clamp: 2;
    }

    #replicateInlineModelPanel .replicate-model-meta span,
    #replicateInlineModelPanel .replicate-model-fit span {
      border-color: rgba(31, 58, 51, .16);
      background: rgba(251, 250, 246, .78);
      color: var(--deep-green);
    }

    #replicateInlineModelPanel .replicate-model-fit {
      max-height: 42px;
    }

    #replicateInlineModelPanel .replicate-model-actions {
      display: grid;
      grid-template-columns: 1fr;
      gap: 7px;
      align-self: end;
    }

    #replicateInlineModelPanel .model-library-select-btn {
      width: 100%;
      min-width: 0;
      min-height: 34px;
      border-color: rgba(31, 58, 51, .24);
      background: rgba(255, 253, 248, .92);
      color: var(--deep-green);
      white-space: normal;
      overflow-wrap: break-word;
    }

    #replicateInlineModelPanel .model-library-select-btn.is-selected {
      border-color: rgba(31, 58, 51, .48);
      background: rgba(226, 252, 247, .95);
      color: #0b5f57;
    }

    #replicateInlineModelPanel .replicate-model-footer {
      border-color: rgba(31, 58, 51, .14);
      background:
        linear-gradient(180deg, rgba(255, 255, 255, .86), rgba(255, 253, 248, .92));
      color: #55716b;
      box-shadow: none;
    }

    #replicateInlineModelPanel .replicate-model-count-chip {
      color: var(--deep-green);
    }

    #replicateInlineModelPanel .replicate-model-more-btn {
      border-color: rgba(31, 58, 51, .24);
      background: rgba(255, 253, 248, .92);
      color: var(--deep-green);
    }

    #replicateInlineModelPanel .replicate-asset-empty.model-library-empty {
      grid-column: 1 / -1;
      min-height: 220px;
      border-color: rgba(31, 58, 51, .16);
      background: rgba(255, 253, 248, .82);
      color: #55716b;
    }

    #replicateInlineModelPanel .replicate-model-meta,
    #replicateInlineModelPanel .replicate-model-fit {
      display: flex;
      flex-wrap: wrap;
      min-width: 0;
      overflow: hidden;
      gap: 5px;
    }

    .model-preview-dialog {
      width: min(920px, 94vw);
      max-height: 92vh;
      overflow: auto;
      border: 1px solid rgba(226, 207, 160, .22);
      border-radius: 22px;
      background:
        linear-gradient(150deg, rgba(8, 47, 42, .96), rgba(2, 14, 13, .94)),
        #02100f;
      color: var(--ivory-warm);
      padding: 16px;
      box-shadow:
        0 32px 90px rgba(0, 0, 0, .42),
        inset 0 1px 0 rgba(255, 255, 255, .08);
    }

    .model-preview-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 14px;
    }

    .model-preview-head h2 {
      margin: 0;
      color: var(--deep-green-soft);
      font-size: 20px;
      font-weight: 950;
      line-height: 1.25;
    }

    .model-preview-head p {
      margin-top: 5px;
      color: rgba(203, 213, 225, .74);
      font-size: 12px;
      font-weight: 760;
      line-height: 1.55;
    }

    .model-preview-body {
      display: grid;
      grid-template-columns: minmax(260px, .95fr) minmax(260px, 1fr);
      gap: 16px;
      align-items: stretch;
    }

    .model-preview-image {
      position: relative;
      overflow: hidden;
      border: 1px solid rgba(226, 207, 160, .18);
      border-radius: 18px;
      background:
        radial-gradient(circle at 50% 22%, rgba(226, 207, 160, .18), transparent 42%),
        rgba(2, 14, 13, .48);
      min-height: 360px;
    }

    .model-preview-image::before {
      content: "载入模特预览";
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      color: rgba(226, 207, 160, .58);
      font-size: 12px;
      font-weight: 900;
      transition: opacity .16s ease;
    }

    .model-preview-image.is-loaded::before {
      opacity: 0;
    }

    .model-preview-image.is-fallback::before {
      content: "暂无可用图片";
      opacity: 1;
    }

    .model-preview-image img {
      position: relative;
      z-index: 1;
      display: block;
      width: 100%;
      height: 100%;
      min-height: 360px;
      object-fit: cover;
    }

    .model-preview-info {
      display: grid;
      gap: 12px;
      align-content: start;
      min-width: 0;
    }

    .model-preview-info-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 9px;
    }

    .model-preview-info-grid span,
    .model-preview-usage {
      border: 1px solid rgba(226, 207, 160, .16);
      border-radius: 14px;
      background: rgba(255, 255, 255, .045);
      padding: 10px;
      color: rgba(203, 213, 225, .78);
      font-size: 11px;
      font-weight: 780;
      line-height: 1.45;
    }

    .model-preview-info-grid strong {
      display: block;
      margin-top: 3px;
      color: var(--gold-soft);
      font-size: 13px;
      font-weight: 950;
    }

    .model-preview-usage strong {
      display: block;
      color: var(--deep-green-soft);
      font-size: 13px;
      font-weight: 950;
      margin-bottom: 5px;
    }

    .model-preview-fit-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 9px;
    }

    .model-preview-fit-grid .model-preview-usage {
      min-width: 0;
    }

    .model-preview-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 2px;
    }

    #modelPreviewModal img {
      max-width: none;
      max-height: none;
      border-radius: 0;
      background: transparent;
    }

    .result-card {
      border: 1px solid #ddd8cc;
      border-radius: 8px;
      overflow: hidden;
      background: #fff;
      box-shadow: 0 12px 28px rgba(32, 29, 24, .05);
    }

    .result-card .result-meta-panel {
      display: none;
    }

    .result-section {
      grid-column: 1 / -1;
      display: grid;
      gap: 12px;
    }

    .result-section-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 12px;
      border: 1px solid #ddd8cc;
      border-radius: 8px;
      background: #fffdf8;
      padding: 12px;
    }

    .result-section-header h3 {
      font-size: 15px;
      line-height: 1.35;
    }

    .result-section-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      flex-wrap: wrap;
      gap: 8px;
    }

    .result-section-download {
      min-height: 36px;
      white-space: nowrap;
    }

    @media (max-width: 520px) {
      .result-section-header {
        align-items: stretch;
      }

      .result-section-actions {
        width: 100%;
        justify-content: space-between;
      }

      .result-section-download {
        flex: 1;
        justify-content: center;
      }
    }

    .empty-state-card {
      border: 1px dashed #d6cebf;
      border-radius: 8px;
      background: #fffdf8;
      padding: 28px;
      text-align: center;
      color: #6f695e;
      font-size: 13px;
      font-weight: 750;
      line-height: 1.7;
    }

    .result-section-grid {
      display: grid;
      gap: 16px;
      grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    @media (min-width: 768px) {
      .result-section-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (min-width: 1280px) {
      .result-section-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
    }

    .result-media {
      position: relative;
      aspect-ratio: 1;
      background: #f1eee7;
      display: grid;
      place-items: center;
      overflow: hidden;
    }

    .result-media.portrait {
      aspect-ratio: 2 / 3;
    }

    .result-media img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
      background: #fff;
    }

    .result-actions {
      position: absolute;
      inset-inline: 10px;
      bottom: 10px;
      display: flex;
      gap: 8px;
      opacity: 0;
      transform: translateY(8px);
      pointer-events: none;
      transition: opacity .16s ease, transform .16s ease;
    }

    .result-card:hover .result-actions {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }

    .result-media:hover .result-actions {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }

    .mini-action {
      display: inline-grid;
      place-items: center;
      width: 36px;
      height: 36px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.4);
      background: rgba(23,25,21,.78);
      color: #fff;
      cursor: pointer;
    }

    .mini-action.danger-action {
      background: rgba(162, 61, 75, .9);
      border-color: rgba(255, 255, 255, .34);
    }

    .queue-status {
      border-radius: 7px;
      background: #fff7ed;
      color: #9a3412;
      border: 1px solid #fed7aa;
      padding: 7px 9px;
      font-size: 11px;
      font-weight: 850;
      line-height: 1.45;
      text-align: center;
    }

    .generation-progress-host {
      display: grid;
      gap: 10px;
      margin-top: 14px;
    }

    .generation-progress-host:empty {
      display: none;
      margin-top: 0;
    }

    .generation-progress-card {
      position: relative;
      overflow: hidden;
      display: grid;
      gap: 12px;
      width: 100%;
      min-width: 0;
      border: 1px solid rgba(28, 25, 23, .12);
      border-radius: 16px;
      background:
        linear-gradient(135deg, rgba(255, 255, 255, .94), rgba(249, 250, 247, .88)),
        #fffdf8;
      padding: 14px;
      color: #1c1b17;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .82),
        0 16px 36px rgba(15, 23, 42, .075);
    }

    .generation-progress-card::before {
      content: "";
      position: absolute;
      inset: 0 0 auto;
      height: 3px;
      background: linear-gradient(90deg, var(--deep-green), var(--gold-line) 52%, #f59e0b);
      opacity: .78;
    }

    .generation-progress-top {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 10px;
      align-items: start;
      min-width: 0;
    }

    .generation-progress-actions {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
    }

    .generation-progress-toggle {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 30px;
      height: 30px;
      border: 1px solid rgba(28, 25, 23, .12);
      border-radius: 999px;
      background: rgba(255, 255, 255, .82);
      color: #3f3b34;
      transition: transform .18s ease, border-color .18s ease, background .18s ease;
    }

    .generation-progress-toggle:hover {
      transform: translateY(-1px);
      border-color: rgba(31, 58, 51, .24);
      background: rgba(236, 253, 245, .9);
      color: var(--deep-green);
    }

    .generation-progress-action {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      min-height: 30px;
      border: 1px solid rgba(180, 83, 9, .24);
      border-radius: 999px;
      background: #fff7ed;
      color: #92400e;
      padding: 5px 10px;
      font-size: 11px;
      font-weight: 900;
      transition: transform .18s ease, border-color .18s ease, background .18s ease;
    }

    .generation-progress-action:hover {
      transform: translateY(-1px);
      border-color: rgba(180, 83, 9, .36);
      background: #ffedd5;
    }

    .generation-progress-title {
      display: grid;
      gap: 6px;
      min-width: 0;
    }

    .generation-progress-title strong {
      color: #171712;
      font-size: 14px;
      font-weight: 950;
      line-height: 1.28;
      overflow-wrap: anywhere;
    }

    .generation-progress-eyebrow,
    .generation-progress-count,
    .generation-progress-meta span {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      width: fit-content;
      max-width: 100%;
      border: 1px solid rgba(31, 58, 51, .18);
      border-radius: 999px;
      background: rgba(236, 253, 245, .72);
      color: var(--deep-green);
      padding: 5px 8px;
      font-size: 10.5px;
      font-weight: 950;
      line-height: 1;
      white-space: nowrap;
    }

    .generation-progress-compact-phase {
      display: none;
      color: #625e54;
      font-size: 11px;
      font-weight: 850;
      line-height: 1.35;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .generation-progress-count {
      align-self: start;
      border-color: rgba(28, 25, 23, .1);
      background: rgba(255, 255, 255, .86);
      color: #3f3b34;
    }

    .generation-progress-copy {
      margin: 0;
      color: #625e54;
      font-size: 12.5px;
      font-weight: 720;
      line-height: 1.68;
      overflow-wrap: anywhere;
    }

    .generation-progress-track {
      position: relative;
      overflow: hidden;
      height: 9px;
      border: 1px solid rgba(31, 58, 51, .12);
      border-radius: 999px;
      background:
        linear-gradient(180deg, rgba(231, 229, 220, .72), rgba(250, 250, 247, .8));
    }

    .generation-progress-track span {
      position: absolute;
      inset: 0 auto 0 0;
      width: var(--generation-progress, 8%);
      min-width: 32px;
      max-width: 100%;
      border-radius: inherit;
      background:
        linear-gradient(90deg, var(--deep-green), var(--gold-line) 58%, #f59e0b);
      box-shadow: 0 0 22px rgba(201, 168, 106, .22);
      transition: width .55s ease;
    }

    .generation-progress-track span::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .48), transparent);
      animation: generationSweep 1.75s ease-in-out infinite;
    }

    .generation-progress-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
      min-width: 0;
    }

    .generation-progress-meta span {
      border-color: rgba(28, 25, 23, .1);
      background: rgba(255, 255, 255, .68);
      color: #5b554b;
      white-space: normal;
      line-height: 1.35;
    }

    .generation-progress-meta .is-live {
      border-color: rgba(31, 58, 51, .18);
      background: rgba(236, 253, 245, .72);
      color: var(--deep-green);
    }

    .generation-progress-card.is-done .generation-progress-track span {
      background: linear-gradient(90deg, var(--deep-green), var(--gold));
    }

    .generation-progress-card.is-error .generation-progress-eyebrow,
    .generation-progress-card.is-error .generation-progress-meta .is-live {
      border-color: rgba(190, 18, 60, .16);
      background: rgba(255, 241, 242, .86);
      color: #be123c;
    }

    .generation-progress-card.is-error .generation-progress-track span {
      background: linear-gradient(90deg, #be123c, #f59e0b);
    }

    .generation-progress-card.is-collapsed {
      gap: 6px;
      padding: 8px 10px;
      border-radius: 11px;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .78),
        0 10px 24px rgba(15, 23, 42, .06);
    }

    .generation-progress-card.is-collapsed .generation-progress-copy,
    .generation-progress-card.is-collapsed .generation-progress-meta {
      display: none;
    }

    .generation-progress-card.is-collapsed .generation-progress-top {
      align-items: center;
    }

    .generation-progress-card.is-collapsed .generation-progress-title {
      gap: 4px;
    }

    .generation-progress-card.is-collapsed .generation-progress-title strong {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .generation-progress-card.is-collapsed .generation-progress-compact-phase {
      display: block;
    }

    .generation-progress-card.is-collapsed .generation-progress-track {
      height: 6px;
    }

    .generation-progress-dock {
      position: fixed;
      right: 14px;
      bottom: 88px;
      z-index: 90;
      width: min(300px, calc(100vw - 28px));
      pointer-events: none;
    }

    .generation-progress-dock.is-collapsed {
      width: min(252px, calc(100vw - 28px));
    }

    .generation-progress-dock .generation-progress-card {
      border-color: rgba(226, 207, 160, .18);
      background:
        linear-gradient(145deg, rgba(7, 28, 25, .96), rgba(4, 15, 14, .95));
      color: var(--ivory-warm);
      box-shadow:
        0 16px 42px rgba(2, 6, 6, .28),
        inset 0 1px 0 rgba(255, 255, 255, .08);
      pointer-events: auto;
    }

    .generation-progress-dock .generation-progress-card {
      gap: 7px;
      padding: 9px 10px;
      border-radius: 12px;
    }

    .generation-progress-dock .generation-progress-title {
      gap: 3px;
    }

    .generation-progress-dock .generation-progress-title strong {
      max-width: 176px;
      font-size: 12.5px;
    }

    .generation-progress-dock .generation-progress-eyebrow,
    .generation-progress-dock .generation-progress-count {
      padding: 4px 7px;
      font-size: 9.8px;
    }

    .generation-progress-dock .generation-progress-action span {
      display: none;
    }

    .generation-progress-dock .generation-progress-action,
    .generation-progress-dock .generation-progress-toggle {
      width: 28px;
      height: 28px;
      min-height: 28px;
      padding: 0;
      justify-content: center;
    }

    .generation-progress-dock .generation-progress-track {
      height: 4px;
    }

    .generation-progress-dock .generation-progress-title strong {
      color: var(--ivory-warm);
    }

    .generation-progress-dock .generation-progress-copy {
      color: rgba(226, 232, 240, .76);
    }

    .generation-progress-dock .generation-progress-count,
    .generation-progress-dock .generation-progress-meta span {
      border-color: rgba(226, 207, 160, .16);
      background: rgba(255, 255, 255, .06);
      color: rgba(226, 232, 240, .82);
    }

    .generation-progress-dock .generation-progress-eyebrow,
    .generation-progress-dock .generation-progress-meta .is-live {
      border-color: rgba(226, 207, 160, .26);
      background: rgba(201, 168, 106, .12);
      color: #99f6e4;
    }

    .generation-progress-dock .generation-progress-toggle {
      border-color: rgba(226, 207, 160, .16);
      background: rgba(255, 255, 255, .08);
      color: rgba(226, 232, 240, .82);
    }

    .generation-progress-dock .generation-progress-toggle:hover {
      border-color: rgba(226, 207, 160, .34);
      background: rgba(201, 168, 106, .14);
      color: #99f6e4;
    }

    .generation-progress-dock .generation-progress-compact-phase {
      color: rgba(226, 232, 240, .72);
    }

    .generation-progress-dock.hidden {
      display: none;
    }

    /* ── vs-multitask:dock 多任务中心(多卡纵向堆叠·最新在上·完成绿边/失败红边·点击查看) ── */
    .generation-progress-dock .generation-progress-card + .generation-progress-card,
    .generation-progress-dock .generation-progress-card + .gpd-multi-more {
      margin-top: 8px;
    }

    .generation-progress-dock .gpd-multi-card {
      cursor: pointer;
    }

    .generation-progress-dock .gpd-multi-card:hover {
      border-color: rgba(226, 207, 160, .42);
    }

    .generation-progress-dock .gpd-multi-card.is-done {
      border-color: rgba(74, 222, 128, .52);
    }

    .generation-progress-dock .gpd-multi-card.is-error {
      border-color: rgba(248, 113, 113, .58);
    }

    .gpd-multi-view {
      flex: none;
      padding: 4px 7px;
      border: 1px solid rgba(74, 222, 128, .4);
      border-radius: 999px;
      background: rgba(74, 222, 128, .12);
      color: #86efac;
      font-size: 9.8px;
      white-space: nowrap;
    }

    .gpd-multi-card.is-error .gpd-multi-view {
      border-color: rgba(248, 113, 113, .45);
      background: rgba(248, 113, 113, .12);
      color: #fca5a5;
    }

    .gpd-multi-more {
      pointer-events: auto;
      padding: 6px 10px;
      border: 1px dashed rgba(226, 207, 160, .3);
      border-radius: 10px;
      background: rgba(4, 15, 14, .88);
      color: rgba(226, 232, 240, .78);
      font-size: 11px;
      text-align: center;
    }

    /* ── vs-dockfold(用户真机反馈:多卡堆叠挡内容):≥2 任务默认收成一行聚合条,点开限高列表可滚可收 ── */
    .gpd-agg {
      pointer-events: auto;
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      border: 1px solid rgba(226, 207, 160, .34);
      border-radius: 999px;
      background: rgba(4, 15, 14, .92);
      color: #e2e8f0;
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
      box-shadow: 0 10px 26px rgba(0, 0, 0, .38);
      white-space: nowrap;
    }

    .gpd-agg:hover {
      border-color: rgba(226, 207, 160, .5);
      background: rgba(10, 26, 24, .95);
    }

    .gpd-agg-ico { color: #E3C878; display: inline-flex; }

    .gpd-agg-spin { animation: gpdSpin 1.2s linear infinite; }

    @keyframes gpdSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

    .gpd-agg-close {
      width: 100%;
      justify-content: center;
      border-radius: 10px;
      margin-bottom: 8px;
      color: rgba(226, 232, 240, .78);
      font-weight: 600;
    }

    .gpd-multi-list {
      pointer-events: auto;
      /* dockui(2026-07-12 用户真机要求「多任务别堆卡挡底部内容」):展开列表再收紧限高,超出滚动,
         少占底部;默认态本就是一行聚合条(gpd-agg),这里只管用户主动点开后的管理态高度上限。 */
      max-height: min(46vh, 340px);
      overflow-y: auto;
      overscroll-behavior: contain;
      display: block;
    }

    @keyframes generationSweep {
      0% { transform: translateX(-105%); }
      100% { transform: translateX(105%); }
    }

    .result-qa {
      margin-top: 10px;
      border-radius: 8px;
      border: 1px solid #d9d3c7;
      background: #faf8f2;
      padding: 9px 10px;
      display: grid;
      gap: 6px;
      font-size: 12px;
      line-height: 1.5;
      color: #5f5a50;
    }
    .result-qa-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      font-weight: 900;
      color: #343128;
    }
    .result-qa-badge {
      border-radius: 999px;
      padding: 3px 8px;
      font-size: 10px;
      font-weight: 900;
      white-space: nowrap;
    }
    .result-qa-badge.checking {
      background: rgba(192, 132, 50, .16);
      color: #8a5a17;
    }
    .result-qa-badge.ok,
    .result-qa-badge.text_ok,
    .result-qa-badge.text_repaired {
      background: rgba(31, 58, 51, .14);
      color: var(--deep-green);
    }
    .result-qa-badge.warn,
    .result-qa-badge.text_checking,
    .result-qa-badge.text_repairing,
    .result-qa-badge.text_warn {
      background: rgba(192, 132, 50, .16);
      color: #8a5a17;
    }
    .result-qa-badge.fail,
    .result-qa-badge.error {
      background: rgba(162, 61, 75, .13);
      color: #a23d4b;
    }
    .result-qa ul {
      margin: 0;
      padding-left: 16px;
    }

    .skeleton {
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, #ece8de 0%, #f8f6ef 50%, #ece8de 100%);
      background-size: 220% 100%;
      animation: shimmer 1.2s infinite linear;
    }

    .loading-state,
    .error-state {
      width: 100%;
      height: 100%;
      min-height: 220px;
      display: grid;
      place-items: center;
      padding: 22px;
      text-align: center;
    }

    .loading-box,
    .error-box {
      display: grid;
      justify-items: center;
      gap: 10px;
      max-width: 260px;
    }

    .pulse-ring {
      width: 44px;
      height: 44px;
      border-radius: 999px;
      border: 2px solid rgba(31, 58, 51, .2);
      position: relative;
    }

    .pulse-ring::after {
      content: "";
      position: absolute;
      inset: 8px;
      border-radius: inherit;
      background: var(--accent);
      animation: pulseDot 1.2s infinite ease-in-out;
    }

    @keyframes pulseDot {
      0%, 100% {
        transform: scale(.65);
        opacity: .55;
      }
      50% {
        transform: scale(1);
        opacity: 1;
      }
    }

    .profile-panel {
      position: relative;
      overflow: hidden;
    }

    .profile-confirm-inline {
      position: fixed;
      right: 16px;
      bottom: 16px;
      z-index: 70;
      width: min(272px, calc(100vw - 32px));
      border: 1px solid rgba(153, 214, 205, .7);
      border-radius: 12px;
      background: rgba(255, 255, 255, .96);
      box-shadow: 0 14px 36px rgba(20, 31, 29, .14);
      padding: 10px;
      display: grid;
      gap: 8px;
      backdrop-filter: blur(12px);
    }

      .profile-confirm-inline.hidden {
      display: none;
    }

    .auth-card {
      margin-top: 16px;
      border: 1px solid rgba(201, 168, 106, 0.28);
      background: rgba(31, 58, 51, 0.12);
      border-radius: 8px;
      padding: 12px;
    }

    .auth-card-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      min-width: 0;
    }

    .auth-card-copy {
      min-width: 0;
    }

    .auth-badge {
      display: inline-flex;
      width: max-content;
      max-width: 100%;
      align-items: center;
      justify-content: center;
      gap: 6px;
      flex: 0 0 auto;
      border: 1px solid rgba(226, 207, 160, .22);
      border-radius: 999px;
      background: rgba(255, 255, 255, .08);
      color: #d6d3d1;
      padding: 6px 9px;
      font-size: 11px;
      font-weight: 950;
      line-height: 1;
      white-space: nowrap;
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .03);
    }

    .auth-badge i {
      flex: 0 0 auto;
    }

    .auth-badge span {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .auth-badge.is-ready {
      border-color: rgba(226, 207, 160, .38);
      background: rgba(226, 207, 160, .12);
      color: var(--gold-soft);
    }

    .auth-card.is-ready {
      border-color: rgba(201, 168, 106, 0.55);
      background: rgba(31, 58, 51, 0.2);
    }

    .auth-card input {
      width: 100%;
      border-radius: 6px;
      border: 1px solid rgba(214, 211, 209, 0.25);
      background: rgba(255, 255, 255, 0.95);
      color: #1c1917;
      padding: 9px 10px;
      font-size: 13px;
      outline: none;
    }

    .auth-card input:focus {
      border-color: var(--gold);
      box-shadow: 0 0 0 3px rgba(201, 168, 106, 0.14);
    }

    .auth-grid {
      display: grid;
      gap: 8px;
      margin-top: 10px;
    }

    .auth-status {
      margin-top: 8px;
      color: var(--gold-soft);
      font-size: 12px;
      line-height: 1.5;
    }

    .quota-box,
    .invite-bind-box,
    .admin-invite-box {
      margin-top: 10px;
      border: 1px solid rgba(226, 207, 160, 0.22);
      border-radius: 8px;
      background: rgba(201, 168, 106, 0.1);
      padding: 10px;
    }

    .quota-box strong,
    .invite-bind-box strong,
    .admin-invite-box strong {
      display: block;
      color: var(--deep-green-soft);
      font-size: 13px;
      font-weight: 900;
    }

    .quota-box p,
    .invite-bind-box p,
    .admin-invite-box p {
      margin: 8px 0 0;
      color: #d6d3d1;
      font-size: 11.5px;
      font-weight: 800;
      line-height: 1.45;
    }

    .quota-code-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-top: 10px;
      border: 1px solid rgba(226, 207, 160, .12);
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.055);
      padding: 9px 10px;
      color: var(--deep-green-soft);
      font-size: 12px;
      font-weight: 900;
      line-height: 1.2;
    }

    .quota-code-row span {
      color: rgba(214, 211, 209, .82);
      flex: 0 0 auto;
      font-size: 10.5px;
      font-weight: 900;
      white-space: nowrap;
    }

    .quota-code-row code {
      color: #ffffff;
      flex: 1 1 auto;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
      font-size: 12.5px;
      font-weight: 950;
      letter-spacing: .02em;
      text-align: right;
      overflow-wrap: anywhere;
      user-select: all;
    }

    .quota-code-row .btn {
      flex: 0 0 auto;
      min-height: 28px;
      padding: 6px 9px;
      font-size: 11px;
    }

    .quota-box .quota-hint-text {
      max-width: 26em;
      text-wrap: balance;
    }

    .admin-invite-list {
      display: grid;
      gap: 6px;
      max-height: 180px;
      overflow: auto;
      margin-top: 8px;
    }

    .admin-invite-item {
      display: grid;
      gap: 4px;
      border-radius: 6px;
      background: rgba(255, 255, 255, 0.08);
      padding: 8px;
      color: #f5f5f4;
      font-size: 12px;
    }

    .admin-invite-code {
      user-select: all;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
      font-weight: 900;
      letter-spacing: .03em;
    }

    .admin-export-row {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .admin-result-box {
      margin-top: 8px;
      border-radius: 7px;
      border: 1px solid rgba(153, 214, 205, 0.5);
      background: rgba(12, 148, 136, 0.18);
      color: var(--deep-green-soft);
      padding: 9px;
      display: grid;
      gap: 5px;
      font-size: 12px;
      line-height: 1.45;
    }

    .admin-result-box strong {
      color: var(--gold-soft);
      font-size: 12px;
    }

    .admin-result-box small {
      color: #d6d3d1;
      font-size: 11px;
      word-break: break-word;
    }

    .admin-codes-view .saas-main,
    .admin-ops-view .saas-main,
    .admin-creators-view .saas-main {
      max-width: 1480px;
    }

    .admin-dashboard-grid {
      display: grid;
      grid-template-columns: minmax(290px, 360px) minmax(0, 1fr);
      gap: 18px;
      align-items: start;
    }

    .admin-panel,
    .admin-table-panel {
      border: 1px solid rgba(226, 207, 160, .16);
      border-radius: 18px;
      background:
        linear-gradient(145deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .035)),
        rgba(5, 20, 17, .72);
      box-shadow: 0 22px 62px rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .08);
      padding: 16px;
    }

    .admin-panel h2,
    .admin-table-panel h2 {
      margin: 0;
      color: var(--ivory-warm);
      font-size: 18px;
      font-weight: 950;
      letter-spacing: -0.02em;
    }

    .admin-panel p,
    .admin-table-panel p {
      margin: 6px 0 0;
      color: rgba(226, 232, 240, .72);
      font-size: 12px;
      font-weight: 740;
      line-height: 1.6;
    }

    .admin-form-grid {
      display: grid;
      gap: 10px;
      margin-top: 14px;
    }

    .admin-form-grid input,
    .admin-form-grid select {
      width: 100%;
      border: 1px solid rgba(226, 207, 160, .18);
      border-radius: 12px;
      background: rgba(255, 255, 255, .94);
      color: #173b36;
      padding: 11px 12px;
      font-size: 13px;
      font-weight: 850;
      outline: none;
    }

    .admin-form-grid input:focus,
    .admin-form-grid select:focus {
      border-color: var(--gold);
      box-shadow: 0 0 0 3px rgba(201, 168, 106, .14);
    }

    .admin-metric-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
      margin: 18px 0;
    }

    .admin-metric {
      border: 1px solid rgba(226, 207, 160, .13);
      border-radius: 14px;
      background: rgba(255, 255, 255, .05);
      padding: 12px;
    }

    .admin-metric span {
      display: block;
      color: rgba(203, 213, 225, .72);
      font-size: 10.5px;
      font-weight: 900;
      text-transform: uppercase;
    }

    .admin-metric strong {
      display: block;
      margin-top: 6px;
      color: var(--ivory-warm);
      font-size: 20px;
      font-weight: 950;
    }

    .admin-metric small {
      display: block;
      margin-top: 4px;
      color: rgba(226, 232, 240, .62);
      font-size: 11px;
      font-weight: 760;
      line-height: 1.45;
      text-transform: none;
    }

    .admin-wide-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.08fr) minmax(340px, .7fr);
      gap: 18px;
      align-items: start;
    }

    .admin-insight-list {
      display: grid;
      gap: 10px;
      margin-top: 14px;
    }

    .admin-insight-item {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      gap: 10px;
      align-items: center;
      border: 1px solid rgba(226, 207, 160, .12);
      border-radius: 14px;
      background: rgba(255, 255, 255, .045);
      padding: 11px;
    }

    .admin-insight-item i {
      color: var(--gold-line);
    }

    .admin-insight-item strong {
      display: block;
      color: var(--ivory-warm);
      font-size: 13px;
      font-weight: 950;
      overflow-wrap: anywhere;
    }

    .admin-insight-item > div span,
    .admin-insight-item small {
      color: rgba(226, 232, 240, .68);
      font-size: 11px;
      font-weight: 780;
      line-height: 1.45;
    }

    .admin-usage-bar {
      min-width: 92px;
      height: 8px;
      overflow: hidden;
      border-radius: 999px;
      background: rgba(226, 207, 160, .13);
    }

    .admin-usage-bar span {
      display: block;
      width: var(--usage, 0%);
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, var(--gold), #facc15);
    }

    .admin-user-detail {
      display: grid;
      gap: 12px;
      margin-top: 14px;
    }

    .admin-user-detail-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 10px;
      border: 1px solid rgba(226, 207, 160, .12);
      border-radius: 14px;
      background: rgba(255, 255, 255, .045);
      padding: 12px;
    }

    .admin-user-detail-head strong {
      display: block;
      color: var(--ivory-warm);
      font-size: 14px;
      font-weight: 950;
      overflow-wrap: anywhere;
    }

    .admin-user-detail-head small {
      display: block;
      margin-top: 4px;
      color: rgba(226, 232, 240, .62);
      font-size: 11px;
      font-weight: 760;
      overflow-wrap: anywhere;
    }

    .admin-event-list {
      display: grid;
      gap: 8px;
      max-height: 420px;
      overflow: auto;
      padding-right: 2px;
    }

    .admin-event-item {
      display: grid;
      gap: 4px;
      border: 1px solid rgba(226, 207, 160, .1);
      border-radius: 12px;
      background: rgba(0, 0, 0, .1);
      padding: 10px;
    }

    .admin-event-item strong {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      color: var(--ivory-warm);
      font-size: 12px;
      font-weight: 950;
    }

    .admin-event-item > span {
      color: rgba(226, 232, 240, .66);
      font-size: 11px;
      font-weight: 760;
      line-height: 1.45;
      overflow-wrap: anywhere;
    }

    .admin-row-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
      align-items: center;
    }

    .admin-creator-form {
      display: grid;
      gap: 10px;
    }

    .admin-creator-form label {
      display: grid;
      gap: 6px;
      color: rgba(226, 232, 240, .7);
      font-size: 11px;
      font-weight: 900;
    }

    .admin-creator-form input,
    .admin-creator-form select {
      width: 100%;
      border: 1px solid rgba(226, 207, 160, .18);
      border-radius: 10px;
      background: rgba(255, 255, 255, .08);
      color: #f8fafc;
      padding: 10px 11px;
      font-size: 13px;
      font-weight: 820;
      outline: none;
    }

    .admin-creator-form input:focus,
    .admin-creator-form select:focus {
      border-color: rgba(226, 207, 160, .5);
      box-shadow: 0 0 0 3px rgba(201, 168, 106, .12);
    }

    .admin-creator-commission {
      color: #f8fafc;
      font-weight: 900;
      line-height: 1.45;
    }

    .admin-creator-settlement-actions {
      display: grid;
      gap: 8px;
      margin-top: 10px;
    }

    .admin-creator-settlement-actions .btn {
      justify-content: center;
      width: 100%;
    }

    .admin-creator-ledger-list {
      display: grid;
      gap: 8px;
      margin-top: 10px;
    }

    .admin-toolbar {
      display: grid;
      gap: 10px;
      margin-bottom: 12px;
    }

    .admin-filter-row,
    .admin-bulk-row {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
    }

    .admin-filter-row input,
    .admin-filter-row select,
    .admin-bulk-row input {
      min-height: 38px;
      border: 1px solid rgba(226, 207, 160, .14);
      border-radius: 11px;
      background: rgba(255, 255, 255, .92);
      color: #173b36;
      padding: 8px 10px;
      font-size: 12px;
      font-weight: 820;
      outline: none;
    }

    .admin-search-input {
      flex: 1 1 240px;
    }

    .admin-table-scroll {
      overflow: auto;
      border: 1px solid rgba(226, 207, 160, .12);
      border-radius: 14px;
      background: rgba(0, 0, 0, .12);
    }

    .admin-codes-table {
      width: 100%;
      min-width: 850px;
      border-collapse: collapse;
      color: var(--ivory-warm);
      font-size: 12px;
    }

    .admin-codes-table th,
    .admin-codes-table td {
      border-bottom: 1px solid rgba(226, 207, 160, .1);
      padding: 10px 11px;
      text-align: left;
      vertical-align: middle;
    }

    .admin-codes-table th {
      position: sticky;
      top: 0;
      z-index: 1;
      background: rgba(8, 31, 27, .96);
      color: rgba(226, 207, 160, .78);
      font-size: 10.5px;
      font-weight: 950;
      text-transform: uppercase;
    }

    .admin-codes-table tbody tr:hover {
      background: rgba(201, 168, 106, .08);
    }

    .admin-code-mono {
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
      font-size: 12.5px;
      font-weight: 950;
      letter-spacing: .02em;
      user-select: all;
      white-space: nowrap;
    }

    .admin-status-pill {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 66px;
      border-radius: 999px;
      border: 1px solid rgba(226, 207, 160, .15);
      background: rgba(226, 207, 160, .09);
      color: var(--gold-soft);
      padding: 5px 8px;
      font-size: 11px;
      font-weight: 900;
      line-height: 1;
    }

    .admin-status-pill.is-used {
      border-color: rgba(250, 204, 21, .22);
      background: rgba(250, 204, 21, .1);
      color: #fde68a;
    }

    .admin-status-pill.is-disabled,
    .admin-status-pill.is-expired {
      border-color: rgba(248, 113, 113, .22);
      background: rgba(248, 113, 113, .1);
      color: #fecaca;
    }

    .admin-status-pill.is-low {
      border-color: rgba(251, 146, 60, .26);
      background: rgba(251, 146, 60, .11);
      color: #fed7aa;
    }

    .admin-status-pill.is-zero,
    .admin-status-pill.is-banned {
      border-color: rgba(248, 113, 113, .24);
      background: rgba(248, 113, 113, .11);
      color: #fecaca;
    }

    .admin-status-pill.is-active,
    .admin-status-pill.is-bound {
      border-color: rgba(226, 207, 160, .22);
      background: rgba(201, 168, 106, .11);
      color: var(--gold-soft);
    }

    .admin-status-pill.is-unbound {
      border-color: rgba(148, 163, 184, .24);
      background: rgba(148, 163, 184, .11);
      color: #e2e8f0;
    }

    .admin-selected-note {
      color: rgba(226, 232, 240, .78);
      font-size: 12px;
      font-weight: 850;
    }

    .admin-pagination-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-top: 12px;
    }

    .admin-pagination-row small {
      color: rgba(226, 232, 240, .68);
      font-size: 11px;
      font-weight: 820;
      line-height: 1.45;
    }

    .admin-empty-row {
      padding: 24px;
      color: rgba(226, 232, 240, .72);
      text-align: center;
      font-weight: 850;
    }

    .records-view {
      --records-panel: color-mix(in srgb, var(--panel) 94%, var(--ivory-warm));
      --records-panel-soft: color-mix(in srgb, var(--ivory-warm) 88%, var(--panel));
      --records-line: color-mix(in srgb, var(--line) 72%, var(--gold-line));
      --records-muted: color-mix(in srgb, var(--muted) 88%, var(--deep-green));
      --records-shadow: 0 14px 34px color-mix(in srgb, var(--charcoal) 10%, transparent);
      background:
        linear-gradient(180deg, var(--ivory-warm), var(--ivory));
      color: var(--ink);
    }

    .records-view::before {
      background:
        linear-gradient(color-mix(in srgb, var(--gold-line) 16%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--gold-line) 12%, transparent) 1px, transparent 1px);
      background-size: 34px 34px;
      mask-image: linear-gradient(180deg, rgba(0, 0, 0, .66), transparent 78%);
      opacity: .42;
    }

    .records-view::after {
      display: none;
    }

    .records-view .saas-shell,
    .records-view .saas-main {
      background:
        linear-gradient(180deg, var(--ivory-warm), var(--ivory));
    }

    .records-view .saas-main {
      gap: 16px;
      padding: 22px 24px 34px;
    }

    .records-view .saas-nav {
      border-right-color: color-mix(in srgb, var(--gold-line) 18%, transparent);
      background:
        linear-gradient(180deg, color-mix(in srgb, var(--charcoal) 96%, var(--deep-green)), var(--obsidian));
      box-shadow: inset -1px 0 0 color-mix(in srgb, var(--gold-line) 10%, transparent);
    }

    .records-view .saas-brand-icon,
    .records-view .saas-nav-item,
    .records-view .saas-nav-note,
    .records-view .hub-hero.compact,
    .records-toolbar,
    .record-card,
    .record-thumb,
    .record-preview-btn,
    .record-empty,
    .record-preview-dialog,
    .record-preview-close {
      border-radius: var(--radius);
    }

    .records-view .saas-nav-item {
      min-height: 42px;
      border-color: color-mix(in srgb, var(--gold-line) 10%, transparent);
      background: color-mix(in srgb, var(--charcoal) 76%, transparent);
      color: color-mix(in srgb, var(--ivory-warm) 74%, transparent);
      box-shadow: none;
    }

    .records-view .saas-nav-item:hover,
    .records-view .saas-nav-item.is-active {
      border-color: color-mix(in srgb, var(--gold-line) 42%, transparent);
      background:
        linear-gradient(135deg, color-mix(in srgb, var(--gold) 17%, var(--charcoal)), color-mix(in srgb, var(--deep-green) 56%, var(--obsidian)));
      color: var(--ivory-warm);
      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold-line) 12%, transparent);
    }

    .records-view .saas-nav-note {
      border-color: color-mix(in srgb, var(--gold-line) 22%, transparent);
      background: color-mix(in srgb, var(--charcoal) 78%, var(--obsidian));
      box-shadow: none;
    }

    .records-view .saas-nav-note p {
      color: color-mix(in srgb, var(--ivory-warm) 76%, transparent);
    }

    .records-view .saas-nav .mini-badge,
    .records-view .hero-kicker {
      border-color: var(--deep-green-line);
      border-radius: var(--radius-sm);
      background: var(--deep-green-soft);
      color: var(--deep-green);
      letter-spacing: 0;
    }

    .records-view .hub-hero.compact {
      border: 1px solid var(--records-line);
      background:
        linear-gradient(135deg, var(--records-panel), var(--records-panel-soft));
      color: var(--ink);
      box-shadow: var(--records-shadow);
      padding: 18px 20px;
    }

    .records-view .hub-hero.compact::before {
      background:
        linear-gradient(color-mix(in srgb, var(--gold-line) 18%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--gold-line) 14%, transparent) 1px, transparent 1px);
      background-size: 28px 28px;
      opacity: .5;
    }

    .records-view .hub-hero.compact::after {
      display: none;
    }

    .records-view .hub-hero h1 {
      color: var(--ink);
      font-size: clamp(28px, 2.6vw, 38px);
      letter-spacing: 0;
    }

    .records-view .hub-hero p {
      color: var(--records-muted);
      font-size: 14px;
      line-height: 1.65;
    }

    .records-view .back-to-hub-btn,
    .records-view #recordsRefreshBtn {
      border-radius: var(--radius-sm);
      border-color: var(--records-line);
      background: var(--panel);
      color: var(--ink-soft);
      box-shadow: none;
    }

    .records-view .back-to-hub-btn:hover,
    .records-view #recordsRefreshBtn:hover,
    .records-view .back-to-hub-btn:focus-visible,
    .records-view #recordsRefreshBtn:focus-visible {
      border-color: var(--gold-line);
      background: var(--gold-soft);
      color: var(--ink);
    }

    .records-toolbar {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
      justify-content: space-between;
      border: 1px solid var(--records-line);
      background: var(--records-panel);
      box-shadow: var(--records-shadow);
      padding: 10px;
    }

    .records-filter-row {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
      align-items: center;
    }

    .records-filter-btn {
      min-height: 36px;
      border: 1px solid var(--records-line);
      border-radius: var(--radius-sm);
      background: var(--panel);
      color: var(--ink-soft);
      padding: 8px 12px;
      font-size: 12px;
      font-weight: 900;
      cursor: pointer;
      transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
    }

    .records-filter-btn:hover,
    .records-filter-btn:focus-visible,
    .records-filter-btn.is-active {
      border-color: var(--gold-line);
      background: var(--gold-soft);
      color: var(--ink);
      outline: none;
    }

    .records-filter-btn:hover {
      transform: translateY(-1px);
    }

    .records-alert {
      display: flex;
      align-items: center;
      gap: 8px;
      color: var(--attention);
      font-size: 12px;
      font-weight: 880;
      line-height: 1.45;
    }

    .records-alert i {
      color: var(--gold-strong);
    }

    .records-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
      gap: 12px;
    }

    .record-card {
      display: grid;
      gap: 10px;
      border: 1px solid var(--records-line);
      background: var(--records-panel);
      box-shadow: var(--records-shadow);
      padding: 10px;
      min-width: 0;
    }

    .record-thumb {
      position: relative;
      overflow: hidden;
      aspect-ratio: 4 / 3;
      border: 1px solid var(--line-soft);
      background: var(--ivory-warm);
    }

    .record-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .record-preview-btn {
      position: absolute;
      top: 8px;
      right: 8px;
      display: inline-grid;
      place-items: center;
      width: 34px;
      height: 34px;
      border: 1px solid color-mix(in srgb, var(--gold-line) 48%, transparent);
      background: color-mix(in srgb, var(--charcoal) 86%, transparent);
      color: var(--gold-soft);
      box-shadow: 0 10px 22px color-mix(in srgb, var(--charcoal) 24%, transparent);
      cursor: pointer;
      backdrop-filter: blur(10px);
      transition: transform .16s ease, border-color .16s ease, background .16s ease;
    }

    .record-preview-btn:hover,
    .record-preview-btn:focus-visible {
      transform: translateY(-1px);
      border-color: var(--gold-line);
      background: var(--deep-green);
      outline: none;
    }

    .record-preview-btn svg {
      pointer-events: none;
    }

    .record-thumb-state {
      display: grid;
      place-items: center;
      width: 100%;
      height: 100%;
      color: var(--records-muted);
      font-size: 12px;
      font-weight: 900;
      text-align: center;
      padding: 12px;
    }

    .record-meta {
      display: grid;
      gap: 4px;
      min-width: 0;
    }

    .record-meta strong {
      display: flex;
      align-items: center;
      gap: 6px;
      color: var(--ink);
      font-size: 13px;
      font-weight: 950;
      line-height: 1.35;
      overflow-wrap: anywhere;
    }

    .record-meta strong i {
      flex: 0 0 auto;
      color: var(--gold-strong);
    }

    .record-meta span,
    .record-meta small {
      color: var(--records-muted);
      font-size: 11px;
      font-weight: 760;
      line-height: 1.45;
      overflow-wrap: anywhere;
    }

    .record-actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }

    .record-actions .btn {
      min-height: 34px;
      border-radius: var(--radius-sm);
      border-color: var(--records-line);
      background: var(--panel);
      color: var(--ink-soft);
      box-shadow: none;
    }

    .record-actions .btn:hover,
    .record-actions .btn:focus-visible {
      border-color: var(--gold-line);
      background: var(--gold-soft);
      color: var(--ink);
      outline: none;
    }

    .record-preview-modal {
      z-index: 70;
      background: color-mix(in srgb, var(--obsidian) 86%, transparent);
      padding: 18px;
    }

    .record-preview-dialog {
      display: grid;
      grid-template-rows: auto minmax(0, 1fr);
      width: min(1120px, calc(100vw - 28px));
      max-height: calc(100svh - 28px);
      overflow: hidden;
      border: 1px solid color-mix(in srgb, var(--gold-line) 28%, transparent);
      background:
        linear-gradient(145deg, color-mix(in srgb, var(--charcoal) 92%, var(--deep-green)), var(--obsidian));
      box-shadow: 0 28px 80px color-mix(in srgb, var(--obsidian) 52%, transparent);
    }

    .record-preview-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 12px 14px;
      border-bottom: 1px solid color-mix(in srgb, var(--gold-line) 16%, transparent);
    }

    .record-preview-head h2 {
      margin: 0;
      color: var(--ivory-warm);
      font-size: 15px;
      font-weight: 950;
      line-height: 1.35;
      overflow-wrap: anywhere;
    }

    .record-preview-close {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
      width: 34px;
      height: 34px;
      border: 1px solid color-mix(in srgb, var(--gold-line) 24%, transparent);
      background: color-mix(in srgb, var(--panel) 8%, transparent);
      color: var(--ivory-warm);
      cursor: pointer;
    }

    .record-preview-close:hover,
    .record-preview-close:focus-visible {
      border-color: var(--gold-line);
      background: color-mix(in srgb, var(--gold) 18%, transparent);
      outline: none;
    }

    .record-preview-stage {
      position: relative;
      display: grid;
      place-items: center;
      min-height: 360px;
      height: min(76vh, 760px);
      padding: 12px;
      overflow: hidden;
      background:
        linear-gradient(45deg, color-mix(in srgb, var(--gold-line) 7%, transparent) 25%, transparent 25%),
        linear-gradient(-45deg, color-mix(in srgb, var(--gold-line) 7%, transparent) 25%, transparent 25%),
        color-mix(in srgb, var(--obsidian) 72%, var(--deep-green));
      background-size: 22px 22px;
    }

    .record-preview-modal .record-preview-stage img {
      max-width: 100%;
      /* 用「视口单位的确定性高度」(= stage 高 min(76vh,760px) 减去 12px×2 内边距)封顶,
         不要用 max-height:100% —— grid 项的百分比高度在部分浏览器解析不出来(经典怪癖),
         会让方图按 max-width 撑成与宽同高、远超 stage、被 overflow:hidden 裁成"露半张/看不全尺寸"。 */
      max-height: calc(min(76vh, 760px) - 24px);
      width: auto;
      height: auto;
      object-fit: contain;
      border-radius: var(--radius-sm);
      background: transparent;
      box-shadow: 0 18px 50px color-mix(in srgb, var(--obsidian) 32%, transparent);
      /* 加载未完成前隐藏,避免大图边下载边逐行渲染露出半张残图;onload 后整图淡入。 */
      opacity: 0;
      transition: opacity .25s ease;
    }

    .record-preview-stage.is-loaded img {
      opacity: 1;
    }

    .record-preview-state {
      position: absolute;
      inset: auto 16px 16px;
      display: grid;
      place-items: center;
      min-height: 38px;
      border: 1px solid color-mix(in srgb, var(--gold-line) 18%, transparent);
      border-radius: var(--radius-sm);
      background: color-mix(in srgb, var(--obsidian) 78%, transparent);
      color: color-mix(in srgb, var(--ivory-warm) 84%, transparent);
      font-size: 12px;
      font-weight: 900;
      text-align: center;
      padding: 8px 14px;
      pointer-events: none;
      backdrop-filter: blur(10px);
    }

    .record-preview-stage.is-loaded .record-preview-state {
      display: none;
    }

    .record-preview-stage.is-error img {
      display: none;
    }

    /* 注:旧的 `#recordPreviewModal img { max-height:100% }` 已移除 —— 它的 ID 优先级压过
       `.record-preview-stage img`,且 max-height:100% 在 grid 项里解析失败,正是大图被裁的元凶。
       图片样式统一收敛到 `.record-preview-stage img`(确定性视口高度封顶 + object-fit:contain)。 */

    @media (max-width: 640px) {
      .record-preview-modal {
        padding: 8px;
      }

      .record-preview-dialog {
        width: calc(100vw - 16px);
        max-height: calc(100svh - 16px);
        border-radius: var(--radius);
      }

      .record-preview-head {
        padding: 10px;
      }

      .record-preview-stage {
        min-height: 260px;
        height: min(72svh, 680px);
        padding: 8px;
      }

      /* 移动端同步:图片高度按移动 stage 高(min(72svh,680px))减去 8px×2 内边距确定性封顶。 */
      .record-preview-modal .record-preview-stage img {
        max-height: calc(min(72svh, 680px) - 16px);
      }
    }

    .admin-record-panel {
      margin-top: 16px;
    }

    .admin-record-toolbar {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 12px;
    }

    .admin-record-cleanup {
      margin-top: 10px;
      color: rgba(226, 232, 240, .74);
      font-size: 12px;
      font-weight: 820;
      line-height: 1.55;
    }

    .admin-record-list {
      margin-top: 12px;
      overflow: hidden;
      border: 1px solid rgba(226, 207, 160, .12);
      border-radius: 14px;
      background: rgba(255, 255, 255, .035);
    }

    .admin-record-table {
      display: grid;
      min-width: 0;
    }

    .admin-record-head,
    .admin-record-row {
      display: grid;
      grid-template-columns: minmax(220px, 1.15fr) minmax(180px, .9fr) minmax(150px, .62fr) minmax(210px, .85fr);
      gap: 12px;
      align-items: center;
    }

    .admin-record-head {
      border-bottom: 1px solid rgba(226, 207, 160, .11);
      background: rgba(255, 255, 255, .04);
      padding: 9px 12px;
    }

    .admin-record-head span {
      color: rgba(226, 207, 160, .68);
      font-size: 10.5px;
      font-weight: 940;
      line-height: 1.2;
      text-transform: uppercase;
    }

    .admin-record-row {
      border-bottom: 1px solid rgba(226, 207, 160, .09);
      padding: 10px 12px;
      min-height: 64px;
    }

    .admin-record-row:last-child {
      border-bottom: 0;
    }

    .admin-record-row:hover {
      background: rgba(201, 168, 106, .07);
    }

    .admin-record-main,
    .admin-record-cell,
    .admin-record-time {
      display: grid;
      gap: 4px;
      min-width: 0;
    }

    .admin-record-row strong,
    .admin-record-row span,
    .admin-record-row small {
      min-width: 0;
    }

    .admin-record-row strong {
      color: var(--ivory-warm);
      font-size: 12px;
      font-weight: 920;
      line-height: 1.45;
    }

    .admin-record-row span,
    .admin-record-row small {
      color: rgba(226, 232, 240, .68);
      font-size: 11px;
      font-weight: 760;
      line-height: 1.45;
    }

    .admin-record-email,
    .admin-record-title {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .admin-record-title {
      color: rgba(226, 232, 240, .76);
      font-weight: 820;
    }

    .admin-record-tool-line,
    .admin-record-file-line {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      align-items: center;
    }

    .admin-record-chip {
      display: inline-flex;
      align-items: center;
      min-height: 22px;
      max-width: 100%;
      border: 1px solid rgba(226, 207, 160, .13);
      border-radius: 999px;
      background: rgba(255, 255, 255, .055);
      color: rgba(226, 232, 240, .76);
      padding: 4px 8px;
      font-size: 10.5px;
      font-weight: 880;
      line-height: 1;
    }

    .admin-record-time {
      justify-items: end;
      text-align: right;
    }

    .admin-record-time span,
    .admin-record-time small {
      white-space: nowrap;
    }

    .admin-diagnostics-summary {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      margin-top: 12px;
    }

    .admin-diagnostics-summary .admin-metric {
      min-height: 84px;
    }

    .admin-diagnostics-list {
      display: grid;
      gap: 8px;
      margin-top: 12px;
    }

    .admin-diagnostics-row {
      display: grid;
      gap: 5px;
      border: 1px solid rgba(226, 207, 160, .1);
      border-radius: 12px;
      background: rgba(255, 255, 255, .045);
      padding: 10px;
    }

    .admin-diagnostics-row strong,
    .admin-diagnostics-row span {
      min-width: 0;
      overflow-wrap: anywhere;
    }

    .admin-diagnostics-row strong {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      color: var(--ivory-warm);
      font-size: 12px;
      font-weight: 920;
      line-height: 1.45;
    }

    .admin-diagnostics-row span {
      color: rgba(226, 232, 240, .68);
      font-size: 11px;
      font-weight: 760;
      line-height: 1.45;
    }

    .record-empty {
      border: 1px dashed var(--records-line);
      background: var(--records-panel-soft);
      color: var(--records-muted);
      padding: 24px;
      text-align: center;
      font-weight: 880;
      line-height: 1.7;
    }

    @media (max-width: 1080px) {
      .records-view .saas-main {
        order: -1;
      }

      .records-view .saas-nav {
        position: relative;
        top: auto;
        height: auto;
      }
    }

    @media (max-width: 640px) {
      .records-view .saas-main {
        padding: 14px;
      }

      .records-view .hub-hero.compact {
        padding: 15px;
      }

      .records-view .hub-hero h1 {
        font-size: 30px;
      }

      .records-toolbar {
        display: grid;
        grid-template-columns: 1fr;
      }

      .records-filter-row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .records-filter-btn {
        width: 100%;
      }

      .records-grid {
        grid-template-columns: minmax(0, 1fr);
      }
    }

    .account-modal-card {
      width: min(760px, calc(100vw - 28px));
      max-height: min(86svh, 820px);
      overflow-y: auto;
      border: 1px solid var(--gold-line);
      border-radius: var(--radius);
      background:
        radial-gradient(circle at 16% 0%, rgba(201, 168, 106, .16), transparent 34%),
        linear-gradient(145deg, var(--ivory-warm), var(--ivory));
      color: var(--ink);
      box-shadow: 0 28px 82px rgba(23, 23, 23, .2), inset 0 1px 0 rgba(255, 255, 255, .72);
      padding: 20px;
    }

    .account-summary-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    .account-summary-item,
    .account-record-section,
    .account-admin-entry {
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: rgba(255, 255, 255, .72);
      padding: 12px;
    }

    .account-summary-item span {
      display: block;
      color: var(--muted);
      font-size: 11px;
      font-weight: 850;
      line-height: 1.3;
    }

    .account-summary-item strong {
      display: block;
      margin-top: 4px;
      color: var(--deep-green);
      font-size: 14px;
      font-weight: 950;
      line-height: 1.35;
      overflow-wrap: anywhere;
    }

    .account-action-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 9px;
    }

    .account-action-grid .btn {
      justify-content: center;
      min-height: 42px;
    }

    .account-record-section {
      display: grid;
      gap: 10px;
    }

    .account-creator-apply-copy {
      display: grid;
      gap: 7px;
      color: var(--ink-soft);
      font-size: 12px;
      font-weight: 760;
      line-height: 1.5;
    }

    .account-creator-apply-copy span {
      display: flex;
      gap: 7px;
      align-items: flex-start;
    }

    .account-creator-apply-copy span::before {
      content: "";
      flex: 0 0 auto;
      width: 6px;
      height: 6px;
      margin-top: 7px;
      border-radius: 999px;
      background: var(--gold);
    }

    #accountCreatorApplyBtn {
      justify-content: center;
      width: 100%;
    }

    .account-record-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    .account-record-head strong {
      color: var(--ink);
      font-size: 13px;
      font-weight: 950;
    }

    .account-record-list {
      display: grid;
      gap: 8px;
      max-height: 210px;
      overflow-y: auto;
      padding-right: 2px;
    }

    .account-record-row {
      display: grid;
      grid-template-columns: minmax(0, 1.15fr) auto;
      gap: 10px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--ivory-warm);
      padding: 10px;
    }

    .account-order-row {
      align-items: start;
    }

    .account-order-title {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      min-width: 0;
    }

    .account-order-title strong {
      overflow-wrap: anywhere;
    }

    .account-order-copy {
      min-height: 28px;
      padding: 5px 8px !important;
      white-space: nowrap;
    }

    .account-order-actions {
      display: grid;
      justify-items: end;
      gap: 6px;
    }

    .account-record-row strong {
      color: var(--ink);
      font-size: 12.5px;
      font-weight: 950;
      line-height: 1.35;
    }

    .account-record-row span,
    .account-record-row small {
      display: block;
      color: var(--muted);
      font-size: 11px;
      font-weight: 760;
      line-height: 1.5;
    }

    .account-record-delta {
      align-self: center;
      border-radius: 999px;
      background: var(--deep-green-soft);
      color: var(--deep-green);
      padding: 6px 9px;
      font-size: 12px;
      font-weight: 950;
      white-space: nowrap;
    }

    .account-record-delta.is-negative {
      background: rgba(180, 35, 58, .1);
      color: var(--danger);
    }

    .account-empty-state {
      border: 1px dashed var(--gold-line);
      border-radius: var(--radius);
      color: var(--muted);
      padding: 14px;
      font-size: 12px;
      font-weight: 760;
      line-height: 1.65;
    }

    .account-summary-item.is-total {
      grid-column: 1 / -1;
      background:
        linear-gradient(135deg, var(--gold-soft), var(--deep-green-soft)),
        var(--panel);
    }

    .account-summary-item.is-total strong {
      color: var(--deep-green);
      font-size: 20px;
    }

    .account-commission-note {
      display: grid;
      gap: 8px;
      border: 1px solid var(--deep-green-line);
      border-radius: var(--radius);
      background: var(--deep-green-soft);
      color: var(--deep-green);
      padding: 12px;
      font-size: 12px;
      font-weight: 820;
      line-height: 1.65;
    }

    .account-commission-note strong {
      color: var(--deep-green);
      font-weight: 950;
    }

    .account-commission-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 6px;
    }

    .account-commission-meta span {
      border: 1px solid var(--deep-green-line);
      border-radius: 999px;
      background: rgba(255, 255, 255, .56);
      padding: 4px 8px;
      color: var(--deep-green);
      font-size: 10.5px;
      font-weight: 850;
    }

    .account-record-delta.is-pending {
      background: var(--gold-soft);
      color: var(--attention);
    }

    .account-record-delta.is-settled {
      background: var(--deep-green-soft);
      color: var(--deep-green);
    }

    .account-record-delta.is-disabled {
      background: rgba(107, 106, 100, .12);
      color: var(--muted);
    }

    .account-admin-entry {
      display: grid;
      gap: 10px;
      margin-top: 2px;
    }

    .account-admin-entry.is-secondary {
      opacity: .86;
    }

    .account-admin-entry.is-secondary .btn {
      width: fit-content;
      max-width: 100%;
    }

    .account-admin-entry strong {
      color: var(--ink);
      font-size: 13px;
      font-weight: 950;
    }

    .account-admin-entry p {
      margin: 0;
    }

    .account-modal-card h2 {
      margin: 0;
      color: var(--ink);
      font-size: 22px;
      font-weight: 950;
      letter-spacing: 0;
    }

    .account-modal-card p {
      margin: 8px 0 0;
      color: var(--ink-soft);
      font-size: 13px;
      font-weight: 700;
      line-height: 1.65;
    }

    .account-modal-grid {
      display: grid;
      gap: 12px;
      margin-top: 16px;
    }

    .account-modal-card input,
    .account-modal-card select,
    .account-modal-card textarea {
      width: 100%;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--panel);
      color: var(--ink);
      padding: 11px 12px;
      outline: none;
    }

    .account-modal-card select {
      color-scheme: light;
    }

    .account-modal-card textarea {
      min-height: 112px;
      resize: vertical;
      line-height: 1.55;
    }

    .account-modal-card input:focus,
    .account-modal-card select:focus,
    .account-modal-card textarea:focus {
      border-color: var(--gold);
      box-shadow: 0 0 0 3px rgba(201, 168, 106, .12);
    }

    .account-modal-card .auth-field-label {
      color: var(--ink-soft);
    }

    .account-help-list {
      display: grid;
      gap: 9px;
      margin-top: 14px;
    }

    .account-help-list span {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      color: var(--ink-soft);
      font-size: 12px;
      font-weight: 750;
      line-height: 1.55;
    }

    .account-support-note {
      display: grid;
      gap: 8px;
      border: 1px solid var(--gold-line);
      border-radius: var(--radius);
      background: var(--gold-soft);
      padding: 12px;
      color: var(--ink-soft);
      font-size: 12px;
      font-weight: 760;
      line-height: 1.55;
    }

    .account-support-note strong {
      color: var(--ink);
      font-size: 13px;
      font-weight: 950;
    }

    .account-support-note ul {
      display: grid;
      gap: 5px;
      margin: 0;
      padding-left: 18px;
    }

    .account-support-note li {
      padding-left: 2px;
    }

    .account-support-note small {
      color: var(--muted);
      font-size: 11px;
      font-weight: 760;
      line-height: 1.5;
    }

    .account-support-card {
      position: relative;
      overflow: hidden;
      border: 1px solid var(--gold-line);
      border-radius: var(--radius);
      background: var(--panel);
      padding: 12px;
    }

    .account-support-card img {
      display: block;
      width: 100%;
      border-radius: var(--radius);
      background: #ffffff;
    }

    .account-support-card .support-qr-overlay {
      position: absolute;
      left: 50%;
      top: 27.6%;
      width: 47.5%;
      aspect-ratio: 1;
      transform: translateX(-50%);
      border-radius: 10px;
      object-fit: cover;
      box-shadow: 0 10px 26px rgba(15, 23, 42, .14);
    }

    .account-support-card + .account-help-list {
      margin-top: 10px;
    }

    .account-ticket-section {
      gap: 12px;
    }

    .account-ticket-actions {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: 8px;
    }

    .account-ticket-warning,
    .account-ticket-status {
      border: 1px solid var(--gold-line);
      border-radius: var(--radius);
      background: var(--gold-soft);
      color: var(--ink-soft);
      padding: 10px 11px;
      font-size: 12px;
      font-weight: 780;
      line-height: 1.55;
    }

    .account-ticket-status {
      border-color: var(--deep-green-line);
      background: var(--deep-green-soft);
      color: var(--deep-green);
    }

    .account-ticket-form {
      display: grid;
      gap: 12px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: rgba(255, 255, 255, .62);
      padding: 12px;
    }

    .account-ticket-form-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    .account-ticket-form-grid .is-full {
      grid-column: 1 / -1;
    }

    .account-ticket-list {
      display: grid;
      gap: 8px;
      max-height: 260px;
      overflow-y: auto;
      padding-right: 2px;
    }

    .account-ticket-row {
      display: grid;
      gap: 8px;
      width: 100%;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--ivory-warm);
      color: inherit;
      padding: 10px;
      text-align: left;
      cursor: pointer;
      transition: border-color .18s ease, background .18s ease;
    }

    .account-ticket-row:hover,
    .account-ticket-row.is-active {
      border-color: var(--gold-line);
      background: var(--gold-soft);
    }

    .account-ticket-title {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      min-width: 0;
    }

    .account-ticket-title strong {
      color: var(--ink);
      font-size: 12.5px;
      font-weight: 950;
      line-height: 1.35;
      overflow-wrap: anywhere;
    }

    .account-ticket-meta,
    .account-ticket-pills {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 6px;
    }

    .account-ticket-meta span {
      color: var(--muted);
      font-size: 11px;
      font-weight: 760;
      line-height: 1.45;
      overflow-wrap: anywhere;
    }

    .account-ticket-pill {
      border: 1px solid var(--line);
      border-radius: 999px;
      background: var(--panel);
      color: var(--ink-soft);
      padding: 4px 8px;
      font-size: 10.5px;
      font-weight: 900;
      white-space: nowrap;
    }

    .account-ticket-pill.is-new,
    .account-ticket-pill.is-waiting_user,
    .account-ticket-pill.is-manual_review {
      border-color: var(--gold-line);
      background: var(--gold-soft);
      color: var(--attention);
    }

    .account-ticket-pill.is-resolved,
    .account-ticket-pill.is-closed {
      border-color: var(--deep-green-line);
      background: var(--deep-green-soft);
      color: var(--deep-green);
    }

    .account-ticket-pill.is-rejected,
    .account-ticket-pill.is-escalated_p0 {
      border-color: rgba(248, 113, 113, .28);
      background: rgba(180, 35, 58, .1);
      color: var(--danger);
    }

    .account-ticket-detail {
      display: grid;
      gap: 10px;
      border: 1px solid var(--gold-line);
      border-radius: var(--radius);
      background: var(--gold-soft);
      padding: 12px;
    }

    .account-ticket-detail-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }

    .account-ticket-detail-grid span {
      display: grid;
      gap: 3px;
      border: 1px solid rgba(226, 207, 160, .48);
      border-radius: var(--radius);
      background: rgba(255, 255, 255, .62);
      padding: 8px;
      color: var(--muted);
      font-size: 10.5px;
      font-weight: 850;
      line-height: 1.35;
    }

    .account-ticket-detail-grid strong {
      color: var(--ink);
      font-size: 12px;
      font-weight: 950;
      overflow-wrap: anywhere;
    }

    .account-ticket-description,
    .account-ticket-timeline {
      display: grid;
      gap: 8px;
    }

    .account-ticket-description p,
    .account-ticket-event p {
      margin: 0;
      color: var(--ink-soft);
      font-size: 12px;
      font-weight: 740;
      line-height: 1.6;
      overflow-wrap: anywhere;
    }

    .account-ticket-event {
      display: grid;
      gap: 5px;
      border-left: 2px solid var(--gold-line);
      padding: 2px 0 8px 10px;
    }

    .account-ticket-event strong {
      color: var(--ink);
      font-size: 12px;
      font-weight: 950;
    }

    .account-ticket-event small {
      color: var(--muted);
      font-size: 10.5px;
      font-weight: 780;
    }

    .beta-plan-grid {
      display: grid;
      gap: 9px;
      margin-top: 12px;
    }

    .beta-plan-card {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 8px;
      align-items: center;
      border: 1px solid rgba(226, 207, 160, .15);
      border-radius: 14px;
      background: rgba(255, 255, 255, .06);
      padding: 11px 12px;
    }

    .beta-plan-card strong,
    .public-beta-plan strong {
      display: block;
      color: var(--ivory-warm);
      font-size: 13px;
      font-weight: 950;
    }

    .beta-plan-card span,
    .public-beta-plan span {
      color: rgba(226, 232, 240, .72);
      font-size: 12px;
      font-weight: 760;
      line-height: 1.45;
    }

    .beta-plan-card button {
      white-space: nowrap;
    }

    .recharge-intro-card {
      border: 1px solid var(--gold-line);
      border-radius: var(--radius);
      background:
        radial-gradient(circle at 18% 0%, rgba(201, 168, 106, .16), transparent 34%),
        var(--panel);
      padding: 14px;
    }

    .recharge-intro-card strong {
      display: flex;
      align-items: center;
      gap: 8px;
      color: var(--ink);
      font-size: 14px;
      font-weight: 950;
    }

    .recharge-intro-card p {
      margin: 7px 0 0;
      color: var(--ink-soft);
      font-size: 12px;
      font-weight: 750;
      line-height: 1.6;
    }

    .recharge-ops-note {
      display: grid;
      gap: 7px;
      border: 1px solid var(--gold-line);
      border-radius: var(--radius);
      background: var(--gold-soft);
      padding: 12px;
      color: var(--ink-soft);
      font-size: 12px;
      font-weight: 780;
      line-height: 1.55;
    }

    .recharge-ops-note strong {
      color: var(--ink);
      font-weight: 950;
    }

    .recharge-ops-note span {
      display: block;
    }

    .recharge-package-grid {
      display: grid;
      gap: 10px;
    }

    .recharge-package-card {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 12px;
      align-items: center;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background:
        linear-gradient(145deg, var(--panel), var(--ivory-warm));
      padding: 13px;
      transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
    }

    .recharge-package-card:hover {
      border-color: var(--gold-line);
      box-shadow: 0 18px 38px rgba(201, 168, 106, .1);
      transform: translateY(-1px);
    }

    .recharge-package-card.is-recommended {
      border-color: var(--gold);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 14px 34px rgba(201, 168, 106, .12);
    }

    .recharge-package-card strong {
      display: block;
      color: var(--ink);
      font-size: 14px;
      font-weight: 950;
    }

    .recharge-package-card span {
      display: block;
      margin-top: 3px;
      color: var(--ink-soft);
      font-size: 12px;
      font-weight: 760;
      line-height: 1.45;
    }

    .recharge-package-card button {
      white-space: nowrap;
    }

    .recharge-package-price {
      color: var(--deep-green) !important;
      font-size: 13px !important;
      font-weight: 950 !important;
      letter-spacing: 0;
    }

    .recharge-pay-button {
      position: relative;
      isolation: isolate;
      min-width: 118px;
      overflow: hidden;
      border: 1px solid rgba(226, 207, 160, .48) !important;
      background: linear-gradient(135deg, var(--gold) 0%, var(--gold-strong) 100%) !important;
      color: var(--ink) !important;
      box-shadow: 0 12px 28px rgba(201, 168, 106, .24), inset 0 1px 0 rgba(255, 255, 255, .2);
      transition: transform .16s ease, box-shadow .16s ease, filter .16s ease, background .16s ease;
    }

    .recharge-pay-button::after {
      content: "";
      position: absolute;
      inset: -50% auto -50% -70%;
      z-index: 0;
      width: 54%;
      transform: rotate(18deg);
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .32), transparent);
      opacity: .56;
      animation: recharge-shimmer 3.6s ease-in-out infinite;
    }

    .recharge-pay-button > * {
      position: relative;
      z-index: 1;
    }

    .recharge-pay-button:hover:not(:disabled) {
      transform: translateY(-2px);
      filter: saturate(1.05);
      box-shadow: 0 16px 34px rgba(201, 168, 106, .32), 0 0 0 3px rgba(201, 168, 106, .13);
    }

    .recharge-pay-button:active:not(:disabled) {
      transform: translateY(0) scale(.98);
      box-shadow: 0 9px 22px rgba(201, 168, 106, .24), 0 0 0 2px rgba(201, 168, 106, .12);
    }

    .recharge-pay-button:disabled {
      cursor: wait;
      opacity: .86;
      filter: saturate(.82);
      transform: none;
      box-shadow: 0 10px 20px rgba(201, 168, 106, .18);
    }

    .recharge-pay-button .is-spinning {
      animation: recharge-spin .8s linear infinite;
    }

    .recharge-package-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-top: 8px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 800;
    }

    .recharge-status-box {
      border: 1px solid var(--deep-green-line);
      border-radius: var(--radius);
      padding: 12px;
      background: var(--deep-green-soft);
      color: var(--deep-green);
      font-size: 12px;
      font-weight: 760;
      line-height: 1.65;
    }

    @keyframes recharge-shimmer {
      0%, 58% { left: -70%; }
      78%, 100% { left: 118%; }
    }

    @keyframes recharge-spin {
      to { transform: rotate(360deg); }
    }

    .account-modal-card .is-spinning {
      animation: recharge-spin .8s linear infinite;
    }

    @media (max-width: 520px) {
      .account-summary-grid,
      .account-action-grid,
      .account-ticket-form-grid,
      .account-ticket-detail-grid {
        grid-template-columns: minmax(0, 1fr);
      }

      .account-record-head {
        align-items: flex-start;
        flex-direction: column;
      }

      .account-ticket-actions {
        width: 100%;
        justify-content: stretch;
      }

      .account-ticket-actions .btn,
      .account-ticket-actions button {
        flex: 1 1 138px;
        justify-content: center;
      }

      .account-record-row {
        grid-template-columns: minmax(0, 1fr);
      }

      .account-order-actions {
        justify-items: start;
      }

      .account-order-copy {
        width: 100%;
        justify-content: center;
      }

      .recharge-package-card {
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
      }

      .recharge-pay-button {
        width: 100%;
        min-height: 42px;
      }
    }

    .account-policy-grid {
      display: grid;
      gap: 10px;
      margin-top: 14px;
    }

    .account-policy-item {
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: rgba(255, 255, 255, .72);
      padding: 12px;
    }

    .account-policy-item strong {
      display: block;
      margin-bottom: 5px;
      color: var(--ink);
      font-size: 13px;
      font-weight: 950;
    }

    .account-policy-item p {
      margin: 0;
      color: var(--ink-soft);
      font-size: 12px;
      line-height: 1.6;
    }

    .account-modal-card a {
      color: var(--deep-green);
      text-decoration: underline;
      text-underline-offset: 3px;
    }

    .account-modal-card code {
      border: 1px solid var(--gold-line);
      border-radius: 6px;
      background: var(--gold-soft);
      color: var(--deep-green);
      padding: 1px 5px;
      font-size: .92em;
    }

    .legal-modal-card {
      width: min(760px, calc(100vw - 28px));
      max-height: min(86svh, 820px);
      overflow-y: auto;
      border: 1px solid var(--gold-line);
      border-radius: var(--radius);
      background:
        radial-gradient(circle at 16% 0%, rgba(201, 168, 106, .16), transparent 32%),
        linear-gradient(145deg, var(--ivory-warm), var(--ivory));
      color: var(--ink);
      box-shadow: 0 28px 82px rgba(23, 23, 23, .22), inset 0 1px 0 rgba(255, 255, 255, .72);
      padding: 20px;
    }

    .legal-modal-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 14px;
      margin-bottom: 14px;
    }

    .legal-modal-head h2 {
      margin: 0;
      color: var(--ink);
      font-size: 22px;
      font-weight: 950;
      letter-spacing: 0;
    }

    .legal-modal-body {
      display: grid;
      gap: 12px;
    }

    .legal-section {
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: rgba(255, 255, 255, .72);
      padding: 13px;
    }

    .legal-section h3 {
      margin: 0 0 8px;
      color: var(--ink);
      font-size: 14px;
      font-weight: 950;
    }

    .legal-section ul {
      display: grid;
      gap: 7px;
      margin: 0;
      padding-left: 18px;
      color: var(--ink-soft);
      font-size: 12.5px;
      font-weight: 720;
      line-height: 1.65;
    }

    .legal-meta-footer {
      display: flex;
      flex-wrap: wrap;
      gap: 8px 14px;
      border-top: 1px solid var(--line);
      margin-top: 14px;
      padding-top: 12px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 760;
      line-height: 1.6;
    }

    .legal-meta-footer a {
      color: var(--deep-green);
      text-decoration: underline;
      text-underline-offset: 3px;
    }

    .account-modal-card .mini-badge,
    .legal-modal-card .mini-badge {
      border-color: var(--gold-line);
      background: var(--gold-soft);
      color: var(--deep-green);
    }

    .profile-confirm-inline strong {
      color: var(--deep-green);
      font-size: 12.5px;
      font-weight: 900;
    }

    .profile-confirm-inline p {
      margin: 0;
      color: #57534e;
      font-size: 10.5px;
      line-height: 1.45;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .profile-confirm-inline label {
      display: flex;
      gap: 9px;
      align-items: flex-start;
      color: #24231f;
      font-size: 11.5px;
      font-weight: 850;
      cursor: pointer;
    }

    .profile-confirm-inline .inline-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .profile-confirm-inline .btn {
      min-height: 30px;
      padding: 7px 9px !important;
      font-size: 10.5px !important;
    }

    .recognition-overlay {
      position: absolute;
      inset: 12px;
      z-index: 6;
      display: none;
      align-items: flex-start;
      justify-content: flex-end;
      padding: 0;
      pointer-events: none;
      background: linear-gradient(120deg, rgba(31, 58, 51, .08), rgba(255, 255, 255, 0) 46%);
    }

    .recognition-overlay.active {
      display: flex;
    }

    .recognition-card {
      width: min(100%, 300px);
      border: 1px solid rgba(130, 217, 206, .34);
      border-radius: 8px;
      background: #141611;
      color: #f7f3e9;
      padding: 14px;
      box-shadow: 0 18px 60px rgba(0,0,0,.32);
    }

    .scan-frame {
      position: relative;
      height: 76px;
      border: 1px dashed rgba(130, 217, 206, .46);
      border-radius: 8px;
      overflow: hidden;
      background: rgba(31, 58, 51, .1);
    }

    .scan-frame::before {
      content: "";
      position: absolute;
      inset-inline: 10px;
      top: 0;
      height: 2px;
      background: #8ef0e2;
      box-shadow: 0 0 18px rgba(142, 240, 226, .8);
      animation: scanLine 1.35s infinite ease-in-out;
    }

    @keyframes scanLine {
      0% {
        transform: translateY(8px);
      }
      50% {
        transform: translateY(58px);
      }
      100% {
        transform: translateY(8px);
      }
    }

    .profile-panel.recognizing .product-field,
    .profile-panel.recognizing #rawBrief {
      border-color: rgba(142, 240, 226, .42);
      box-shadow: 0 0 0 2px rgba(31, 58, 51, .12);
      background-image: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(201, 168, 106,.13) 42%, rgba(255,255,255,0) 68%);
      background-size: 240% 100%;
      animation: fieldScan 1.15s infinite linear;
    }

    .product-field.ai-filled {
      animation: fieldFilled .9s ease;
    }

    @keyframes fieldScan {
      from {
        background-position: 180% 0;
      }
      to {
        background-position: -80% 0;
      }
    }

    @keyframes fieldFilled {
      0% {
        border-color: rgba(201, 168, 106, .72);
        box-shadow: 0 0 0 0 rgba(201, 168, 106, .28);
      }
      55% {
        border-color: rgba(201, 168, 106, .88);
        box-shadow: 0 0 0 5px rgba(201, 168, 106, .14);
      }
      100% {
        box-shadow: 0 0 0 0 rgba(201, 168, 106, 0);
      }
    }

    @keyframes shimmer {
      to {
        background-position: -220% 0;
      }
    }

    .modal {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,.82);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 50;
      padding: 24px;
    }

    .modal.open {
      display: flex;
    }

    .modal img {
      max-width: min(96vw, 1300px);
      max-height: 92vh;
      border-radius: 8px;
      background: #fff;
    }

    .toast {
      position: fixed;
      right: 18px;
      bottom: 18px;
      background: #171915;
      color: #fff;
      border-radius: 8px;
      padding: 12px 14px;
      box-shadow: 0 18px 50px rgba(0,0,0,.24);
      transform: translateY(20px);
      opacity: 0;
      pointer-events: none;
      transition: opacity .18s ease, transform .18s ease;
      z-index: 60;
      max-width: 360px;
    }

    .toast.show {
      opacity: 1;
      transform: translateY(0);
    }

    .referral-welcome-card {
      width: min(520px, calc(100vw - 28px));
      border: 1px solid rgba(187, 247, 208, .28);
      border-radius: 22px;
      background:
        radial-gradient(circle at 16% 0%, rgba(34, 197, 94, .22), transparent 34%),
        linear-gradient(145deg, rgba(6, 28, 22, .98), rgba(5, 17, 15, .99));
      color: var(--ivory-warm);
      box-shadow: 0 28px 90px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .09);
      padding: 22px;
    }

    .referral-welcome-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
    }

    .referral-welcome-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 48px;
      height: 48px;
      border: 1px solid rgba(187, 247, 208, .3);
      border-radius: 16px;
      background: linear-gradient(135deg, rgba(34, 197, 94, .3), rgba(201, 168, 106, .12));
      color: #bbf7d0;
      box-shadow: 0 16px 38px rgba(34, 197, 94, .14);
    }

    .referral-welcome-card h2 {
      margin: 12px 0 8px;
      color: var(--ivory-warm);
      font-size: clamp(24px, 4vw, 34px);
      font-weight: 950;
      line-height: 1.12;
      letter-spacing: 0;
    }

    .referral-welcome-card p {
      color: rgba(226, 232, 240, .8);
      font-size: 13px;
      font-weight: 780;
      line-height: 1.75;
      margin: 0;
    }

    .referral-welcome-credit {
      display: grid;
      gap: 4px;
      margin: 16px 0;
      border: 1px solid rgba(187, 247, 208, .22);
      border-radius: 16px;
      background: rgba(20, 83, 45, .18);
      padding: 14px;
    }

    .referral-welcome-credit span {
      color: rgba(220, 252, 231, .74);
      font-size: 11px;
      font-weight: 900;
    }

    .referral-welcome-credit strong {
      color: #bbf7d0;
      font-size: 28px;
      font-weight: 950;
      line-height: 1.15;
    }

    .referral-welcome-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 18px;
    }

    .referral-welcome-actions .btn {
      min-height: 42px;
    }

    .copy-block {
      white-space: pre-wrap;
      border: 1px solid #ddd8cc;
      border-radius: 8px;
      background: #fff;
      padding: 14px;
      font-size: 13px;
      line-height: 1.65;
      min-height: 120px;
      overflow-wrap: anywhere;
    }

    .kbd {
      display: inline-flex;
      min-width: 22px;
      height: 22px;
      align-items: center;
      justify-content: center;
      border-radius: 6px;
      background: #eee9dd;
      color: #423f38;
      font-size: 12px;
      font-weight: 800;
    }

    .count-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border-radius: 999px;
      padding: 7px 10px;
      font-size: 12px;
      font-weight: 850;
      background: #f1eee7;
      color: #4a453d;
    }

    .count-pill.ready {
      background: var(--success-soft);
      color: #276749;
    }

    .count-pill.warn {
      background: var(--attention-soft);
      color: #7a5417;
    }

    .count-pill.custom {
      background: var(--accent-soft);
      color: var(--accent-strong);
    }

    .confirm-box {
      border: 1px solid #4b4d43;
      border-radius: 8px;
      background: #171a14;
      padding: 12px;
    }

    .confirm-box.confirmed {
      border-color: rgba(142, 240, 226, .54);
      background: rgba(31, 58, 51, .13);
    }

    .main-flow-stage .confirm-box.confirmed {
      border-color: rgba(31, 58, 51, .34);
      background: #e7f5f1;
    }

    .edit-dialog {
      width: min(960px, 96vw);
      max-height: 92vh;
      overflow: auto;
      border-radius: var(--radius);
      background: #fff;
      color: var(--ink);
      padding: 18px;
    }

    .edit-dialog img {
      width: 100%;
      max-height: 52vh;
      object-fit: contain;
      border-radius: 8px;
      background: #f6f3ec;
      border: 1px solid #ddd8cc;
    }

    .edit-preview-wrap {
      position: relative;
      border-radius: var(--radius);
      background: #f6f3ec;
      overflow: hidden;
      border: 1px solid #ddd8cc;
      min-height: 260px;
      display: grid;
      place-items: center;
      cursor: crosshair;
    }

    .edit-preview-wrap img {
      border: 0;
      border-radius: 0;
      background: transparent;
      max-height: 52vh;
      pointer-events: none;
    }

    .edit-selection-layer {
      position: absolute;
      inset: 0;
      pointer-events: none;
      display: none;
    }

    .edit-selection-box {
      position: absolute;
      border: 2px solid var(--deep-green);
      background: rgba(31, 58, 51, .14);
      pointer-events: none;
    }

    .edit-selection-box.is-preview {
      border-style: dashed;
      background: rgba(201, 168, 106, .1);
    }

    .edit-selection-index {
      position: absolute;
      top: 4px;
      left: 4px;
      min-width: 18px;
      height: 18px;
      border-radius: 999px;
      background: var(--deep-green);
      color: #fff;
      display: inline-grid;
      place-items: center;
      font-size: 10px;
      font-weight: 950;
      line-height: 1;
      box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
    }

    .edit-selection-actions {
      display: grid;
      grid-template-columns: minmax(0, 1.25fr) repeat(2, minmax(0, .8fr));
      gap: 6px;
      margin-top: 8px;
    }

    .edit-selection-actions .btn {
      min-height: 36px;
      padding: 8px 9px;
      font-size: 11px;
      line-height: 1.2;
    }

    /* 落地页制作 · 后台二次编辑(2026-07-26)。全部作用域在 #landingReeditModal / .lre-* 前缀内,
       复用既有 .modal/.edit-dialog/.edit-preview-wrap/.field/.control/.btn token,不引入新设计语言。 */
    .lre-dialog {
      width: min(1080px, 96vw);
    }

    .lre-tabs {
      display: inline-flex;
      gap: 4px;
      margin-top: 14px;
      padding: 4px;
      border-radius: 999px;
      background: #f2efe7;
      border: 1px solid #ddd8cc;
    }

    .lre-tab {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border: 0;
      background: transparent;
      color: #57534e;
      font-size: 12px;
      font-weight: 900;
      padding: 7px 14px;
      border-radius: 999px;
      cursor: pointer;
      transition: background .16s ease, color .16s ease;
    }

    .lre-tab.is-active {
      background: var(--deep-green);
      color: #fff;
    }

    .lre-canvas-wrap {
      position: relative;
      cursor: default;
    }

    /* ★坐标正确性的前提:img 的**元素盒必须等于渲染出来的图片盒**。
       .edit-dialog img 给的是 width:100% + max-height:52vh + object-fit:contain,
       竖版图会被 max-height 夹住 → contain 在元素盒内左右留黑边 → getBoundingClientRect()
       拿到的是带黑边的元素盒,涂抹坐标就会整体偏移。改成 width:auto + 双 max-* 后
       元素盒恰好收缩到图片本身,百分比坐标才与图片像素一一对应。 */
    .lre-canvas-wrap img {
      width: auto;
      height: auto;
      max-width: 100%;
      max-height: 56vh;
      object-fit: contain;
    }

    .lre-canvas-wrap.is-painting {
      cursor: crosshair;
      touch-action: none;
    }

    .lre-mask-canvas {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      pointer-events: none;
    }

    .lre-canvas-wrap.is-painting .lre-mask-canvas {
      pointer-events: auto;
      touch-action: none;
    }

    .lre-tool-group {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 6px;
    }

    .lre-tool {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      min-height: 38px;
      border-radius: 10px;
      border: 1px solid #ddd8cc;
      background: #fff;
      color: #44403c;
      font-size: 12px;
      font-weight: 900;
      cursor: pointer;
    }

    .lre-tool.is-active {
      border-color: var(--deep-green);
      background: rgba(31, 58, 51, .1);
      color: var(--deep-green);
    }

    .lre-brush-row {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      align-items: center;
      gap: 8px;
      margin-top: 8px;
    }

    .lre-brush-row label {
      font-size: 11px;
      font-weight: 900;
      color: #57534e;
      margin: 0;
    }

    .lre-brush-row input[type="range"] {
      width: 100%;
      accent-color: var(--deep-green);
    }

    .lre-brush-value {
      font-size: 11px;
      font-weight: 900;
      color: var(--deep-green);
      min-width: 40px;
      text-align: right;
    }

    .lre-stroke-actions {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 6px;
      margin-top: 8px;
    }

    .lre-stroke-actions .btn {
      min-height: 36px;
      padding: 8px 9px;
      font-size: 11px;
      line-height: 1.2;
    }

    .lre-ref-count {
      font-size: 11px;
      font-weight: 900;
      color: var(--deep-green);
    }

    .lre-ref-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 6px;
    }

    .lre-ref-cell {
      position: relative;
      border-radius: 8px;
      overflow: hidden;
      border: 1px solid #ddd8cc;
      background: #f6f3ec;
      aspect-ratio: 1 / 1;
    }

    .lre-ref-cell img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .lre-ref-remove {
      position: absolute;
      top: 2px;
      right: 2px;
      width: 20px;
      height: 20px;
      border-radius: 999px;
      border: 0;
      background: rgba(23, 25, 21, .78);
      color: #fff;
      font-size: 13px;
      font-weight: 900;
      line-height: 1;
      cursor: pointer;
    }

    .edit-mode-group {
      display: grid;
      gap: 4px;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: #f3f1eb;
      padding: 4px;
    }

    .edit-mode {
      border: 1px solid transparent;
      border-radius: var(--radius-sm);
      background: transparent;
      padding: 9px;
      display: flex;
      align-items: flex-start;
      gap: 8px;
      cursor: pointer;
      font-size: 12px;
      font-weight: 850;
      line-height: 1.45;
    }

    .edit-mode input {
      position: absolute;
      opacity: 0;
      pointer-events: none;
      accent-color: var(--deep-green);
    }

    .edit-mode:has(input:checked) {
      border-color: var(--accent-line);
      background: #fff;
      color: var(--accent-strong);
      box-shadow: 0 1px 2px rgba(31, 29, 24, .08);
    }

    .edit-local-note {
      border: 1px solid #e7dcc5;
      border-radius: var(--radius);
      background: #fffaf0;
      color: #6f521a;
      padding: 8px 10px;
      font-size: 11px;
      font-weight: 800;
      line-height: 1.55;
    }

    .custom-file-trigger {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      width: 100%;
      min-height: 42px;
      border: 1px dashed var(--accent-line);
      border-radius: var(--radius);
      background: #fbfffd;
      color: var(--accent-strong);
      padding: 9px 10px;
      font-size: 12px;
      font-weight: 900;
      cursor: pointer;
      text-align: left;
    }

    .custom-file-trigger:hover {
      border-color: var(--accent);
      background: var(--accent-soft);
    }

    .edit-brand-note {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      border: 1px solid var(--line-soft);
      border-radius: var(--radius);
      background: var(--paper-warm);
      color: #5f5a50;
      padding: 9px 10px;
      font-size: 11px;
      font-weight: 750;
      line-height: 1.55;
    }

    .edit-dialog .control {
      background: #fff;
      color: #171717;
    }

    @media (max-width: 1080px) {
      .app {
        grid-template-columns: 1fr;
      }

      .saas-shell,
      .product-card-grid,
      .studio-form-grid,
      .skincare-upload-groups,
      .skincare-console-grid,
      .skincare-fact-grid,
      .replicate-workspace,
      .replicate-workspace-main,
      .replicate-upload-row,
      .replicate-roadmap {
        grid-template-columns: 1fr;
      }

      .replicate-view .saas-shell {
        grid-template-columns: 1fr;
      }

      .replicate-output-panel {
        position: relative;
        top: auto;
        max-height: none;
        overflow: visible;
      }

      #replicateResultRoot {
        max-height: none;
        overflow: visible;
        padding-right: 0;
      }

      .product-card.is-live,
      .product-card.is-featured,
      .product-card.is-soon {
        grid-column: auto;
      }

      .saas-nav {
        position: relative;
        top: auto;
        height: auto;
      }

      .saas-nav-list,
      .studio-mode-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .skincare-workflow-strip {
        grid-template-columns: 1fr;
      }

      .skincare-flow-shell {
        grid-template-columns: 1fr;
      }

      .skincare-step-rail {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        border-right: 0;
        border-bottom: 1px solid #e1e7e2;
      }

      .skincare-metric-row,
      .skincare-plan-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .hub-hero {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(250px, 320px);
        align-items: center;
      }

      .hub-hero::after {
        right: -52px;
        top: -118px;
      }

      .hub-account-card {
        width: 100%;
      }

      .sidebar {
        position: relative;
        top: auto;
        height: auto;
        max-height: none;
      }

      body.workbench-mode #appShell {
        grid-template-columns: minmax(320px, 390px) minmax(0, 1fr);
      }

      body.workbench-mode #appShell > .sidebar {
        position: sticky;
        top: 0;
        height: 100vh;
        max-height: 100vh;
      }

      body.workbench-mode #appShell > .main {
        order: initial;
      }

      .orbit-center-card {
        width: min(680px, calc(100% - 128px));
      }

      .platform-node-badge {
        min-width: 142px;
        min-height: 58px;
        font-size: 12.5px;
      }

      .public-feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .admin-record-head,
      .admin-record-row {
        grid-template-columns: minmax(0, 1fr) minmax(180px, .72fr);
      }

      .admin-record-time {
        justify-items: start;
        text-align: left;
      }

    }

    @media (max-width: 520px) {
      html,
      body {
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden;
      }

      .sidebar,
      .main {
        padding: 14px;
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden;
      }

      .app {
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden;
      }

      #appShell {
        grid-template-columns: 1fr;
      }

      #appShell > .main {
        order: -1;
      }

      .admin-record-head {
        display: none;
      }

      .admin-record-row {
        grid-template-columns: 1fr;
        gap: 8px;
        min-height: 0;
        padding: 12px;
      }

      .admin-record-email,
      .admin-record-title {
        white-space: normal;
      }

      .admin-record-time span,
      .admin-record-time small {
        white-space: normal;
      }

      body.workbench-mode #appShell {
        grid-template-columns: 1fr;
      }

      body.workbench-mode #appShell > .sidebar,
      body.workbench-mode #appShell > .main {
        grid-column: 1;
        grid-row: auto;
      }

      body.workbench-mode #appShell > .sidebar {
        position: relative;
        top: auto;
        height: auto;
        max-height: none;
      }

      body.workbench-mode #appShell > .main {
        order: -1;
      }

      .saas-main,
      .saas-nav {
        padding: 14px;
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden;
      }

      .replicate-view .saas-main {
        padding-inline: 14px;
      }

      .replicate-workspace {
        gap: 14px;
      }

      .replicate-workspace-main {
        grid-template-columns: 1fr;
        gap: 14px;
      }

      .replicate-workflow-toggle span {
        grid-template-columns: 40px minmax(0, 1fr);
        min-height: 0;
        padding: 13px;
      }

      .replicate-workflow-toggle span > i {
        grid-column: 1;
        grid-row: 1 / span 4;
        width: 36px;
        height: 36px;
        padding: 8px;
      }

      .replicate-workflow-toggle em {
        white-space: normal;
        line-height: 1.18;
      }

      .replicate-workflow-toggle strong {
        padding-right: 0;
        font-size: 13px;
        line-height: 1.35;
      }

      .replicate-workflow-toggle input:checked + span::after {
        position: static;
        grid-column: 2;
        width: fit-content;
        margin-top: 2px;
      }

      .replicate-workflow-fit {
        width: 100%;
        font-size: 10.5px;
      }

      .studio-upload-preview,
      .replicate-preview-grid,
      .skincare-upload-groups,
      .skincare-console-grid,
      .skincare-fact-grid,
      .skincare-platform-grid,
      .skincare-copy-summary-grid,
      .skincare-workflow-strip,
      .skincare-metric-row,
      .skincare-plan-summary-grid {
        grid-template-columns: 1fr;
      }

      .skincare-step-rail {
        grid-template-columns: 1fr;
      }

      .skincare-step-top,
      .skincare-step-actions {
        align-items: stretch;
        flex-direction: column;
      }

      .skincare-role-item {
        grid-template-columns: 1fr;
      }

      .skincare-role-select {
        width: 100%;
      }

      .replicate-preview-delete,
      .replicate-asset-delete {
        width: 28px;
        height: 28px;
      }

      .replicate-asset-select-state {
        right: 40px;
      }

      .image-studio-view .saas-main,
      .replicate-view .saas-main {
        order: -1;
      }

      .image-studio-view .saas-nav,
      .replicate-view .saas-nav {
        position: relative;
        top: auto;
      }

      .app-view::before,
      .app-view::after {
        opacity: .42;
      }

      .saas-nav-list,
      .studio-mode-nav {
        grid-template-columns: 1fr;
        gap: 7px;
        margin-top: 12px;
      }

      .saas-brand {
        padding-bottom: 12px;
      }

      .saas-brand-icon {
        width: 38px;
        height: 38px;
        border-radius: 14px;
      }

      .saas-nav-item,
      .studio-mode-btn {
        min-height: 40px;
        padding: 9px 10px;
      }

      .saas-nav-note {
        margin-top: 12px;
        padding: 12px;
      }

      .saas-nav-note p {
        margin-top: 7px;
      }

      .saas-nav-safe-list {
        grid-template-columns: 1fr;
        gap: 6px;
        margin-top: 8px;
      }

      :is(.product-center-view, .creator-share-view, .records-view, .image-studio-view, .video-studio-view, .personal-center-view) .saas-nav-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      :is(.product-center-view, .creator-share-view, .records-view, .image-studio-view, .video-studio-view, .personal-center-view) .saas-nav {
        padding-bottom: 10px;
      }

      .hub-hero,
      .product-card,
      .admin-panel,
      .admin-table-panel,
      .studio-panel,
      .studio-results-panel,
      .replicate-roadmap article,
      .replicate-panel,
      .replicate-output-panel {
        border-radius: 14px;
        padding: 16px;
      }

      .hub-hero.compact {
        grid-template-columns: 1fr;
      }

      .admin-dashboard-grid,
      .admin-metric-grid,
      .admin-wide-grid {
        grid-template-columns: 1fr;
      }

      .admin-filter-row,
      .admin-bulk-row {
        display: grid;
        grid-template-columns: 1fr;
      }

      .admin-filter-row input,
      .admin-filter-row select,
      .admin-bulk-row input,
      .admin-filter-row .btn,
      .admin-bulk-row .btn {
        width: 100%;
      }

      .back-to-hub-btn {
        width: 100%;
        min-height: 46px;
        border-radius: 14px;
      }

      .hero-top-actions {
        display: grid;
        grid-template-columns: 1fr;
        align-items: stretch;
      }

      .hero-top-actions .hero-kicker {
        width: fit-content;
      }

      .hub-hero h1 {
        font-size: 31px;
        letter-spacing: 0;
      }

      .hub-hero p {
        font-size: 13px;
      }

      .hub-hero {
        grid-template-columns: 1fr;
        gap: 14px;
      }

      .workflow-strip {
        grid-template-columns: 1fr;
        gap: 8px;
        width: 100%;
      }

      .workflow-step {
        min-height: 52px;
        padding: 9px;
      }

      .workflow-step strong,
      .workflow-step small {
        white-space: normal;
        overflow-wrap: anywhere;
      }

      .ai-core-chip::before {
        inset: 10px;
        border-radius: 16px;
      }

      .ai-core-icon {
        width: 44px;
        height: 44px;
        border-radius: 16px;
      }

      .hub-hero-actions {
        display: grid;
        grid-template-columns: 1fr;
      }

      .hub-hero-actions .btn,
      .hub-account-card .btn {
        width: 100%;
      }

      .hub-actions,
      .studio-panel-head,
      .studio-results-head,
      .product-card-top {
        display: grid;
        grid-template-columns: 1fr;
        justify-items: start;
      }

      .hub-actions .btn,
      .product-card-action,
      .studio-side-fields .btn {
        width: 100%;
      }

      .generation-progress-card {
        border-radius: 14px;
        padding: 13px;
      }

      .generation-progress-top {
        grid-template-columns: 1fr;
      }

      .generation-progress-count {
        justify-self: start;
      }

      .generation-progress-dock {
        right: 12px;
        bottom: 12px;
        width: calc(100vw - 24px);
      }

      .studio-result-actions {
        grid-template-columns: 1fr;
      }

      .studio-custom-size-grid {
        grid-template-columns: 1fr;
      }

      .replicate-form-grid,
      .replicate-token-grid,
      .replicate-type-toggle,
      .replicate-workflow-toggle,
      .replicate-summary-strip,
      .replicate-generated-grid,
      .replicate-download-plan,
      .replicate-canvas-settings,
      .replicate-scope-summary {
        grid-template-columns: 1fr;
      }

      .replicate-link-row {
        grid-template-columns: 1fr;
      }

      .replicate-link-row .btn,
      .replicate-subsection-head .btn {
        width: 100%;
      }

      .replicate-asset-actions {
        display: grid;
        grid-template-columns: 1fr;
        justify-content: stretch;
      }

      .replicate-asset-actions .btn {
        width: 100%;
      }

      .replicate-subsection-head {
        display: grid;
        grid-template-columns: 1fr;
      }

      .replicate-asset-grid,
      .replicate-model-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-height: none;
        overflow: visible;
      }

      .studio-preview-card.is-wide-preview {
        grid-template-columns: 1fr;
      }

      .studio-preview-card.is-wide-preview .thumb-preview {
        height: min(260px, 68vw);
        max-height: 260px;
      }

      .studio-preview-card.is-in-dropzone .thumb-preview {
        height: 100%;
        max-height: none;
      }

      .studio-preview-card.is-wide-preview img {
        border-right: 0;
        border-bottom: 1px solid #ded8cb;
        max-height: 260px;
      }

      .studio-preview-card.is-in-dropzone .studio-preview-main,
      .studio-preview-card.is-in-dropzone .studio-preview-backdrop {
        border-bottom: 0;
        max-height: none;
      }

      .studio-background-dropzone,
      .studio-background-dropzone.is-compact {
        min-height: 220px;
      }

      .studio-preview-card.is-in-dropzone .studio-preview-meta {
        left: 9px;
        right: 9px;
        bottom: 9px;
        padding: 8px 9px;
      }

      #studioBackgroundPanel .studio-form-grid {
        grid-template-columns: 1fr;
      }

      .main-model-grid,
      .replicate-sidebar-model-panel .replicate-model-grid {
        grid-template-columns: minmax(0, 1fr);
        max-height: none;
        overflow: visible;
        padding-right: 0;
      }

      .main-library-card {
        grid-template-columns: 88px minmax(0, 1fr);
        gap: 8px;
      }

      .main-library-photo {
        width: 88px;
        height: 120px;
        min-height: 0;
      }

      .replicate-sidebar-model-selected,
      .main-model-selected,
      .replicate-sidebar-model-selected.is-empty,
      .main-model-selected.is-empty {
        grid-template-columns: 1fr;
      }

      .replicate-sidebar-model-selected.is-empty,
      .main-model-selected.is-empty {
        align-items: stretch;
      }

      .model-library-selected-media {
        grid-template-columns: 56px minmax(0, 1fr);
      }

      .model-library-selected-thumb {
        width: 56px;
        height: 56px;
        border-radius: 14px;
      }

      .model-library-selected-media img {
        width: 56px;
        height: 56px;
        border-radius: 14px;
      }

      .model-library-selected-actions {
        justify-content: stretch;
      }

      .model-library-selected-actions .model-library-clear-btn,
      .model-library-scroll-btn {
        width: 100%;
      }

      .replicate-model-card,
      .replicate-sidebar-model-panel .replicate-model-card,
      .main-model-grid .replicate-model-card {
        border-radius: 14px;
        padding: 8px;
        gap: 6px;
      }

      .replicate-sidebar-model-panel .replicate-model-card,
      .main-model-grid .replicate-model-card {
        grid-template-columns: minmax(96px, 35%) minmax(0, 1fr);
        min-height: 0;
        gap: 8px 10px;
      }

      .replicate-model-visual,
      .replicate-sidebar-model-panel .replicate-model-visual {
        min-height: 0;
        border-radius: 12px;
        aspect-ratio: 4 / 5;
      }

      .replicate-sidebar-model-panel .replicate-model-visual,
      .main-model-grid .replicate-model-visual {
        min-height: 148px;
        height: 100%;
        aspect-ratio: auto;
      }

      .model-library-preview-btn {
        top: 6px;
        right: 6px;
        width: 28px;
        height: 28px;
        min-height: 28px;
      }

      .replicate-model-card strong,
      .replicate-sidebar-model-panel .replicate-model-card strong,
      .main-model-grid .replicate-model-card strong {
        min-height: 0;
        font-size: 10.5px;
        line-height: 1.22;
      }

      .replicate-model-meta {
        display: flex;
        flex-wrap: wrap;
        overflow: hidden;
        gap: 4px;
      }

      .replicate-model-meta span,
      .replicate-sidebar-model-panel .replicate-model-meta span {
        padding: 3px 5px;
        font-size: 8.5px;
      }

      .replicate-model-tags {
        min-height: 0;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
        overflow-wrap: anywhere;
        font-size: 9.5px;
      }

      .replicate-model-actions {
        display: grid;
        grid-template-columns: 1fr;
      }

      .replicate-model-region {
        display: none;
      }

      .model-library-select-btn {
        width: 100%;
        min-height: 28px;
        padding: 6px 8px;
      }

      .replicate-model-filter-row {
        grid-template-columns: 1fr;
        gap: 6px;
      }

      .replicate-model-filter-row > span {
        line-height: 1;
      }

      .replicate-model-filter-options {
        flex-wrap: wrap;
        overflow-x: visible;
        padding-bottom: 0;
        scrollbar-width: none;
      }

      .replicate-model-filter-options::-webkit-scrollbar {
        display: none;
      }

      .replicate-model-filter-options button {
        flex: 1 1 auto;
        min-width: 0;
        text-align: center;
        white-space: normal;
        overflow-wrap: anywhere;
      }

      .main-model-filter-drawer summary {
        min-height: 40px;
        padding: 8px 10px;
      }

      .main-model-filter-summary {
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }

      .model-preview-dialog {
        width: calc(100vw - 20px);
        max-height: calc(100svh - 20px);
        border-radius: 18px;
        padding: 12px;
      }

      .model-preview-body,
      .model-preview-info-grid {
        grid-template-columns: 1fr;
      }

      .model-preview-image,
      .model-preview-image img {
        min-height: 280px;
      }

      .model-preview-actions {
        display: grid;
        grid-template-columns: 1fr;
      }

      .model-preview-actions .btn,
      .model-preview-actions .model-library-clear-btn {
        width: 100%;
      }

      #replicateInlineModelPanel .replicate-model-grid,
      #replicateInlineModelPanel .replicate-inline-model-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
      }

      #replicateInlineModelPanel {
        grid-template-columns: minmax(0, 1fr);
        padding: 14px;
        gap: 12px;
      }

      #replicateInlineModelPanel .replicate-subsection-head,
      #replicateInlineModelPanel .replicate-model-control-rail,
      #replicateInlineModelPanel .replicate-model-catalog {
        grid-column: 1;
      }

      #replicateInlineModelPanel .replicate-model-control-rail {
        position: relative;
        top: auto;
      }

      #replicateInlineModelPanel .replicate-subsection-head .model-library-clear-btn {
        width: 100%;
      }

      .replicate-model-catalog-head {
        display: grid;
        grid-template-columns: 1fr;
      }

      .replicate-model-catalog-chip {
        width: fit-content;
      }

      #replicateInlineModelPanel .replicate-model-card {
        grid-template-columns: minmax(92px, 36%) minmax(0, 1fr);
        grid-template-rows: auto;
        align-items: stretch;
        gap: 8px 10px;
        padding: 8px;
      }

      #replicateInlineModelPanel .replicate-model-visual {
        grid-row: 1 / span 5;
        width: 100%;
        min-height: 136px;
        height: 100%;
        aspect-ratio: auto;
      }

      #replicateInlineModelPanel .replicate-model-card strong,
      #replicateInlineModelPanel .replicate-model-tags,
      #replicateInlineModelPanel .replicate-model-region,
      #replicateInlineModelPanel .replicate-model-meta,
      #replicateInlineModelPanel .replicate-model-fit,
      #replicateInlineModelPanel .replicate-model-actions {
        grid-column: 2;
        min-width: 0;
      }

      #replicateInlineModelPanel .replicate-model-region {
        display: none;
      }

      #replicateInlineModelPanel .replicate-model-card strong {
        font-size: 11px;
        line-height: 1.25;
      }

      #replicateInlineModelPanel .replicate-model-tags {
        -webkit-line-clamp: 1;
        font-size: 9.5px;
      }

      #replicateInlineModelPanel .replicate-model-fit {
        max-height: 34px;
      }

      #replicateInlineModelPanel .replicate-model-fit span {
        max-width: 100%;
        white-space: nowrap;
      }

      #replicateInlineModelPanel .model-library-preview-btn {
        width: 28px;
        height: 28px;
        min-height: 28px;
      }

      .replicate-actions,
      .replicate-output-actions {
        display: grid;
        grid-template-columns: 1fr;
      }

      .product-card {
        min-height: auto;
        gap: 16px;
      }

      .product-card h2 {
        font-size: 25px;
      }

      .product-card p {
        font-size: 13px;
      }

      .product-card-tags span {
        white-space: normal;
      }

      .product-card-visual {
        min-height: 0;
        padding: 12px;
      }

      .mock-row {
        grid-template-columns: 38px minmax(0, 1fr);
      }

      .mock-progress {
        grid-column: 1 / -1;
        width: 100%;
      }

      .mock-stack {
        grid-template-columns: 1fr;
      }

      .studio-result-grid {
        grid-template-columns: 1fr;
      }

      .sidebar .panel,
      .sidebar .control,
      .sidebar textarea,
      .sidebar input,
      .sidebar select,
      .upload-zone {
        width: 100%;
        max-width: 100%;
      }

      .sidebar > .flex > *,
      .sidebar .panel > *,
      .twin-limit-card > *,
      .flow-step-title-wrap {
        min-width: 0;
        max-width: 100%;
      }

      .main-shell {
        gap: 14px;
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
      }

      .public-shell,
      .public-shell-inner,
      .public-hero,
      .public-visual-card,
      .orbit-center-card,
      .public-auth-wrap,
      .public-feature-grid,
      .public-feature-card {
        min-width: 0;
        max-width: 100%;
      }

      .public-shell-inner {
        width: min(100%, calc(100% - 20px));
        padding: 10px 0 32px;
      }

      .public-topbar {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
      }

      .public-brand {
        justify-content: center;
      }

      .public-brand-mark {
        max-width: 100%;
        white-space: normal;
      }

      .public-brand-title {
        line-height: 1.4;
        letter-spacing: 0.05em;
      }

      .public-top-actions {
        display: grid;
        width: 100%;
        max-width: 100%;
        grid-template-columns: minmax(82px, .72fr) minmax(112px, 1fr);
        align-items: center;
        justify-content: stretch;
        gap: 6px;
        flex: none;
        border: 1px solid rgba(226, 207, 160, 0.14);
        border-radius: 999px;
        padding: 4px;
        overflow: hidden;
        background:
          linear-gradient(135deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.025)),
          rgba(4, 17, 15, 0.58);
        box-shadow:
          0 16px 40px rgba(0, 0, 0, 0.22),
          inset 0 1px 0 rgba(255, 255, 255, 0.08);
        backdrop-filter: blur(18px) saturate(1.18);
      }

      .public-top-actions .btn,
      .public-lang-switch {
        width: 100%;
        min-width: 0;
      }

      .public-top-actions .btn {
        justify-self: stretch;
        min-height: 42px;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        border-radius: 999px;
        gap: 5px;
        padding-left: 7px !important;
        padding-right: 7px !important;
        white-space: nowrap;
        overflow: hidden;
      }

      .public-top-actions #publicTopLoginBtn,
      .public-top-actions #publicTopStartBtn {
        flex: 1 1 0;
      }

      .public-top-actions #publicTopStartBtn {
        display: none;
      }

      .public-top-actions .btn i {
        width: 13px;
        height: 13px;
        flex: 0 0 auto;
      }

      .public-top-actions .btn span {
        min-width: 0;
        overflow: hidden;
        font-size: 12px;
        letter-spacing: 0;
        text-overflow: clip;
      }

      .public-lang-switch {
        grid-column: auto;
        justify-self: stretch;
        width: 100%;
        min-width: 0;
        height: 42px;
        justify-content: center;
        border-radius: 999px;
        padding: 3px;
      }

      .public-lang-switch .lang-btn {
        min-width: 0;
        flex: 1 1 0;
        min-height: 34px;
        border-radius: 999px;
        padding-left: 2px;
        padding-right: 2px;
        font-size: 12.5px;
      }

      .public-hero {
        gap: 6px;
        margin-top: 4px;
        min-height: auto;
        padding: 0 0 10px;
      }

      .public-kicker {
        white-space: normal;
        line-height: 1.4;
      }

      .public-title {
        font-size: clamp(34px, 9.2vw, 46px);
        line-height: 0.98;
        letter-spacing: 0;
      }

      .title-line-main {
        flex-wrap: wrap;
      }

      .title-typewriter-row {
        width: 100%;
        font-size: clamp(20px, 5.35vw, 24px);
        letter-spacing: 0;
      }

      .title-rotating-copy {
        width: 100%;
        max-width: 330px;
      }

      .typewriter-live {
        width: 100%;
        max-width: 100%;
        white-space: normal;
      }

      .typewriter-live-text {
        width: 100%;
        max-width: 100%;
      }

      .typewriter-live-current {
        align-items: center;
        justify-content: center;
      }

      .public-cta-row {
        display: grid;
        grid-template-columns: 1fr;
      }

      .public-note-row {
        display: none;
      }

      .public-cta-row .btn,
      .public-note-pill {
        width: 100%;
        justify-content: center;
      }

      .public-visual-card {
        --orbit-center-top: 44%;
        --center-card-shift: 0px;
        min-height: clamp(360px, calc(100svh - 472px), 390px);
        padding: 8px 8px 12px;
        border-radius: 24px;
        overflow: hidden;
        background:
          radial-gradient(circle at 50% 46%, rgba(226, 207, 160, 0.2), transparent 30%),
          radial-gradient(circle at 50% 66%, rgba(226, 207, 160, 0.08), transparent 36%),
          linear-gradient(180deg, rgba(14, 15, 16, 0.18), rgba(20, 21, 22, 0.24));
      }

      .public-visual-glow {
        display: block;
        width: 350px;
        height: 350px;
        opacity: 0.5;
      }

      .orbit-track-stage {
        display: block !important;
        inset: 0;
        z-index: 1;
        opacity: 1;
        perspective: 1320px;
        overflow: hidden;
        mask-image:
          linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%),
          linear-gradient(180deg, transparent 0%, #000 4%, #000 91%, transparent 100%);
        mask-composite: intersect;
        -webkit-mask-image:
          linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%),
          linear-gradient(180deg, transparent 0%, #000 4%, #000 91%, transparent 100%);
        -webkit-mask-composite: source-in;
      }

      .orbit-ring-shell,
      .platform-node {
        display: block !important;
      }

      .orbit-ring-shell {
        left: 50%;
        top: var(--mobile-ring-top, 50%);
        width: var(--mobile-ring-size, var(--ring-size));
        height: var(--mobile-ring-size, var(--ring-size));
        transform:
          translate(-50%, -50%)
          scaleX(1.12)
          rotateX(43deg)
          rotateZ(var(--ring-rotate));
      }

      .orbit-ring::before {
        border-color: rgba(226, 207, 160, 0.12);
        background:
          radial-gradient(circle, rgba(201, 168, 106, 0.04), rgba(201, 168, 106, 0.006) 50%, transparent 72%);
        box-shadow:
          inset 0 0 0 1px rgba(226, 207, 160, 0.03),
          0 0 26px rgba(201, 168, 106, 0.05);
      }

      .orbit-track-stage .orbit-ring-shell:nth-child(1) {
        opacity: 1;
      }

      .orbit-track-stage .orbit-ring-shell:nth-child(2) {
        opacity: 0.78;
      }

      .orbit-track-stage .orbit-ring-shell:nth-child(3) {
        opacity: 0.58;
      }

      .orbit-track-stage .orbit-ring-shell:nth-child(1) .platform-node:nth-child(n+7),
      .orbit-track-stage .orbit-ring-shell:nth-child(2) .platform-node:nth-child(n+6),
      .orbit-track-stage .orbit-ring-shell:nth-child(3) .platform-node:nth-child(n+4) {
        display: none !important;
      }

      .platform-node {
        transform:
          rotate(var(--angle))
          translateX(var(--mobile-orbit-radius, var(--orbit-radius)))
          rotate(calc(var(--angle) * -1))
          translate(-50%, -50%);
      }

      .platform-node-depth {
        transform: rotateX(-43deg) translateZ(var(--node-rise, 44px));
      }

      .orbit-center-card {
        z-index: 3;
        width: min(100%, 354px);
        padding: 26px 14px 22px;
        border: 0;
        border-radius: 0;
        background:
          radial-gradient(ellipse at 50% 50%, rgba(14, 15, 16, 0.98) 0%, rgba(14, 15, 16, 0.9) 42%, rgba(14, 15, 16, 0.46) 65%, rgba(14, 15, 16, 0) 86%);
        box-shadow: none;
        backdrop-filter: none;
      }

      .orbit-center-card::before {
        content: "";
        inset: -34px -22px;
        border-radius: 999px;
        background:
          radial-gradient(ellipse at 50% 50%, rgba(5, 5, 5, 0.92) 0%, rgba(14, 15, 16, 0.58) 52%, rgba(26, 27, 25, 0.12) 76%, transparent 90%);
      }

      .orbit-static-grid {
        display: none;
      }

      .platform-node-badge {
        min-width: 0;
        min-height: 0;
        width: 50px;
        height: 50px;
        flex: none;
        justify-content: center;
        gap: 0;
        white-space: nowrap;
        text-align: center;
        border-radius: 19px;
        padding: 0;
        border-color: rgba(226, 207, 160, 0.34);
        background:
          linear-gradient(145deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.08) 50%, rgba(226, 207, 160, 0.12)),
          radial-gradient(circle at 30% 24%, color-mix(in srgb, var(--node-accent) 54%, transparent), transparent 52%),
          rgba(14, 15, 16, 0.9);
        font-size: 9.2px;
        letter-spacing: 0;
        transform: perspective(580px) rotateX(4deg) rotateY(-5deg) translateZ(0) scale(0.96);
        scroll-snap-align: none;
        box-shadow:
          0 22px 46px rgba(0, 0, 0, 0.34),
          inset 0 1px 0 rgba(255, 255, 255, 0.42),
          inset 0 -10px 18px rgba(0, 0, 0, 0.14),
          0 0 36px color-mix(in srgb, var(--node-accent) 38%, transparent);
      }

      .platform-emblem {
        width: 38px;
        height: 38px;
        border-radius: 15px;
      }

      .platform-emblem i {
        width: 18px;
        height: 18px;
      }

      .platform-name {
        display: none;
      }

      .auth-panel {
        padding: 14px;
      }

      .public-auth-title {
        font-size: 20px;
      }

      .public-auth-wrap .auth-card {
        padding: 14px;
        border-radius: 18px;
      }

      .public-auth-modal {
        padding: 10px;
      }

      .public-auth-head {
        margin-right: 40px;
      }

      .auth-method-row {
        display: grid;
        grid-template-columns: 1fr;
      }

      .auth-method-chip {
        justify-content: center;
      }

      .public-feature-grid {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-top: 18px;
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
      }

      .hero-panel {
        padding: 16px !important;
      }

      .hero-title {
        font-size: 26px;
      }

      .hero-actions {
        justify-content: stretch;
      }

      .hero-actions .btn {
        width: 100%;
      }

      .platform-shell-head {
        display: grid;
      }

      .platform-nav-group,
      .platform-card-btn,
      .platform-card-text,
      .quick-metric,
      .settings-alert-item,
      .settings-step-pill,
      .model-reference-actions,
      .custom-file-trigger,
      .slot-card,
      .result-card {
        min-width: 0;
        max-width: 100%;
      }

      .platform-nav-group-toggle {
        grid-template-columns: minmax(0, 1fr);
      }

      .platform-nav-group-meta {
        justify-content: space-between;
        width: 100%;
      }

      .platform-nav-grid {
        grid-template-columns: 1fr;
      }

      .platform-card-btn {
        grid-template-columns: auto minmax(0, 1fr);
      }

      .platform-current-card,
      .workbench-next-action,
      .wizard-panel-head,
      .wizard-step-card {
        grid-template-columns: minmax(0, 1fr);
      }

      .platform-current-card {
        padding-left: 16px;
      }

      .platform-current-icon,
      .wizard-step-icon {
        width: 36px;
        height: 36px;
      }

      .platform-change-btn,
      .workbench-next-action .btn,
      .wizard-step-action {
        width: fit-content;
      }

      .platform-card-tag {
        grid-column: 2;
        width: fit-content;
      }

      .platform-live-pill {
        width: fit-content;
        white-space: normal;
      }

      .sidebar > .flex,
      .sidebar .panel > .flex {
        flex-direction: column;
        align-items: stretch;
        flex-wrap: wrap;
      }

      .sidebar > .flex .app-lang-switch {
        width: auto;
        min-width: 108px;
        align-self: flex-end;
      }

      .sidebar .panel > .flex .btn {
        width: 100%;
      }

      .sidebar .grid.grid-cols-2,
      .main .grid.sm\:grid-cols-5 {
        grid-template-columns: 1fr;
      }

      .onboarding-rail,
      .slot-model-override,
      .edit-mode-group {
        grid-template-columns: 1fr;
      }

      .settings-alert-item {
        grid-template-columns: minmax(0, 1fr);
      }

      .wizard-step-action {
        justify-self: start;
      }

      .settings-alert-head,
      .auth-card-head {
        flex-wrap: wrap;
      }

      .settings-status-badge {
        max-width: 100%;
        white-space: nowrap;
        line-height: 1;
      }

      .settings-status-badge.platform-badge,
      .auth-badge {
        max-width: 100%;
      }

      .model-reference-actions {
        grid-template-columns: 1fr;
      }

      .language-chip-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .edit-dialog {
        width: calc(100vw - 20px);
        max-height: calc(100vh - 20px);
        padding: 14px;
      }

      .slot-card {
        grid-template-columns: minmax(0, 1fr);
      }

      .slot-card > label {
        position: absolute;
        top: 12px;
        right: 12px;
      }

      .slot-card .flex.items-start.justify-between {
        padding-right: 34px;
      }

      .slot-card-head {
        grid-template-columns: auto minmax(0, 1fr);
      }

      .slot-title-row,
      .slot-model-override-copy {
        align-items: stretch;
        flex-direction: column;
      }

      .slot-ratio-pill {
        width: fit-content;
      }

      .slot-strategy-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 2px;
      }

      .sidebar .panel > .flex,
      .main header .flex,
      .main section .flex {
        flex-wrap: wrap;
      }

      .btn {
        white-space: normal;
      }

      .twin-limit-grid,
      .twin-pass-row,
      .twin-summary-grid {
        grid-template-columns: 1fr;
      }

      .twin-guide,
      .twin-limit-card,
      .twin-coverage-step,
      .twin-action-guide,
      .flow-step-card,
      .confirm-box,
      .upload-zone {
        min-width: 0;
        max-width: 100%;
      }

      .twin-limit-card p,
      .flow-step-why,
      .flow-step-need,
      .twin-action-guide p,
      .sidebar p,
      .sidebar small,
      .sidebar span,
      .sidebar strong,
      .sidebar textarea,
      .sidebar input,
      .sidebar select {
        overflow-wrap: anywhere;
        word-break: break-word;
      }

      .sidebar .btn,
      .sidebar .chip,
      .coverage-pill,
      .angle-chip {
        max-width: 100%;
      }

      .flow-step-header {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
      }

      .flow-step-header > .flex {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: 1fr;
        justify-content: stretch;
        margin-top: 8px;
      }

      .flow-step-header > .flex .btn {
        width: 100%;
        flex: 1 1 100%;
        min-width: 0;
      }

      .twin-limit-card > .flex {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
      }

      .twin-status {
        width: fit-content;
        max-width: 100%;
        white-space: normal;
      }

      .coverage-list,
      .angles-checklist,
      .model-reference-mode-group,
      .twin-coverage-row {
        min-width: 0;
        max-width: 100%;
        overflow-x: visible;
      }

      .coverage-list,
      .angles-checklist,
      .twin-coverage-row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .coverage-list .coverage-pill,
      .angles-checklist .angle-chip,
      .twin-coverage-row .coverage-pill {
        width: 100%;
        justify-content: center;
        flex: 1 1 100%;
        min-width: 0;
        white-space: normal;
        overflow-wrap: anywhere;
      }

      .model-reference-mode {
        min-width: 0;
        overflow-wrap: anywhere;
      }

      .custom-file-trigger {
        white-space: normal;
      }

      .twin-metric {
        min-width: 0;
      }

      .twin-actions .btn,
      .model-reference-actions .btn,
      .hero-actions .btn {
        min-height: 40px;
      }
    }

    @media (max-width: 520px) and (prefers-reduced-motion: reduce) {
      .orbit-track-stage,
      .orbit-ring-shell,
      .platform-node {
        display: none !important;
      }

      .orbit-static-grid {
        display: grid;
      }

      .orbit-static-grid .platform-node-badge {
        min-width: 0;
        min-height: 48px;
        width: 100%;
        white-space: normal;
        transform: none;
      }
    }

    /* T20: production center skin, scoped to the hub view. */
    .product-center-view {
      color: var(--ink);
      background:
        linear-gradient(180deg, var(--ivory-warm) 0%, var(--ivory) 100%);
    }

    .product-center-view::before {
      background:
        linear-gradient(rgba(226, 207, 160, .18) 1px, transparent 1px),
        linear-gradient(90deg, rgba(226, 207, 160, .14) 1px, transparent 1px);
      background-size: 40px 40px;
      mask-image: linear-gradient(180deg, rgba(0, 0, 0, .5), transparent 72%);
      opacity: .42;
    }

    .product-center-view::after {
      display: none;
    }

    :is(.product-center-view, .creator-share-view, .records-view, .image-studio-view, .video-studio-view, .personal-center-view) .saas-shell {
      grid-template-columns: minmax(236px, 272px) minmax(0, 1fr);
    }

    :is(.product-center-view, .creator-share-view, .records-view, .image-studio-view, .video-studio-view, .personal-center-view) .saas-nav {
      border-right: 1px solid rgba(31, 58, 51, .14);
      background:
        linear-gradient(180deg, rgba(31, 58, 51, .98) 0%, rgba(15, 31, 27, .99) 100%);
      color: var(--ivory-warm);
      padding: 18px;
      box-shadow: 12px 0 34px rgba(31, 58, 51, .12);
    }

    :is(.product-center-view, .creator-share-view, .records-view, .image-studio-view, .video-studio-view, .personal-center-view) .saas-nav::before {
      background:
        linear-gradient(180deg, rgba(201, 168, 106, .16), transparent 44%),
        linear-gradient(90deg, rgba(226, 207, 160, .08), transparent 42%);
      opacity: 1;
    }

    :is(.product-center-view, .creator-share-view, .records-view, .image-studio-view, .video-studio-view, .personal-center-view) .saas-brand {
      gap: 10px;
      padding-bottom: 16px;
      border-bottom-color: rgba(226, 207, 160, .18);
    }

    .creator-share-view .saas-brand-icon,
    .personal-center-view .saas-brand-icon,
    .product-center-view .saas-brand-icon,
    .product-center-view .product-card-icon {
      width: 38px;
      height: 38px;
      border-radius: var(--radius);
      border-color: rgba(226, 207, 160, .38);
      background:
        linear-gradient(135deg, rgba(201, 168, 106, .28), rgba(243, 234, 215, .1)),
        rgba(255, 255, 255, .07);
      color: var(--gold-soft);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
    }

    :is(.product-center-view, .creator-share-view, .records-view, .image-studio-view, .video-studio-view, .personal-center-view) .saas-brand strong {
      font-size: 14px;
      letter-spacing: 0;
    }

    :is(.product-center-view, .creator-share-view, .records-view, .image-studio-view, .video-studio-view, .personal-center-view) .saas-brand small {
      color: rgba(246, 244, 238, .68);
      letter-spacing: 0;
      text-transform: none;
    }

    :is(.product-center-view, .creator-share-view, .records-view, .image-studio-view, .video-studio-view, .personal-center-view) .saas-nav-list {
      gap: 7px;
      margin-top: 16px;
    }

    :is(.product-center-view, .creator-share-view, .records-view, .image-studio-view, .video-studio-view, .personal-center-view) .saas-nav-item {
      min-height: 39px;
      border-radius: var(--radius);
      border-color: rgba(226, 207, 160, .12);
      background: rgba(255, 255, 255, .03);
      color: rgba(251, 250, 246, .82);
      padding: 9px 10px;
      font-size: 12px;
      letter-spacing: 0;
    }

    :is(.product-center-view, .creator-share-view, .records-view, .image-studio-view, .video-studio-view, .personal-center-view) .saas-nav-item:hover,
    :is(.product-center-view, .creator-share-view, .records-view, .image-studio-view, .video-studio-view, .personal-center-view) .saas-nav-item.is-active {
      border-color: rgba(226, 207, 160, .36);
      background:
        linear-gradient(135deg, rgba(201, 168, 106, .22), rgba(243, 234, 215, .08)),
        rgba(255, 255, 255, .045);
      color: var(--ivory-warm);
      box-shadow: none;
    }

    :is(.product-center-view, .creator-share-view, .records-view, .image-studio-view, .video-studio-view, .personal-center-view) .saas-nav-item::after {
      background: var(--gold-line);
    }

    :is(.product-center-view, .creator-share-view, .records-view, .image-studio-view, .video-studio-view, .personal-center-view) .saas-nav-logout {
      border-color: rgba(244, 63, 94, .18);
    }

    /* ===== 左栏底部「个人中心」入口卡片(5 处左栏共用) ===== */
    .saas-nav-personal {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
      margin-top: 14px;
      padding: 11px 12px;
      border: 1px solid rgba(226, 207, 160, .22);
      border-radius: var(--radius);
      background:
        linear-gradient(135deg, rgba(201, 168, 106, .16), rgba(243, 234, 215, .05)),
        rgba(255, 255, 255, .03);
      color: var(--ivory-warm);
      cursor: pointer;
      text-align: left;
      transition: border-color .18s ease, background .18s ease, transform .18s ease;
    }

    .saas-nav-personal:hover,
    .saas-nav-personal.is-active {
      border-color: rgba(226, 207, 160, .48);
      background:
        linear-gradient(135deg, rgba(201, 168, 106, .28), rgba(243, 234, 215, .1)),
        rgba(255, 255, 255, .05);
      transform: translateY(-1px);
    }

    .saas-nav-personal-avatar {
      flex: 0 0 auto;
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      border-radius: 999px;
      border: 1px solid rgba(226, 207, 160, .38);
      background:
        linear-gradient(135deg, rgba(201, 168, 106, .3), rgba(243, 234, 215, .12)),
        rgba(255, 255, 255, .07);
      color: var(--gold-soft);
    }

    .saas-nav-personal-info {
      flex: 1 1 auto;
      min-width: 0;
      display: grid;
      gap: 2px;
    }

    .saas-nav-personal-info strong {
      font-size: 12px;
      font-weight: 700;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      color: var(--ivory-warm);
    }

    .saas-nav-personal-info small {
      font-size: 11px;
      color: rgba(246, 244, 238, .62);
    }

    .saas-nav-personal-caret {
      flex: 0 0 auto;
      color: rgba(226, 207, 160, .6);
    }

    /* ===== 个人中心独立页主体 ===== */
    .personal-hero {
      position: relative;
      overflow: hidden;
      min-height: 340px;
      display: flex;
      align-items: center;
    }

    .personal-hero-bg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: right center;
      z-index: 0;
    }

    .personal-hero::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, rgba(12, 13, 14, .94) 0%, rgba(12, 13, 14, .86) 30%, rgba(12, 13, 14, .5) 56%, rgba(12, 13, 14, .12) 100%);
      z-index: 1;
      pointer-events: none;
    }

    .personal-hero .hub-hero-content {
      position: relative;
      z-index: 2;
      max-width: 60%;
      align-self: center;
    }

    .personal-hero-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 22px;
    }

    .personal-hero-chip {
      min-width: 132px;
      display: grid;
      gap: 4px;
      padding: 12px 16px;
      border: 1px solid rgba(226, 207, 160, .22);
      border-radius: 14px;
      background:
        linear-gradient(180deg, rgba(251, 250, 246, .07), rgba(251, 250, 246, .025)),
        rgba(14, 15, 16, .2);
    }

    .personal-hero-chip-label {
      font-size: 12px;
      color: rgba(246, 244, 238, .62);
    }

    .personal-hero-chip strong {
      font-size: 18px;
      font-weight: 800;
      color: var(--ivory-warm);
    }

    .personal-hero-chip.is-soon strong {
      font-size: 14px;
      color: var(--gold-soft);
    }

    .personal-section {
      margin-top: 20px;
      padding: 20px;
      border: 1px solid rgba(226, 207, 160, .16);
      border-radius: var(--radius-lg, 18px);
      background:
        linear-gradient(180deg, rgba(251, 250, 246, .055), rgba(251, 250, 246, .02)),
        rgba(14, 15, 16, .14);
    }

    .personal-section-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 14px;
    }

    .personal-section-head h2 {
      font-size: 16px;
      font-weight: 800;
      color: var(--ivory-warm);
    }

    .personal-section-sub {
      font-size: 12px;
      color: rgba(246, 244, 238, .58);
    }

    .personal-quota-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .personal-quota-card {
      display: grid;
      gap: 8px;
      align-content: start;
      padding: 16px;
      border: 1px solid rgba(226, 207, 160, .16);
      background: rgba(14, 15, 16, .28);
      box-shadow: none;
    }

    .personal-quota-grid .personal-quota-card.is-total {
      grid-column: auto;
      border-color: rgba(226, 207, 160, .32);
      background:
        linear-gradient(180deg, rgba(201, 168, 106, .14), rgba(201, 168, 106, .05)),
        rgba(14, 15, 16, .2);
      box-shadow: none;
    }

    .personal-quota-grid .personal-quota-card.is-total .personal-quota-label,
    .personal-quota-grid .personal-quota-card.is-total .personal-quota-cap {
      color: rgba(246, 244, 238, .66);
    }

    .personal-quota-card .personal-quota-label {
      font-size: 12px;
      color: rgba(246, 244, 238, .62);
    }

    .personal-quota-card strong {
      font-size: 26px;
      font-weight: 800;
      line-height: 1.05;
      color: var(--ivory-warm);
    }

    .personal-quota-card.is-total strong {
      color: var(--gold-soft);
    }

    .personal-quota-cap {
      font-size: 11px;
      line-height: 1.45;
      color: rgba(246, 244, 238, .5);
      min-height: 30px;
    }

    .personal-quota-bar {
      display: block;
      height: 6px;
      border-radius: 999px;
      overflow: hidden;
      background: rgba(246, 244, 238, .1);
    }

    .personal-quota-bar > i {
      display: block;
      height: 100%;
      width: 0;
      border-radius: 999px;
      background: linear-gradient(90deg, rgba(201, 168, 106, .9), rgba(243, 234, 215, .95));
      transition: width .5s ease;
    }

    .personal-action-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      flex-wrap: wrap;
    }

    .personal-action-info {
      display: grid;
      gap: 4px;
    }

    .personal-action-info strong {
      font-size: 14px;
      font-weight: 700;
      color: var(--ivory-warm);
    }

    .personal-action-info small {
      font-size: 12px;
      color: rgba(246, 244, 238, .6);
    }

    .personal-support-grid,
    .personal-next-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
    }

    .personal-support-card,
    .personal-next-card {
      display: grid;
      gap: 6px;
      justify-items: start;
      text-align: left;
      padding: 16px;
      border: 1px solid rgba(226, 207, 160, .18);
      border-radius: var(--radius);
      background: rgba(255, 255, 255, .03);
      color: var(--ivory-warm);
      cursor: pointer;
      transition: border-color .18s ease, background .18s ease, transform .18s ease;
    }

    .personal-support-card:hover,
    .personal-next-card:hover {
      border-color: rgba(226, 207, 160, .42);
      background:
        linear-gradient(135deg, rgba(201, 168, 106, .2), rgba(243, 234, 215, .07)),
        rgba(255, 255, 255, .05);
      transform: translateY(-1px);
    }

    .personal-support-icon,
    .personal-next-icon {
      width: 38px;
      height: 38px;
      display: grid;
      place-items: center;
      border-radius: var(--radius);
      border: 1px solid rgba(226, 207, 160, .32);
      background:
        linear-gradient(135deg, rgba(201, 168, 106, .26), rgba(243, 234, 215, .1)),
        rgba(255, 255, 255, .06);
      color: var(--gold-soft);
    }

    .personal-support-card strong,
    .personal-next-card strong {
      font-size: 13px;
      font-weight: 700;
    }

    .personal-support-card small,
    .personal-next-card small {
      font-size: 12px;
      color: rgba(246, 244, 238, .6);
    }

    .personal-support-danger:hover {
      border-color: rgba(244, 63, 94, .4);
      background:
        linear-gradient(135deg, rgba(244, 63, 94, .16), rgba(244, 63, 94, .05)),
        rgba(255, 255, 255, .04);
    }

    .personal-support-danger .personal-support-icon {
      border-color: rgba(244, 63, 94, .32);
      background:
        linear-gradient(135deg, rgba(244, 63, 94, .22), rgba(244, 63, 94, .08)),
        rgba(255, 255, 255, .05);
      color: #fda4af;
    }

    @media (max-width: 1100px) {
      .personal-hero .hub-hero-content {
        max-width: 78%;
      }
    }

    @media (max-width: 900px) {
      .personal-quota-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .personal-support-grid,
      .personal-next-grid {
        grid-template-columns: 1fr;
      }
      .personal-hero-chip {
        flex: 1 1 40%;
        min-width: 0;
      }
      .personal-hero .hub-hero-content {
        max-width: 100%;
      }
      .personal-hero::after {
        background: linear-gradient(90deg, rgba(12, 13, 14, .95) 0%, rgba(12, 13, 14, .88) 45%, rgba(12, 13, 14, .62) 100%);
      }
    }

    .product-center-view .saas-account-panel {
      display: grid;
      gap: 9px;
      margin-top: 16px;
      border-color: rgba(226, 207, 160, .18);
      border-radius: var(--radius);
      background:
        linear-gradient(180deg, rgba(251, 250, 246, .08), rgba(251, 250, 246, .035)),
        rgba(14, 15, 16, .16);
      padding: 12px;
      box-shadow: none;
    }

    .product-center-view .saas-account-panel h3 {
      color: var(--ivory-warm);
      font-size: 14px;
      letter-spacing: 0;
    }

    .product-center-view .saas-account-panel p {
      color: rgba(246, 244, 238, .7);
      font-size: 11px;
      line-height: 1.55;
    }

    .product-center-view .saas-account-actions {
      gap: 6px;
    }

    .product-center-view .saas-account-action {
      min-height: 36px;
      border-radius: var(--radius);
      border-color: rgba(226, 207, 160, .14);
      background: rgba(255, 255, 255, .04);
      color: rgba(251, 250, 246, .9);
      padding: 8px 9px;
      font-size: 11px;
    }

    .product-center-view .saas-account-action:hover {
      border-color: rgba(226, 207, 160, .36);
      background: rgba(201, 168, 106, .16);
      color: var(--ivory-warm);
    }

    .product-center-view .saas-nav .mini-badge {
      border-color: rgba(226, 207, 160, .28);
      background: rgba(201, 168, 106, .14);
      color: var(--gold-soft);
    }

    .product-center-view .saas-main {
      width: min(100%, 1320px);
      padding: 22px;
    }

    .product-center-view .hub-hero {
      grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
      align-items: stretch;
      gap: 14px;
      overflow: visible;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      padding: 0;
    }

    .product-center-view .hub-hero::before,
    .product-center-view .hub-hero::after {
      display: none;
    }

    .product-center-view .hub-hero-content {
      max-width: none;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background:
        linear-gradient(180deg, var(--panel) 0%, var(--ivory-warm) 100%);
      padding: 17px;
      box-shadow: var(--shadow-sm);
    }

    .product-center-view .app-view .hero-kicker,
    .product-center-view .hero-kicker {
      border-color: var(--gold-line);
      border-radius: var(--radius);
      background: var(--gold-soft);
      color: var(--deep-green);
      padding: 6px 9px;
      font-size: 10.5px;
      letter-spacing: 0;
      text-transform: none;
    }

    .product-center-view .hub-hero h1 {
      margin-top: 10px;
      max-width: none;
      color: var(--ink);
      font-size: clamp(27px, 2.2vw, 34px);
      line-height: 1.12;
      letter-spacing: 0;
    }

    .product-center-view .hub-hero p {
      max-width: 720px;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.55;
    }

    .product-center-view .hub-hero-actions {
      gap: 8px;
      margin-top: 13px;
    }

    .product-center-view .btn,
    .product-center-view .hub-mini-pill {
      border-radius: var(--radius);
    }

    .product-center-view .btn-primary {
      border-color: var(--gold-strong);
      background: var(--gold);
      color: var(--ink);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
    }

    .product-center-view .btn-primary:hover {
      background: var(--gold-strong);
      color: var(--ink);
    }

    .product-center-view .btn-outline {
      border-color: var(--deep-green-line);
      background: var(--panel);
      color: var(--deep-green);
      box-shadow: none;
    }

    .product-center-view .btn-outline:hover {
      border-color: var(--deep-green);
      background: var(--deep-green-soft);
      color: var(--deep-green);
    }

    .product-center-view .workflow-strip {
      width: 100%;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
      margin-top: 13px;
    }

    .product-center-view .workflow-step {
      min-height: 54px;
      border-color: var(--line);
      border-radius: var(--radius);
      background: var(--panel);
      color: var(--ink-soft);
      padding: 9px;
      box-shadow: none;
    }

    .product-center-view .workflow-step em {
      width: 28px;
      height: 28px;
      border-radius: var(--radius-sm);
      background: var(--deep-green-soft);
      color: var(--deep-green);
    }

    .product-center-view .workflow-step strong {
      color: var(--ink);
      font-size: 11.5px;
      letter-spacing: 0;
    }

    .product-center-view .workflow-step small {
      color: var(--muted);
      font-size: 10px;
    }

    /* === 阶段3 Banner（AIGC 是电商第一生产力）通栏背景图 === */
    .product-center-view .hub-hero-banner {
      display: flex;
      grid-template-columns: none;
      align-items: center;
      position: relative;
      overflow: hidden;
      min-height: 360px;
      border: 1px solid rgba(226, 207, 160, .18);
      border-radius: 24px;
      padding: clamp(24px, 3vw, 44px);
      box-shadow: 0 30px 90px rgba(0, 0, 0, .3);
    }

    .product-center-view .hub-hero-banner .hub-hero-bg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: right center;
      z-index: 0;
    }

    .product-center-view .hub-hero-banner::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, rgba(8, 16, 14, .95) 0%, rgba(8, 16, 14, .88) 32%, rgba(8, 16, 14, .55) 58%, rgba(8, 16, 14, .12) 100%);
      z-index: 1;
      pointer-events: none;
      display: block;
    }

    .product-center-view .hub-hero-banner .hub-hero-content {
      position: relative;
      z-index: 2;
      max-width: 68%;
      border: 0;
      border-radius: 0;
      background: transparent;
      padding: 0;
      box-shadow: none;
    }

    .product-center-view .hub-hero-banner h1 {
      margin-top: 12px;
      color: var(--ivory-warm);
      font-size: clamp(30px, 2.8vw, 44px);
      line-height: 1.1;
    }

    .product-center-view .hub-hero-banner h1 .hero-title-accent {
      color: var(--gold-line);
      margin-left: 0.22em;
    }

    .product-center-view .hub-hero-banner p {
      max-width: 560px;
      color: rgba(246, 244, 238, .82);
      font-size: 14px;
      line-height: 1.55;
    }

    .product-center-view .hub-hero-banner .workflow-strip {
      display: flex;
      flex-wrap: wrap;
      align-items: stretch;
      gap: 5px;
      width: 100%;
      max-width: 720px;
      grid-template-columns: none;
    }

    .product-center-view .hub-hero-banner .workflow-step {
      flex: 1 1 0;
      min-width: 106px;
      border-color: rgba(226, 207, 160, .16);
      background: linear-gradient(145deg, rgba(16, 22, 19, .72), rgba(7, 11, 10, .8));
      box-shadow: none;
      backdrop-filter: blur(4px);
    }

    .product-center-view .hub-hero-banner .workflow-step strong,
    .product-center-view .hub-hero-banner .workflow-step small {
      white-space: normal;
      overflow: visible;
      text-overflow: clip;
    }

    .product-center-view .hub-hero-banner .workflow-step em {
      background: rgba(226, 207, 160, .18);
      color: var(--gold-line);
    }

    .product-center-view .hub-hero-banner .workflow-step strong {
      color: var(--ivory-warm);
    }

    .product-center-view .hub-hero-banner .workflow-step small {
      color: rgba(246, 244, 238, .66);
    }

    .product-center-view .hub-hero-banner .workflow-arrow {
      display: inline-flex;
      align-items: center;
      flex: 0 0 auto;
      color: rgba(226, 207, 160, .55);
    }

    @media (max-width: 900px) {
      .product-center-view .hub-hero-banner .hub-hero-content {
        max-width: 100%;
      }
      .product-center-view .hub-hero-banner::before {
        background: linear-gradient(180deg, rgba(8, 16, 14, .82) 0%, rgba(8, 16, 14, .92) 100%);
      }
    }

    .product-center-view .hub-account-card {
      display: grid;
      width: 100%;
      border-color: var(--gold-line);
      border-radius: var(--radius);
      background:
        linear-gradient(180deg, var(--panel) 0%, var(--ivory-warm) 100%);
      padding: 14px;
      box-shadow: var(--shadow-sm);
      backdrop-filter: none;
    }

    .product-center-view .hub-account-card::before {
      display: none;
    }

    .product-center-view .hub-account-badge {
      border-color: var(--gold-line);
      border-radius: var(--radius);
      background: var(--gold-soft);
      color: var(--deep-green);
      padding: 6px 8px;
      letter-spacing: 0;
      text-transform: none;
    }

    .product-center-view .hub-account-row {
      gap: 4px;
      border-color: var(--line);
      border-radius: var(--radius);
      background: var(--panel);
      padding: 9px;
    }

    .product-center-view .hub-account-row span {
      color: var(--muted);
      font-size: 10.5px;
      letter-spacing: 0;
      text-transform: none;
    }

    .product-center-view .hub-account-row strong {
      color: var(--ink);
      font-size: 13px;
      line-height: 1.25;
    }

    .product-center-view #hubQuotaText {
      color: var(--gold-strong);
      font-size: 16px;
    }

    .product-center-view .hub-account-code {
      color: var(--deep-green);
      letter-spacing: 0;
    }

    .product-center-view .hub-account-trigger {
      border-color: var(--deep-green-line);
      background: var(--panel);
      color: var(--deep-green);
    }

    .product-center-view .hub-account-trigger:hover {
      border-color: var(--deep-green);
      background: var(--deep-green-soft);
      color: var(--deep-green);
    }

    .product-center-view .product-card-grid {
      grid-template-columns: repeat(3, minmax(230px, 1fr));
      gap: 12px;
      margin-top: 14px;
    }

    .product-center-view .product-card {
      min-height: 0;
      gap: 12px;
      border-color: var(--line);
      border-radius: var(--radius);
      background: var(--panel);
      padding: 15px;
      box-shadow: var(--shadow-sm);
    }

    .product-center-view .product-card.is-featured {
      border-color: var(--gold-line);
      background:
        linear-gradient(180deg, var(--panel) 0%, var(--ivory-warm) 100%);
    }

    .product-center-view .product-card::before,
    .product-center-view .product-card::after {
      display: none;
    }

    .product-center-view .product-card:hover {
      transform: translateY(-2px);
      border-color: var(--gold-line);
      box-shadow: var(--shadow-md);
    }

    .product-center-view .product-card-main {
      gap: 10px;
    }

    .product-center-view .product-card-top {
      align-items: center;
    }

    .product-center-view .product-card-status {
      border-color: var(--deep-green-line);
      border-radius: var(--radius);
      background: var(--deep-green-soft);
      color: var(--deep-green);
      padding: 6px 8px;
      font-size: 10.5px;
      letter-spacing: 0;
    }

    .product-center-view .product-card.is-featured .product-card-status {
      border-color: var(--gold-line);
      background: var(--gold-soft);
      color: var(--ink);
    }

    .product-center-view .product-card h2 {
      color: var(--ink);
      font-size: 20px;
      line-height: 1.18;
      letter-spacing: 0;
      text-wrap: balance;
    }

    .product-center-view .product-card p {
      color: var(--muted);
      font-size: 12px;
      line-height: 1.58;
    }

    .product-center-view .product-card-tags {
      gap: 6px;
    }

    .product-center-view .product-card-tags span {
      border-color: var(--line);
      border-radius: var(--radius-sm);
      background: var(--ivory-warm);
      color: var(--ink-soft);
      padding: 6px 7px;
      font-size: 10.5px;
      white-space: normal;
    }

    .product-center-view .product-card-visual {
      display: none;
    }

    .product-center-view .product-card-action {
      width: 100%;
      min-width: 0;
      min-height: 40px;
      margin-top: 0;
      font-size: 12px;
    }

    @media (max-width: 1180px) {
      :is(.product-center-view, .creator-share-view, .records-view, .image-studio-view, .video-studio-view, .personal-center-view) .saas-shell {
        grid-template-columns: 1fr;
      }

      :is(.product-center-view, .creator-share-view, .records-view, .image-studio-view, .video-studio-view, .personal-center-view) .saas-nav {
        position: relative;
        top: auto;
        height: auto;
      }

      .product-center-view .hub-hero {
        grid-template-columns: 1fr;
      }

      .product-center-view .product-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 640px) {
      .product-center-view .saas-main,
      :is(.product-center-view, .creator-share-view, .records-view, .image-studio-view, .video-studio-view, .personal-center-view) .saas-nav {
        padding: 14px;
      }

      :is(.product-center-view, .creator-share-view, .records-view, .image-studio-view, .video-studio-view, .personal-center-view) .saas-nav-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      :is(.product-center-view, .creator-share-view, .records-view, .image-studio-view, .video-studio-view, .personal-center-view) .saas-nav-item {
        min-height: 38px;
        padding: 8px;
      }

      .product-center-view .saas-account-panel {
        display: none;
      }

      .product-center-view .hub-hero-content,
      .product-center-view .hub-account-card,
      .product-center-view .product-card {
        padding: 13px;
      }

      .product-center-view .hub-hero h1 {
        font-size: 25px;
      }

      .product-center-view .hub-hero p {
        font-size: 12.5px;
      }

      .product-center-view .workflow-strip,
      .product-center-view .product-card-grid {
        grid-template-columns: 1fr;
      }
    }

    /* ===== T15 功能中心暗色化:同特异性后置覆盖,只翻颜色/背景,DOM 与全部 hook 不动。
       接入落地页同款暗调质感 + 大理石产品台背景(assets/media/hub-bg-20260622.jpg)。 ===== */
    .product-center-view {
      color: var(--ivory-warm);
      background:
        linear-gradient(180deg, rgba(9, 11, 10, .86) 0%, rgba(9, 11, 10, .8) 40%, rgba(9, 11, 10, .94) 100%),
        url('media/hub-bg-20260622.jpg') center top / cover no-repeat fixed,
        #0a0b0a;
    }

    .product-center-view::before { display: none; }

    .product-center-view .hub-hero-content {
      border: 1px solid rgba(226, 207, 160, .16);
      background:
        linear-gradient(180deg, rgba(27, 33, 29, .72) 0%, rgba(14, 15, 16, .68) 100%);
      box-shadow: 0 24px 60px rgba(0, 0, 0, .4);
      backdrop-filter: blur(8px);
    }

    .product-center-view .hub-hero h1 { color: var(--ivory-warm); }
    .product-center-view .hub-hero p { color: rgba(246, 244, 238, .66); }

    .product-center-view .workflow-step {
      border-color: rgba(226, 207, 160, .14);
      background: rgba(255, 255, 255, .04);
      color: rgba(246, 244, 238, .82);
    }
    .product-center-view .workflow-step em {
      background: rgba(201, 168, 106, .18);
      color: var(--gold-soft);
    }
    .product-center-view .workflow-step strong { color: var(--ivory-warm); }
    .product-center-view .workflow-step small { color: rgba(246, 244, 238, .58); }

    .product-center-view .hub-account-card {
      border-color: rgba(226, 207, 160, .18);
      background:
        linear-gradient(180deg, rgba(27, 33, 29, .78) 0%, rgba(14, 15, 16, .74) 100%);
      box-shadow: 0 24px 60px rgba(0, 0, 0, .4);
      backdrop-filter: blur(8px);
    }
    .product-center-view .hub-account-row {
      border-color: rgba(226, 207, 160, .12);
      background: rgba(255, 255, 255, .035);
    }
    .product-center-view .hub-account-row span { color: rgba(246, 244, 238, .6); }
    .product-center-view .hub-account-row strong { color: var(--ivory-warm); }
    .product-center-view .hub-account-code { color: var(--gold-soft); }
    .product-center-view .hub-account-trigger {
      border-color: rgba(226, 207, 160, .2);
      background: rgba(255, 255, 255, .045);
      color: var(--ivory-warm);
    }
    .product-center-view .hub-account-trigger:hover {
      border-color: rgba(226, 207, 160, .4);
      background: rgba(201, 168, 106, .16);
      color: var(--ivory-warm);
    }

    .product-center-view .btn-outline {
      border-color: rgba(226, 207, 160, .22);
      background: rgba(255, 255, 255, .045);
      color: var(--ivory-warm);
    }
    .product-center-view .btn-outline:hover {
      border-color: rgba(226, 207, 160, .42);
      background: rgba(201, 168, 106, .16);
      color: var(--ivory-warm);
    }

    .product-center-view .product-card {
      border-color: rgba(226, 207, 160, .14);
      background:
        linear-gradient(180deg, rgba(27, 33, 29, .74) 0%, rgba(14, 15, 16, .7) 100%);
      box-shadow: 0 20px 48px rgba(0, 0, 0, .36);
      backdrop-filter: blur(8px);
    }
    .product-center-view .product-card.is-featured {
      border-color: rgba(226, 207, 160, .34);
      background:
        linear-gradient(180deg, rgba(201, 168, 106, .16) 0%, rgba(27, 33, 29, .76) 60%, rgba(14, 15, 16, .72) 100%);
    }
    .product-center-view .product-card:hover {
      border-color: rgba(226, 207, 160, .4);
      box-shadow: 0 28px 64px rgba(0, 0, 0, .46);
    }
    .product-center-view .product-card h2 { color: var(--ivory-warm); }
    .product-center-view .product-card p { color: rgba(246, 244, 238, .66); }
    .product-center-view .product-card-status {
      border-color: rgba(226, 207, 160, .2);
      background: rgba(201, 168, 106, .12);
      color: var(--gold-soft);
    }
    .product-center-view .product-card.is-featured .product-card-status {
      border-color: rgba(226, 207, 160, .4);
      background: rgba(201, 168, 106, .22);
      color: var(--ivory-warm);
    }
    .product-center-view .product-card-tags span {
      border-color: rgba(226, 207, 160, .12);
      background: rgba(255, 255, 255, .04);
      color: rgba(246, 244, 238, .76);
    }

    @media (max-width: 640px) {
      .product-center-view { background-attachment: scroll; }
    }

    @media (prefers-reduced-motion: reduce) {
      .orbit-ring,
      .platform-node-orient,
      .typewriter-live-caret,
      .public-auth-wrap,
      .hub-hero,
      .hub-hero::after,
      .hub-ai-core::before,
      .ai-orbit,
      .ai-core-chip,
      .ai-core-chip::after,
      .ai-core-spark,
      .ai-data-stream span,
      .product-card {
        animation: none !important;
      }

      .ai-core-chip,
      .ai-core-spark {
        transform: none !important;
      }

      .typewriter-live-caret {
        opacity: 1;
      }
    }

    /* Replicate workbench redesign: model rail + central console */
    .replicate-view .saas-main {
      max-width: 1720px;
      padding-inline: clamp(20px, 3vw, 56px);
    }

    .replicate-view {
      overflow-x: clip;
      overflow-y: visible;
    }

    .replicate-workspace {
      display: grid;
      grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
      align-items: start;
      gap: clamp(18px, 1.6vw, 26px);
      width: 100%;
      max-width: 1600px;
      margin: 18px auto 0;
    }

    .replicate-workbench-main {
      grid-column: 2;
      min-width: 0;
      width: 100%;
    }

    .replicate-workspace > #replicateInlineModelPanel {
      grid-column: 1;
      grid-row: 1;
    }

    .replicate-console-panel {
      border-color: rgba(29, 78, 216, .08);
      border-radius: 22px;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(250, 249, 244, .96)),
        #fffdf8;
      box-shadow:
        0 28px 70px rgba(15, 23, 42, .15),
        inset 0 1px 0 rgba(255, 255, 255, .86);
    }

    .replicate-console-panel .replicate-panel-head {
      align-items: center;
      border-bottom-color: rgba(28, 25, 23, .09);
      padding-bottom: 14px;
    }

    .replicate-console-panel .replicate-panel-head h2 {
      color: #171712;
      font-size: 22px;
    }

    .replicate-console-panel .replicate-panel-head p {
      max-width: 760px;
      color: #6d6a60;
      font-size: 13px;
      line-height: 1.7;
    }

    .replicate-form-grid {
      grid-template-columns: repeat(12, minmax(0, 1fr));
      gap: 14px;
    }

    .replicate-form-grid > .field,
    .replicate-form-grid > .replicate-policy-box {
      grid-column: span 6;
    }

    .replicate-form-grid .field.is-wide,
    .replicate-upload-row,
    .replicate-policy-box,
    .replicate-actions,
    .replicate-output-actions,
    .replicate-token-grid,
    .replicate-screen-list,
    .replicate-prompt-box,
    .replicate-subsection.is-wide,
    .replicate-link-box.is-wide,
    .replicate-asset-workbench.is-wide,
    .replicate-advanced.is-wide,
    .replicate-console-output.is-wide {
      grid-column: 1 / -1;
    }

    .replicate-subsection,
    .replicate-link-box,
    .replicate-asset-workbench {
      border-color: rgba(31, 58, 51, .14);
      border-radius: 18px;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, .8), rgba(247, 253, 250, .68)),
        #fffefa;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .72),
        0 10px 24px rgba(15, 23, 42, .045);
    }

    .replicate-workflow-toggle {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }

    .replicate-workflow-toggle label {
      min-width: 0;
    }

    .replicate-workflow-toggle span {
      display: grid;
      grid-template-columns: 46px minmax(0, 1fr);
      grid-template-rows: auto auto auto;
      align-items: start;
      gap: 7px 12px;
      min-width: 0;
      min-height: 166px;
      border: 1px solid rgba(28, 25, 23, .12);
      border-radius: 18px;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(250, 249, 244, .95)),
        #fffdf8;
      color: #25231f;
      padding: 16px;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .78),
        0 14px 28px rgba(15, 23, 42, .055);
    }

    .replicate-workflow-toggle span > i {
      grid-column: 1;
      grid-row: 1 / span 4;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      border: 1px solid rgba(31, 58, 51, .18);
      border-radius: 15px;
      background: rgba(236, 253, 245, .76);
      color: var(--deep-green);
      padding: 10px;
      box-sizing: border-box;
    }

    .replicate-workflow-toggle em {
      grid-column: 2;
      display: inline-flex;
      width: fit-content;
      max-width: 100%;
      border: 1px solid rgba(31, 58, 51, .16);
      border-radius: 999px;
      background: rgba(236, 253, 245, .72);
      color: var(--deep-green);
      padding: 5px 8px;
      font-size: 10px;
      font-style: normal;
      font-weight: 950;
      line-height: 1;
      white-space: nowrap;
    }

    .replicate-workflow-toggle strong,
    .replicate-workflow-toggle small,
    .replicate-workflow-fit {
      grid-column: 2;
      min-width: 0;
      text-align: left;
      word-break: normal;
      overflow-wrap: break-word;
    }

    .replicate-workflow-toggle strong {
      color: #171712;
      font-size: 15px;
      font-weight: 950;
      line-height: 1.28;
    }

    .replicate-workflow-toggle small {
      color: #67645b;
      font-size: 12px;
      font-weight: 760;
      line-height: 1.62;
    }

    .replicate-workflow-fit {
      width: 100%;
      border-top: 1px solid rgba(28, 25, 23, .08);
      color: #414a45;
      padding-top: 9px;
      font-size: 11px;
      font-style: normal;
      font-weight: 850;
      line-height: 1.45;
    }

    .replicate-workflow-toggle input:checked + span {
      border-color: rgba(31, 58, 51, .48);
      background:
        linear-gradient(180deg, rgba(250, 255, 253, .98), rgba(236, 253, 245, .96)),
        #f7fffc;
      box-shadow:
        0 0 0 1px rgba(31, 58, 51, .12),
        0 18px 38px rgba(31, 58, 51, .12);
      transform: translateY(-1px);
    }

    .replicate-workflow-toggle input:checked + span::after {
      content: "当前方式";
      position: absolute;
      top: 14px;
      right: 14px;
      border: 1px solid rgba(31, 58, 51, .22);
      border-radius: 999px;
      background: rgba(255, 255, 255, .86);
      color: var(--deep-green);
      padding: 5px 8px;
      font-size: 10px;
      font-weight: 950;
      line-height: 1;
      white-space: nowrap;
    }

    #replicateInlineModelPanel {
      position: sticky;
      top: 18px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      width: 100%;
      max-height: calc(100svh - 36px);
      min-height: min(760px, calc(100svh - 36px));
      overflow: hidden;
      border: 1px solid rgba(31, 58, 51, .14);
      border-radius: 22px;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(248, 251, 246, .96)),
        #fffdf8;
      box-shadow:
        0 24px 60px rgba(15, 23, 42, .14),
        inset 0 1px 0 rgba(255, 255, 255, .82);
      padding: 14px;
    }

    #replicateInlineModelPanel .replicate-subsection-head {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 10px;
      flex: 0 0 auto;
      margin: 0;
      padding: 0 0 12px;
      border-bottom: 1px solid rgba(28, 25, 23, .08);
    }

    #replicateInlineModelPanel .replicate-subsection-head h3 {
      color: #171712;
      font-size: 16px;
      line-height: 1.25;
    }

    #replicateInlineModelPanel .replicate-subsection-head p {
      max-width: none;
      color: #67645b;
      font-size: 11.5px;
      line-height: 1.62;
    }

    #replicateInlineModelPanel .replicate-subsection-head .model-library-clear-btn {
      width: 100%;
      min-height: 38px;
      border-radius: 12px;
    }

    #replicateInlineModelPanel .replicate-model-control-rail {
      display: grid;
      gap: 10px;
      flex: 0 0 auto;
      position: relative;
      top: auto;
      min-width: 0;
    }

    #replicateInlineModelPanel .replicate-model-rail-title {
      display: grid;
      gap: 4px;
      border: 1px solid rgba(31, 58, 51, .12);
      border-radius: 15px;
      background: rgba(236, 253, 245, .52);
      padding: 11px;
      box-shadow: none;
    }

    #replicateInlineModelPanel .replicate-model-rail-title strong,
    #replicateInlineModelPanel .replicate-model-catalog-head strong {
      color: #173b36;
      font-size: 13px;
      font-weight: 950;
      line-height: 1.28;
    }

    #replicateInlineModelPanel .replicate-model-rail-title span,
    #replicateInlineModelPanel .replicate-model-catalog-head span {
      color: #657069;
      font-size: 11px;
      font-weight: 780;
      line-height: 1.45;
    }

    #replicateInlineModelPanel .replicate-sidebar-model-selected {
      min-height: 0;
      margin: 0;
      border-color: rgba(31, 58, 51, .16);
      border-radius: 16px;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(250, 249, 244, .82));
      color: #193d38;
      padding: 10px;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72);
    }

    #replicateInlineModelPanel .replicate-sidebar-model-selected.is-empty {
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px;
      align-items: stretch;
    }

    #replicateInlineModelPanel .replicate-sidebar-model-selected:not(.is-empty) {
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px;
    }

    #replicateInlineModelPanel .model-library-empty-state {
      display: grid;
      grid-template-columns: 42px minmax(0, 1fr);
      gap: 10px;
      align-items: center;
    }

    #replicateInlineModelPanel .model-library-empty-avatar {
      width: 42px;
      height: 42px;
      border-color: rgba(31, 58, 51, .16);
      background:
        radial-gradient(circle at 50% 34%, rgba(31, 58, 51, .14) 0 8px, transparent 9px),
        rgba(236, 253, 245, .82);
      color: var(--deep-green);
      box-shadow: none;
    }

    #replicateInlineModelPanel .model-library-selected-media {
      display: grid;
      grid-template-columns: 56px minmax(0, 1fr);
      gap: 10px;
      align-items: center;
    }

    #replicateInlineModelPanel .model-library-selected-thumb,
    #replicateInlineModelPanel .model-library-selected-media img {
      width: 56px;
      height: 56px;
      border-radius: 14px;
    }

    #replicateInlineModelPanel .replicate-sidebar-model-selected strong,
    #replicateInlineModelPanel .model-library-selected-copy strong {
      color: #193d38;
      font-size: 12px;
      line-height: 1.3;
    }

    #replicateInlineModelPanel .replicate-sidebar-model-selected span,
    #replicateInlineModelPanel .model-library-selected-copy span {
      color: #66736d;
      font-size: 10.8px;
      line-height: 1.45;
    }

    #replicateInlineModelPanel .model-library-selected-actions {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 7px;
    }

    #replicateInlineModelPanel .model-library-selected-actions .model-library-clear-btn,
    #replicateInlineModelPanel .model-library-scroll-btn,
    #replicateInlineModelPanel .model-library-clear-btn {
      min-height: 36px;
      border-radius: 12px;
      border-color: rgba(31, 58, 51, .18);
      background: rgba(255, 255, 255, .84);
      color: var(--deep-green);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .68);
    }

    #replicateInlineModelPanel .model-library-clear-btn.is-muted {
      border-color: rgba(87, 83, 74, .14);
      background: rgba(255, 255, 255, .72);
      color: #66736d;
    }

    #replicateInlineModelPanel .model-library-clear-btn:hover,
    #replicateInlineModelPanel .model-library-scroll-btn:hover,
    #replicateInlineModelPanel .model-library-select-btn:hover,
    #replicateInlineModelPanel .model-library-preview-btn:hover {
      border-color: rgba(31, 58, 51, .42);
      background: #ecfdf8;
      color: #0b5f57;
    }

    #replicateInlineModelPanel .replicate-model-advanced {
      margin: 0;
      border-color: rgba(31, 58, 51, .14);
      border-radius: 15px;
      background: rgba(255, 255, 255, .76);
      box-shadow: none;
    }

    #replicateInlineModelPanel .replicate-model-advanced summary {
      min-height: 40px;
      color: #14514a;
      padding: 11px 12px;
      font-size: 12px;
    }

    #replicateInlineModelPanel .replicate-model-filter-row {
      display: grid;
      grid-template-columns: 1fr;
      gap: 6px;
    }

    #replicateInlineModelPanel .replicate-model-filter-row > span {
      color: #55716b;
      line-height: 1.2;
    }

    #replicateInlineModelPanel .replicate-model-filter-options {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    #replicateInlineModelPanel .replicate-model-filter-row button {
      flex: 1 1 auto;
      min-width: 0;
      border-color: rgba(31, 58, 51, .16);
      background: rgba(255, 253, 248, .92);
      color: #55716b;
      padding: 6px 7px;
      box-shadow: none;
      white-space: normal;
    }

    #replicateInlineModelPanel .replicate-model-filter-row button.is-active {
      border-color: rgba(31, 58, 51, .42);
      background: rgba(226, 252, 247, .92);
      color: var(--deep-green);
    }

    #replicateInlineModelPanel .replicate-model-catalog {
      display: flex;
      flex-direction: column;
      gap: 10px;
      flex: 1 1 auto;
      min-height: 0;
      min-width: 0;
      width: 100%;
    }

    #replicateInlineModelPanel .replicate-model-catalog-head {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 10px;
      border: 1px solid rgba(31, 58, 51, .12);
      border-radius: 15px;
      background: rgba(255, 255, 255, .72);
      padding: 11px 12px;
      flex: 0 0 auto;
    }

    #replicateInlineModelPanel .replicate-model-catalog-chip {
      border-color: rgba(31, 58, 51, .16);
      background: rgba(236, 253, 245, .76);
      color: var(--deep-green);
      padding: 6px 8px;
      font-size: 10px;
    }

    #replicateInlineModelPanel .replicate-inline-model-grid,
    #replicateInlineModelPanel .replicate-model-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      align-content: start;
      gap: 10px;
      flex: 1 1 auto;
      min-height: 0;
      max-height: none;
      overflow: auto;
      overflow-x: hidden;
      padding-right: 4px;
      scrollbar-color: rgba(31, 58, 51, .34) rgba(15, 23, 42, .05);
    }

    #replicateInlineModelPanel .replicate-model-card {
      position: relative;
      display: grid;
      grid-template-columns: 96px minmax(0, 1fr);
      grid-template-rows: auto auto auto auto;
      align-items: start;
      gap: 7px 10px;
      min-width: 0;
      overflow: hidden;
      border: 1px solid rgba(28, 25, 23, .11);
      border-radius: 16px;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(250, 249, 244, .94)),
        #fffefa;
      color: #1f2d2a;
      padding: 9px;
      min-height: 150px;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .72),
        0 10px 22px rgba(15, 23, 42, .045);
      cursor: pointer;
    }

    #replicateInlineModelPanel .replicate-model-card:hover,
    #replicateInlineModelPanel .replicate-model-card.is-selected {
      transform: translateY(-1px);
      border-color: rgba(31, 58, 51, .46);
      background:
        linear-gradient(180deg, rgba(247, 255, 252, .98), rgba(255, 253, 248, .98));
      box-shadow:
        0 0 0 1px rgba(31, 58, 51, .08),
        0 14px 28px rgba(31, 58, 51, .1);
    }

    #replicateInlineModelPanel .replicate-model-card.is-selected::after {
      content: "已选";
      position: absolute;
      z-index: 3;
      top: 13px;
      left: 13px;
      border: 1px solid rgba(31, 58, 51, .22);
      border-radius: 999px;
      background: rgba(255, 255, 255, .9);
      color: var(--deep-green);
      padding: 4px 7px;
      font-size: 10px;
      font-weight: 950;
      line-height: 1;
      backdrop-filter: blur(8px);
    }

    #replicateInlineModelPanel .replicate-model-visual {
      grid-row: 1 / span 5;
      width: 96px;
      height: 132px;
      min-height: 0;
      aspect-ratio: auto;
      border-color: rgba(31, 58, 51, .14);
      border-radius: 13px;
      background:
        linear-gradient(180deg, rgba(236, 253, 245, .72), rgba(250, 247, 240, .96));
    }

    #replicateInlineModelPanel .replicate-model-visual img {
      object-fit: contain;
      object-position: center top;
    }

    #replicateInlineModelPanel .model-library-preview-btn {
      top: 7px;
      right: 7px;
      width: 28px;
      height: 28px;
      min-height: 28px;
      border-color: rgba(31, 58, 51, .2);
      background: rgba(255, 253, 248, .92);
      color: var(--deep-green);
      box-shadow: 0 8px 18px rgba(31, 29, 24, .1);
      cursor: zoom-in;
    }

    #replicateInlineModelPanel .replicate-model-card strong,
    #replicateInlineModelPanel .replicate-model-tags,
    #replicateInlineModelPanel .replicate-model-region,
    #replicateInlineModelPanel .replicate-model-meta,
    #replicateInlineModelPanel .replicate-model-fit,
    #replicateInlineModelPanel .replicate-model-actions {
      grid-column: 2;
      min-width: 0;
    }

    #replicateInlineModelPanel .replicate-model-card strong {
      color: #193d38;
      font-size: 12px;
      line-height: 1.28;
    }

    #replicateInlineModelPanel .replicate-model-meta,
    #replicateInlineModelPanel .replicate-model-fit {
      display: flex;
      flex-wrap: wrap;
      min-width: 0;
      overflow: hidden;
      gap: 4px;
    }

    #replicateInlineModelPanel .replicate-model-meta span,
    #replicateInlineModelPanel .replicate-model-fit span {
      max-width: 100%;
      border-color: rgba(31, 58, 51, .15);
      background: rgba(236, 253, 245, .72);
      color: var(--deep-green);
      padding: 4px 6px;
      font-size: 9px;
    }

    #replicateInlineModelPanel .replicate-model-tags {
      color: var(--deep-green);
      font-size: 10px;
      line-height: 1.35;
      -webkit-line-clamp: 2;
    }

    #replicateInlineModelPanel .replicate-model-region {
      display: none;
    }

    #replicateInlineModelPanel .replicate-model-actions {
      display: grid;
      grid-template-columns: 1fr;
      gap: 6px;
      align-self: end;
    }

    #replicateInlineModelPanel .model-library-select-btn {
      width: 100%;
      min-width: 0;
      min-height: 32px;
      border-radius: 11px;
      border-color: rgba(31, 58, 51, .22);
      background: rgba(255, 253, 248, .92);
      color: var(--deep-green);
      white-space: normal;
      overflow-wrap: break-word;
    }

    #replicateInlineModelPanel .model-library-select-btn.is-selected {
      border-color: rgba(31, 58, 51, .5);
      background: rgba(226, 252, 247, .95);
      color: #0b5f57;
    }

    #replicateInlineModelPanel .replicate-model-footer {
      display: grid;
      gap: 8px;
      flex: 0 0 auto;
      margin: 0;
      border-color: rgba(31, 58, 51, .13);
      background: rgba(255, 255, 255, .74);
      color: #55716b;
      box-shadow: none;
      padding: 10px;
    }

    #replicateInlineModelPanel .replicate-model-count-chip {
      color: var(--deep-green);
      line-height: 1.35;
      white-space: normal;
    }

    #replicateInlineModelPanel .replicate-model-more-btn {
      width: 100%;
      min-height: 34px;
      border-radius: 11px;
      border-color: rgba(31, 58, 51, .22);
      background: rgba(255, 253, 248, .92);
      color: var(--deep-green);
    }

    #replicateInlineModelPanel .replicate-asset-empty.model-library-empty {
      min-height: 180px;
      border-color: rgba(31, 58, 51, .14);
      background: rgba(255, 253, 248, .8);
      color: #55716b;
    }

    .replicate-console-output {
      position: relative;
      top: auto;
      align-self: stretch;
      max-height: none;
      overflow: visible;
      border-color: rgba(31, 58, 51, .16);
      border-radius: 20px;
      background:
        linear-gradient(180deg, rgba(246, 253, 250, .92), rgba(255, 253, 248, .98)),
        #fffdf8;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .8),
        0 16px 36px rgba(15, 23, 42, .075);
      margin-top: 2px;
      padding: 16px;
    }

    .replicate-console-output .replicate-output-head {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 12px;
      border-bottom-color: rgba(31, 58, 51, .12);
      padding-bottom: 12px;
    }

    .replicate-console-output .replicate-output-head h2 {
      color: #153c36;
      font-size: 18px;
    }

    .replicate-console-output .replicate-output-head p {
      max-width: 720px;
      color: #63706b;
      font-size: 12px;
      line-height: 1.62;
    }

    .replicate-console-output #replicateResultRoot {
      max-height: none;
      overflow: visible;
      padding-right: 0;
    }

    .replicate-console-output .replicate-empty {
      min-height: 180px;
      display: grid;
      place-items: center;
      border-color: rgba(31, 58, 51, .14);
      background:
        linear-gradient(180deg, rgba(255, 255, 255, .72), rgba(250, 249, 244, .76)),
        #fffefa;
      color: #66736d;
      line-height: 1.65;
    }

    .replicate-console-output .replicate-output-actions {
      margin-top: 12px;
    }

    .replicate-console-output .replicate-generated-grid {
      grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    }

    .replicate-console-output .replicate-generated-media {
      min-height: 260px;
      background: #f8faf7;
    }

    .replicate-console-panel {
      position: relative;
      overflow: hidden;
      padding: clamp(22px, 2vw, 32px);
    }

    .replicate-console-panel::before {
      content: "";
      position: absolute;
      inset: 0 0 auto;
      height: 5px;
      background: linear-gradient(90deg, var(--deep-green), var(--gold-line) 48%, #f59e0b);
      opacity: .82;
      pointer-events: none;
    }

    .replicate-console-panel .replicate-panel-head {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 16px;
      margin-bottom: 0;
      padding: 4px 0 18px;
    }

    .replicate-console-panel .replicate-panel-head h2 {
      font-size: 24px;
      line-height: 1.14;
    }

    .replicate-console-panel .replicate-panel-head p {
      max-width: 820px;
      margin-top: 7px;
      color: #646057;
      font-size: 13px;
      font-weight: 720;
      line-height: 1.78;
    }

    .replicate-console-panel .mini-badge {
      align-self: start;
      min-height: 34px;
      border-color: rgba(31, 58, 51, .22);
      background: rgba(236, 253, 245, .7);
      color: var(--deep-green);
    }

    .replicate-console-panel .replicate-panel-head + .replicate-form-grid {
      margin-top: 22px;
    }

    .replicate-form-grid {
      gap: clamp(18px, 1.6vw, 24px);
    }

    .replicate-console-panel .replicate-subsection,
    .replicate-console-panel .replicate-link-box,
    .replicate-console-panel .replicate-asset-workbench,
    .replicate-console-panel .replicate-console-output {
      padding: clamp(18px, 1.5vw, 24px);
      transition:
        transform .18s ease,
        border-color .18s ease,
        box-shadow .18s ease,
        background .18s ease;
    }

    .replicate-console-panel .replicate-subsection::after,
    .replicate-console-panel .replicate-link-box::after {
      display: none;
    }

    .replicate-console-panel .replicate-subsection:hover,
    .replicate-console-panel .replicate-link-box:hover,
    .replicate-console-panel .replicate-asset-workbench:hover,
    .replicate-console-panel .replicate-console-output:hover,
    .replicate-console-panel .replicate-subsection:focus-within,
    .replicate-console-panel .replicate-link-box:focus-within,
    .replicate-console-panel .replicate-asset-workbench:focus-within,
    .replicate-console-panel .replicate-console-output:focus-within {
      transform: translateY(-1px);
      border-color: rgba(31, 58, 51, .28);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .8),
        0 18px 40px rgba(15, 23, 42, .085);
    }

    .replicate-console-panel .replicate-subsection-head {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: start;
      gap: 14px;
      margin-bottom: 16px;
      padding-bottom: 13px;
      border-bottom: 1px solid rgba(28, 25, 23, .08);
    }

    .replicate-console-panel .replicate-subsection-head h3 {
      color: #171712;
      font-size: 15.5px;
      font-weight: 950;
      line-height: 1.26;
    }

    .replicate-console-panel .replicate-subsection-head p {
      max-width: 860px;
      color: #706b61;
      font-size: 12.5px;
      font-weight: 720;
      line-height: 1.75;
    }

    .replicate-console-panel .control {
      min-height: 46px;
      border-color: rgba(28, 25, 23, .16);
      border-radius: 14px;
      background: rgba(255, 255, 255, .94);
      color: #1f2933;
      font-size: 13px;
      line-height: 1.45;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .68);
      transition:
        border-color .16s ease,
        box-shadow .16s ease,
        background .16s ease;
    }

    .replicate-console-panel textarea.control {
      padding-top: 12px;
      line-height: 1.65;
      resize: vertical;
    }

    .replicate-console-panel .control:focus {
      outline: none;
      border-color: rgba(31, 58, 51, .55);
      background: #ffffff;
      box-shadow:
        0 0 0 4px rgba(31, 58, 51, .1),
        inset 0 1px 0 rgba(255, 255, 255, .74);
    }

    .replicate-type-toggle {
      gap: 6px;
      border: 1px solid rgba(28, 25, 23, .1);
      border-radius: 17px;
      background: rgba(244, 242, 235, .72);
      padding: 5px;
    }

    .replicate-type-toggle span {
      justify-content: flex-start;
      min-height: 54px;
      border-color: transparent;
      border-radius: 13px;
      background: transparent;
      color: #59554c;
      padding: 12px 13px;
      font-size: 12.5px;
      text-align: left;
      box-shadow: none;
      transition:
        transform .16s ease,
        border-color .16s ease,
        background .16s ease,
        color .16s ease,
        box-shadow .16s ease;
    }

    .replicate-type-toggle label:hover span {
      transform: translateY(-1px);
      background: rgba(255, 255, 255, .72);
    }

    .replicate-type-toggle input:checked + span {
      border-color: rgba(31, 58, 51, .34);
      background: #ffffff;
      color: var(--deep-green);
      box-shadow:
        0 10px 20px rgba(15, 23, 42, .07),
        inset 0 0 0 1px rgba(31, 58, 51, .08);
    }

    .replicate-scope-summary {
      gap: 10px;
      margin-top: 14px;
    }

    .replicate-scope-summary span {
      border-color: rgba(28, 25, 23, .1);
      background: rgba(255, 255, 255, .74);
      padding: 12px;
      transition: transform .16s ease, border-color .16s ease, background .16s ease;
    }

    .replicate-scope-summary span:hover {
      transform: translateY(-1px);
      border-color: rgba(31, 58, 51, .22);
      background: #ffffff;
    }

    .replicate-link-copy strong {
      color: #173b36;
      font-size: 15px;
      line-height: 1.3;
    }

    .replicate-link-copy small,
    .replicate-link-status {
      max-width: 900px;
      color: #6a665d;
      font-size: 12px;
      font-weight: 720;
      line-height: 1.75;
    }

    .replicate-link-row {
      grid-template-columns: minmax(0, 1fr) minmax(154px, auto);
      gap: 12px;
      margin-top: 4px;
    }

    .replicate-link-row .btn,
    .replicate-asset-actions .btn {
      min-height: 46px;
      border-radius: 14px;
    }

    .replicate-workflow-toggle {
      gap: 14px;
    }

    .replicate-workflow-toggle span {
      min-height: 188px;
      border-radius: 20px;
      padding: 18px;
      transition:
        transform .18s ease,
        border-color .18s ease,
        background .18s ease,
        box-shadow .18s ease;
    }

    .replicate-workflow-toggle label:hover span {
      transform: translateY(-2px);
      border-color: rgba(31, 58, 51, .24);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .78),
        0 18px 34px rgba(15, 23, 42, .08);
    }

    .replicate-workflow-toggle strong {
      font-size: 16px;
      line-height: 1.25;
    }

    .replicate-workflow-toggle small {
      font-size: 12.5px;
      line-height: 1.72;
    }

    .replicate-workflow-fit {
      margin-top: 2px;
      padding-top: 10px;
      color: #4d544f;
      font-size: 11.5px;
      line-height: 1.55;
    }

    .replicate-upload-row {
      gap: 16px;
    }

    .replicate-upload-card {
      position: relative;
      overflow: hidden;
      min-height: 220px;
      border-width: 1px;
      border-color: rgba(31, 58, 51, .22);
      border-radius: 20px;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, .82), rgba(248, 251, 246, .9)),
        #fffdf8;
      padding: 18px;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .78),
        0 14px 30px rgba(15, 23, 42, .055);
      transition:
        transform .18s ease,
        border-color .18s ease,
        background .18s ease,
        box-shadow .18s ease;
    }

    .replicate-upload-card::before {
      content: "";
      position: absolute;
      inset: 12px;
      border: 1px dashed rgba(31, 58, 51, .18);
      border-radius: 16px;
      pointer-events: none;
    }

    .replicate-upload-card:hover,
    .replicate-upload-card:focus-within {
      transform: translateY(-2px);
      border-color: rgba(31, 58, 51, .48);
      background:
        linear-gradient(180deg, rgba(250, 255, 253, .94), rgba(236, 253, 245, .76)),
        #ffffff;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .82),
        0 22px 42px rgba(31, 58, 51, .11);
    }

    .replicate-upload-card > * {
      position: relative;
      z-index: 1;
    }

    .replicate-upload-card strong {
      align-items: flex-start;
      color: #17231f;
      font-size: 14px;
      line-height: 1.35;
    }

    .replicate-upload-card small {
      max-width: 820px;
      color: #69645b;
      font-size: 12px;
      line-height: 1.72;
    }

    .replicate-upload-card .replicate-empty {
      display: grid;
      place-items: center;
      min-height: 92px;
      border-color: rgba(31, 58, 51, .14);
      background: rgba(255, 255, 255, .62);
      color: #6f756f;
    }

    .replicate-preview-grid {
      grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
      gap: 10px;
    }

    .replicate-preview-card,
    .replicate-asset-card {
      transition:
        transform .16s ease,
        border-color .16s ease,
        box-shadow .16s ease,
        opacity .16s ease;
    }

    .replicate-preview-card:hover,
    .replicate-asset-card:hover {
      transform: translateY(-2px);
      border-color: rgba(31, 58, 51, .36);
      box-shadow: 0 16px 32px rgba(15, 23, 42, .09);
    }

    .replicate-asset-workbench {
      background:
        linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(250, 249, 244, .86)),
        #fffdf8;
    }

    .replicate-group-tabs {
      gap: 9px;
      margin-bottom: 16px;
    }

    .replicate-group-tabs button {
      min-height: 36px;
      border-color: rgba(28, 25, 23, .12);
      background: rgba(255, 255, 255, .78);
      padding: 8px 11px;
      transition:
        transform .16s ease,
        border-color .16s ease,
        background .16s ease,
        color .16s ease,
        box-shadow .16s ease;
    }

    .replicate-group-tabs button:hover {
      transform: translateY(-1px);
      border-color: rgba(31, 58, 51, .28);
      background: #ffffff;
    }

    .replicate-group-tabs button.is-active {
      border-color: rgba(31, 58, 51, .42);
      background: #ffffff;
      color: var(--deep-green);
      box-shadow:
        0 10px 22px rgba(31, 58, 51, .1),
        inset 0 0 0 1px rgba(31, 58, 51, .08);
    }

    .replicate-asset-board {
      gap: 16px;
    }

    .replicate-asset-group {
      border-color: rgba(28, 25, 23, .1);
      border-radius: 18px;
      background: rgba(255, 255, 255, .68);
      padding: 14px;
    }

    .replicate-asset-group-head {
      margin-bottom: 12px;
      color: #25231f;
      font-size: 12.5px;
    }

    .replicate-asset-grid {
      grid-template-columns: repeat(auto-fill, minmax(164px, 1fr));
      gap: 12px;
    }

    .replicate-asset-card {
      border-radius: 16px;
      background: #ffffff;
    }

    .replicate-asset-thumb img,
    .replicate-asset-fallback {
      aspect-ratio: 5 / 4;
    }

    .replicate-asset-title {
      color: #2f2c27;
      font-size: 11.5px;
      line-height: 1.45;
    }

    .replicate-canvas-settings {
      gap: 14px;
      border: 1px solid rgba(31, 58, 51, .12);
      border-radius: 18px;
      background: rgba(255, 255, 255, .58);
      padding: 14px;
    }

    .replicate-console-panel .field .label {
      color: #332f29;
      font-size: 12px;
      font-weight: 950;
      line-height: 1.25;
    }

    .replicate-console-panel .studio-field-hint {
      color: #746f65;
      font-size: 11.5px;
      line-height: 1.65;
    }

    .replicate-policy-box {
      align-items: flex-start;
      border-color: rgba(180, 83, 9, .2);
      border-radius: 16px;
      background:
        linear-gradient(180deg, rgba(255, 251, 235, .86), rgba(255, 253, 248, .88));
      color: #70470b;
      padding: 15px;
      font-size: 12px;
      line-height: 1.72;
    }

    .replicate-actions {
      justify-content: flex-end;
      border: 1px solid rgba(28, 25, 23, .1);
      border-radius: 18px;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, .86), rgba(250, 249, 244, .9));
      padding: 12px;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .76),
        0 14px 28px rgba(15, 23, 42, .055);
    }

    .replicate-actions .btn {
      min-height: 48px;
      border-radius: 14px;
      padding-inline: 18px;
    }

    .replicate-actions .btn-primary {
      min-width: min(360px, 100%);
      box-shadow:
        0 16px 34px rgba(31, 58, 51, .22),
        inset 0 1px 0 rgba(255, 255, 255, .18);
    }

    .replicate-actions .btn:hover,
    .replicate-output-actions .btn:hover,
    .replicate-link-row .btn:hover {
      transform: translateY(-1px);
    }

    .replicate-console-output {
      margin-top: 4px;
      background:
        linear-gradient(180deg, rgba(247, 253, 250, .98), rgba(255, 253, 248, .98)),
        #fffdf8;
    }

    .replicate-console-output .replicate-output-head h2 {
      font-size: 19px;
      line-height: 1.25;
    }

    .replicate-console-output .replicate-output-head p {
      font-size: 12.5px;
      font-weight: 720;
      line-height: 1.72;
    }

    .replicate-console-output .replicate-empty {
      min-height: 220px;
      border-radius: 16px;
      padding: 22px;
      font-size: 13px;
      font-weight: 820;
    }

    .replicate-console-output .replicate-output-actions {
      gap: 9px;
      border: 1px solid rgba(31, 58, 51, .12);
      border-radius: 16px;
      background: rgba(255, 255, 255, .66);
      padding: 10px;
    }

    .replicate-console-output .replicate-generated-card {
      border-radius: 16px;
      transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
    }

    .replicate-console-output .replicate-generated-card:hover {
      transform: translateY(-2px);
      border-color: rgba(31, 58, 51, .28);
      box-shadow: 0 18px 36px rgba(15, 23, 42, .1);
    }

    @media (max-width: 1180px) {
      .replicate-workspace {
        grid-template-columns: 1fr;
        max-width: 980px;
      }

      .replicate-workbench-main,
      #replicateInlineModelPanel {
        grid-column: 1;
      }

      #replicateInlineModelPanel {
        position: relative;
        top: auto;
        max-height: none;
        min-height: 0;
        overflow: visible;
      }

      #replicateInlineModelPanel .replicate-inline-model-grid,
      #replicateInlineModelPanel .replicate-model-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-height: none;
        overflow: visible;
        padding-right: 0;
      }
    }

    @media (max-width: 760px) {
      .replicate-view .saas-main {
        padding-inline: 14px;
      }

      .replicate-workspace,
      .replicate-workbench-main,
      .replicate-form-grid,
      .replicate-link-row,
      .replicate-upload-row,
      .replicate-workflow-toggle,
      .replicate-console-output .replicate-output-head {
        grid-template-columns: 1fr;
      }

      .replicate-link-row .control,
      .replicate-link-row .btn {
        width: 100%;
        min-width: 0;
      }

      .replicate-console-panel,
      #replicateInlineModelPanel,
      .replicate-console-output {
        border-radius: 16px;
        padding: 14px;
      }

      .replicate-form-grid > .field,
      .replicate-form-grid > .replicate-policy-box {
        grid-column: 1 / -1;
      }

      .replicate-workflow-toggle span {
        grid-template-columns: 40px minmax(0, 1fr);
        min-height: 0;
        padding: 13px;
      }

      .replicate-workflow-toggle span > i {
        width: 38px;
        height: 38px;
        padding: 8px;
      }

      .replicate-workflow-toggle input:checked + span::after {
        position: static;
        grid-column: 2;
        width: fit-content;
        margin-top: 1px;
      }

      #replicateInlineModelPanel .replicate-inline-model-grid,
      #replicateInlineModelPanel .replicate-model-grid {
        grid-template-columns: minmax(0, 1fr);
      }

      #replicateInlineModelPanel .replicate-model-card {
        grid-template-columns: 92px minmax(0, 1fr);
      }

      #replicateInlineModelPanel .replicate-model-visual {
        width: 92px;
        height: 128px;
      }

      #replicateInlineModelPanel .model-library-selected-actions,
      .replicate-actions,
      .replicate-output-actions {
        display: grid;
        grid-template-columns: 1fr;
      }

      #replicateInlineModelPanel .replicate-model-catalog-head {
        grid-template-columns: 1fr;
      }
    }

    /* Premium replicate workflow polish */
    .replicate-view {
      --replicate-ink: #111313;
      --replicate-paper: #fffdf8;
      --replicate-mist: #f5f8f2;
      --replicate-deep-green: var(--deep-green);
      --replicate-gold-line: var(--gold-line);
      --replicate-gold: #b7791f;
      --replicate-night: #071817;
      --replicate-night-2: #0b2523;
      --replicate-line: rgba(17, 19, 19, .1);
    }

    .replicate-hero {
      border-color: rgba(226, 207, 160, .18);
      background:
        radial-gradient(circle at 8% 18%, rgba(226, 207, 160, .2), transparent 28%),
        radial-gradient(circle at 86% 18%, rgba(251, 191, 36, .12), transparent 26%),
        linear-gradient(135deg, rgba(7, 24, 23, .96), rgba(3, 13, 12, .92));
      box-shadow:
        0 28px 80px rgba(0, 0, 0, .24),
        inset 0 1px 0 rgba(255, 255, 255, .08);
    }

    .replicate-guidance-strip {
      margin: -2px 0 16px;
      border: 1px solid rgba(17, 19, 19, .08);
      border-radius: 18px;
      background:
        linear-gradient(135deg, rgba(255, 255, 255, .9), rgba(244, 248, 244, .82)),
        #fffefa;
      padding: 10px;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .78),
        0 14px 34px rgba(15, 23, 42, .06);
    }

    .replicate-guidance-steps {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 9px;
    }

    .replicate-guidance-step {
      position: relative;
      display: grid;
      grid-template-columns: 42px 38px minmax(0, 1fr);
      gap: 10px;
      align-items: center;
      min-width: 0;
      min-height: 72px;
      border: 1px solid rgba(17, 19, 19, .08);
      border-radius: 14px;
      background: rgba(255, 255, 255, .78);
      padding: 10px;
      color: #4b514c;
      transition: border-color .16s ease, transform .16s ease, background .16s ease, box-shadow .16s ease;
    }

    .replicate-guidance-step::after {
      content: "";
      position: absolute;
      inset: 0 0 auto;
      height: 3px;
      border-radius: 14px 14px 0 0;
      background: transparent;
    }

    .replicate-guidance-index {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      border-radius: 12px;
      background: rgba(31, 58, 51, .08);
      color: #9b968a;
      font-size: 12px;
      font-weight: 950;
      line-height: 1;
      writing-mode: horizontal-tb;
      text-orientation: mixed;
      transform: none;
      rotate: 0deg;
    }

    .replicate-guidance-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 38px;
      height: 38px;
      border: 1px solid rgba(17, 19, 19, .08);
      border-radius: 13px;
      background: #f8faf6;
      color: #657069;
    }

    .replicate-guidance-copy {
      display: grid;
      gap: 3px;
      min-width: 0;
    }

    .replicate-guidance-copy strong {
      color: #171712;
      font-size: 12.5px;
      font-weight: 950;
      line-height: 1.25;
    }

    .replicate-guidance-copy small {
      color: #6c716a;
      font-size: 10.8px;
      font-weight: 780;
      line-height: 1.35;
    }

    .replicate-guidance-step.is-active {
      border-color: rgba(226, 207, 160, .34);
      background:
        radial-gradient(circle at 12% 8%, rgba(201, 168, 106, .14), transparent 42%),
        rgba(255, 255, 255, .94);
      box-shadow: 0 14px 30px rgba(201, 168, 106, .1);
      transform: translateY(-1px);
    }

    .replicate-guidance-step.is-active::after {
      background: linear-gradient(90deg, var(--replicate-gold-line), var(--replicate-deep-green));
    }

    .replicate-guidance-step.is-active .replicate-guidance-icon {
      border-color: rgba(226, 207, 160, .36);
      background: var(--gold-soft);
      color: var(--deep-green);
    }

    .replicate-guidance-step.is-done {
      border-color: rgba(31, 58, 51, .22);
      background:
        radial-gradient(circle at 14% 8%, rgba(201, 168, 106, .12), transparent 42%),
        rgba(251, 255, 253, .94);
    }

    .replicate-guidance-step.is-done::after {
      background: linear-gradient(90deg, var(--replicate-deep-green), var(--replicate-gold-line));
    }

    .replicate-guidance-step.is-done .replicate-guidance-icon {
      border-color: rgba(31, 58, 51, .24);
      background: var(--deep-green-soft);
      color: var(--replicate-deep-green);
    }

    .replicate-guidance-step.is-pending {
      opacity: .72;
    }

    .replicate-guidance-step.is-active [data-lucide="loader-2"] {
      animation: replicateSpin .8s linear infinite;
    }

    @keyframes replicateSpin {
      to { transform: rotate(360deg); }
    }

    .replicate-console-panel {
      border-color: rgba(17, 19, 19, .08);
      background:
        radial-gradient(circle at 100% 0%, rgba(251, 191, 36, .08), transparent 30%),
        linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(248, 248, 242, .96)),
        var(--replicate-paper);
    }

    .replicate-subsection,
    .replicate-link-box,
    .replicate-asset-workbench {
      border-color: rgba(31, 58, 51, .13);
      background:
        radial-gradient(circle at 100% 0%, rgba(201, 168, 106, .07), transparent 34%),
        linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(247, 250, 244, .9)),
        #fffefa;
    }

    .replicate-type-toggle span {
      border-color: rgba(17, 19, 19, .1);
      border-radius: 15px;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(249, 248, 242, .9)),
        #fffefa;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
    }

    .replicate-type-toggle input:checked + span {
      border-color: rgba(31, 58, 51, .42);
      background:
        linear-gradient(135deg, rgba(236, 253, 245, .95), rgba(240, 249, 255, .86));
      color: #0b5f57;
      box-shadow:
        0 0 0 1px rgba(31, 58, 51, .1),
        0 12px 26px rgba(31, 58, 51, .09);
    }

    .replicate-link-row .control {
      min-height: 48px;
      border-color: rgba(17, 19, 19, .12);
      border-radius: 14px;
      background: rgba(255, 255, 255, .92);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72);
    }

    .replicate-link-row .btn,
    #replicateGenerateBtn {
      min-height: 48px;
      border-radius: 14px;
    }

    #replicateGenerateBtn {
      background:
        linear-gradient(135deg, var(--deep-green), var(--gold-line) 62%, #b7791f);
      box-shadow: 0 18px 38px rgba(31, 58, 51, .22);
    }

    .replicate-workflow-toggle span {
      border-color: rgba(17, 19, 19, .09);
      background:
        linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(250, 248, 241, .94));
    }

    .replicate-workflow-toggle input:checked + span {
      border-color: rgba(31, 58, 51, .44);
      background:
        radial-gradient(circle at 100% 0%, rgba(251, 191, 36, .1), transparent 36%),
        linear-gradient(180deg, rgba(247, 255, 252, .98), rgba(236, 253, 245, .94));
    }

    #replicateInlineModelPanel {
      position: sticky;
      top: 18px;
      height: calc(100dvh - 36px);
      min-height: min(620px, calc(100dvh - 36px));
      max-height: calc(100dvh - 36px);
      align-self: start;
      overflow: hidden;
      overscroll-behavior: contain;
      padding: 12px;
      border-color: rgba(226, 207, 160, .16);
      background:
        radial-gradient(circle at 18% 0%, rgba(226, 207, 160, .18), transparent 34%),
        radial-gradient(circle at 100% 18%, rgba(251, 191, 36, .13), transparent 32%),
        linear-gradient(180deg, rgba(8, 30, 28, .98), rgba(4, 18, 17, .98)),
        var(--replicate-night);
      color: var(--ivory-warm);
      box-shadow:
        0 24px 70px rgba(0, 0, 0, .28),
        inset 0 1px 0 rgba(255, 255, 255, .08);
    }

    #replicateInlineModelPanel::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background-image:
        linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px);
      background-size: 28px 28px;
      mask-image: linear-gradient(180deg, rgba(0, 0, 0, .8), rgba(0, 0, 0, .24));
    }

    #replicateInlineModelPanel > * {
      position: relative;
      z-index: 1;
    }

    #replicateInlineModelPanel .replicate-subsection-head {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 10px;
      border-bottom-color: rgba(226, 207, 160, .12);
      padding-bottom: 10px;
    }

    #replicateInlineModelPanel .replicate-subsection-head p,
    #replicateInlineModelPanel .replicate-model-catalog-head span,
    #replicateInlineModelPanel .model-library-empty-copy span {
      display: -webkit-box;
      overflow: hidden;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    #replicateInlineModelPanel .replicate-subsection-head .model-library-clear-btn {
      width: auto;
      min-width: 118px;
      min-height: 34px;
      white-space: nowrap;
    }

    #replicateInlineModelPanel .replicate-subsection-head h3,
    #replicateInlineModelPanel .replicate-model-rail-title strong,
    #replicateInlineModelPanel .replicate-model-catalog-head strong,
    #replicateInlineModelPanel .replicate-sidebar-model-selected strong,
    #replicateInlineModelPanel .model-library-selected-copy strong {
      color: var(--ivory-warm);
    }

    #replicateInlineModelPanel .replicate-subsection-head p,
    #replicateInlineModelPanel .replicate-model-rail-title span,
    #replicateInlineModelPanel .replicate-model-catalog-head span,
    #replicateInlineModelPanel .replicate-sidebar-model-selected span,
    #replicateInlineModelPanel .model-library-selected-copy span {
      color: rgba(226, 232, 240, .76);
    }

    #replicateInlineModelPanel .replicate-model-rail-title,
    #replicateInlineModelPanel .replicate-sidebar-model-selected,
    #replicateInlineModelPanel .replicate-model-advanced,
    #replicateInlineModelPanel .replicate-model-catalog-head,
    #replicateInlineModelPanel .replicate-model-footer {
      border-color: rgba(226, 207, 160, .12);
      background:
        linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .035)),
        rgba(6, 38, 35, .62);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .055);
    }

    #replicateInlineModelPanel .replicate-model-control-rail {
      gap: 8px;
    }

    #replicateInlineModelPanel .replicate-model-rail-title,
    #replicateInlineModelPanel .replicate-model-catalog-head,
    #replicateInlineModelPanel .replicate-model-footer {
      padding: 9px 10px;
    }

    #replicateInlineModelPanel .replicate-model-rail-title {
      gap: 3px;
    }

    #replicateInlineModelPanel .replicate-sidebar-model-selected {
      min-height: 0;
      padding: 8px;
    }

    #replicateInlineModelPanel .replicate-sidebar-model-selected.is-empty {
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 8px;
    }

    #replicateInlineModelPanel .model-library-empty-state {
      grid-template-columns: 34px minmax(0, 1fr);
      gap: 8px;
      align-items: center;
    }

    #replicateInlineModelPanel .model-library-empty-avatar {
      width: 34px;
      height: 34px;
      border-radius: 12px;
    }

    #replicateInlineModelPanel .replicate-sidebar-model-selected.is-empty .model-library-scroll-btn {
      width: auto;
      min-width: 92px;
      min-height: 34px;
      padding-inline: 10px;
      white-space: nowrap;
    }

    .replicate-custom-model-panel {
      display: grid;
      gap: 8px;
      padding: 0;
      border: 1px solid rgba(226, 207, 160, .12);
      border-radius: 14px;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .035)),
        rgba(6, 38, 35, .62);
      overflow: hidden;
    }

    .replicate-custom-model-panel summary {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto auto;
      align-items: center;
      gap: 8px;
      min-height: 42px;
      padding: 9px;
      cursor: pointer;
      list-style: none;
      user-select: none;
    }

    /* C2 落地页复刻「高级设置（可选）」折叠区 —— 暗色 SaaS 金描边 */
    .replicate-advanced {
      display: grid;
      gap: 0;
      border: 1px solid rgba(226, 207, 160, .14);
      border-radius: 16px;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .025)),
        rgba(6, 38, 35, .58);
      overflow: hidden;
    }

    .replicate-advanced > summary {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 12px;
      min-height: 50px;
      padding: 12px 16px;
      cursor: pointer;
      list-style: none;
      user-select: none;
    }

    .replicate-advanced > summary::-webkit-details-marker {
      display: none;
    }

    .replicate-advanced > summary:hover {
      background: rgba(226, 207, 160, .05);
    }

    .replicate-advanced-summary {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      gap: 4px 12px;
      min-width: 0;
    }

    .replicate-advanced-summary-main {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
    }

    .replicate-advanced-summary-main i {
      color: rgba(226, 207, 160, .82);
      flex: 0 0 auto;
    }

    .replicate-advanced-summary-main strong {
      color: var(--ivory-warm);
      font-size: 13.5px;
      font-weight: 950;
      letter-spacing: .01em;
    }

    .replicate-advanced-summary small {
      color: rgba(226, 232, 240, .56);
      font-size: 11px;
      font-weight: 700;
      line-height: 1.3;
      min-width: 0;
    }

    .replicate-advanced-chevron {
      color: rgba(226, 207, 160, .78);
      flex: 0 0 auto;
      transition: transform .18s ease;
    }

    .replicate-advanced[open] .replicate-advanced-chevron {
      transform: rotate(180deg);
    }

    .replicate-advanced-grid {
      display: grid;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      gap: 14px;
      border-top: 1px solid rgba(226, 207, 160, .1);
      padding: 16px;
    }

    .replicate-advanced-grid > .field {
      grid-column: span 6;
      min-width: 0;
    }

    .replicate-advanced-grid > .field.is-wide,
    .replicate-advanced-grid > .replicate-canvas-settings {
      grid-column: 1 / -1;
    }

    @media (max-width: 520px) {
      .replicate-advanced-grid {
        grid-template-columns: 1fr;
      }

      .replicate-advanced-grid > .field {
        grid-column: 1 / -1;
      }
    }

    .replicate-custom-model-panel summary::-webkit-details-marker {
      display: none;
    }

    .replicate-custom-model-summary {
      display: grid;
      gap: 2px;
      min-width: 0;
    }

    .replicate-custom-model-summary small {
      color: rgba(226, 232, 240, .58);
      font-size: 10px;
      font-weight: 760;
      line-height: 1.25;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .replicate-custom-model-chevron {
      color: rgba(226, 207, 160, .76);
      transition: transform .16s ease;
    }

    .replicate-custom-model-panel[open] .replicate-custom-model-chevron {
      transform: rotate(180deg);
    }

    .replicate-custom-model-body {
      display: grid;
      gap: 8px;
      border-top: 1px solid rgba(226, 207, 160, .1);
      padding: 9px;
    }

    .replicate-custom-model-head,
    .replicate-custom-model-actions {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      min-width: 0;
    }

    .replicate-custom-model-head strong {
      color: var(--ivory-warm);
      font-size: 12px;
      font-weight: 950;
    }

    .replicate-custom-model-head span,
    .replicate-custom-model-panel p {
      color: rgba(226, 232, 240, .72);
      font-size: 10.5px;
      font-weight: 760;
      line-height: 1.45;
    }

    .replicate-custom-model-actions .model-library-clear-btn {
      flex: 1 1 0;
      min-width: 0;
      min-height: 32px;
      border-radius: 11px;
      padding-inline: 8px;
      font-size: 10.5px;
    }

    .replicate-custom-model-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 6px;
      min-height: 42px;
    }

    .replicate-custom-model-empty {
      grid-column: 1 / -1;
      display: grid;
      place-items: center;
      min-height: 42px;
      border: 1px dashed rgba(226, 207, 160, .18);
      border-radius: 11px;
      color: rgba(226, 232, 240, .62);
      font-size: 10.5px;
      font-weight: 780;
    }

    .replicate-custom-model-thumb {
      position: relative;
      aspect-ratio: 1;
      min-width: 0;
      overflow: hidden;
      border: 1px solid rgba(226, 207, 160, .14);
      border-radius: 11px;
      background: rgba(255, 255, 255, .06);
    }

    .replicate-custom-model-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .replicate-custom-model-remove {
      position: absolute;
      top: 4px;
      right: 4px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 18px;
      height: 18px;
      border-radius: 999px;
      border: 1px solid rgba(15, 23, 42, .18);
      background: rgba(255, 255, 255, .9);
      color: #0f172a;
      font-size: 12px;
      line-height: 1;
    }

    .replicate-custom-model-auth {
      display: flex;
      align-items: flex-start;
      gap: 7px;
      color: rgba(226, 232, 240, .82);
      font-size: 10.5px;
      font-weight: 820;
      line-height: 1.35;
    }

    .replicate-custom-model-auth input {
      margin-top: 1px;
      accent-color: var(--gold);
    }

    .replicate-custom-model-fields {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 6px;
    }

    .replicate-custom-model-fields .control {
      min-height: 32px;
      border-color: rgba(226, 207, 160, .14);
      border-radius: 10px;
      background: rgba(255, 255, 255, .92);
      color: #173b36;
      padding: 5px 7px;
      font-size: 10.5px;
      font-weight: 780;
    }

    #replicateInlineModelPanel .model-library-selected-media {
      grid-template-columns: 46px minmax(0, 1fr);
      gap: 9px;
    }

    #replicateInlineModelPanel .model-library-selected-thumb,
    #replicateInlineModelPanel .model-library-selected-media img {
      width: 46px;
      height: 46px;
      border-radius: 12px;
    }

    #replicateInlineModelPanel .model-library-selected-actions {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 6px;
    }

    #replicateInlineModelPanel .model-library-selected-actions .model-library-clear-btn {
      min-height: 32px;
    }

    #replicateInlineModelPanel .replicate-model-advanced summary {
      min-height: 36px;
      padding: 9px 10px;
    }

    #replicateInlineModelPanel .replicate-model-catalog {
      flex: 1 1 auto;
      min-height: 0;
      overflow: hidden;
    }

    #replicateInlineModelPanel .replicate-model-catalog-head {
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 8px;
    }

    #replicateInlineModelPanel .replicate-inline-model-grid,
    #replicateInlineModelPanel .replicate-model-grid {
      flex: 1 1 auto;
      min-height: 0;
      overflow-y: auto;
      overscroll-behavior: contain;
      scrollbar-gutter: stable;
      padding: 2px 5px 2px 0;
      scrollbar-color: rgba(226, 207, 160, .55) rgba(255, 255, 255, .06);
    }

    #replicateInlineModelPanel .replicate-model-filter-row button,
    #replicateInlineModelPanel .model-library-clear-btn,
    #replicateInlineModelPanel .model-library-scroll-btn,
    #replicateInlineModelPanel .model-library-select-btn,
    #replicateInlineModelPanel .model-library-preview-btn,
    #replicateInlineModelPanel .replicate-model-more-btn {
      border-color: rgba(226, 207, 160, .18);
      background: rgba(255, 255, 255, .065);
      color: rgba(236, 253, 245, .88);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045);
    }

    #replicateInlineModelPanel .replicate-model-filter-row button.is-active,
    #replicateInlineModelPanel .model-library-select-btn.is-selected {
      border-color: rgba(226, 207, 160, .52);
      background: rgba(201, 168, 106, .2);
      color: var(--gold-soft);
    }

    #replicateInlineModelPanel .model-library-clear-btn.is-muted {
      border-color: rgba(203, 213, 225, .12);
      background: rgba(2, 14, 13, .28);
      color: rgba(203, 213, 225, .76);
    }

    #replicateInlineModelPanel .model-library-clear-btn:hover,
    #replicateInlineModelPanel .model-library-scroll-btn:hover,
    #replicateInlineModelPanel .model-library-select-btn:hover,
    #replicateInlineModelPanel .model-library-preview-btn:hover,
    #replicateInlineModelPanel .replicate-model-more-btn:hover {
      transform: translateY(-1px);
      border-color: rgba(226, 207, 160, .62);
      background: rgba(201, 168, 106, .24);
      color: var(--ivory-warm);
    }

    #replicateInlineModelPanel .replicate-model-catalog-chip {
      border-color: rgba(251, 191, 36, .28);
      background: rgba(251, 191, 36, .12);
      color: #fde68a;
    }

    #replicateInlineModelPanel .replicate-model-card {
      border-color: rgba(226, 207, 160, .14);
      background:
        linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .035)),
        rgba(3, 30, 27, .68);
      color: var(--ivory-warm);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .055),
        0 16px 32px rgba(2, 14, 13, .2);
    }

    #replicateInlineModelPanel .replicate-model-card:hover,
    #replicateInlineModelPanel .replicate-model-card.is-selected {
      border-color: rgba(226, 207, 160, .54);
      background:
        radial-gradient(circle at 100% 0%, rgba(251, 191, 36, .12), transparent 38%),
        linear-gradient(180deg, rgba(201, 168, 106, .18), rgba(255, 255, 255, .045)),
        rgba(3, 30, 27, .76);
      box-shadow:
        0 0 0 1px rgba(226, 207, 160, .14),
        0 18px 38px rgba(2, 44, 40, .26);
    }

    #replicateInlineModelPanel .replicate-model-card.is-selected::after {
      background: rgba(31, 58, 51, .88);
      border-color: rgba(226, 207, 160, .36);
      color: var(--deep-green-soft);
    }

    #replicateInlineModelPanel .replicate-model-visual {
      border-color: rgba(226, 207, 160, .16);
      background:
        radial-gradient(circle at 50% 18%, rgba(226, 207, 160, .18), transparent 42%),
        linear-gradient(145deg, rgba(201, 168, 106, .14), rgba(226, 207, 160, .08)),
        rgba(2, 14, 13, .58);
    }

    #replicateInlineModelPanel .replicate-model-visual img {
      object-fit: cover;
      object-position: center top;
    }

    #replicateInlineModelPanel .replicate-model-card strong,
    #replicateInlineModelPanel .replicate-model-tags {
      color: var(--ivory-warm);
    }

    #replicateInlineModelPanel .replicate-model-tags {
      color: #99f6e4;
    }

    #replicateInlineModelPanel .replicate-model-meta span {
      border-color: rgba(226, 207, 160, .22);
      background: rgba(201, 168, 106, .12);
      color: var(--gold-soft);
    }

    #replicateInlineModelPanel .replicate-model-fit span {
      border-color: rgba(251, 191, 36, .24);
      background: rgba(251, 191, 36, .1);
      color: #fde68a;
    }

    #replicateInlineModelPanel .replicate-asset-empty.model-library-empty {
      border-color: rgba(226, 207, 160, .14);
      background: rgba(3, 30, 27, .58);
      color: rgba(226, 207, 160, .76);
    }

    #replicateInlineModelPanel .replicate-model-footer {
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 8px;
    }

    #replicateInlineModelPanel .replicate-model-count-chip {
      min-width: 0;
    }

    #replicateInlineModelPanel .replicate-model-count-chip span {
      display: -webkit-box;
      overflow: hidden;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      white-space: normal;
    }

    #replicateInlineModelPanel .replicate-model-more-btn {
      width: auto;
      min-width: 96px;
      min-height: 32px;
      padding-inline: 10px;
      white-space: nowrap;
    }

    #replicateInlineModelPanel .replicate-model-control-rail {
      display: grid;
      gap: 9px;
      flex: 0 0 auto;
      min-height: 0;
    }

    #replicateInlineModelPanel .replicate-custom-model-panel {
      max-height: none;
      overflow: hidden;
      scrollbar-gutter: stable;
    }

    #replicateInlineModelPanel .replicate-model-catalog {
      display: flex;
      flex-direction: column;
      flex: 1 1 auto;
      min-height: 320px;
      overflow: hidden;
    }

    #replicateInlineModelPanel .replicate-model-catalog-head {
      flex: 0 0 auto;
    }

    #replicateInlineModelPanel .replicate-model-filter-drawer {
      flex: 0 0 auto;
      border: 1px solid rgba(226, 207, 160, .14);
      border-radius: 14px;
      background:
        linear-gradient(135deg, rgba(201, 168, 106, .105), rgba(251, 191, 36, .035)),
        rgba(2, 14, 13, .28);
      margin: 0;
      overflow: hidden;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
    }

    #replicateInlineModelPanel .replicate-model-filter-drawer summary {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 8px;
      min-height: 38px;
      padding: 8px 10px;
      color: #e7fffb;
      cursor: pointer;
      list-style: none;
      user-select: none;
    }

    #replicateInlineModelPanel .replicate-model-filter-drawer summary::-webkit-details-marker {
      display: none;
    }

    #replicateInlineModelPanel .replicate-model-filter-trigger {
      display: grid;
      gap: 3px;
      min-width: 0;
    }

    #replicateInlineModelPanel .replicate-model-filter-title {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      min-width: 0;
      color: var(--deep-green-soft);
      font-size: 11.5px;
      font-weight: 950;
      line-height: 1.15;
    }

    #replicateInlineModelPanel .replicate-model-filter-summary {
      min-width: 0;
      color: rgba(203, 213, 225, .74);
      font-size: 10px;
      font-weight: 780;
      line-height: 1.35;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    #replicateInlineModelPanel .replicate-model-filter-drawer.has-active .replicate-model-filter-summary {
      color: #99f6e4;
    }

    #replicateInlineModelPanel .replicate-model-filter-chevron {
      color: rgba(226, 207, 160, .78);
      transition: transform .16s ease;
    }

    #replicateInlineModelPanel .replicate-model-filter-drawer[open] .replicate-model-filter-chevron {
      transform: rotate(180deg);
    }

    #replicateInlineModelPanel .replicate-model-filter-drawer .replicate-model-filter-bar {
      display: grid;
      gap: 9px;
      max-height: 228px;
      overflow: auto;
      border: 0;
      border-top: 1px solid rgba(226, 207, 160, .12);
      background: transparent;
      padding: 9px 10px 11px;
      margin: 0;
    }

    #replicateInlineModelPanel .replicate-inline-model-grid,
    #replicateInlineModelPanel .replicate-model-grid {
      flex: 1 1 auto;
      min-height: 240px;
      max-height: none;
      overflow-y: auto;
      overflow-x: hidden;
      overscroll-behavior: contain;
      scrollbar-gutter: stable;
    }

    #replicateInlineModelPanel .replicate-model-card {
      min-height: 136px;
    }

    #replicateInlineModelPanel .replicate-model-visual {
      height: 118px;
    }

    #replicateInlineModelPanel .replicate-model-footer {
      flex: 0 0 auto;
    }

    @media (max-width: 1180px) {
      #replicateInlineModelPanel {
        position: relative;
        top: auto;
        height: auto;
        min-height: 0;
        max-height: none;
        overflow: visible;
      }

      #replicateInlineModelPanel .replicate-inline-model-grid,
      #replicateInlineModelPanel .replicate-model-grid {
        min-height: 360px;
        max-height: min(680px, 72svh);
        overflow: visible;
      }
    }

    @media (max-width: 860px) {
      .replicate-guidance-steps {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 760px) {
      #replicateInlineModelPanel .replicate-model-catalog {
        min-height: 420px;
      }

      #replicateInlineModelPanel .replicate-inline-model-grid,
      #replicateInlineModelPanel .replicate-model-grid {
        min-height: 420px;
        max-height: none;
      }

      .replicate-guidance-step {
        grid-template-columns: auto 36px minmax(0, 1fr);
        min-height: 66px;
      }

      .replicate-guidance-icon {
        width: 36px;
        height: 36px;
      }
    }

    /* T30: landing workbench skin, scoped to the core generation flow only. */
    body.workbench-mode {
      --workbench-surface: color-mix(in srgb, var(--ivory) 88%, var(--panel));
      --workbench-panel: color-mix(in srgb, var(--panel) 94%, var(--ivory-warm));
      --workbench-panel-soft: color-mix(in srgb, var(--ivory-warm) 82%, var(--panel));
      --workbench-line: color-mix(in srgb, var(--line) 76%, var(--gold-line));
      --workbench-line-strong: color-mix(in srgb, var(--deep-green-line) 72%, var(--gold-line));
      --workbench-shadow: 0 18px 44px color-mix(in srgb, var(--charcoal) 10%, transparent);
      background:
        linear-gradient(180deg, var(--ivory-warm), var(--ivory));
      color: var(--ink);
    }

    body.workbench-mode #appShell {
      background:
        linear-gradient(180deg, var(--ivory-warm), var(--ivory));
    }

    body.workbench-mode #appShell > .main {
      background:
        linear-gradient(180deg, var(--ivory-warm), var(--ivory));
      padding: 34px 24px 44px;
    }

    body.workbench-mode #appShell > .main .main-shell {
      display: grid;
      gap: 12px;
    }

    body.workbench-mode #appShell > .sidebar {
      border-right: 1px solid color-mix(in srgb, var(--gold-line) 20%, transparent);
      background:
        linear-gradient(180deg, var(--night-panel), var(--obsidian));
      box-shadow: inset -1px 0 0 color-mix(in srgb, var(--gold-line) 10%, transparent);
      scrollbar-color: color-mix(in srgb, var(--gold-line) 42%, transparent) transparent;
    }

    body.workbench-mode #appShell > .sidebar > .flex:first-child {
      padding-bottom: 14px;
      border-bottom: 1px solid color-mix(in srgb, var(--gold-line) 14%, transparent);
    }

    body.workbench-mode #appShell > .sidebar .public-lang-switch {
      border-color: color-mix(in srgb, var(--gold-line) 28%, transparent);
      background: color-mix(in srgb, var(--charcoal) 80%, transparent);
      box-shadow: 0 12px 28px color-mix(in srgb, var(--obsidian) 28%, transparent);
    }

    body.workbench-mode #appShell > .sidebar .lang-btn.is-active,
    body.workbench-mode #appShell > .sidebar .lang-btn.active {
      background: var(--gold-soft);
      color: var(--ink);
    }

    body.workbench-mode .prep-flow-intro {
      border-color: color-mix(in srgb, var(--gold-line) 22%, transparent);
      border-radius: var(--radius);
      background:
        linear-gradient(180deg, color-mix(in srgb, var(--charcoal) 86%, transparent), color-mix(in srgb, var(--night) 92%, transparent));
      box-shadow: none;
    }

    body.workbench-mode .prep-flow-intro::before {
      background: linear-gradient(90deg, var(--gold), var(--deep-green));
      opacity: .78;
    }

    body.workbench-mode .prep-flow-intro h2,
    body.workbench-mode #appShell > .sidebar .flow-step-title {
      color: var(--wb-fg);
      letter-spacing: 0;
    }

    body.workbench-mode .prep-flow-intro p,
    body.workbench-mode #appShell > .sidebar .flow-step-why,
    body.workbench-mode #appShell > .sidebar .prep-summary-copy small {
      color: var(--wb-fg-soft);
    }

    body.workbench-mode .prep-flow-count,
    body.workbench-mode #appShell > .sidebar .prep-chip-state {
      border-color: color-mix(in srgb, var(--deep-green-line) 34%, transparent);
      background: color-mix(in srgb, var(--deep-green) 30%, transparent);
      color: var(--deep-green-soft);
    }

    body.workbench-mode .prep-flow-chip,
    body.workbench-mode #appShell > .sidebar .flow-step-card {
      border-color: color-mix(in srgb, var(--deep-green-line) 18%, transparent);
      border-radius: var(--radius);
      background: color-mix(in srgb, var(--charcoal) 72%, var(--obsidian));
      color: var(--wb-fg);
      box-shadow: none;
    }

    body.workbench-mode .prep-flow-chip.is-active,
    body.workbench-mode #appShell > .sidebar .flow-step-card.is-active {
      border-color: color-mix(in srgb, var(--gold-line) 46%, var(--deep-green-line));
      background:
        linear-gradient(135deg, color-mix(in srgb, var(--gold) 14%, var(--charcoal)), color-mix(in srgb, var(--deep-green) 52%, var(--obsidian)));
      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold-line) 14%, transparent);
    }

    body.workbench-mode .prep-flow-chip.is-locked,
    body.workbench-mode #appShell > .sidebar .flow-step-card.is-locked {
      opacity: .7;
    }

    body.workbench-mode .prep-chip-index,
    body.workbench-mode .flow-step-badge,
    body.workbench-mode .workbench-stepper-index {
      border-radius: var(--radius);
      background: var(--deep-green);
      color: var(--wb-fg);
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--deep-green-line) 24%, transparent);
    }

    body.workbench-mode .prep-flow-chip.is-active .prep-chip-index,
    body.workbench-mode .prep-flow-chip.is-done .prep-chip-index,
    body.workbench-mode .flow-step-card.is-active .flow-step-badge,
    body.workbench-mode .flow-step-card.is-complete .flow-step-badge,
    body.workbench-mode .workbench-stepper-item.active .workbench-stepper-index,
    body.workbench-mode .workbench-stepper-item.done .workbench-stepper-index {
      background: var(--gold);
      color: var(--ink);
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold-line) 30%, transparent);
    }

    body.workbench-mode .workbench-toolbar {
      top: 14px;
      border: 1px solid var(--workbench-line);
      border-radius: var(--radius);
      background: color-mix(in srgb, var(--panel) 94%, var(--ivory-warm));
      box-shadow: 0 14px 34px color-mix(in srgb, var(--charcoal) 9%, transparent);
    }

    body.workbench-mode .workbench-toolbar .btn,
    body.workbench-mode .guided-reset-btn,
    body.workbench-mode .workbench-next-action .btn,
    body.workbench-mode .slot-action-toolbar .btn {
      border-radius: var(--radius-sm);
    }

    body.workbench-mode .workbench-toolbar .btn-primary,
    body.workbench-mode #generateBtn,
    body.workbench-mode .prep-stage-action.is-primary,
    body.workbench-mode .prep-summary-action.is-primary {
      border-color: var(--gold-strong);
      background: linear-gradient(135deg, var(--gold), var(--gold-strong));
      color: var(--ink);
      box-shadow: 0 12px 24px color-mix(in srgb, var(--gold) 22%, transparent);
    }

    body.workbench-mode .workbench-toolbar .btn-outline,
    body.workbench-mode .workbench-reset-btn,
    body.workbench-mode .guided-reset-btn,
    body.workbench-mode .prep-stage-action,
    body.workbench-mode .prep-summary-action {
      border-color: var(--workbench-line);
      background: var(--workbench-panel);
      color: var(--deep-green);
      box-shadow: none;
    }

    body.workbench-mode .workbench-toolbar .hub-mini-pill,
    body.workbench-mode .workbench-current-pill,
    body.workbench-mode .settings-step-pill,
    body.workbench-mode .platform-live-pill,
    body.workbench-mode .slot-ratio-pill,
    body.workbench-mode .settings-status-badge {
      border-color: var(--deep-green-line);
      background: var(--deep-green-soft);
      color: var(--deep-green);
      border-radius: 999px;
    }

    body.workbench-mode .guided-workbench-panel,
    body.workbench-mode .main-flow-stage > .flow-step-card,
    body.workbench-mode .main-flow-stage > .panel,
    body.workbench-mode #platformStepPanel,
    body.workbench-mode #slotPlanStepPanel,
    body.workbench-mode #settingsStepPanel,
    body.workbench-mode #resultsStepPanel,
    body.workbench-mode .settings-panel {
      border: 1px solid var(--workbench-line);
      border-radius: var(--radius);
      background: var(--workbench-panel);
      color: var(--ink);
      box-shadow: var(--workbench-shadow);
    }

    body.workbench-mode .guided-workbench-panel {
      gap: 14px;
      padding: 18px !important;
    }

    body.workbench-mode .guided-panel-head h1 {
      color: var(--ink);
      font-size: 22px;
      letter-spacing: 0;
    }

    body.workbench-mode .guided-panel-mark {
      border: 1px solid color-mix(in srgb, var(--charcoal) 28%, transparent);
      border-radius: 999px;
      background: var(--charcoal);
      color: var(--wb-fg);
    }

    body.workbench-mode .hero-kicker {
      background: var(--deep-green-soft);
      color: var(--deep-green);
    }

    body.workbench-mode .workbench-stepper {
      gap: 10px;
      grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    }

    body.workbench-mode .workbench-stepper-item {
      min-height: 90px;
      border: 1px solid var(--workbench-line);
      border-radius: var(--radius);
      background: var(--panel);
      color: var(--ink-soft);
      box-shadow: none;
    }

    body.workbench-mode .workbench-stepper-item.active {
      border-color: var(--deep-green-line);
      background: linear-gradient(180deg, var(--deep-green-soft), var(--panel));
      color: var(--deep-green);
      box-shadow: inset 0 -3px 0 var(--deep-green);
    }

    body.workbench-mode .workbench-stepper-item.done {
      border-color: var(--gold-line);
      background: linear-gradient(180deg, var(--gold-soft), var(--panel));
      color: var(--ink);
    }

    body.workbench-mode .workbench-stepper-copy strong,
    body.workbench-mode .main-flow-stage .flow-step-title,
    body.workbench-mode .settings-header h2,
    body.workbench-mode .settings-section-title h3,
    body.workbench-mode .platform-shell-head h2,
    body.workbench-mode .slot-card-title,
    body.workbench-mode .result-section-header h3 {
      color: var(--ink);
      letter-spacing: 0;
    }

    body.workbench-mode .workbench-stepper-copy small,
    body.workbench-mode .main-flow-stage .flow-step-why,
    body.workbench-mode .settings-header p,
    body.workbench-mode .settings-section-title p,
    body.workbench-mode .platform-shell-head p,
    body.workbench-mode .slot-card-brief {
      color: var(--muted);
    }

    body.workbench-mode .main-flow-stage {
      gap: 12px;
    }

    body.workbench-mode .main-flow-stage .flow-step-card::before {
      width: 3px;
      background: var(--gold);
    }

    body.workbench-mode .main-flow-stage .flow-step-card.is-active {
      border-color: var(--workbench-line-strong);
      background: linear-gradient(145deg, var(--panel), var(--ivory-warm));
      box-shadow: 0 18px 42px color-mix(in srgb, var(--deep-green) 10%, transparent);
    }

    body.workbench-mode .main-flow-stage .flow-step-need,
    body.workbench-mode .main-flow-stage .prep-stage-footer,
    body.workbench-mode .main-flow-stage .prep-stage-summary,
    body.workbench-mode .confirm-box,
    body.workbench-mode .guided-summary-panel,
    body.workbench-mode .language-policy-note,
    body.workbench-mode .settings-alert-panel,
    body.workbench-mode .size-summary,
    body.workbench-mode .platform-shell,
    body.workbench-mode .platform-current-card,
    body.workbench-mode .amazon-package-panel,
    body.workbench-mode .model-reference-panel {
      border-color: var(--workbench-line);
      border-radius: var(--radius);
      background: var(--workbench-panel-soft);
      color: var(--ink-soft);
      box-shadow: none;
    }

    body.workbench-mode .main-flow-stage .flow-step-need,
    body.workbench-mode .language-policy-note {
      border-left-color: var(--gold);
      background: var(--gold-soft);
      color: var(--ink-soft);
    }

    body.workbench-mode .control,
    body.workbench-mode input.control,
    body.workbench-mode textarea.control,
    body.workbench-mode select.control {
      border-color: var(--workbench-line);
      border-radius: var(--radius-sm);
      background: var(--panel);
      color: var(--ink);
      box-shadow: none;
    }

    body.workbench-mode .control:focus,
    body.workbench-mode input.control:focus,
    body.workbench-mode textarea.control:focus,
    body.workbench-mode select.control:focus {
      border-color: var(--gold);
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 18%, transparent);
    }

    body.workbench-mode .upload-zone {
      border-color: var(--gold-line);
      border-radius: var(--radius);
      background:
        linear-gradient(145deg, var(--panel), var(--ivory-warm));
      color: var(--ink);
    }

    body.workbench-mode .upload-zone:hover,
    body.workbench-mode .upload-zone.dragover {
      border-color: var(--gold);
      background: var(--gold-soft);
    }

    body.workbench-mode .platform-nav {
      display: grid;
      gap: 10px;
    }

    body.workbench-mode .platform-nav-group,
    body.workbench-mode .platform-card-btn,
    body.workbench-mode .settings-section,
    body.workbench-mode .settings-alert-item,
    body.workbench-mode .slot-card,
    body.workbench-mode .result-card,
    body.workbench-mode .generation-progress-card,
    body.workbench-mode .model-reference-mode,
    body.workbench-mode .model-choice-step,
    body.workbench-mode .main-model-library,
    body.workbench-mode .main-model-selected,
    body.workbench-mode .replicate-model-card,
    body.workbench-mode .main-library-card {
      border-color: var(--workbench-line);
      border-radius: var(--radius);
      background: var(--panel);
      color: var(--ink);
      box-shadow: none;
    }

    body.workbench-mode .platform-nav-group-toggle,
    body.workbench-mode .platform-card-btn {
      border-radius: var(--radius);
    }

    body.workbench-mode .platform-card-btn:hover,
    body.workbench-mode .platform-card-btn.active,
    body.workbench-mode .slot-card:hover,
    body.workbench-mode .slot-card.selected,
    body.workbench-mode .settings-alert-item.is-active,
    body.workbench-mode .language-chip-grid .chip.active,
    body.workbench-mode .model-reference-mode:has(input:checked) {
      border-color: var(--gold-line);
      background: var(--gold-soft);
      color: var(--ink);
      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 18%, transparent);
    }

    body.workbench-mode .platform-card-icon,
    body.workbench-mode .platform-current-icon,
    body.workbench-mode .workbench-next-action-icon {
      border-radius: var(--radius);
      background: var(--deep-green);
      color: var(--wb-fg);
      box-shadow: none;
    }

    body.workbench-mode .platform-card-tag,
    body.workbench-mode .product-fact-status,
    body.workbench-mode .slot-material-status,
    body.workbench-mode .slot-stage-pill,
    body.workbench-mode .slot-strategy-row,
    body.workbench-mode .twin-fact-chip,
    body.workbench-mode .angle-chip,
    body.workbench-mode .coverage-pill,
    body.workbench-mode .chip {
      border-color: var(--workbench-line);
      border-radius: var(--radius-sm);
      background: var(--workbench-panel-soft);
      color: var(--ink-soft);
    }

    body.workbench-mode .chip.active,
    body.workbench-mode .angle-chip.is-covered,
    body.workbench-mode .coverage-pill.is-covered {
      border-color: var(--deep-green-line);
      background: var(--deep-green-soft);
      color: var(--deep-green);
    }

    body.workbench-mode .angle-chip.is-missing,
    body.workbench-mode .coverage-pill.is-missing,
    body.workbench-mode .settings-alert-item.warn {
      border-color: var(--attention-line);
      background: var(--attention-soft);
      color: var(--attention);
    }

    body.workbench-mode .slot-card {
      display: grid;
      gap: 10px;
    }

    body.workbench-mode .slot-card input[type="checkbox"],
    body.workbench-mode .model-reference-auth input,
    body.workbench-mode .model-reference-mode input {
      accent-color: var(--gold);
    }

    body.workbench-mode .slot-strategy-grid {
      gap: 7px;
    }

    body.workbench-mode .slot-strategy-row {
      padding: 7px 8px;
    }

    body.workbench-mode .settings-alert-item.ready,
    body.workbench-mode .settings-alert-item.is-active.ready {
      border-color: var(--deep-green-line);
      background: var(--deep-green-soft);
      color: var(--deep-green);
    }

    body.workbench-mode .settings-alert-item.danger,
    body.workbench-mode .result-card.is-error,
    body.workbench-mode .generation-progress-card.is-error {
      border-color: var(--danger-line);
      background: var(--danger-soft);
      color: var(--danger);
    }

    body.workbench-mode .language-chip-grid .chip {
      border-color: var(--workbench-line);
      border-radius: var(--radius-sm);
      background: var(--panel);
      color: var(--ink-soft);
    }

    body.workbench-mode .workbench-next-action {
      border-color: var(--gold-line);
      border-radius: var(--radius);
      background: var(--workbench-panel);
      box-shadow: 0 18px 36px color-mix(in srgb, var(--charcoal) 14%, transparent);
    }

    body.workbench-mode .workbench-next-action::after,
    body.workbench-mode .flow-step-card::after {
      background: linear-gradient(105deg, transparent, color-mix(in srgb, var(--gold) 12%, transparent), transparent);
    }

    body.workbench-mode .workbench-next-action-copy strong,
    body.workbench-mode .generation-progress-title strong,
    body.workbench-mode .result-card strong {
      color: var(--ink);
    }

    body.workbench-mode .workbench-next-action-copy small,
    body.workbench-mode .generation-progress-copy,
    body.workbench-mode .result-card small {
      color: var(--muted);
    }

    body.workbench-mode .generation-progress-track {
      background: var(--line-soft);
    }

    body.workbench-mode .generation-progress-track span {
      background: linear-gradient(90deg, var(--gold), var(--deep-green));
    }

    body.workbench-mode .main-model-library,
    body.workbench-mode .main-model-selected,
    body.workbench-mode .replicate-model-card,
    body.workbench-mode .main-library-card {
      background: var(--workbench-panel-soft);
    }

    body.workbench-mode .main-model-library-head h4,
    body.workbench-mode .main-model-selected strong,
    body.workbench-mode .replicate-model-card strong,
    body.workbench-mode .main-library-title-row strong {
      color: var(--ink);
    }

    body.workbench-mode .main-model-library-head p,
    body.workbench-mode .main-model-selected span,
    body.workbench-mode .replicate-model-card span,
    body.workbench-mode .main-library-usage {
      color: var(--muted);
    }

    body.workbench-mode .main-library-photo,
    body.workbench-mode .replicate-model-visual,
    body.workbench-mode .model-library-selected-thumb,
    body.workbench-mode .model-reference-thumb,
    body.workbench-mode .twin-angle-cell .twin-angle-thumb {
      border-color: var(--workbench-line);
      border-radius: var(--radius);
      background: var(--ivory);
    }

    /* T31: product upload and fact-card skin, scoped to the workbench flow. */
    body.workbench-mode #flowStep2Panel,
    body.workbench-mode #profilePanel,
    body.workbench-mode #twinStatusPanel {
      --facts-panel: color-mix(in srgb, var(--panel) 94%, var(--ivory-warm));
      --facts-panel-soft: color-mix(in srgb, var(--ivory-warm) 88%, var(--panel));
      --facts-ink-subtle: color-mix(in srgb, var(--ink-soft) 82%, var(--muted));
      --facts-line: color-mix(in srgb, var(--line) 68%, var(--gold-line));
    }

    body.workbench-mode #flowStep2Panel .flow-step-header,
    body.workbench-mode #profilePanel .flow-step-header,
    body.workbench-mode #twinStatusPanel .flow-step-header {
      align-items: center;
    }

    body.workbench-mode #flowStep2Panel .flow-step-need,
    body.workbench-mode #profilePanel .flow-step-need,
    body.workbench-mode #twinStatusPanel .flow-step-need {
      border: 1px solid var(--gold-line);
      border-left: 3px solid var(--gold);
      background: linear-gradient(90deg, var(--gold-soft), color-mix(in srgb, var(--ivory-warm) 92%, var(--panel)));
      color: var(--ink-soft);
      font-weight: 780;
    }

    body.workbench-mode #anglesChecklist,
    body.workbench-mode #twinCoverageBody .twin-coverage-row {
      gap: 7px;
    }

    body.workbench-mode #flowStep2Panel .angle-chip,
    body.workbench-mode #twinStatusPanel .angle-chip,
    body.workbench-mode #twinStatusPanel .coverage-pill {
      border: 1px solid var(--facts-line);
      border-radius: var(--radius-sm);
      background: var(--facts-panel-soft);
      color: var(--facts-ink-subtle);
      font-weight: 850;
    }

    body.workbench-mode #flowStep2Panel .angle-chip.is-required {
      border-color: var(--gold-line);
      background: var(--gold-soft);
      color: var(--ink-soft);
    }

    body.workbench-mode #flowStep2Panel .angle-chip.is-covered,
    body.workbench-mode #twinStatusPanel .angle-chip.is-covered,
    body.workbench-mode #twinStatusPanel .coverage-pill.is-covered {
      border-color: var(--deep-green-line);
      background: var(--deep-green-soft);
      color: var(--deep-green);
    }

    body.workbench-mode #flowStep2Panel .angle-chip.is-missing,
    body.workbench-mode #twinStatusPanel .angle-chip.is-missing,
    body.workbench-mode #twinStatusPanel .coverage-pill.is-missing {
      border-color: var(--danger-line);
      background: var(--danger-soft);
      color: var(--danger);
    }

    body.workbench-mode #flowStep2Panel .upload-zone {
      min-height: 224px;
      border: 1px dashed var(--gold-line);
      background:
        linear-gradient(145deg, color-mix(in srgb, var(--panel) 94%, var(--ivory-warm)), var(--ivory-warm));
      color: var(--ink);
      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold-line) 18%, transparent);
    }

    body.workbench-mode #flowStep2Panel .upload-zone:hover,
    body.workbench-mode #flowStep2Panel .upload-zone.dragover {
      border-color: var(--gold);
      background:
        linear-gradient(145deg, var(--gold-soft), color-mix(in srgb, var(--panel) 84%, var(--ivory-warm)));
      transform: translateY(-1px);
    }

    body.workbench-mode #flowStep2Panel .upload-zone .text-stone-400,
    body.workbench-mode #twinStatusPanel .text-stone-400,
    body.workbench-mode #profilePanel .text-stone-400 {
      color: var(--muted) !important;
    }

    body.workbench-mode #flowStep2Panel .upload-size-pill,
    body.workbench-mode #twinStatusPanel .upload-size-pill {
      border-color: var(--deep-green-line);
      background: var(--deep-green-soft);
      color: var(--deep-green);
      letter-spacing: 0;
    }

    body.workbench-mode #flowStep2Panel .upload-size-note {
      color: var(--muted);
    }

    body.workbench-mode #thumbGrid {
      grid-template-columns: repeat(auto-fill, minmax(106px, 1fr));
      gap: 10px;
    }

    body.workbench-mode #thumbGrid .thumb {
      border-color: var(--facts-line);
      border-radius: var(--radius);
      background: var(--ivory-warm);
      box-shadow: 0 10px 22px color-mix(in srgb, var(--charcoal) 8%, transparent);
    }

    body.workbench-mode #thumbGrid .thumb-index,
    body.workbench-mode #thumbGrid .sequence-badge {
      background: color-mix(in srgb, var(--charcoal) 88%, transparent);
      color: var(--ivory-warm);
    }

    body.workbench-mode #thumbGrid .thumb-remove {
      background: color-mix(in srgb, var(--charcoal) 82%, transparent);
      color: var(--ivory-warm);
    }

    body.workbench-mode #thumbGrid .thumb-zoom {
      background: color-mix(in srgb, var(--charcoal) 78%, transparent);
      color: var(--ivory-warm);
    }

    body.workbench-mode #profilePanel .profile-fields-details {
      border-color: var(--facts-line);
      border-radius: var(--radius);
      background: var(--facts-panel-soft);
    }

    body.workbench-mode #profilePanel .profile-fields-details > summary {
      color: var(--deep-green);
      font-weight: 900;
    }

    body.workbench-mode #profilePanel .profile-fields-details > summary::before {
      color: var(--gold-strong);
    }

    body.workbench-mode #profileConfirmBox {
      border-color: var(--gold-line);
      background: var(--gold-soft);
      color: var(--ink);
    }

    body.workbench-mode #profileConfirmBox.confirmed {
      border-color: var(--deep-green-line);
      background: var(--deep-green-soft);
      color: var(--deep-green);
    }

    body.workbench-mode #profileConfirmBox .text-stone-100 {
      color: var(--ink) !important;
    }

    body.workbench-mode #profileConfirmBox.confirmed .text-stone-100 {
      color: var(--deep-green) !important;
    }

    body.workbench-mode #profileConfirmBox .text-stone-400 {
      color: var(--muted) !important;
    }

    body.workbench-mode .profile-confirm-inline {
      border-color: var(--gold-line);
      border-radius: var(--radius);
      background: color-mix(in srgb, var(--panel) 96%, var(--ivory-warm));
      box-shadow: 0 18px 36px color-mix(in srgb, var(--charcoal) 14%, transparent);
    }

    body.workbench-mode .profile-confirm-inline strong {
      color: var(--deep-green);
    }

    body.workbench-mode .profile-confirm-inline p,
    body.workbench-mode .profile-confirm-inline label {
      color: var(--ink-soft);
    }

    body.workbench-mode #profilePanel .recognition-overlay {
      background: linear-gradient(120deg, color-mix(in srgb, var(--gold-soft) 70%, transparent), transparent 52%);
    }

    body.workbench-mode #profilePanel .recognition-card {
      border-color: var(--gold-line);
      background: color-mix(in srgb, var(--charcoal) 92%, var(--deep-green));
      color: var(--ivory-warm);
      box-shadow: 0 22px 54px color-mix(in srgb, var(--charcoal) 28%, transparent);
    }

    body.workbench-mode #profilePanel .scan-frame {
      border-color: var(--gold-line);
      background: color-mix(in srgb, var(--deep-green) 24%, var(--charcoal));
    }

    body.workbench-mode #profilePanel .scan-frame::before {
      background: var(--gold);
      box-shadow: 0 0 18px color-mix(in srgb, var(--gold) 74%, transparent);
    }

    body.workbench-mode #profilePanel.recognizing .product-field,
    body.workbench-mode #profilePanel.recognizing #rawBrief {
      border-color: var(--gold);
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 18%, transparent);
      background-image: linear-gradient(100deg, transparent, color-mix(in srgb, var(--gold-soft) 72%, transparent), transparent);
    }

    body.workbench-mode #twinStatusPanel .twin-state-badge {
      border-radius: 999px;
      letter-spacing: 0;
    }

    body.workbench-mode #twinStatusPanel .twin-state-idle {
      border: 1px solid var(--facts-line);
      background: var(--facts-panel-soft);
      color: var(--muted);
    }

    body.workbench-mode #twinStatusPanel .twin-state-busy {
      border: 1px solid var(--gold-line);
      background: var(--gold-soft);
      color: var(--attention);
    }

    body.workbench-mode #twinStatusPanel .twin-state-ready {
      border: 1px solid var(--deep-green-line);
      background: var(--deep-green-soft);
      color: var(--deep-green);
    }

    body.workbench-mode #twinStatusPanel .twin-decision {
      border: 1px solid var(--deep-green-line);
      border-radius: var(--radius);
      background:
        linear-gradient(145deg, var(--facts-panel), var(--facts-panel-soft));
      color: var(--ink);
      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold-line) 18%, transparent);
    }

    body.workbench-mode #twinStatusPanel .twin-decision.is-busy {
      border-color: var(--gold-line);
      background:
        linear-gradient(145deg, var(--panel), var(--ivory-warm));
      color: var(--ink);
      box-shadow: 0 18px 38px color-mix(in srgb, var(--gold) 12%, transparent);
    }

    body.workbench-mode #twinStatusPanel .twin-decision-title,
    body.workbench-mode #twinStatusPanel .twin-decision.is-busy .twin-decision-title {
      color: var(--ink);
    }

    body.workbench-mode #twinStatusPanel .twin-decision-title i {
      color: var(--deep-green);
    }

    body.workbench-mode #twinStatusPanel .twin-decision-copy,
    body.workbench-mode #twinStatusPanel .twin-decision.is-busy .twin-decision-copy {
      color: var(--muted);
    }

    body.workbench-mode #twinStatusPanel .twin-decision-status {
      border-color: var(--deep-green-line);
      background: var(--deep-green-soft);
      color: var(--deep-green);
    }

    body.workbench-mode #twinStatusPanel .twin-fact-chip {
      border-color: var(--facts-line);
      background: var(--panel);
      color: var(--ink-soft);
    }

    body.workbench-mode #twinStatusPanel .twin-fact-chip span {
      color: var(--deep-green);
    }

    body.workbench-mode #twinStatusPanel .twin-decision-card {
      min-height: 124px;
      border-color: var(--facts-line);
      border-radius: var(--radius);
      background: var(--panel);
      color: var(--ink);
      box-shadow: none;
    }

    body.workbench-mode #twinStatusPanel .twin-decision-card.is-primary {
      border-color: var(--gold-line);
      background: linear-gradient(145deg, var(--gold-soft), var(--panel));
    }

    body.workbench-mode #twinStatusPanel .twin-decision-card.is-warn {
      border-color: var(--attention-line);
      background: var(--attention-soft);
    }

    body.workbench-mode #twinStatusPanel .twin-decision-card strong {
      color: var(--ink);
    }

    body.workbench-mode #twinStatusPanel .twin-decision-card strong i {
      color: var(--deep-green);
    }

    body.workbench-mode #twinStatusPanel .twin-decision-card small {
      color: var(--facts-ink-subtle);
    }

    body.workbench-mode #twinStatusPanel .twin-work-scan {
      border-color: var(--facts-line);
      background:
        linear-gradient(180deg, var(--ivory-warm), var(--panel));
    }

    body.workbench-mode #twinStatusPanel .twin-work-scan::before {
      border-color: var(--facts-line);
      background:
        linear-gradient(90deg, color-mix(in srgb, var(--deep-green-line) 40%, transparent) 1px, transparent 1px),
        linear-gradient(180deg, color-mix(in srgb, var(--deep-green-line) 40%, transparent) 1px, transparent 1px);
      background-size: 22px 22px;
    }

    body.workbench-mode #twinStatusPanel .twin-work-scan::after {
      background: linear-gradient(90deg, transparent, var(--gold), var(--deep-green), transparent);
      box-shadow: 0 0 18px color-mix(in srgb, var(--gold) 42%, transparent);
    }

    body.workbench-mode #twinStatusPanel .twin-work-step {
      border-color: var(--facts-line);
      background: var(--panel);
      color: var(--muted);
    }

    body.workbench-mode #twinStatusPanel .twin-work-step.is-done,
    body.workbench-mode #twinStatusPanel .twin-work-step.is-active {
      border-color: var(--deep-green-line);
      background: var(--deep-green-soft);
      color: var(--deep-green);
    }

    body.workbench-mode #twinStatusPanel .twin-work-step.is-warn {
      border-color: var(--attention-line);
      background: var(--attention-soft);
      color: var(--attention);
    }

    body.workbench-mode #twinStatusPanel .twin-detail-drawer,
    body.workbench-mode #twinStatusPanel .twin-action-guide,
    body.workbench-mode #twinStatusPanel .twin-angle-cell,
    body.workbench-mode #twinStatusPanel .twin-variant-card,
    body.workbench-mode #twinStatusPanel .twin-cat-table,
    body.workbench-mode #twinStatusPanel .twin-summary-cell,
    body.workbench-mode #twinStatusPanel .twin-spec-block,
    body.workbench-mode #twinStatusPanel .twin-asset,
    body.workbench-mode #twinStatusPanel .twin-view {
      border-color: var(--facts-line);
      border-radius: var(--radius);
      background: var(--facts-panel-soft);
      color: var(--ink-soft);
    }

    body.workbench-mode #twinStatusPanel .twin-detail-drawer > summary {
      color: var(--deep-green);
    }

    body.workbench-mode #twinStatusPanel .twin-detail-drawer > summary::after {
      color: var(--gold-strong);
    }

    body.workbench-mode #twinStatusPanel .twin-detail-drawer small,
    body.workbench-mode #twinStatusPanel .twin-coverage-head small,
    body.workbench-mode #twinStatusPanel .twin-coverage-section .twin-coverage-summary,
    body.workbench-mode #twinStatusPanel .twin-action-guide p,
    body.workbench-mode #twinStatusPanel .twin-angle-cell .twin-angle-meta,
    body.workbench-mode #twinStatusPanel .twin-cat-row dt,
    body.workbench-mode #twinStatusPanel .twin-spec-block dt {
      color: var(--muted);
    }

    body.workbench-mode #twinStatusPanel .twin-coverage-head h3,
    body.workbench-mode #twinStatusPanel .twin-coverage-section h4,
    body.workbench-mode #twinStatusPanel .twin-action-guide strong,
    body.workbench-mode #twinStatusPanel .twin-angle-cell .twin-angle-name,
    body.workbench-mode #twinStatusPanel .twin-variant-card strong,
    body.workbench-mode #twinStatusPanel .twin-pending-rescan-head strong,
    body.workbench-mode #twinStatusPanel .twin-view-angle,
    body.workbench-mode #twinStatusPanel .twin-asset span,
    body.workbench-mode #twinStatusPanel .twin-spec-block dd {
      color: var(--ink);
    }

    body.workbench-mode #twinStatusPanel .twin-action-guide button,
    body.workbench-mode #twinStatusPanel .twin-angle-action,
    body.workbench-mode #twinStatusPanel .twin-view-actions button {
      border-color: var(--deep-green-line);
      border-radius: var(--radius-sm);
      background: var(--panel);
      color: var(--deep-green);
    }

    body.workbench-mode #twinStatusPanel .twin-action-guide button:hover,
    body.workbench-mode #twinStatusPanel .twin-angle-action:hover,
    body.workbench-mode #twinStatusPanel .twin-view-actions button:hover {
      border-color: var(--gold-line);
      background: var(--gold-soft);
      color: var(--ink);
    }

    body.workbench-mode #twinStatusPanel .twin-locked,
    body.workbench-mode #twinStatusPanel .twin-progress {
      border-color: var(--gold-line);
      border-radius: var(--radius);
      background: var(--gold-soft);
      color: var(--ink-soft);
    }

    body.workbench-mode #twinStatusPanel .twin-locked strong {
      color: var(--ink);
    }

    body.workbench-mode #twinStatusPanel .twin-locked small {
      color: var(--muted);
    }

    body.workbench-mode #twinStatusPanel .twin-anchor,
    body.workbench-mode #twinStatusPanel .twin-usefulness,
    body.workbench-mode #twinStatusPanel .twin-pass.ok {
      border-color: var(--deep-green-line);
      background: var(--deep-green-soft);
      color: var(--deep-green);
    }

    body.workbench-mode #twinStatusPanel .twin-anchor strong,
    body.workbench-mode #twinStatusPanel .twin-pass.ok strong {
      color: var(--deep-green);
    }

    body.workbench-mode #twinStatusPanel .twin-pass,
    body.workbench-mode #twinStatusPanel .twin-metric {
      border-color: var(--facts-line);
      border-radius: var(--radius-sm);
      background: var(--panel);
      color: var(--muted);
    }

    body.workbench-mode #twinStatusPanel .twin-pass strong,
    body.workbench-mode #twinStatusPanel .twin-metric strong {
      color: var(--ink);
    }

    body.workbench-mode #twinStatusPanel .twin-pass.busy,
    body.workbench-mode #twinStatusPanel .twin-pass.warn,
    body.workbench-mode #twinStatusPanel .twin-action-guide.is-soft-warn {
      border-color: var(--attention-line);
      background: var(--attention-soft);
      color: var(--attention);
    }

    body.workbench-mode #twinStatusPanel .twin-pass.busy strong,
    body.workbench-mode #twinStatusPanel .twin-pass.warn strong,
    body.workbench-mode #twinStatusPanel .twin-action-guide.is-soft-warn strong,
    body.workbench-mode #twinStatusPanel .twin-action-guide.is-soft-warn p {
      color: var(--attention);
    }

    body.workbench-mode #twinStatusPanel .twin-warn,
    body.workbench-mode #twinStatusPanel .twin-angle-cell.is-missing,
    body.workbench-mode #twinStatusPanel .twin-angle-action.is-warn {
      border-color: var(--danger-line);
      background: var(--danger-soft);
      color: var(--danger);
    }

    body.workbench-mode #twinStatusPanel .twin-warn strong,
    body.workbench-mode #twinStatusPanel .twin-angle-cell.is-missing .twin-angle-name,
    body.workbench-mode #twinStatusPanel .twin-angle-cell.is-missing .twin-angle-thumb {
      color: var(--danger);
    }

    body.workbench-mode #twinStatusPanel .twin-angle-cell .twin-angle-thumb,
    body.workbench-mode #twinStatusPanel .twin-view-thumb,
    body.workbench-mode #twinStatusPanel .twin-preview-media {
      border-color: var(--facts-line);
      background: var(--ivory);
      color: var(--muted);
    }

    body.workbench-mode #twinStatusPanel .twin-view-source.user,
    body.workbench-mode #twinStatusPanel .twin-variant-row.is-lock .twin-variant-tag {
      border-color: var(--deep-green-line);
      background: var(--deep-green-soft);
      color: var(--deep-green);
    }

    body.workbench-mode #twinStatusPanel .twin-view-source.synth,
    body.workbench-mode #twinStatusPanel .twin-variant-row.is-vary .twin-variant-tag {
      border-color: var(--gold-line);
      background: var(--gold-soft);
      color: var(--ink-soft);
    }

    body.workbench-mode #twinStatusPanel .twin-view-source.missing {
      color: var(--danger);
    }

    body.workbench-mode #twinStatusPanel .twin-pending-rescan-card {
      border-color: var(--gold-line);
      border-radius: var(--radius);
      background:
        linear-gradient(135deg, var(--gold-soft), var(--facts-panel-soft));
      color: var(--ink);
    }

    body.workbench-mode #twinStatusPanel .twin-pending-rescan-head p {
      color: var(--ink-soft);
    }

    body.workbench-mode #twinStatusPanel .twin-pending-rescan-card [data-pending-rescan] {
      border-color: var(--gold-strong);
      background: var(--gold);
      color: var(--ink);
      box-shadow: 0 10px 24px color-mix(in srgb, var(--gold) 18%, transparent);
    }

    body.workbench-mode #twinStatusPanel button.twin-angle-thumb:focus-visible {
      outline: 2px solid var(--gold);
      outline-offset: 2px;
    }

    @media (max-width: 760px) {
      body.workbench-mode #flowStep2Panel .flow-step-header,
      body.workbench-mode #profilePanel .flow-step-header,
      body.workbench-mode #twinStatusPanel .flow-step-header {
        align-items: flex-start;
      }

      body.workbench-mode #flowStep2Panel .upload-zone {
        min-height: 190px;
        padding: 18px 12px;
      }

      body.workbench-mode #thumbGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      body.workbench-mode #twinStatusPanel .twin-decision-options,
      body.workbench-mode #twinStatusPanel .twin-work-steps,
      body.workbench-mode #twinStatusPanel .twin-fact-snapshot {
        grid-template-columns: minmax(0, 1fr);
      }
    }

    @media (max-width: 1180px) {
      body.workbench-mode #appShell {
        grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
      }

      body.workbench-mode #appShell > .main {
        padding: 22px 16px 36px;
      }
    }

    @media (max-width: 760px) {
      body.workbench-mode #appShell {
        grid-template-columns: 1fr;
      }

      body.workbench-mode #appShell > .main {
        padding: 12px 10px 24px;
      }

      body.workbench-mode #appShell > .sidebar {
        position: relative;
        height: auto;
        max-height: none;
        border-right: 0;
        border-top: 1px solid color-mix(in srgb, var(--gold-line) 16%, transparent);
        padding: 20px 16px;
      }

      body.workbench-mode .workbench-toolbar {
        position: relative;
        top: auto;
        display: grid;
        grid-template-columns: 1fr;
      }

      body.workbench-mode .workbench-toolbar .btn,
      body.workbench-mode .workbench-toolbar .hub-mini-pill {
        width: 100%;
      }

      body.workbench-mode .guided-workbench-panel {
        padding: 14px !important;
      }

      body.workbench-mode .guided-panel-head {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
      }

      body.workbench-mode .guided-panel-actions {
        grid-column: 1 / -1;
        justify-content: stretch;
      }

      body.workbench-mode .guided-panel-actions .guided-reset-btn {
        width: 100%;
      }

      body.workbench-mode .workbench-stepper {
        grid-template-columns: 1fr;
      }

      body.workbench-mode .workbench-stepper-item {
        min-height: 72px;
      }

      body.workbench-mode .prep-stage-footer,
      body.workbench-mode .workbench-next-action {
        grid-template-columns: 1fr;
      }

      body.workbench-mode .workbench-next-action .btn,
      body.workbench-mode .prep-stage-action {
        width: 100%;
      }
    }

    /* T32: AI image studio and generated-result cards visual polish only. */
    #imageStudioView {
      --studio-surface: color-mix(in srgb, var(--ivory) 90%, var(--panel));
      --studio-panel-surface: color-mix(in srgb, var(--panel) 95%, var(--ivory-warm));
      --studio-panel-soft: color-mix(in srgb, var(--ivory-warm) 88%, var(--panel));
      --studio-line: color-mix(in srgb, var(--line) 72%, var(--gold-line));
      --studio-shadow: 0 16px 38px color-mix(in srgb, var(--charcoal) 10%, transparent);
      background: linear-gradient(180deg, var(--ivory-warm), var(--ivory));
      color: var(--ink);
    }

    #imageStudioView .saas-shell {
      background:
        linear-gradient(180deg, var(--ivory-warm), var(--ivory));
    }

    #imageStudioView .saas-main {
      background:
        linear-gradient(180deg, var(--ivory-warm), var(--ivory));
    }

    #imageStudioView .saas-nav {
      border-right-color: color-mix(in srgb, var(--gold-line) 18%, transparent);
    }

    #imageStudioView .saas-brand-icon,
    #imageStudioView .studio-mode-btn,
    #imageStudioView .saas-nav-note,
    #imageStudioView .workflow-step,
    #imageStudioView .studio-resolution-panel,
    #imageStudioView .studio-panel,
    #imageStudioView .studio-results-panel,
    #imageStudioView .studio-preview-card,
    #imageStudioView .studio-result-card,
    #imageStudioView .studio-upload-zone,
    #imageStudioView .studio-reference-board,
    #imageStudioView .studio-background-dropzone,
    #imageStudioView .studio-empty-state,
    #imageStudioView .skincare-result-toolbar,
    #imageStudioView .skincare-result-section,
    #imageStudioView .skincare-result-section-head,
    #imageStudioView .studio-result-section-note {
      border-radius: var(--radius);
    }

    #imageStudioView .studio-mode-btn {
      min-height: 42px;
      border-color: color-mix(in srgb, var(--gold-line) 10%, transparent);
      background: color-mix(in srgb, var(--charcoal) 78%, transparent);
      color: color-mix(in srgb, var(--studio-fg) 86%, transparent);
      box-shadow: none;
    }

    #imageStudioView .studio-mode-btn:hover,
    #imageStudioView .studio-mode-btn.is-active {
      border-color: color-mix(in srgb, var(--gold-line) 42%, transparent);
      background:
        linear-gradient(135deg, color-mix(in srgb, var(--gold) 16%, var(--charcoal)), color-mix(in srgb, var(--deep-green) 52%, var(--obsidian)));
      color: var(--studio-fg);
      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold-line) 12%, transparent);
      transform: translateY(-1px);
    }

    #imageStudioView .saas-nav-note {
      border-color: color-mix(in srgb, var(--gold-line) 22%, transparent);
      background: color-mix(in srgb, var(--charcoal) 78%, var(--obsidian));
      color: color-mix(in srgb, var(--ivory-warm) 78%, transparent);
      box-shadow: none;
    }

    #imageStudioView .saas-nav .mini-badge,
    #imageStudioView .hero-kicker,
    #imageStudioView .hub-mini-pill {
      border-color: var(--deep-green-line);
      background: var(--deep-green-soft);
      color: var(--deep-green);
      letter-spacing: 0;
    }

    #imageStudioView .hub-hero.compact {
      border: 1px solid var(--studio-line);
      border-radius: var(--radius);
      background:
        linear-gradient(135deg, var(--studio-panel-surface), var(--studio-panel-soft));
      color: var(--ink);
      box-shadow: var(--studio-shadow);
    }

    #imageStudioView .hub-hero.compact::before,
    #imageStudioView .hub-hero.compact::after {
      opacity: .18;
    }

    #imageStudioView .hub-hero.compact h1 {
      color: var(--ink);
      font-size: clamp(30px, 3vw, 40px);
      letter-spacing: 0;
    }

    #imageStudioView .hub-hero.compact p {
      color: var(--muted);
      max-width: 780px;
    }

    #imageStudioView .workflow-strip {
      gap: 8px;
    }

    #imageStudioView .workflow-step {
      min-height: 54px;
      border-color: var(--studio-line);
      background: var(--panel);
      color: var(--ink-soft);
      box-shadow: none;
    }

    #imageStudioView .workflow-step em {
      border-radius: var(--radius-sm);
      background: var(--gold);
      color: var(--ink);
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold-line) 24%, transparent);
    }

    #imageStudioView .workflow-step strong {
      color: var(--ink);
      letter-spacing: 0;
    }

    #imageStudioView .workflow-step small {
      color: var(--muted);
    }

    #imageStudioView .studio-resolution-panel,
    #imageStudioView .studio-panel,
    #imageStudioView .studio-results-panel {
      border: 1px solid var(--studio-line);
      background: var(--studio-panel-surface);
      color: var(--ink);
      box-shadow: var(--studio-shadow);
    }

    #imageStudioView .studio-resolution-panel {
      margin-top: 12px;
    }

    #imageStudioView .studio-resolution-panel .resolution-tier-row .chip {
      border-color: var(--studio-line);
      border-radius: var(--radius-sm);
      background: var(--panel);
      color: var(--ink-soft);
    }

    #imageStudioView .studio-resolution-panel .resolution-tier-row .chip.active,
    #imageStudioView .studio-resolution-panel .resolution-tier-row .chip.is-active {
      border-color: var(--gold-line);
      background: var(--gold-soft);
      color: var(--ink);
      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 16%, transparent);
    }

    #imageStudioView .studio-resolution-panel small,
    #imageStudioView .studio-panel-head p,
    #imageStudioView .studio-results-head p {
      color: var(--muted);
    }

    #imageStudioView .studio-panel h2,
    #imageStudioView .studio-results-panel h2,
    #imageStudioView .studio-panel-head h2,
    #imageStudioView .studio-results-head h2 {
      color: var(--ink);
      letter-spacing: 0;
    }

    #imageStudioView .control,
    #imageStudioView textarea.control,
    #imageStudioView select.control,
    #imageStudioView input.control {
      border-color: var(--studio-line);
      border-radius: var(--radius-sm);
      background: var(--panel);
      color: var(--ink);
      box-shadow: none;
    }

    #imageStudioView .control:focus,
    #imageStudioView textarea.control:focus,
    #imageStudioView select.control:focus,
    #imageStudioView input.control:focus {
      border-color: var(--gold);
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 18%, transparent);
    }

    #imageStudioView .studio-upload-zone,
    #imageStudioView .studio-background-dropzone,
    #imageStudioView .studio-reference-board,
    #imageStudioView .studio-preview-card,
    #imageStudioView .studio-reference-thumb-card,
    #imageStudioView .skincare-copy-slot,
    #imageStudioView .skincare-slot-lock-card {
      border-color: var(--studio-line);
      background: var(--studio-panel-soft);
      color: var(--ink-soft);
      box-shadow: none;
    }

    #imageStudioView .studio-upload-zone:hover,
    #imageStudioView .studio-background-dropzone:hover,
    #imageStudioView .studio-reference-thumb-card:hover {
      border-color: var(--gold-line);
      background: var(--gold-soft);
    }

    #imageStudioView .studio-policy-note,
    #imageStudioView .studio-confirm-check,
    #imageStudioView .studio-field-hint,
    #imageStudioView .language-policy-note {
      border-color: var(--studio-line);
      background: var(--studio-panel-soft);
      color: var(--muted);
    }

    #imageStudioView .studio-confirm-check:has(input:checked),
    #imageStudioView .studio-policy-note.is-warm {
      border-color: var(--gold-line);
      background: var(--gold-soft);
      color: var(--ink-soft);
    }

    #imageStudioView .studio-result-section-note,
    #imageStudioView .skincare-result-toolbar,
    #imageStudioView .skincare-result-section-head {
      border: 1px solid var(--studio-line);
      background:
        linear-gradient(135deg, var(--studio-panel-soft), var(--panel));
      color: var(--ink-soft);
      box-shadow: none;
    }

    #imageStudioView .studio-result-section-note strong,
    #imageStudioView .skincare-result-toolbar strong,
    #imageStudioView .skincare-result-section-head h3 {
      color: var(--ink);
    }

    #imageStudioView .studio-result-section-note span,
    #imageStudioView .skincare-result-toolbar span,
    #imageStudioView .skincare-result-section-head p {
      color: var(--muted);
    }

    #imageStudioView .studio-result-card {
      border-color: var(--studio-line);
      background: var(--panel);
      color: var(--ink);
      box-shadow: 0 12px 26px color-mix(in srgb, var(--charcoal) 8%, transparent);
    }

    #imageStudioView .studio-result-card img {
      background:
        linear-gradient(45deg, color-mix(in srgb, var(--deep-green-line) 26%, transparent) 25%, transparent 25%),
        linear-gradient(-45deg, color-mix(in srgb, var(--deep-green-line) 26%, transparent) 25%, transparent 25%),
        var(--ivory);
      background-size: 20px 20px;
      object-fit: contain;
    }

    #imageStudioView .studio-result-card-body {
      padding: 11px;
      border-top: 1px solid var(--studio-line);
      background: linear-gradient(180deg, var(--panel), var(--studio-panel-soft));
    }

    #imageStudioView .studio-result-card strong {
      color: var(--ink);
      letter-spacing: 0;
    }

    #imageStudioView .studio-result-card small {
      color: var(--muted);
    }

    #imageStudioView .studio-result-actions {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
      gap: 7px;
    }

    #imageStudioView .studio-result-actions .btn,
    #imageStudioView .studio-download-btn,
    #imageStudioView .skincare-result-section-head .btn,
    #imageStudioView #studioDownloadZipBtn,
    #imageStudioView #studioClearResultsBtn {
      min-height: 34px;
      border-color: var(--deep-green-line);
      border-radius: var(--radius-sm);
      background: var(--panel);
      color: var(--deep-green);
      box-shadow: none;
    }

    #imageStudioView .studio-download-btn,
    #imageStudioView #studioDownloadZipBtn {
      border-color: var(--gold-strong);
      background: var(--gold);
      color: var(--ink);
    }

    #imageStudioView .studio-result-actions .btn:hover,
    #imageStudioView .skincare-result-section-head .btn:hover,
    #imageStudioView #studioClearResultsBtn:hover {
      border-color: var(--gold-line);
      background: var(--gold-soft);
      color: var(--ink);
      transform: translateY(-1px);
    }

    #imageStudioView .studio-result-card.is-error {
      border-color: var(--danger-line);
      background: var(--danger-soft);
    }

    #imageStudioView .studio-error-guidance span {
      border-color: var(--danger-line);
      border-radius: var(--radius-sm);
      background: color-mix(in srgb, var(--panel) 72%, var(--danger-soft));
      color: var(--danger);
    }

    /* ===== T15 超能作图暗色化:append-only,同特异性后置覆盖。
       手法同 #productCenterView / #replicateView:大理石暗背景 + banner 英雄区 + 暗玻璃面板。
       做法以「本地重映射调色变量」为主,让 T32 既有的 --panel/--ink/--muted 级联整体翻暗,
       再补少量 hero/工具栏/结果卡显式规则。DOM 与全部 id/class/data-* hook 一个不动。 ===== */
    #imageStudioView {
      /* 重映射全局浅色调色为暗色,T32 既有规则里直接引用这些变量的面板会自动变暗 */
      --ink: #f6f4ee;
      --ink-soft: rgba(246, 244, 238, .82);
      --muted: rgba(246, 244, 238, .6);
      --panel: rgba(20, 24, 21, .72);
      --ivory: rgba(14, 15, 16, .7);
      --ivory-warm: rgba(20, 24, 21, .68);
      --line: rgba(226, 207, 160, .16);
      /* 暗底前景文字专用 token(不能用被重映射成暗色的 --ivory-warm 当文字色) */
      --studio-fg: #f6f4ee;
      /* 暗色版 studio 专用变量 */
      --studio-surface: rgba(12, 14, 12, .82);
      --studio-panel-surface: linear-gradient(180deg, rgba(27, 33, 29, .74) 0%, rgba(14, 15, 16, .72) 100%);
      --studio-panel-soft: rgba(255, 255, 255, .045);
      --studio-line: rgba(226, 207, 160, .16);
      --studio-shadow: 0 22px 56px rgba(0, 0, 0, .4);
      color: var(--ink);
      background:
        linear-gradient(180deg, rgba(9, 11, 10, .86) 0%, rgba(9, 11, 10, .8) 40%, rgba(9, 11, 10, .94) 100%),
        url('media/hub-bg-20260622.jpg') center top / cover no-repeat fixed,
        #0a0b0a;
    }

    #imageStudioView .saas-shell,
    #imageStudioView .saas-main {
      background: transparent;
    }

    /* 英雄区:banner 图 + 深色蒙版(参考 #replicateView .replicate-hero) */
    #imageStudioView .hub-hero.compact {
      border: 1px solid rgba(226, 207, 160, .22);
      background:
        radial-gradient(circle at 78% 16%, rgba(201, 168, 106, .15), transparent 30%),
        linear-gradient(120deg, rgba(9, 11, 10, .92) 0%, rgba(9, 11, 10, .72) 46%, rgba(9, 11, 10, .5) 100%),
        url('media/workbench-banner-20260622.jpg') center / cover no-repeat,
        var(--obsidian);
      color: var(--ivory-warm);
      box-shadow: 0 22px 52px rgba(0, 0, 0, .42);
    }

    #imageStudioView .hub-hero.compact::before,
    #imageStudioView .hub-hero.compact::after {
      opacity: .1;
    }

    #imageStudioView .hub-hero.compact h1 { color: var(--studio-fg); }
    #imageStudioView .hub-hero.compact p { color: rgba(246, 244, 238, .72); }

    /* 英雄区内的胶囊/badge 在暗底改为金色描边玻璃片 */
    #imageStudioView .saas-nav .mini-badge,
    #imageStudioView .hero-kicker,
    #imageStudioView .hub-mini-pill {
      border-color: rgba(226, 207, 160, .42);
      background: rgba(9, 11, 10, .55);
      color: var(--gold-soft);
    }

    /* 英雄区流程条:暗玻璃 */
    #imageStudioView .hub-hero.compact .workflow-step {
      border-color: rgba(226, 207, 160, .2);
      background: rgba(255, 255, 255, .05);
      color: rgba(246, 244, 238, .82);
    }
    #imageStudioView .hub-hero.compact .workflow-step em {
      background: rgba(201, 168, 106, .2);
      color: var(--gold-soft);
      box-shadow: 0 0 0 3px rgba(226, 207, 160, .14);
    }
    #imageStudioView .hub-hero.compact .workflow-step strong { color: var(--studio-fg); }
    #imageStudioView .hub-hero.compact .workflow-step small { color: rgba(246, 244, 238, .6); }

    /* 左工具栏 nav 已是暗色(T32 已给 night-panel),仅描边贴合暗主题 */
    #imageStudioView .saas-nav {
      border-right-color: rgba(226, 207, 160, .14);
    }
    #imageStudioView .saas-nav-note {
      border-color: rgba(226, 207, 160, .2);
      background: rgba(9, 11, 10, .5);
      color: rgba(246, 244, 238, .78);
    }
    #imageStudioView .saas-nav-note p { color: rgba(246, 244, 238, .66); }

    /* 主区面板:暗玻璃卡片 + 模糊 */
    #imageStudioView .studio-resolution-panel,
    #imageStudioView .studio-panel,
    #imageStudioView .studio-results-panel {
      border-color: rgba(226, 207, 160, .16);
      background:
        linear-gradient(180deg, rgba(27, 33, 29, .74) 0%, rgba(14, 15, 16, .72) 100%);
      box-shadow: var(--studio-shadow);
      backdrop-filter: blur(8px);
    }

    /* 分辨率档位 chip:暗底 */
    #imageStudioView .studio-resolution-panel .resolution-tier-row .chip {
      border-color: rgba(226, 207, 160, .16);
      background: rgba(255, 255, 255, .045);
      color: rgba(246, 244, 238, .82);
    }
    #imageStudioView .studio-resolution-panel .resolution-tier-row .chip.active,
    #imageStudioView .studio-resolution-panel .resolution-tier-row .chip.is-active {
      border-color: rgba(226, 207, 160, .42);
      background: rgba(201, 168, 106, .2);
      color: var(--studio-fg);
    }

    /* 表单控件:暗输入框 */
    #imageStudioView .control,
    #imageStudioView textarea.control,
    #imageStudioView select.control,
    #imageStudioView input.control {
      border-color: rgba(226, 207, 160, .18);
      background: rgba(9, 11, 10, .5);
      color: var(--studio-fg);
    }
    #imageStudioView .field .label { color: rgba(246, 244, 238, .82); }

    /* select 下拉选项在暗底仍由系统渲染,强制深色文字底避免白上白 */
    #imageStudioView select.control option {
      background: #14181a;
      color: var(--studio-fg);
    }

    /* 上传区 / 参考板 / 预览卡:暗玻璃 */
    #imageStudioView .studio-upload-zone,
    #imageStudioView .studio-background-dropzone,
    #imageStudioView .studio-reference-board,
    #imageStudioView .studio-preview-card,
    #imageStudioView .studio-reference-thumb-card,
    #imageStudioView .skincare-copy-slot,
    #imageStudioView .skincare-slot-lock-card {
      border-color: rgba(226, 207, 160, .16);
      background: rgba(255, 255, 255, .04);
      color: rgba(246, 244, 238, .82);
    }
    #imageStudioView .studio-upload-zone:hover,
    #imageStudioView .studio-background-dropzone:hover,
    #imageStudioView .studio-reference-thumb-card:hover {
      border-color: rgba(226, 207, 160, .42);
      background: rgba(201, 168, 106, .14);
    }

    /* 提示 / 合规 / 勾选块 */
    #imageStudioView .studio-policy-note,
    #imageStudioView .studio-confirm-check,
    #imageStudioView .studio-field-hint,
    #imageStudioView .language-policy-note {
      border-color: rgba(226, 207, 160, .14);
      background: rgba(255, 255, 255, .035);
      color: rgba(246, 244, 238, .66);
    }
    #imageStudioView .studio-confirm-check:has(input:checked),
    #imageStudioView .studio-policy-note.is-warm {
      border-color: rgba(226, 207, 160, .42);
      background: rgba(201, 168, 106, .16);
      color: rgba(246, 244, 238, .86);
    }

    /* 结果区分节条 */
    #imageStudioView .studio-result-section-note,
    #imageStudioView .skincare-result-toolbar,
    #imageStudioView .skincare-result-section-head {
      border-color: rgba(226, 207, 160, .16);
      background:
        linear-gradient(135deg, rgba(255, 255, 255, .05), rgba(9, 11, 10, .4));
      color: rgba(246, 244, 238, .82);
    }

    /* 结果卡:暗框,图片底保留浅色棋盘格便于看透明区 */
    #imageStudioView .studio-result-card {
      border-color: rgba(226, 207, 160, .16);
      background: rgba(20, 24, 21, .72);
      box-shadow: 0 16px 36px rgba(0, 0, 0, .38);
    }
    #imageStudioView .studio-result-card-body {
      border-top-color: rgba(226, 207, 160, .14);
      background: linear-gradient(180deg, rgba(20, 24, 21, .8), rgba(14, 15, 16, .76));
    }

    /* 次级按钮(清空结果等)在暗底改为金色描边玻璃片 */
    #imageStudioView .studio-result-actions .btn,
    #imageStudioView .skincare-result-section-head .btn,
    #imageStudioView #studioClearResultsBtn,
    #imageStudioView .back-to-hub-btn {
      border-color: rgba(226, 207, 160, .24);
      background: rgba(255, 255, 255, .045);
      color: var(--studio-fg);
    }
    #imageStudioView .studio-result-actions .btn:hover,
    #imageStudioView .skincare-result-section-head .btn:hover,
    #imageStudioView #studioClearResultsBtn:hover,
    #imageStudioView .back-to-hub-btn:hover {
      border-color: rgba(226, 207, 160, .44);
      background: rgba(201, 168, 106, .16);
      color: var(--studio-fg);
    }

    /* 下载/主操作按钮保持金色实心(高对比),仅描边贴合 */
    #imageStudioView .studio-download-btn,
    #imageStudioView #studioDownloadZipBtn {
      border-color: var(--gold-strong);
      background: var(--gold);
      color: var(--charcoal);
    }

    @media (max-width: 640px) {
      #imageStudioView { background-attachment: scroll; }
    }

    /* ===== T15 C4 · 超能作图功能层(截图3)。append-only,纯展示层。
       铁律:此处所有进阶控件无真实后端 → 一律 disabled + 「即将上线」标注,不接生成参数、不造假结果。
       左工具栏 2 个新增「提升清晰度 / 扩图裁切」无对应模式,以 disabled 玻璃片呈现;
       右侧能力面板为截图3 版式占位,真实尺寸/风格/平台 select 仍在各模式面板内生效。 ===== */

    /* 左工具栏:即将上线模式按钮(无 data-studio-mode,不参与切换) */
    #imageStudioView .studio-mode-btn.is-coming-soon {
      position: relative;
      opacity: 1;
      cursor: not-allowed;
      filter: none;
      color: color-mix(in srgb, var(--studio-fg) 64%, transparent);
    }
    #imageStudioView .studio-mode-btn.is-coming-soon i,
    #imageStudioView .studio-mode-btn.is-coming-soon svg {
      opacity: .85;
    }
    #imageStudioView .studio-mode-btn.is-coming-soon:hover,
    #imageStudioView .studio-mode-btn.is-coming-soon:focus {
      transform: none;
      border-color: rgba(226, 207, 160, .14);
      background: color-mix(in srgb, var(--charcoal) 78%, transparent);
      box-shadow: none;
    }
    #imageStudioView .studio-mode-btn .studio-soon-tag,
    #imageStudioView .studio-c4-group .studio-soon-tag {
      margin-left: auto;
      padding: 1px 7px;
      border-radius: 999px;
      border: 1px solid rgba(226, 207, 160, .34);
      background: rgba(201, 168, 106, .14);
      color: var(--gold-soft);
      font-size: 10px;
      font-style: normal;
      font-weight: 700;
      letter-spacing: .04em;
      white-space: nowrap;
    }

    /* 右侧能力面板:截图3 版式占位卡 */
    #imageStudioView .studio-c4-panel {
      margin-top: 14px;
      padding: 18px;
      border: 1px solid rgba(226, 207, 160, .16);
      border-radius: var(--radius);
      background:
        linear-gradient(180deg, rgba(27, 33, 29, .74) 0%, rgba(14, 15, 16, .72) 100%);
      box-shadow: var(--studio-shadow);
      backdrop-filter: blur(8px);
      color: var(--studio-fg);
    }
    #imageStudioView .studio-c4-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 14px;
    }
    #imageStudioView .studio-c4-head h2 {
      margin: 0 0 4px;
      color: var(--studio-fg);
      font-size: 18px;
      letter-spacing: 0;
    }
    #imageStudioView .studio-c4-head p {
      margin: 0;
      max-width: 760px;
      color: rgba(246, 244, 238, .62);
      font-size: 12.5px;
      line-height: 1.6;
    }
    #imageStudioView .studio-c4-soon-pill {
      flex: none;
      padding: 4px 12px;
      border-radius: 999px;
      border: 1px solid rgba(226, 207, 160, .42);
      background: rgba(201, 168, 106, .16);
      color: var(--gold-soft);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .04em;
    }

    /* 前后对比滑杆占位 */
    #imageStudioView .studio-c4-compare {
      margin-top: 16px;
      padding: 14px;
      border: 1px solid rgba(226, 207, 160, .14);
      border-radius: var(--radius-sm);
      background: rgba(255, 255, 255, .035);
    }
    #imageStudioView .studio-c4-compare-stage {
      position: relative;
      height: 132px;
      border-radius: var(--radius-sm);
      overflow: hidden;
      background:
        linear-gradient(90deg, rgba(46, 56, 49, .6) 0%, rgba(46, 56, 49, .6) 50%, rgba(20, 24, 21, .82) 50%, rgba(20, 24, 21, .82) 100%),
        repeating-linear-gradient(45deg, rgba(226, 207, 160, .05) 0 10px, transparent 10px 20px);
    }
    #imageStudioView .studio-c4-compare-label {
      position: absolute;
      top: 10px;
      padding: 2px 9px;
      border-radius: 999px;
      background: rgba(9, 11, 10, .6);
      border: 1px solid rgba(226, 207, 160, .24);
      color: rgba(246, 244, 238, .82);
      font-size: 11px;
      font-weight: 700;
    }
    #imageStudioView .studio-c4-compare-label.is-before { left: 10px; }
    #imageStudioView .studio-c4-compare-label.is-after { right: 10px; }
    #imageStudioView .studio-c4-compare-handle {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 50%;
      width: 2px;
      transform: translateX(-1px);
      background: rgba(226, 207, 160, .55);
      box-shadow: 0 0 0 1px rgba(9, 11, 10, .5);
    }
    #imageStudioView .studio-c4-compare-handle::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      width: 26px;
      height: 26px;
      transform: translate(-50%, -50%);
      border-radius: 999px;
      border: 2px solid rgba(226, 207, 160, .55);
      background: rgba(9, 11, 10, .65);
    }
    #imageStudioView .studio-c4-compare-range {
      width: 100%;
      margin-top: 10px;
      accent-color: var(--gold);
      opacity: .5;
      cursor: not-allowed;
    }
    #imageStudioView .studio-c4-compare-hint {
      display: block;
      margin-top: 6px;
      color: rgba(246, 244, 238, .55);
      font-size: 11.5px;
    }

    /* 进阶控件网格 */
    #imageStudioView .studio-c4-grid {
      margin-top: 16px;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 14px;
    }
    #imageStudioView .studio-c4-group {
      margin: 0;
      padding: 14px;
      border: 1px solid rgba(226, 207, 160, .14);
      border-radius: var(--radius-sm);
      background: rgba(255, 255, 255, .03);
      opacity: .85;
    }
    #imageStudioView .studio-c4-group legend {
      display: flex;
      align-items: center;
      gap: 8px;
      width: 100%;
      padding: 0 2px;
      color: rgba(246, 244, 238, .9);
      font-size: 13px;
      font-weight: 700;
    }
    #imageStudioView .studio-c4-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
      margin-top: 10px;
    }
    #imageStudioView .studio-c4-chip {
      padding: 6px 12px;
      border-radius: 999px;
      border: 1px solid rgba(226, 207, 160, .18);
      background: rgba(9, 11, 10, .42);
      color: rgba(246, 244, 238, .6);
      font-size: 12px;
      cursor: not-allowed;
    }
    #imageStudioView .studio-c4-slider {
      width: 100%;
      margin-top: 12px;
      accent-color: var(--gold);
      cursor: not-allowed;
    }
    #imageStudioView .studio-c4-toggle {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 12px;
      color: rgba(246, 244, 238, .78);
      font-size: 12.5px;
      cursor: not-allowed;
    }
    #imageStudioView .studio-c4-toggle input { cursor: not-allowed; }
    #imageStudioView .studio-c4-note {
      display: block;
      margin-top: 10px;
      color: rgba(246, 244, 238, .5);
      font-size: 11.5px;
      line-height: 1.55;
    }

    @media (max-width: 760px) {
      #imageStudioView .studio-c4-head { flex-direction: column; }
      #imageStudioView .studio-c4-grid { grid-template-columns: 1fr; }
    }

    body.workbench-mode #resultsStepPanel {
      --result-panel: color-mix(in srgb, var(--panel) 96%, var(--ivory-warm));
      --result-panel-soft: color-mix(in srgb, var(--ivory-warm) 88%, var(--panel));
      --result-line: color-mix(in srgb, var(--line) 70%, var(--gold-line));
      --result-shadow: 0 14px 34px color-mix(in srgb, var(--charcoal) 9%, transparent);
    }

    body.workbench-mode #resultsStepPanel > .flex:first-child {
      border-bottom: 1px solid var(--result-line);
      padding-bottom: 12px;
    }

    body.workbench-mode #resultsStepPanel #downloadZipBtn {
      border-color: var(--gold-strong);
      background: var(--gold);
      color: var(--ink);
      box-shadow: 0 10px 22px color-mix(in srgb, var(--gold) 18%, transparent);
    }

    body.workbench-mode #resultsStepPanel #clearResultsBtn {
      border-color: var(--result-line);
      background: var(--panel);
      color: var(--deep-green);
      box-shadow: none;
    }

    body.workbench-mode #resultsStepPanel #resultCount {
      background: var(--charcoal);
      color: var(--ivory-warm);
    }

    body.workbench-mode #resultsStepPanel .result-section {
      gap: 10px;
    }

    body.workbench-mode #resultsStepPanel .result-section-header {
      border-color: var(--result-line);
      border-left: 3px solid var(--gold);
      border-radius: var(--radius);
      background:
        linear-gradient(135deg, var(--result-panel), var(--result-panel-soft));
      box-shadow: none;
    }

    body.workbench-mode #resultsStepPanel .result-section-header h3 {
      color: var(--ink);
      letter-spacing: 0;
    }

    body.workbench-mode #resultsStepPanel .result-section-header p {
      color: var(--muted) !important;
    }

    body.workbench-mode #resultsStepPanel .result-section-actions .count-pill,
    body.workbench-mode #resultsStepPanel .result-section-actions .count-pill.ready {
      border-color: var(--deep-green-line);
      background: var(--deep-green-soft);
      color: var(--deep-green);
      border-radius: 999px;
      letter-spacing: 0;
    }

    body.workbench-mode #resultsStepPanel .result-section-download {
      border-color: var(--deep-green-line);
      border-radius: var(--radius-sm);
      background: var(--panel);
      color: var(--deep-green);
      box-shadow: none;
    }

    body.workbench-mode #resultsStepPanel .result-section-download:not(:disabled):hover {
      border-color: var(--gold-line);
      background: var(--gold-soft);
      color: var(--ink);
      transform: translateY(-1px);
    }

    body.workbench-mode #resultsStepPanel .result-section-grid {
      gap: 12px;
    }

    body.workbench-mode #resultsStepPanel .result-card {
      display: grid;
      border-color: var(--result-line);
      border-radius: var(--radius);
      background: var(--panel);
      color: var(--ink);
      box-shadow: var(--result-shadow);
    }

    body.workbench-mode #resultsStepPanel .result-card:hover {
      border-color: var(--gold-line);
      box-shadow: 0 16px 36px color-mix(in srgb, var(--gold) 14%, transparent);
      transform: translateY(-1px);
    }

    body.workbench-mode #resultsStepPanel .result-media {
      background:
        linear-gradient(45deg, color-mix(in srgb, var(--deep-green-line) 24%, transparent) 25%, transparent 25%),
        linear-gradient(-45deg, color-mix(in srgb, var(--deep-green-line) 24%, transparent) 25%, transparent 25%),
        var(--ivory);
      background-size: 20px 20px;
    }

    body.workbench-mode #resultsStepPanel .result-media img {
      background: transparent;
      object-fit: contain;
    }

    body.workbench-mode #resultsStepPanel .result-actions {
      opacity: 1;
      transform: none;
      pointer-events: auto;
    }

    body.workbench-mode #resultsStepPanel .mini-action {
      width: 34px;
      height: 34px;
      border: 1px solid color-mix(in srgb, var(--ivory-warm) 62%, transparent);
      border-radius: var(--radius-sm);
      background: color-mix(in srgb, var(--charcoal) 86%, transparent);
      color: var(--ivory-warm);
      box-shadow: 0 8px 18px color-mix(in srgb, var(--charcoal) 20%, transparent);
    }

    body.workbench-mode #resultsStepPanel .mini-action:hover,
    body.workbench-mode #resultsStepPanel .mini-action:focus-visible {
      border-color: var(--gold-line);
      background: var(--gold);
      color: var(--ink);
      outline: 0;
      transform: translateY(-1px);
    }

    body.workbench-mode #resultsStepPanel .mini-action.danger-action {
      border-color: var(--danger-line);
      background: color-mix(in srgb, var(--danger) 88%, transparent);
      color: var(--ivory-warm);
    }

    body.workbench-mode #resultsStepPanel .result-card .result-meta-panel {
      display: grid;
      gap: 7px;
      border-top: 1px solid var(--result-line);
      background:
        linear-gradient(180deg, var(--panel), var(--result-panel-soft));
      color: var(--ink-soft);
    }

    body.workbench-mode #resultsStepPanel .result-meta-panel h3 {
      color: var(--ink);
      letter-spacing: 0;
    }

    body.workbench-mode #resultsStepPanel .result-meta-panel p {
      color: var(--muted) !important;
    }

    body.workbench-mode #resultsStepPanel .result-meta-panel .rounded-full {
      border: 1px solid var(--result-line);
      background: var(--result-panel-soft) !important;
      color: var(--ink-soft) !important;
    }

    body.workbench-mode #resultsStepPanel .result-meta-panel .bg-gold-soft {
      border-color: var(--gold-line);
      background: var(--gold-soft) !important;
      color: var(--ink) !important;
    }

    body.workbench-mode #resultsStepPanel .result-meta-panel > .mt-2.flex {
      border: 1px solid var(--attention-line);
      border-radius: var(--radius-sm) !important;
      background: var(--attention-soft) !important;
      color: var(--attention) !important;
    }

    body.workbench-mode #resultsStepPanel .result-meta-panel > .mt-2.flex .font-black,
    body.workbench-mode #resultsStepPanel .result-meta-panel > .mt-2.flex i {
      color: var(--attention) !important;
    }

    body.workbench-mode #resultsStepPanel .loading-state,
    body.workbench-mode #resultsStepPanel .error-state {
      background: var(--result-panel-soft);
    }

    body.workbench-mode #resultsStepPanel .loading-box,
    body.workbench-mode #resultsStepPanel .error-box {
      border: 1px solid var(--result-line);
      border-radius: var(--radius);
      background: var(--panel);
      box-shadow: none;
    }

    body.workbench-mode #resultsStepPanel .error-box {
      border-color: var(--danger-line);
      background: var(--danger-soft);
    }

    body.workbench-mode #resultsStepPanel .queue-status {
      border-color: var(--attention-line);
      background: var(--attention-soft);
      color: var(--attention);
    }

    body.workbench-mode #resultsStepPanel .generation-progress-card {
      border-color: var(--result-line);
      border-radius: var(--radius);
      background: var(--result-panel);
      box-shadow: var(--result-shadow);
    }

    body.workbench-mode #resultsStepPanel .generation-progress-card::before,
    body.workbench-mode #resultsStepPanel .generation-progress-track span {
      background: linear-gradient(90deg, var(--gold), var(--deep-green));
    }

    @media (max-width: 760px) {
      #imageStudioView .saas-main {
        padding: 12px 10px 24px;
      }

      #imageStudioView .hub-hero.compact {
        padding: 18px 14px;
      }

      #imageStudioView .workflow-strip,
      #imageStudioView .studio-form-grid,
      #imageStudioView .studio-result-actions {
        grid-template-columns: 1fr;
      }

      #imageStudioView .studio-panel,
      #imageStudioView .studio-results-panel {
        padding: 14px;
      }

      body.workbench-mode #resultsStepPanel .result-section-header,
      body.workbench-mode #resultsStepPanel > .flex:first-child {
        gap: 10px;
      }

      body.workbench-mode #resultsStepPanel .result-section-actions,
      body.workbench-mode #resultsStepPanel .result-section-download,
      body.workbench-mode #resultsStepPanel #clearResultsBtn,
      body.workbench-mode #resultsStepPanel #downloadZipBtn {
        width: 100%;
      }

      body.workbench-mode #resultsStepPanel .result-actions {
        inset-inline: 8px;
        bottom: 8px;
        gap: 6px;
      }

      body.workbench-mode #resultsStepPanel .mini-action {
        width: 32px;
        height: 32px;
      }
    }

    /* T40: replicate workspace skin and density pass, scoped to #replicateView only. */
    #replicateView.replicate-view {
      --replicate-surface: color-mix(in srgb, var(--ivory) 88%, var(--panel));
      --replicate-panel: color-mix(in srgb, var(--panel) 94%, var(--ivory-warm));
      --replicate-panel-soft: color-mix(in srgb, var(--ivory-warm) 90%, var(--panel));
      --replicate-line: color-mix(in srgb, var(--line) 72%, var(--gold-line));
      --replicate-muted: color-mix(in srgb, var(--muted) 86%, var(--deep-green));
      --replicate-shadow: 0 14px 34px color-mix(in srgb, var(--charcoal) 10%, transparent);
      background:
        linear-gradient(180deg, color-mix(in srgb, var(--charcoal) 8%, transparent), transparent),
        var(--ivory);
    }

    #replicateView .saas-main {
      max-width: 1540px;
      padding: 18px 24px 34px;
    }

    #replicateView .replicate-hero {
      border: 1px solid color-mix(in srgb, var(--gold-line) 38%, transparent);
      border-radius: var(--radius);
      background:
        radial-gradient(circle at 78% 16%, color-mix(in srgb, var(--gold) 15%, transparent), transparent 28%),
        linear-gradient(120deg, rgba(9, 11, 10, .92) 0%, rgba(9, 11, 10, .72) 46%, rgba(9, 11, 10, .55) 100%),
        url('media/workbench-banner-20260622.jpg') center / cover no-repeat,
        linear-gradient(135deg, color-mix(in srgb, var(--charcoal) 96%, var(--deep-green)), var(--obsidian));
      padding: 22px 28px;
      box-shadow: 0 18px 44px color-mix(in srgb, var(--charcoal) 18%, transparent);
    }

    #replicateView .replicate-hero h1 {
      margin-top: 12px;
      font-size: 40px;
      line-height: 1.05;
      letter-spacing: 0;
    }

    #replicateView .replicate-hero p {
      max-width: 780px;
      margin-top: 10px;
      font-size: 14px;
      line-height: 1.72;
    }

    #replicateView .hero-top-actions {
      gap: 10px;
    }

    #replicateView .hero-kicker,
    #replicateView .hub-mini-pill,
    #replicateView .back-to-hub-btn {
      border-radius: var(--radius-sm);
      min-height: 34px;
      padding: 7px 10px;
    }

    #replicateView .hero-kicker,
    #replicateView .hub-mini-pill {
      border-color: color-mix(in srgb, var(--gold-line) 42%, transparent);
      background: color-mix(in srgb, var(--charcoal) 72%, transparent);
      color: var(--gold-soft);
    }

    #replicateView .workflow-strip {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
      margin-top: 16px;
    }

    #replicateView .workflow-step {
      min-height: 50px;
      border-color: color-mix(in srgb, var(--gold-line) 24%, transparent);
      border-radius: var(--radius);
      background: color-mix(in srgb, var(--deep-green) 22%, transparent);
      padding: 8px 10px;
    }

    #replicateView .workflow-step em {
      border-radius: var(--radius-sm);
      background: color-mix(in srgb, var(--gold) 18%, var(--charcoal));
      color: var(--gold-soft);
    }

    #replicateView .workflow-step small {
      color: color-mix(in srgb, var(--ivory-warm) 72%, transparent);
    }

    #replicateView .replicate-workspace {
      grid-template-columns: minmax(300px, 348px) minmax(0, 1fr);
      gap: 16px;
      max-width: none;
      margin-top: 14px;
    }

    #replicateView #replicateInlineModelPanel {
      top: 14px;
      height: calc(100dvh - 28px);
      min-height: 0;
      max-height: calc(100dvh - 28px);
      border-color: color-mix(in srgb, var(--gold-line) 24%, transparent);
      border-radius: var(--radius);
      background:
        linear-gradient(180deg, color-mix(in srgb, var(--charcoal) 95%, var(--deep-green)), var(--obsidian));
      padding: 10px;
      box-shadow: 0 18px 46px color-mix(in srgb, var(--charcoal) 26%, transparent);
    }

    #replicateView #replicateInlineModelPanel::before {
      background-image:
        linear-gradient(color-mix(in srgb, var(--gold-line) 10%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--gold-line) 8%, transparent) 1px, transparent 1px);
      background-size: 24px 24px;
    }

    #replicateView #replicateInlineModelPanel .replicate-subsection-head,
    #replicateView #replicateInlineModelPanel .replicate-sidebar-model-selected,
    #replicateView .replicate-custom-model-panel,
    #replicateView #replicateInlineModelPanel .replicate-model-catalog-head,
    #replicateView #replicateInlineModelPanel .replicate-model-filter-drawer,
    #replicateView #replicateInlineModelPanel .replicate-model-footer {
      border-color: color-mix(in srgb, var(--gold-line) 18%, transparent);
      border-radius: var(--radius);
      background: color-mix(in srgb, var(--deep-green) 22%, transparent);
    }

    #replicateView #replicateInlineModelPanel .replicate-subsection-head {
      padding-bottom: 8px;
      margin-bottom: 8px;
    }

    #replicateView #replicateInlineModelPanel .replicate-subsection-head h3,
    #replicateView #replicateInlineModelPanel .replicate-model-catalog-head strong,
    #replicateView #replicateInlineModelPanel .replicate-sidebar-model-selected strong {
      color: var(--ivory-warm);
    }

    #replicateView #replicateInlineModelPanel .replicate-subsection-head p,
    #replicateView #replicateInlineModelPanel .replicate-model-catalog-head span,
    #replicateView #replicateInlineModelPanel .replicate-sidebar-model-selected span,
    #replicateView .replicate-custom-model-panel p {
      color: color-mix(in srgb, var(--ivory-warm) 72%, transparent);
    }

    #replicateView #replicateInlineModelPanel .model-library-clear-btn,
    #replicateView #replicateInlineModelPanel .model-library-scroll-btn,
    #replicateView #replicateInlineModelPanel .model-library-select-btn,
    #replicateView #replicateInlineModelPanel .model-library-preview-btn,
    #replicateView #replicateInlineModelPanel .replicate-model-more-btn,
    #replicateView .replicate-custom-model-actions .model-library-clear-btn {
      min-height: 30px;
      border-color: color-mix(in srgb, var(--gold-line) 24%, transparent);
      border-radius: var(--radius-sm);
      background: color-mix(in srgb, var(--panel) 9%, transparent);
      color: var(--gold-soft);
      padding: 6px 8px;
      box-shadow: none;
    }

    #replicateView #replicateInlineModelPanel .model-library-clear-btn:hover,
    #replicateView #replicateInlineModelPanel .model-library-scroll-btn:hover,
    #replicateView #replicateInlineModelPanel .model-library-select-btn:hover,
    #replicateView #replicateInlineModelPanel .model-library-preview-btn:hover,
    #replicateView #replicateInlineModelPanel .replicate-model-more-btn:hover {
      border-color: var(--gold-line);
      background: color-mix(in srgb, var(--gold) 20%, transparent);
      color: var(--ivory-warm);
    }

    #replicateView #replicateInlineModelPanel .replicate-model-catalog {
      min-height: 0;
      gap: 8px;
    }

    #replicateView #replicateInlineModelPanel .replicate-model-filter-drawer summary,
    #replicateView .replicate-custom-model-panel summary {
      min-height: 34px;
      border-radius: var(--radius-sm);
      padding: 7px 8px;
    }

    #replicateView #replicateInlineModelPanel .replicate-model-filter-title,
    #replicateView #replicateInlineModelPanel .replicate-model-filter-drawer.has-active .replicate-model-filter-summary,
    #replicateView #replicateInlineModelPanel .replicate-model-tags {
      color: var(--gold-soft);
    }

    #replicateView #replicateInlineModelPanel .replicate-inline-model-grid,
    #replicateView #replicateInlineModelPanel .replicate-model-grid {
      gap: 8px;
      min-height: 0;
      scrollbar-color: color-mix(in srgb, var(--gold-line) 55%, transparent) color-mix(in srgb, var(--panel) 7%, transparent);
    }

    #replicateView #replicateInlineModelPanel .replicate-model-card {
      grid-template-columns: 82px minmax(0, 1fr);
      gap: 6px 8px;
      min-height: 126px;
      border-color: color-mix(in srgb, var(--gold-line) 18%, transparent);
      border-radius: var(--radius);
      background: color-mix(in srgb, var(--panel) 8%, transparent);
      padding: 8px;
      box-shadow: none;
    }

    #replicateView #replicateInlineModelPanel .replicate-model-card:hover,
    #replicateView #replicateInlineModelPanel .replicate-model-card.is-selected {
      border-color: var(--gold-line);
      background: color-mix(in srgb, var(--gold) 16%, transparent);
      box-shadow: 0 10px 24px color-mix(in srgb, var(--charcoal) 22%, transparent);
    }

    #replicateView #replicateInlineModelPanel .replicate-model-card strong,
    #replicateView #replicateInlineModelPanel .replicate-model-card small {
      color: var(--ivory-warm);
    }

    #replicateView #replicateInlineModelPanel .replicate-model-card small {
      opacity: .76;
    }

    #replicateView #replicateInlineModelPanel .replicate-model-visual {
      width: 82px;
      height: 112px;
      border-color: color-mix(in srgb, var(--gold-line) 22%, transparent);
      border-radius: var(--radius-sm);
      background: color-mix(in srgb, var(--charcoal) 64%, transparent);
    }

    #replicateView #replicateInlineModelPanel .replicate-model-meta span,
    #replicateView #replicateInlineModelPanel .replicate-model-fit span {
      border-color: color-mix(in srgb, var(--gold-line) 22%, transparent);
      background: color-mix(in srgb, var(--gold) 14%, transparent);
      color: var(--gold-soft);
    }

    #replicateView .replicate-workbench-main {
      min-width: 0;
    }

    #replicateView .replicate-panel,
    #replicateView .replicate-output-panel,
    #replicateView .replicate-subsection,
    #replicateView .replicate-link-box,
    #replicateView .replicate-asset-workbench,
    #replicateView .replicate-canvas-settings,
    #replicateView .replicate-actions,
    #replicateView .replicate-console-output .replicate-output-actions,
    #replicateView .replicate-upload-card,
    #replicateView .replicate-asset-group,
    #replicateView .replicate-preview-card,
    #replicateView .replicate-asset-card,
    #replicateView .replicate-empty,
    #replicateView .replicate-policy-box,
    #replicateView .replicate-generated-card,
    #replicateView .replicate-plan-details,
    #replicateView .replicate-token-card,
    #replicateView .replicate-validation,
    #replicateView .replicate-summary-chip,
    #replicateView .replicate-screen-card,
    #replicateView .replicate-prompt-box,
    #replicateView .replicate-output-note,
    #replicateView .replicate-generated-head,
    #replicateView .replicate-download-plan div,
    #replicateView .replicate-guidance-strip,
    #replicateView .replicate-guidance-step {
      border-radius: var(--radius);
    }

    #replicateView .replicate-panel,
    #replicateView .replicate-output-panel {
      border-color: var(--replicate-line);
      background: var(--replicate-panel);
      box-shadow: var(--replicate-shadow);
      padding: 16px;
    }

    #replicateView .replicate-panel-head,
    #replicateView .replicate-output-head {
      gap: 10px;
      margin-bottom: 12px;
    }

    #replicateView .replicate-panel-head h2,
    #replicateView .replicate-output-head h2 {
      color: var(--ink);
      font-size: 20px;
      letter-spacing: 0;
    }

    #replicateView .replicate-panel-head p,
    #replicateView .replicate-output-head p,
    #replicateView .replicate-subsection-head p,
    #replicateView .replicate-link-copy small,
    #replicateView .replicate-link-status,
    #replicateView .studio-field-hint,
    #replicateView .replicate-upload-card small {
      color: var(--replicate-muted);
    }

    #replicateView .mini-badge,
    #replicateView .replicate-model-catalog-chip,
    #replicateView .replicate-asset-badge,
    #replicateView .replicate-asset-select-state,
    #replicateView .replicate-generated-title span,
    #replicateView .replicate-scope-summary span,
    #replicateView .replicate-group-tabs button {
      border-radius: var(--radius-sm);
    }

    #replicateView .mini-badge,
    #replicateView .replicate-model-catalog-chip,
    #replicateView .replicate-asset-badge,
    #replicateView .replicate-asset-select-state,
    #replicateView .replicate-generated-title span {
      border-color: var(--gold-line);
      background: var(--gold-soft);
      color: var(--ink);
    }

    #replicateView .replicate-guidance-strip {
      margin: 0 0 12px;
      border-color: var(--replicate-line);
      background: var(--replicate-panel-soft);
      padding: 8px;
      box-shadow: none;
    }

    #replicateView .replicate-guidance-steps {
      gap: 8px;
    }

    #replicateView .replicate-guidance-step {
      grid-template-columns: 34px 32px minmax(0, 1fr);
      min-height: 58px;
      border-color: var(--replicate-line);
      background: var(--panel);
      padding: 8px;
      box-shadow: none;
    }

    #replicateView .replicate-guidance-index,
    #replicateView .replicate-guidance-icon {
      width: 32px;
      height: 32px;
      border-radius: var(--radius-sm);
      background: var(--ivory-warm);
      color: var(--deep-green);
    }

    #replicateView .replicate-guidance-step.is-active,
    #replicateView .replicate-guidance-step.is-done {
      border-color: var(--gold-line);
      background: var(--gold-soft);
      transform: none;
    }

    #replicateView .replicate-guidance-step.is-active::after,
    #replicateView .replicate-guidance-step.is-done::after {
      background: var(--gold);
    }

    #replicateView .replicate-form-grid {
      gap: 10px;
    }

    #replicateView .replicate-subsection,
    #replicateView .replicate-link-box,
    #replicateView .replicate-asset-workbench {
      border-color: var(--replicate-line);
      background: var(--replicate-panel-soft);
      padding: 12px;
    }

    #replicateView .replicate-subsection::after,
    #replicateView .replicate-link-box::after {
      opacity: .28;
    }

    #replicateView .replicate-subsection-head {
      gap: 10px;
      margin-bottom: 10px;
    }

    #replicateView .replicate-subsection-head h3,
    #replicateView .replicate-link-copy strong {
      color: var(--ink);
      font-size: 14px;
      letter-spacing: 0;
    }

    #replicateView .replicate-type-toggle,
    #replicateView .replicate-workflow-toggle,
    #replicateView .replicate-upload-row,
    #replicateView .replicate-canvas-settings,
    #replicateView .replicate-scope-summary {
      gap: 8px;
    }

    #replicateView .replicate-type-toggle span,
    #replicateView .replicate-workflow-toggle span {
      min-height: 38px;
      border-color: var(--replicate-line);
      border-radius: var(--radius);
      background: var(--panel);
      color: var(--ink-soft);
      padding: 8px 10px;
      box-shadow: none;
    }

    #replicateView .replicate-type-toggle input:checked + span,
    #replicateView .replicate-workflow-toggle input:checked + span {
      border-color: var(--gold-line);
      background: var(--gold-soft);
      color: var(--ink);
      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold-line) 34%, transparent);
      transform: none;
    }

    #replicateView .replicate-workflow-toggle span {
      min-height: 104px;
      gap: 6px 8px;
      padding: 10px;
    }

    #replicateView .replicate-workflow-toggle span > i {
      color: var(--deep-green);
    }

    #replicateView .replicate-workflow-toggle em {
      color: var(--deep-green);
    }

    #replicateView .replicate-workflow-toggle strong,
    #replicateView .replicate-scope-summary strong {
      color: var(--ink);
    }

    #replicateView .replicate-link-row {
      gap: 8px;
    }

    #replicateView .replicate-link-row .control,
    #replicateView .replicate-console-panel .control,
    #replicateView .replicate-canvas-settings .control,
    #replicateView .replicate-custom-model-fields .control,
    #replicateView .replicate-asset-controls select {
      min-height: 38px;
      border-color: var(--replicate-line);
      border-radius: var(--radius-sm);
      background: var(--panel);
      color: var(--ink);
      box-shadow: none;
    }

    #replicateView textarea.control {
      min-height: 82px;
    }

    #replicateView .replicate-upload-card {
      min-height: 142px;
      border-color: var(--replicate-line);
      background: var(--panel);
      padding: 12px;
      box-shadow: none;
    }

    #replicateView .replicate-upload-card::before {
      inset: 8px;
      border-color: color-mix(in srgb, var(--gold-line) 32%, transparent);
      border-radius: var(--radius);
    }

    #replicateView .replicate-upload-card:hover,
    #replicateView .replicate-upload-card:focus-within {
      border-color: var(--gold-line);
      background: var(--gold-soft);
      box-shadow: none;
      transform: translateY(-1px);
    }

    #replicateView .replicate-upload-card strong {
      color: var(--ink);
      font-size: 13px;
    }

    #replicateView .replicate-upload-card strong span,
    #replicateView .replicate-asset-quality span,
    #replicateView .replicate-model-meta span,
    #replicateView .replicate-model-fit span {
      border-color: var(--deep-green-line);
      background: var(--deep-green-soft);
      color: var(--deep-green);
    }

    #replicateView .replicate-preview-grid {
      grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
      gap: 8px;
    }

    #replicateView .replicate-preview-card,
    #replicateView .replicate-asset-card,
    #replicateView .replicate-generated-card,
    #replicateView .replicate-screen-card,
    #replicateView .replicate-prompt-box,
    #replicateView .replicate-plan-details {
      border-color: var(--replicate-line);
      background: var(--panel);
      box-shadow: none;
    }

    #replicateView .replicate-group-tabs {
      gap: 6px;
      margin-bottom: 10px;
    }

    #replicateView .replicate-group-tabs button {
      min-height: 30px;
      border-color: var(--replicate-line);
      background: var(--panel);
      color: var(--ink-soft);
      padding: 6px 9px;
    }

    #replicateView .replicate-group-tabs button.is-active {
      border-color: var(--gold-line);
      background: var(--gold-soft);
      color: var(--ink);
      box-shadow: none;
    }

    #replicateView .replicate-asset-group {
      border-color: var(--replicate-line);
      background: var(--panel);
      padding: 10px;
    }

    #replicateView .replicate-asset-grid {
      grid-template-columns: repeat(auto-fill, minmax(142px, 1fr));
      gap: 10px;
    }

    #replicateView .replicate-asset-thumb,
    #replicateView .replicate-generated-media {
      background:
        linear-gradient(135deg, color-mix(in srgb, var(--deep-green-line) 18%, transparent), transparent),
        var(--ivory-warm);
    }

    #replicateView .replicate-asset-card.is-selected {
      border-color: var(--gold-line);
      box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold-line) 44%, transparent);
    }

    #replicateView .replicate-canvas-settings {
      border-color: var(--replicate-line);
      background: var(--panel);
      padding: 10px;
    }

    #replicateView .replicate-policy-box {
      border-color: var(--attention-line);
      background: var(--attention-soft);
      color: var(--attention);
      padding: 10px;
    }

    #replicateView .replicate-actions,
    #replicateView .replicate-console-output .replicate-output-actions {
      border-color: var(--replicate-line);
      background: var(--replicate-panel-soft);
      padding: 10px;
      box-shadow: none;
    }

    #replicateView .replicate-actions .btn,
    #replicateView .replicate-output-actions .btn,
    #replicateView .replicate-link-row .btn,
    #replicateView #replicateGenerateBtn,
    #replicateView #replicateClearBtn {
      min-height: 38px;
      border-radius: var(--radius-sm);
      padding: 8px 12px;
    }

    #replicateView #replicateGenerateBtn,
    #replicateView .replicate-output-actions .btn-primary {
      background: var(--gold);
      color: var(--ink);
      box-shadow: 0 10px 24px color-mix(in srgb, var(--gold) 24%, transparent);
    }

    #replicateView .replicate-actions .btn-primary {
      min-width: min(300px, 100%);
    }

    #replicateView .replicate-console-output {
      background: var(--replicate-panel);
    }

    #replicateView .replicate-console-output .replicate-empty {
      min-height: 150px;
      border-color: var(--replicate-line);
      background: var(--ivory-warm);
      color: var(--muted);
      padding: 18px;
    }

    #replicateView .replicate-output-grid,
    #replicateView .replicate-generated-section,
    #replicateView .replicate-screen-list {
      gap: 10px;
    }

    #replicateView .replicate-generated-head,
    #replicateView .replicate-summary-chip,
    #replicateView .replicate-token-card,
    #replicateView .replicate-output-note,
    #replicateView .replicate-validation.is-valid {
      border-color: var(--deep-green-line);
      background: var(--deep-green-soft);
      color: var(--deep-green);
    }

    #replicateView .replicate-generated-head strong,
    #replicateView .replicate-summary-chip strong,
    #replicateView .replicate-token-card strong {
      color: var(--ink);
    }

    #replicateView .replicate-screen-card pre,
    #replicateView .replicate-prompt-box pre {
      border-radius: var(--radius-sm);
      background: var(--charcoal);
      color: var(--ivory-warm);
    }

    @media (max-width: 1180px) {
      #replicateView .saas-main {
        padding: 16px 16px 30px;
      }

      #replicateView .replicate-workspace {
        grid-template-columns: 1fr;
        max-width: 980px;
      }

      #replicateView #replicateInlineModelPanel {
        position: relative;
        top: auto;
        height: auto;
        max-height: none;
      }
    }

    @media (max-width: 760px) {
      #replicateView .saas-main {
        padding: 10px 10px 24px;
      }

      #replicateView .replicate-hero {
        padding: 12px;
      }

      #replicateView .replicate-hero h1 {
        margin-top: 8px;
        font-size: 28px;
      }

      #replicateView .replicate-hero p {
        margin-top: 8px;
        font-size: 12px;
        line-height: 1.55;
      }

      #replicateView .back-to-hub-btn,
      #replicateView .hero-kicker,
      #replicateView .hub-mini-pill {
        min-height: 32px;
        padding: 7px 9px;
      }

      #replicateView .workflow-strip {
        gap: 6px;
        margin-top: 10px;
      }

      #replicateView .hero-top-actions,
      #replicateView .hub-hero-actions,
      #replicateView .workflow-strip,
      #replicateView .replicate-guidance-steps,
      #replicateView .replicate-type-toggle,
      #replicateView .replicate-workflow-toggle,
      #replicateView .replicate-upload-row,
      #replicateView .replicate-canvas-settings,
      #replicateView .replicate-scope-summary,
      #replicateView .replicate-link-row,
      #replicateView .replicate-panel-head,
      #replicateView .replicate-output-head {
        grid-template-columns: 1fr;
      }

      #replicateView .hero-top-actions,
      #replicateView .hub-hero-actions,
      #replicateView .replicate-panel-head,
      #replicateView .replicate-output-head {
        display: grid;
      }

      #replicateView .workflow-step {
        min-height: 38px;
        padding: 6px;
      }

      #replicateView .workflow-step small {
        display: none;
      }

      #replicateView .replicate-panel,
      #replicateView #replicateInlineModelPanel,
      #replicateView .replicate-console-output {
        padding: 12px;
      }

      #replicateView #replicateInlineModelPanel .replicate-model-card {
        grid-template-columns: 74px minmax(0, 1fr);
      }

      #replicateView #replicateInlineModelPanel .replicate-model-visual {
        width: 74px;
        height: 100px;
      }

      #replicateView .replicate-actions,
      #replicateView .replicate-output-actions,
      #replicateView .replicate-asset-actions {
        display: grid;
        grid-template-columns: 1fr;
      }

      #replicateView .replicate-actions .btn,
      #replicateView .replicate-output-actions .btn,
      #replicateView .replicate-link-row .btn {
        width: 100%;
      }
    }

    /* T50: 后台四视图 scoped reskin. 只覆盖视觉层,不改任何后台 DOM/业务钩子。 */
    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) {
      --admin-bg: linear-gradient(180deg, var(--ivory-warm), var(--ivory));
      --admin-panel: color-mix(in srgb, var(--panel) 94%, var(--ivory-warm));
      --admin-panel-soft: color-mix(in srgb, var(--ivory-warm) 90%, var(--panel));
      --admin-panel-strong: color-mix(in srgb, var(--panel) 88%, var(--gold-soft));
      --admin-line: color-mix(in srgb, var(--line) 72%, var(--gold-line));
      --admin-line-strong: color-mix(in srgb, var(--gold-line) 62%, var(--line));
      --admin-muted: color-mix(in srgb, var(--muted) 84%, var(--deep-green));
      --admin-shadow: 0 12px 30px color-mix(in srgb, var(--charcoal) 9%, transparent);
      background: var(--admin-bg);
      color: var(--ink);
    }

    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView)::before,
    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView)::after {
      display: none;
    }

    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .saas-shell,
    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .saas-main {
      background: var(--admin-bg);
    }

    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .saas-shell {
      display: grid;
      grid-template-columns: minmax(236px, 272px) minmax(0, 1fr);
      min-height: 100vh;
    }

    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .saas-main {
      max-width: 1480px;
      gap: 14px;
      min-width: 0;
      padding: 20px 22px 32px;
    }

    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .saas-nav {
      border-right-color: color-mix(in srgb, var(--gold-line) 18%, transparent);
      background: linear-gradient(180deg, color-mix(in srgb, var(--charcoal) 96%, var(--deep-green)), var(--obsidian));
      box-shadow: inset -1px 0 0 color-mix(in srgb, var(--gold-line) 12%, transparent);
    }

    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .saas-brand {
      color: var(--ivory-warm);
    }

    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .saas-brand-icon {
      border-color: color-mix(in srgb, var(--gold-line) 46%, transparent);
      border-radius: var(--radius);
      background: linear-gradient(135deg, var(--gold), var(--gold-strong));
      color: var(--ink);
      box-shadow: none;
    }

    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .saas-nav-list {
      gap: 6px;
    }

    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .saas-nav-item {
      min-height: 38px;
      border-color: color-mix(in srgb, var(--gold-line) 12%, transparent);
      border-radius: var(--radius);
      background: color-mix(in srgb, var(--panel) 6%, transparent);
      color: color-mix(in srgb, var(--ivory-warm) 88%, var(--gold-soft));
      padding: 8px 9px;
    }

    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .saas-nav-item:hover,
    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .saas-nav-item.is-active {
      border-color: color-mix(in srgb, var(--gold-line) 54%, transparent);
      background: color-mix(in srgb, var(--gold-soft) 14%, transparent);
      color: var(--gold-soft);
    }

    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .saas-nav-note {
      border-color: color-mix(in srgb, var(--gold-line) 18%, transparent);
      border-radius: var(--radius);
      background: color-mix(in srgb, var(--panel) 5%, transparent);
      color: color-mix(in srgb, var(--ivory-warm) 72%, var(--gold-soft));
      padding: 11px;
    }

    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .saas-nav-note p {
      color: color-mix(in srgb, var(--ivory-warm) 72%, var(--gold-soft));
      font-size: 11px;
      line-height: 1.5;
    }

    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .mini-badge,
    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .hero-kicker {
      border-color: var(--admin-line);
      border-radius: var(--radius);
      background: var(--gold-soft);
      color: var(--deep-green);
      font-size: 11px;
      font-weight: 900;
      letter-spacing: 0;
    }

    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .hub-hero.compact {
      border: 1px solid var(--admin-line);
      border-radius: var(--radius);
      background:
        linear-gradient(135deg, color-mix(in srgb, var(--gold-soft) 38%, transparent), transparent 58%),
        var(--admin-panel);
      box-shadow: var(--admin-shadow);
      color: var(--ink);
      gap: 14px;
      padding: 16px;
    }

    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .hub-hero.compact h1 {
      color: var(--ink);
      font-size: 28px;
      font-weight: 950;
      letter-spacing: 0;
      line-height: 1.1;
    }

    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .hub-hero.compact p {
      max-width: 760px;
      color: var(--admin-muted);
      font-size: 12px;
      font-weight: 740;
      line-height: 1.55;
    }

    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .hub-actions,
    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .hero-top-actions {
      gap: 8px;
    }

    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .btn {
      min-height: 34px;
      border-radius: var(--radius);
      font-weight: 900;
    }

    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .btn-outline {
      border-color: var(--admin-line);
      background: var(--panel);
      color: var(--deep-green);
      box-shadow: none;
    }

    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .btn-outline:hover {
      border-color: var(--gold-line);
      background: var(--gold-soft);
      color: var(--ink);
    }

    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .btn-primary {
      border-color: color-mix(in srgb, var(--gold-strong) 54%, var(--gold-line));
      background: var(--gold);
      color: var(--ink);
      box-shadow: none;
    }

    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-dashboard-grid {
      grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
      gap: 12px;
      min-width: 0;
    }

    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-wide-grid {
      grid-template-columns: minmax(0, 1.05fr) minmax(320px, .68fr);
      gap: 12px;
      min-width: 0;
    }

    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-panel,
    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-table-panel {
      border: 1px solid var(--admin-line);
      border-radius: var(--radius);
      background: var(--admin-panel);
      box-shadow: var(--admin-shadow);
      color: var(--ink);
      min-width: 0;
      padding: 14px;
    }

    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-table-panel + .admin-table-panel,
    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-record-panel {
      margin-top: 12px;
    }

    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-panel h2,
    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-table-panel h2 {
      color: var(--ink);
      font-size: 15px;
      font-weight: 950;
      letter-spacing: 0;
      line-height: 1.25;
    }

    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-panel p,
    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-table-panel p {
      color: var(--admin-muted);
      font-size: 11.5px;
      font-weight: 740;
      line-height: 1.5;
      margin-top: 4px;
    }

    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-metric-grid {
      grid-template-columns: repeat(4, minmax(142px, 1fr));
      gap: 8px;
      margin: 12px 0;
    }

    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-metric {
      border: 1px solid var(--admin-line);
      border-radius: 7px;
      background: var(--admin-panel-soft);
      box-shadow: none;
      min-height: 74px;
      padding: 9px 10px;
    }

    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-metric span {
      color: var(--admin-muted);
      font-size: 10px;
      font-weight: 900;
      letter-spacing: 0;
      text-transform: none;
    }

    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-metric strong {
      color: var(--ink);
      font-size: 18px;
      margin-top: 5px;
    }

    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-metric small {
      color: var(--admin-muted);
      font-size: 10.5px;
      font-weight: 720;
      margin-top: 3px;
    }

    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-insight-list,
    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-event-list,
    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-creator-ledger-list,
    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-diagnostics-list {
      gap: 7px;
      margin-top: 10px;
    }

    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-insight-item,
    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-event-item,
    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-user-detail-head,
    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-diagnostics-row,
    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-result-box {
      border: 1px solid var(--admin-line);
      border-radius: 7px;
      background: var(--admin-panel-soft);
      color: var(--ink);
      padding: 9px;
    }

    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-insight-item {
      grid-template-columns: auto minmax(0, 1fr) auto;
      gap: 8px;
    }

    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-insight-item i {
      color: var(--gold-strong);
    }

    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-insight-item strong,
    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-event-item strong,
    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-user-detail-head strong,
    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-diagnostics-row strong,
    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-result-box strong {
      color: var(--ink);
      font-size: 12px;
      font-weight: 930;
      letter-spacing: 0;
    }

    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-insight-item > div span,
    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-insight-item small,
    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-event-item > span,
    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-user-detail-head small,
    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-diagnostics-row span,
    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-result-box small {
      color: var(--admin-muted);
      font-size: 10.8px;
      font-weight: 720;
      line-height: 1.42;
    }

    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-usage-bar {
      min-width: 84px;
      height: 7px;
      border-radius: 999px;
      background: color-mix(in srgb, var(--line) 76%, var(--panel));
    }

    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-usage-bar span {
      background: linear-gradient(90deg, var(--deep-green), var(--gold));
    }

    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-toolbar {
      gap: 8px;
      margin: 10px 0;
    }

    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-filter-row,
    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-bulk-row,
    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-record-toolbar {
      gap: 7px;
      margin-top: 10px;
    }

    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-form-grid {
      gap: 8px;
      margin-top: 10px;
    }

    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-form-grid input,
    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-form-grid select,
    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-filter-row input,
    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-filter-row select,
    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-bulk-row input,
    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-bulk-row select,
    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-creator-form input,
    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-creator-form select {
      min-height: 34px;
      border: 1px solid var(--admin-line);
      border-radius: var(--radius);
      background: var(--panel);
      color: var(--ink);
      box-shadow: none;
      font-size: 12px;
      font-weight: 800;
      padding: 7px 9px;
    }

    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-form-grid input:focus,
    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-form-grid select:focus,
    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-filter-row input:focus,
    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-filter-row select:focus,
    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-bulk-row input:focus,
    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-bulk-row select:focus,
    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-creator-form input:focus,
    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-creator-form select:focus {
      border-color: var(--gold);
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 16%, transparent);
    }

    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-creator-form label {
      color: var(--admin-muted);
      font-size: 11px;
      font-weight: 880;
    }

    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-creator-commission {
      color: var(--ink);
    }

    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-table-scroll,
    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-record-list {
      border: 1px solid var(--admin-line);
      border-radius: var(--radius);
      background: var(--panel);
      box-shadow: none;
      margin-top: 10px;
      max-width: 100%;
      min-width: 0;
      width: 100%;
    }

    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-codes-table {
      color: var(--ink);
      font-size: 11.5px;
      min-width: 780px;
    }

    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-codes-table th,
    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-codes-table td {
      border-bottom: 1px solid var(--line-soft);
      padding: 7px 9px;
      vertical-align: top;
    }

    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-codes-table th {
      background: var(--admin-panel-strong);
      color: var(--deep-green);
      font-size: 10px;
      font-weight: 940;
      letter-spacing: 0;
      line-height: 1.25;
      text-transform: none;
    }

    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-codes-table tbody tr:hover {
      background: color-mix(in srgb, var(--gold-soft) 42%, transparent);
    }

    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-code-mono {
      color: var(--deep-green);
      font-size: 11.5px;
      font-weight: 900;
      letter-spacing: 0;
    }

    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-status-pill {
      min-height: 22px;
      min-width: 58px;
      border: 1px solid var(--admin-line);
      background: var(--admin-panel-strong);
      color: var(--deep-green);
      padding: 4px 7px;
      font-size: 10.5px;
      font-weight: 900;
      line-height: 1;
    }

    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-status-pill.is-active,
    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-status-pill.is-bound {
      border-color: var(--success-line);
      background: var(--success-soft);
      color: var(--success);
    }

    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-status-pill.is-used {
      border-color: var(--gold-line);
      background: var(--gold-soft);
      color: var(--attention);
    }

    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-status-pill.is-low,
    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-status-pill.is-unbound {
      border-color: var(--attention-line);
      background: var(--attention-soft);
      color: var(--attention);
    }

    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-status-pill.is-zero,
    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-status-pill.is-banned,
    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-status-pill.is-disabled,
    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-status-pill.is-expired {
      border-color: var(--danger-line);
      background: var(--danger-soft);
      color: var(--danger);
    }

    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-selected-note,
    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-pagination-row small,
    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-empty-row,
    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-record-cleanup {
      color: var(--admin-muted);
      font-size: 11.5px;
      font-weight: 800;
    }

    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-empty-row {
      background: var(--admin-panel-soft);
      padding: 20px;
      text-align: center;
    }

    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-record-head,
    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-record-row {
      grid-template-columns: minmax(200px, 1.1fr) minmax(160px, .85fr) minmax(130px, .55fr) minmax(180px, .75fr);
      gap: 10px;
    }

    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-record-head {
      border-bottom: 1px solid var(--line-soft);
      background: var(--admin-panel-strong);
      padding: 7px 10px;
    }

    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-record-head span {
      color: var(--deep-green);
      font-size: 10px;
      font-weight: 940;
      letter-spacing: 0;
      text-transform: none;
    }

    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-record-row {
      border-bottom: 1px solid var(--line-soft);
      min-height: 54px;
      padding: 8px 10px;
    }

    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-record-row:hover {
      background: color-mix(in srgb, var(--gold-soft) 42%, transparent);
    }

    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-record-row strong,
    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-record-row span,
    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-record-row small {
      color: var(--ink);
    }

    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-record-title,
    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-record-row small {
      color: var(--admin-muted);
    }

    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-record-chip {
      border-color: var(--admin-line);
      background: var(--admin-panel-strong);
      color: var(--deep-green);
      font-size: 10px;
      font-weight: 880;
    }

    :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-diagnostics-summary {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      margin-top: 10px;
    }

    @media (max-width: 1080px) {
      :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .saas-shell {
        grid-template-columns: 1fr;
      }

      :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .saas-main {
        order: -1;
        padding: 16px;
      }

      :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .saas-nav {
        position: relative;
        top: auto;
        height: auto;
      }

      :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .hub-hero.compact,
      :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-panel,
      :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-table-panel {
        border-radius: var(--radius);
        padding: 12px;
      }

      :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-dashboard-grid,
      :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-wide-grid,
      :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-metric-grid,
      :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-diagnostics-summary {
        grid-template-columns: 1fr;
      }

      :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .back-to-hub-btn {
        min-height: 38px;
        border-radius: var(--radius);
      }
    }

    @media (max-width: 640px) {
      :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .saas-main {
        padding: 12px;
      }

      :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .hub-hero.compact h1 {
        font-size: 24px;
      }

      :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .hub-actions,
      :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .hero-top-actions,
      :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-filter-row,
      :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-bulk-row,
      :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-record-toolbar {
        display: grid;
        grid-template-columns: 1fr;
      }

      :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .hub-actions .btn,
      :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .hero-top-actions .btn,
      :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-filter-row .btn,
      :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-bulk-row .btn,
      :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-filter-row input,
      :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-filter-row select,
      :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-bulk-row input,
      :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-bulk-row select {
        width: 100%;
      }

      :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-table-scroll,
      :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-record-list {
        margin-inline: -2px;
      }
    }

    /* T60 mobile QA: narrow-screen containment across facade, workbench, records and admin views. */
    @media (max-width: 640px) {
      .public-auth-modal,
      .public-auth-modal * {
        min-width: 0;
      }

      .public-auth-modal {
        align-items: end;
        justify-items: stretch;
        overflow: hidden;
      }

      .public-auth-modal .auth-video-layer,
      .public-auth-modal .auth-scrim {
        inset: 0;
        overflow: hidden;
        max-width: 100vw;
      }

      .public-auth-modal .auth-video-media {
        width: 100vw;
        max-width: 100vw;
        transform: none;
      }

      .public-auth-modal .orbit-track-stage,
      .public-auth-modal .orbit-ring-shell,
      .public-auth-modal .orbit-ring {
        max-width: 100%;
        overflow: hidden;
      }

      .public-auth-wrap {
        width: 100%;
        max-width: calc(100vw - 20px);
        max-height: calc(100svh - 20px);
        overflow: hidden;
      }

      .public-auth-wrap .auth-card {
        width: 100%;
        max-width: 100%;
        padding: 0;
      }

      .public-auth-wrap .auth-tab-panel {
        max-height: min(440px, calc(100svh - 236px));
      }

      .public-auth-wrap .auth-register-fields {
        height: min(480px, max(300px, calc(100svh - 280px)));
        max-height: min(480px, max(300px, calc(100svh - 280px)));
      }

      .public-auth-wrap .auth-inline-actions,
      .public-auth-wrap .auth-primary-action,
      .public-auth-wrap .auth-agreement-row {
        min-width: 0;
      }

      .public-auth-wrap .auth-primary-action .btn,
      .public-auth-wrap .auth-inline-actions .btn {
        width: 100%;
        min-width: 0;
      }

      .public-auth-wrap .auth-agreement-copy {
        min-width: 0;
        overflow-wrap: anywhere;
      }

      .public-auth-wrap .auth-tab-btn,
      .public-auth-wrap .auth-login-mode-btn {
        white-space: normal;
        overflow-wrap: anywhere;
      }

      .public-shell,
      .public-shell-inner,
      .public-visual-card,
      .orbit-track-stage {
        max-width: 100vw;
        overflow-x: hidden;
      }

      body.public-auth-open .public-shell {
        overflow: hidden;
      }

      body.public-auth-open .orbit-track-stage,
      body.public-auth-open .public-visual-glow {
        display: none !important;
      }

      .app-view,
      .saas-shell,
      .saas-main,
      .saas-nav,
      .hub-hero,
      .studio-panel,
      .studio-results-panel,
      .records-toolbar,
      .admin-panel,
      .admin-table-panel,
      .replicate-panel,
      .replicate-output-panel,
      .flow-step-card,
      .wizard-panel,
      .skincare-step-workbench {
        min-width: 0;
        max-width: 100%;
      }

      .saas-main,
      .saas-nav,
      .main,
      .sidebar {
        overflow-x: hidden;
      }

      .saas-nav-list,
      .studio-mode-nav,
      .hub-hero-actions,
      .hub-actions,
      .hero-top-actions,
      .studio-panel-head,
      .studio-results-head,
      .records-filter-row,
      .record-actions,
      .skincare-inline-actions,
      .skincare-step-actions,
      .replicate-actions,
      .replicate-output-actions,
      .admin-filter-row,
      .admin-bulk-row,
      .admin-record-toolbar {
        grid-template-columns: minmax(0, 1fr);
        min-width: 0;
      }

      .saas-nav-item,
      .studio-mode-btn,
      .hub-hero-actions .btn,
      .hub-actions .btn,
      .hero-top-actions .btn,
      .studio-result-actions .btn,
      .record-actions .btn,
      .replicate-actions .btn,
      .replicate-output-actions .btn,
      .skincare-inline-actions .btn,
      .skincare-step-actions .btn,
      .admin-filter-row .btn,
      .admin-bulk-row .btn {
        width: 100%;
        min-width: 0;
        white-space: normal;
        overflow-wrap: anywhere;
      }

      .hub-hero h1,
      .studio-panel-head h2,
      .studio-results-panel h2,
      .records-view .hub-hero h1,
      .admin-ops-view .hub-hero h1,
      .admin-codes-view .hub-hero h1,
      .admin-creators-view .hub-hero h1 {
        overflow-wrap: anywhere;
      }

      .workflow-step,
      .studio-result-card,
      .record-card,
      .skincare-upload-card,
      .skincare-fact-card,
      .skincare-fact-row,
      .skincare-missing-facts li,
      .slot-card,
      .result-card,
      .admin-metric,
      .admin-insight-item,
      .admin-event-item {
        min-width: 0;
        max-width: 100%;
      }

      .studio-result-card strong,
      .studio-result-card small,
      .record-meta strong,
      .record-meta span,
      .record-meta small,
      .skincare-upload-card strong,
      .skincare-upload-card small,
      .skincare-fact-row b,
      .skincare-fact-row span,
      .admin-metric strong,
      .admin-metric small,
      .admin-insight-item strong,
      .admin-insight-item span,
      .admin-insight-item small,
      .admin-event-item strong,
      .admin-event-item span {
        min-width: 0;
        overflow-wrap: anywhere;
      }

      .studio-result-actions,
      .studio-result-card-body,
      .records-toolbar,
      .record-preview-head,
      .record-actions,
      .admin-user-detail-head,
      .admin-diagnostics-row strong {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
      }

      .records-alert,
      .hero-kicker,
      .mini-badge,
      .admin-status-pill,
      .workbench-quota-pill {
        max-width: 100%;
        white-space: normal;
        overflow-wrap: anywhere;
      }

      .record-preview-modal {
        overflow: hidden;
      }

      .record-preview-head {
        grid-template-columns: minmax(0, 1fr) auto;
      }

      .record-preview-head h2 {
        min-width: 0;
      }

      :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-table-scroll {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        overscroll-behavior-x: contain;
      }

      :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-codes-table {
        min-width: 640px;
      }

      :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-record-head {
        display: none;
      }

      :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .admin-record-row {
        grid-template-columns: minmax(0, 1fr);
      }
    }

    @media (max-width: 420px) {
      .public-auth-wrap .auth-tab-panel {
        max-height: min(410px, calc(100svh - 226px));
      }

      .public-auth-wrap .auth-register-fields {
        height: min(450px, max(286px, calc(100svh - 270px)));
        max-height: min(450px, max(286px, calc(100svh - 270px)));
      }

      .saas-main,
      .saas-nav,
      .main,
      .sidebar,
      .product-center-view .saas-main,
      :is(.product-center-view, .creator-share-view, .records-view, .image-studio-view, .video-studio-view, .personal-center-view) .saas-nav,
      .records-view .saas-main,
      :is(#adminOpsView, #adminUsersView, #adminCodesView, #adminCreatorsView) .saas-main {
        padding-left: 10px;
        padding-right: 10px;
      }

      .hub-hero,
      .product-card,
      .studio-panel,
      .studio-results-panel,
      .records-toolbar,
      .admin-panel,
      .admin-table-panel,
      .replicate-panel,
      .replicate-output-panel,
      .flow-step-card,
      .wizard-panel,
      .skincare-step-workbench {
        padding-left: 12px;
        padding-right: 12px;
      }
    }

    /* ===================== T13 · 访客首屏 黑金沉浸入口页(modal→首屏常驻) ===================== */
    /* 把原本点击弹出的 #publicAuthModal 改成首屏常驻的全屏沉浸式黑金入口:左营销/右登录。
       JS 行为零改:仍用 #publicAuthModal / #publicAuthMount / #heroPrimaryBtn 等钩子。 */
    .public-orbit-keeper {
      display: none !important;
    }

    .public-auth-hero {
      position: relative;
      inset: auto;
      z-index: 1;
      width: 100vw;
      margin-left: calc(50% - 50vw);
      min-height: clamp(600px, calc(100vh - 92px), 1100px);
      padding: clamp(20px, 3.2vw, 44px) clamp(16px, 4vw, 72px) clamp(28px, 4vw, 56px);
      place-items: center;
      background: var(--obsidian);
    }

    /* 视觉背景仍为登录视频 + 黑金遮罩(沿用 T11/T12 的 .auth-video-layer/.auth-scrim) */
    .public-auth-hero .auth-scrim {
      pointer-events: none; /* 首屏常驻:禁用背景点击关闭,避免访客误触清空入口页 */
    }

    .public-auth-hero .public-auth-close {
      display: none; /* 首屏常驻:隐藏关闭按钮(钩子保留在 DOM,事件绑定不受影响) */
    }

    .public-auth-hero .public-auth-wrap {
      width: min(1200px, calc(100vw - 48px));
      min-height: min(660px, calc(100svh - 116px));
      max-height: none;
      align-items: center;
    }

    .public-auth-hero .auth-brand-side {
      pointer-events: auto;
      align-items: center;
      justify-content: flex-start;
      min-height: 0;
    }

    .public-auth-hero .hero-copy {
      display: flex;
      flex-direction: column;
      gap: clamp(13px, 1.5vw, 20px);
      width: 100%;
      max-width: 580px;
    }

    .public-auth-hero .public-kicker {
      display: inline-flex;
      width: fit-content;
      align-items: center;
      gap: 7px;
      border-radius: 999px;
      border: 1px solid rgba(201, 168, 106, 0.28);
      background: rgba(31, 58, 51, 0.18);
      color: var(--gold-line);
      padding: 6px 12px;
      font-size: 11px;
      font-weight: 950;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .public-auth-hero .hero-headline {
      margin: 0;
      font-size: clamp(30px, 3.6vw, 52px);
      line-height: 1.16;
      font-weight: 950;
      letter-spacing: -0.012em;
      color: var(--ivory-warm);
      text-wrap: balance;
    }

    .public-auth-hero .hero-headline-gold {
      background: linear-gradient(120deg, var(--gold-line) 0%, var(--gold) 48%, var(--gold-strong) 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .public-auth-hero .hero-subtitle {
      display: block;
      margin: 0;
      max-width: 540px;
      color: rgba(246, 244, 238, 0.78);
      font-size: clamp(13px, 1.1vw, 15px);
      line-height: 1.8;
    }

    .public-auth-hero .hero-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin: 2px 0 0;
    }

    .public-auth-hero .hero-chips .public-note-pill {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      border-radius: 999px;
      border: 1px solid rgba(226, 207, 160, 0.22);
      background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)),
        rgba(14, 15, 16, 0.55);
      color: rgba(246, 244, 238, 0.9);
      padding: 7px 12px;
      font-size: 12px;
      font-weight: 800;
      backdrop-filter: blur(10px);
    }

    /* SKU 事实卡(纯静态装饰,不接真实数据) */
    .public-auth-hero .hero-skucard {
      display: grid;
      gap: 12px;
      width: min(440px, 100%);
      margin-top: 4px;
      border: 1px solid rgba(226, 207, 160, 0.2);
      border-radius: 8px;
      background:
        linear-gradient(180deg, rgba(26, 27, 25, 0.72), rgba(14, 15, 16, 0.82)),
        var(--glass-panel, rgba(14, 15, 16, 0.6));
      box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 0 0 1px rgba(201, 168, 106, 0.08);
      backdrop-filter: blur(16px);
      padding: 16px 18px;
    }

    .public-auth-hero .skucard-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    .public-auth-hero .skucard-chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border-radius: 999px;
      border: 1px solid rgba(201, 168, 106, 0.32);
      background: rgba(201, 168, 106, 0.1);
      color: var(--gold-line);
      padding: 4px 10px;
      font-size: 11px;
      font-weight: 900;
      letter-spacing: 0.04em;
    }

    .public-auth-hero .skucard-id {
      color: rgba(246, 244, 238, 0.62);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.06em;
    }

    .public-auth-hero .skucard-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 9px 16px;
      margin: 0;
    }

    .public-auth-hero .skucard-grid > div {
      display: grid;
      gap: 2px;
      min-width: 0;
    }

    .public-auth-hero .skucard-grid .skucard-wide {
      grid-column: 1 / -1;
    }

    .public-auth-hero .skucard-grid dt {
      color: rgba(246, 244, 238, 0.5);
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .public-auth-hero .skucard-grid dd {
      margin: 0;
      color: var(--ivory-warm);
      font-size: 13px;
      font-weight: 800;
      overflow-wrap: anywhere;
    }

    .public-auth-hero .skucard-foot {
      display: flex;
      align-items: center;
      gap: 10px;
      border-top: 1px solid rgba(226, 207, 160, 0.12);
      padding-top: 11px;
    }

    .public-auth-hero .skucard-foot-label {
      color: rgba(246, 244, 238, 0.6);
      font-size: 11px;
      font-weight: 800;
    }

    .public-auth-hero .skucard-confbar {
      position: relative;
      flex: 1;
      height: 6px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.08);
      overflow: hidden;
    }

    .public-auth-hero .skucard-confbar i {
      position: absolute;
      inset: 0 auto 0 0;
      display: block;
      height: 100%;
      border-radius: 999px;
      background: linear-gradient(90deg, var(--gold-strong), var(--gold) 60%, var(--gold-line));
    }

    .public-auth-hero .skucard-conf {
      color: var(--gold-line);
      font-size: 12px;
      font-weight: 950;
      letter-spacing: 0.02em;
    }

    /* 信任行 */
    .public-auth-hero .hero-trust {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px 14px;
      margin-top: 2px;
    }

    .public-auth-hero .hero-trust-label {
      color: rgba(246, 244, 238, 0.52);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.06em;
    }

    .public-auth-hero .hero-trust-list {
      display: inline-flex;
      align-items: center;
      gap: 9px;
    }

    .public-auth-hero .hero-trust-item {
      color: rgba(246, 244, 238, 0.92);
      font-size: 13px;
      font-weight: 900;
      letter-spacing: 0.01em;
    }

    .public-auth-hero .hero-trust-dot {
      color: rgba(201, 168, 106, 0.6);
      font-weight: 900;
    }

    .public-auth-hero .hero-cta {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      gap: 10px;
      margin-top: 6px;
    }

    /* #publicAuthMount 仍在右侧 .auth-panel 内常驻可见,样式沿用 T11/T12 既有面板规则 */

    /* 首屏常驻不再锁滚动:中和 openPublicAuthModal 触发的 public-auth-open 滚动锁,保证可滚到下方能力区 */
    body.public-mode.public-auth-open {
      overflow: auto;
    }

    body.public-mode.public-auth-open .public-shell {
      overflow: hidden;
    }

    @media (max-width: 980px) {
      /* 移动端:沿用既有 .auth-brand-side{display:none} → 表单优先;此处仅收紧首屏高度 */
      .public-auth-hero {
        width: 100vw;
        margin-left: calc(50% - 50vw);
        min-height: calc(100svh - 80px);
        padding: 16px;
      }

      .public-auth-hero .public-auth-wrap {
        width: min(560px, calc(100vw - 28px));
        min-height: 0;
      }
    }

    /* ===================== 登录视频先播放、播完再显表单(2026-06-25) ===================== */
    /* 初始 .hero-intro:视频明亮全屏播放,表单/数据栏淡出隐藏;JS 监听 video 的 ended 后
       去掉 .hero-intro → 表单淡入,视频回到压暗循环背景。fail-open 由 JS 兜底。 */
    .public-auth-hero .public-auth-wrap {
      transition: opacity 0.55s ease;
    }

    .public-auth-hero .auth-video-media {
      transition: opacity 0.6s ease, filter 0.6s ease;
    }

    .public-auth-hero.hero-intro .public-auth-wrap {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }

    .public-auth-hero.hero-intro .hero-stats-band {
      opacity: 0;
      visibility: hidden;
    }

    .public-auth-hero.hero-intro .auth-video-media {
      opacity: 1;
      filter: none;
      transform: none;
    }

    .public-auth-hero.hero-intro .auth-scrim {
      background: linear-gradient(180deg, rgba(4, 5, 5, 0.1), rgba(4, 5, 5, 0.26));
      backdrop-filter: none;
    }

    /* ===================== 手机端注册区:自然高度 + 静态按钮 + 整页滚动(2026-06-25) ===================== */
    /* 修复:固定高度内层滚动 + sticky 按钮导致「同意」勾选行被盖住、滑不到、注册键够不到。
       窄屏改为表单自然铺开、按钮回到同意行下方、由整页滚动触达。放在所有旧断点规则之后以覆盖。 */
    @media (max-width: 640px) {
      .public-auth-wrap .auth-tab-panel {
        max-height: none;
        overflow: visible;
      }

      .public-auth-wrap .auth-tab-panel:has(.auth-register-fields) {
        overflow: visible;
      }

      .public-auth-wrap .auth-register-fields {
        height: auto;
        max-height: none;
        display: block;
      }

      .public-auth-wrap .auth-register-scroll {
        overflow: visible;
        max-height: none;
      }

      .public-auth-wrap .auth-primary-action {
        position: static;
        background: transparent;
        padding-top: 6px;
      }
    }

    /* ===================== 手机端「开始使用」点击门控(2026-06-26) ===================== */
    /* 手机端进站只见视频背景 + 居中引导卡;点「开始使用」后 JS 去掉 .hero-mobile-gate 才淡入表单。
       根因:iOS 低电量/减弱动效会禁自动播放 → 旧的自动播放→ended 方案在真机上「看不到视频 + 直接出表单」。
       仅手机端;电脑端完全不受影响。 */
    @media (max-width: 640px) {
      .public-auth-hero.hero-mobile-gate {
        position: relative;
        min-height: calc(100svh - 116px);
      }

      /* 门控阶段:彻底收起表单/数据栏(不只是 visibility 隐藏),让 hero 塌到一屏高,
         引导卡才能在视口里居中,而不是被隐藏表单的高度顶到屏外。 */
      .public-auth-hero.hero-mobile-gate .public-auth-wrap,
      .public-auth-hero.hero-mobile-gate .hero-stats-band {
        display: none;
      }

      .hero-start-gate {
        position: absolute;
        inset: 0;
        z-index: 4;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 24px;
        text-align: center;
        background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.26), rgba(0, 0, 0, 0.55));
        animation: heroGateIn 0.5s ease both;
      }

      .hero-start-card {
        width: min(420px, calc(100vw - 48px));
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
      }

      .hero-start-kicker {
        font-size: 12px;
        letter-spacing: 0.28em;
        text-transform: uppercase;
        font-weight: 700;
        color: #c9a86a;
      }

      .hero-start-title {
        font-size: clamp(16px, 5.4vw, 23px);
        line-height: 1.26;
        font-weight: 800;
        color: #fff;
        text-shadow: 0 2px 18px rgba(0, 0, 0, 0.6);
        white-space: nowrap;
      }

      .hero-start-sub {
        font-size: 14px;
        line-height: 1.5;
        color: rgba(255, 255, 255, 0.84);
        text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55);
      }

      .hero-start-btn {
        margin-top: 10px;
        width: 100%;
        max-width: 320px;
        padding: 16px 22px;
        border: 0;
        border-radius: 16px;
        cursor: pointer;
        font-size: 17px;
        font-weight: 800;
        color: #1a1407;
        background: linear-gradient(135deg, #f3d9a0, #c9a86a);
        box-shadow: 0 14px 34px rgba(201, 168, 106, 0.38);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
      }

      .hero-start-btn:active {
        transform: translateY(1px);
      }

      .hero-start-hint {
        font-size: 12px;
        color: rgba(255, 255, 255, 0.62);
      }

      /* 高级感:门控阶段背景(视频或其首帧海报)做缓慢电影式推近(Ken Burns)。
         即便 in-app webview 禁自动播放、只显海报,画面也是「活」的而非死图。 */
      .public-auth-hero.hero-mobile-gate .auth-video-media {
        transform-origin: 50% 42%;
        animation: heroKenBurns 18s ease-in-out infinite alternate;
        will-change: transform;
      }

      /* 截图2:「为什么选择」副标题手机端排一行(隐藏后半句"，覆盖主流平台规格",
         主句单行;桌面端两段都在、整句不变,不受此规则影响)。 */
      .public-light-sub .pls-tail { display: none; }
      .public-light-sub {
        white-space: nowrap;
        font-size: clamp(12px, 3.7vw, 14px);
      }

      /* 减弱动效:门控卡不做入场动画,背景不推近(视频仍由既有规则退化为海报背景) */
      @media (prefers-reduced-motion: reduce) {
        .hero-start-gate { animation: none; }
        .public-auth-hero.hero-mobile-gate .auth-video-media { animation: none; }
      }
    }

    @keyframes heroKenBurns {
      from { transform: scale(1.02); }
      to { transform: scale(1.12); }
    }

    @keyframes heroGateIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    @media (prefers-reduced-motion: reduce) {
      /* 视频退化为静态暗背景由既有 .auth-video-media{display:none}+.auth-video-layer 海报处理 */
      .public-auth-hero .skucard-confbar i {
        transition: none;
      }
    }

    /* ---- T13b 反馈迭代:左栏极简化(删复杂文案/能力 chips/SKU 卡)+ 借鉴 4 步生成文案 ---- */
    .public-auth-hero .hero-steps {
      margin-top: 4px;
      padding: 16px 18px;
      border-radius: 12px;
      border: 1px solid color-mix(in srgb, var(--gold) 22%, transparent);
      background: linear-gradient(140deg, color-mix(in srgb, var(--obsidian) 78%, transparent), color-mix(in srgb, #0c0a07 86%, transparent));
      box-shadow: 0 14px 40px -28px rgba(0, 0, 0, 0.9);
    }

    .public-auth-hero .hero-steps-title {
      display: flex;
      align-items: baseline;
      gap: 8px;
      font-size: 14px;
      font-weight: 700;
      letter-spacing: 0.02em;
      color: var(--ivory-warm);
      margin-bottom: 14px;
    }

    .public-auth-hero .hero-steps-num {
      font-size: 22px;
      font-weight: 800;
      line-height: 1;
      background: linear-gradient(120deg, var(--gold), #f5dca0);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .public-auth-hero .hero-steps-list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
      counter-reset: heroStep;
    }

    .public-auth-hero .hero-step {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 6px;
      padding-right: 8px;
    }

    .public-auth-hero .hero-step + .hero-step::before {
      content: "→";
      position: absolute;
      left: -9px;
      top: 9px;
      font-size: 12px;
      color: color-mix(in srgb, var(--gold) 60%, transparent);
    }

    .public-auth-hero .hero-step-ico {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 34px;
      height: 34px;
      border-radius: 9px;
      color: var(--gold);
      background: color-mix(in srgb, var(--gold) 12%, transparent);
      border: 1px solid color-mix(in srgb, var(--gold) 26%, transparent);
    }

    .public-auth-hero .hero-step-name {
      font-size: 12.5px;
      font-weight: 600;
      color: var(--ivory-warm);
      line-height: 1.25;
    }

    .public-auth-hero .hero-step-desc {
      font-size: 11px;
      color: color-mix(in srgb, var(--ivory) 64%, transparent);
      line-height: 1.3;
    }

    /* ---- T13b:登录/注册面板等视频播放约 15s 后再「弹出」(纯 CSS,不触碰任何鉴权 JS);视频本就 loop 一直播 ---- */
    .public-auth-hero .auth-panel {
      animation: t13AuthPanelReveal 0.7s cubic-bezier(0.22, 1, 0.36, 1) 15s both;
      will-change: opacity, transform;
      /* 首屏面板按内容自然高度排布:注册态表单变高时不再被 minmax(0,1fr) 行裁剪、
         不会溢出压住下方四步条(钩子 #publicAuthMount 不动,仅改容器布局) */
      display: flex;
      flex-direction: column;
      max-height: none;
      overflow: visible;
    }

    @keyframes t13AuthPanelReveal {
      0% {
        opacity: 0;
        transform: translateY(34px) scale(0.975);
        pointer-events: none;
      }
      100% {
        opacity: 1;
        transform: none;
        pointer-events: auto;
      }
    }

    @media (max-width: 980px) {
      /* 移动端表单优先:面板即时可见,不做 15s 延迟,避免移动用户长时间无入口 */
      .public-auth-hero .auth-panel {
        animation: none;
      }

      .public-auth-hero .hero-steps-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (prefers-reduced-motion: reduce) {
      /* 降级:不做延迟/位移动画,面板直接可见 */
      .public-auth-hero .auth-panel {
        animation: none;
      }
    }

    /* ---- T13c 反馈迭代:4 步生成搬到登录/注册面板下方,做成截图2 的横向四步条 ---- */
    .public-auth-hero .hero-steps-panel {
      margin-top: 18px;
      padding: 14px 16px;
    }

    .public-auth-hero .hero-steps-panel .hero-steps-title {
      margin-bottom: 12px;
    }

    .public-auth-hero .hero-steps-panel .hero-steps-list {
      gap: 8px;
    }

    .public-auth-hero .hero-steps-panel .hero-step-ico {
      width: 30px;
      height: 30px;
      border-radius: 8px;
    }

    @media (max-width: 980px) {
      .public-auth-hero .hero-steps-panel {
        margin-top: 14px;
      }
    }

    /* ---- T13d 反馈迭代:英雄区底部数据条(深色,接英雄区)+ 其下白色「为什么选择」内容区 ---- */
    .public-auth-hero .hero-stats-band {
      /* 关键修复:数据条原为「非定位块」,按 CSS 绘制顺序落在绝对定位的视频层(z:0)/
         遮罩层(z:1)之下被整条盖住→用户看不到。提到 z:3 浮于视频之上,并补深色底+内边距保证可读 */
      position: relative;
      z-index: 3;
      width: 100%;
      margin-top: clamp(18px, 2.6vw, 30px);
      padding: clamp(16px, 2.2vw, 26px) clamp(16px, 3vw, 40px) clamp(14px, 2vw, 22px);
      border-top: 1px solid rgba(201, 168, 106, 0.22);
      border-radius: 14px 14px 0 0;
      background: linear-gradient(180deg, rgba(8, 9, 10, 0.34) 0%, rgba(8, 9, 10, 0.62) 100%);
      backdrop-filter: blur(3px);
    }

    .hero-stats-inner {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: clamp(10px, 2vw, 28px);
      width: min(1100px, 100%);
      margin: 0 auto;
    }

    .hero-stat {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      text-align: center;
    }

    .hero-stat-num {
      font-size: clamp(22px, 2.6vw, 34px);
      font-weight: 950;
      line-height: 1.05;
      letter-spacing: -0.01em;
      background: linear-gradient(120deg, var(--gold-line) 0%, var(--gold) 50%, var(--gold-strong) 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .hero-stat-label {
      font-size: clamp(11px, 1vw, 13px);
      font-weight: 700;
      letter-spacing: 0.04em;
      color: rgba(246, 244, 238, 0.66);
    }

    /* 白色内容区:全宽白底,深色文字,形成「深色视频英雄区 → 干净白色内容区」的高级落地页节奏 */
    .public-light-section {
      width: 100vw;
      margin-left: calc(50% - 50vw);
      background: linear-gradient(180deg, #ffffff 0%, #faf8f4 100%);
      color: #1b1b1b;
      padding: clamp(40px, 6vw, 84px) clamp(16px, 4vw, 72px) clamp(44px, 6vw, 88px);
      border-top: 1px solid rgba(201, 168, 106, 0.28);
    }

    .public-light-inner {
      width: min(1100px, 100%);
      margin: 0 auto;
    }

    .public-light-head {
      text-align: center;
      margin-bottom: clamp(28px, 3.4vw, 48px);
    }

    .public-light-title {
      margin: 0;
      font-size: clamp(24px, 3vw, 38px);
      font-weight: 950;
      letter-spacing: -0.01em;
      color: #14110b;
    }

    .public-light-title-em {
      background: linear-gradient(120deg, #b8923f 0%, #c9a86a 52%, #9a7a2f 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .public-light-sub {
      margin: 12px auto 0;
      max-width: 620px;
      font-size: clamp(13px, 1.1vw, 15px);
      line-height: 1.8;
      color: rgba(40, 36, 28, 0.66);
    }

    /* 白区内的特性卡:浅色主题覆盖(深色文字 / 白卡 / 细描边 + 柔和阴影) */
    .public-light-section .public-feature-grid {
      margin-top: 0;
    }

    .public-light-section .public-feature-card {
      border: 1px solid rgba(28, 24, 16, 0.1);
      background: #ffffff;
      box-shadow: 0 16px 40px -30px rgba(20, 17, 11, 0.55);
    }

    .public-light-section .public-feature-card::before {
      background: linear-gradient(90deg, rgba(201, 168, 106, 0), rgba(201, 168, 106, 0.55), rgba(201, 168, 106, 0));
      opacity: 0.7;
    }

    .public-light-section .public-feature-icon {
      border: 1px solid rgba(184, 146, 63, 0.28);
      background: rgba(201, 168, 106, 0.12);
      color: #9a7a2f;
      box-shadow: inset 0 0 0 1px rgba(201, 168, 106, 0.14);
    }

    .public-light-section .public-feature-card h3 {
      color: #1a160e;
    }

    .public-light-section .public-feature-card p {
      color: rgba(40, 36, 28, 0.74);
    }

    @media (max-width: 980px) {
      .public-auth-hero .hero-stats-band {
        margin-top: 18px;
      }

      .hero-stats-inner {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px 12px;
      }
    }

    /* ---- T13e:让英雄区登录视频清晰可见(原 scrim 0.48→0.96 + brightness 0.58 把视频压成近黑) ---- */
    /* 仅作用于首屏英雄区,不动其它场景共用的 .auth-scrim / .auth-video-media */
    .public-auth-hero .auth-video-media {
      opacity: 0.94;
      filter: saturate(0.94) contrast(1.05) brightness(0.86);
    }

    .public-auth-hero .auth-scrim {
      background:
        linear-gradient(90deg, rgba(4, 5, 5, 0.26) 0%, rgba(4, 5, 5, 0.38) 42%, rgba(4, 5, 5, 0.62) 70%, rgba(4, 5, 5, 0.8) 100%),
        linear-gradient(180deg, rgba(4, 5, 5, 0) 50%, rgba(4, 5, 5, 0.5) 100%),
        radial-gradient(circle at 22% 28%, rgba(201, 168, 106, 0.16), transparent 34%);
      backdrop-filter: none;
    }

    @media (max-width: 980px) {
      /* 移动端表单优先:面板几乎铺满,视频仅作底纹,稍压暗保证表单对比度 */
      .public-auth-hero .auth-scrim {
        background:
          linear-gradient(180deg, rgba(4, 5, 5, 0.42) 0%, rgba(4, 5, 5, 0.58) 60%, rgba(4, 5, 5, 0.74) 100%),
          radial-gradient(circle at 22% 22%, rgba(201, 168, 106, 0.16), transparent 38%);
      }
    }

    /* ---- T13g:英雄区背景视频音量控件(收起=圆形静音键;开启=金边药丸+音乐图标+音量滑块);
       浮于视频/遮罩之上,右下角;不动 <video> 任何属性,仅由 JS 在用户点击手势内切换 .muted/.volume ---- */
    .public-auth-hero .hero-audio-ctl {
      position: absolute;
      right: clamp(16px, 2.4vw, 34px);
      bottom: clamp(16px, 2.4vw, 32px);
      z-index: 6;
      display: inline-flex;
      align-items: center;
      gap: 0;
      padding: 6px;
      border-radius: 999px;
      border: 1px solid rgba(201, 168, 106, 0.32);
      background: rgba(8, 9, 10, 0.5);
      backdrop-filter: blur(4px);
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.34);
      transition: gap 0.22s ease, padding 0.22s ease, border-color 0.22s ease, background 0.22s ease;
    }

    .public-auth-hero .hero-audio-btn {
      flex: 0 0 auto;
      width: 38px;
      height: 38px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      border: 0;
      cursor: pointer;
      color: var(--ivory, #f4ead7);
      background: transparent;
      transition: color 0.2s ease, background 0.2s ease;
    }

    .public-auth-hero .hero-audio-btn:hover {
      color: var(--gold, #c9a86a);
      background: rgba(201, 168, 106, 0.14);
    }

    .public-auth-hero .hero-audio-ico {
      width: 18px;
      height: 18px;
    }

    /* 收起态(静音):只显示圆形静音键,藏音乐图标与滑块 */
    .public-auth-hero .hero-audio-ctl[data-state="muted"] .ico-on { display: none; }
    .public-auth-hero .hero-audio-ctl[data-state="on"] .ico-muted { display: none; }

    .public-auth-hero .hero-audio-slider {
      flex: 0 0 auto;
      width: 0;
      opacity: 0;
      margin: 0;
      pointer-events: none;
      -webkit-appearance: none;
      appearance: none;
      height: 4px;
      border-radius: 999px;
      background: linear-gradient(90deg, var(--gold, #c9a86a) var(--vol, 50%), rgba(244, 234, 215, 0.28) var(--vol, 50%));
      transition: width 0.22s ease, opacity 0.22s ease, margin 0.22s ease;
    }

    /* 开启态:药丸展开,显出滑块 */
    .public-auth-hero .hero-audio-ctl[data-state="on"] {
      gap: 10px;
      padding: 6px 16px 6px 6px;
      border-color: rgba(201, 168, 106, 0.6);
      background: rgba(8, 9, 10, 0.62);
    }

    .public-auth-hero .hero-audio-ctl[data-state="on"] .hero-audio-slider {
      width: clamp(86px, 9vw, 132px);
      opacity: 1;
      pointer-events: auto;
    }

    .public-auth-hero .hero-audio-slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: var(--gold, #c9a86a);
      border: 2px solid rgba(8, 9, 10, 0.85);
      cursor: pointer;
    }

    .public-auth-hero .hero-audio-slider::-moz-range-thumb {
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: var(--gold, #c9a86a);
      border: 2px solid rgba(8, 9, 10, 0.85);
      cursor: pointer;
    }

    @media (max-width: 980px) {
      .public-auth-hero .hero-audio-ctl {
        right: 12px;
        bottom: 12px;
      }
      .public-auth-hero .hero-audio-ctl[data-state="on"] .hero-audio-slider {
        width: 84px;
      }
    }

    /* ===== T16 AI 短视频生成（#videoStudioView，暗色 SaaS，沿用 imageStudio 暗主题语言） ===== */
    #videoStudioView {
      --studio-fg: #f6f4ee;
      --ink: #f6f4ee;
      --ink-soft: rgba(246, 244, 238, .82);
      --muted: rgba(246, 244, 238, .6);
      --line: rgba(226, 207, 160, .16);
      color: var(--ink);
      background:
        linear-gradient(180deg, rgba(9, 11, 10, .86) 0%, rgba(9, 11, 10, .8) 40%, rgba(9, 11, 10, .94) 100%),
        url('media/hub-bg-20260622.jpg') center top / cover no-repeat fixed,
        #0a0b0a;
    }
    #videoStudioView .saas-shell,
    #videoStudioView .saas-main {
      background: transparent;
    }
    /* 让左栏 .vs-wb-rail 的 position:sticky 真正随滚动常驻:祖先 .app-view 的 overflow:hidden 会建立
       滚动容器、切断 sticky 对整窗滚动的参照(左栏跟不动→下方留大片黑边,即用户反馈的「左边空白」)。
       改 overflow:clip——同样裁掉装饰光斑的横向溢出,但不建立滚动容器,sticky 恢复相对整窗生效。 */
    #videoStudioView.app-view {
      overflow: clip;
    }
    #videoStudioView .saas-nav {
      border-right-color: rgba(226, 207, 160, .14);
    }
    #videoStudioView .saas-nav-note {
      border: 1px solid rgba(226, 207, 160, .2);
      border-radius: 14px;
      background: rgba(9, 11, 10, .5);
      color: rgba(246, 244, 238, .78);
      padding: 14px 16px;
    }
    #videoStudioView .saas-nav-note p { color: rgba(246, 244, 238, .66); margin-top: 6px; }

    #videoStudioView .hub-hero.compact .workflow-step {
      border-color: rgba(226, 207, 160, .2);
      background: rgba(255, 255, 255, .05);
      color: rgba(246, 244, 238, .82);
    }
    #videoStudioView .hub-hero.compact .workflow-step em {
      background: rgba(201, 168, 106, .2);
      color: var(--gold-soft);
      box-shadow: 0 0 0 3px rgba(226, 207, 160, .14);
    }
    #videoStudioView .hub-hero.compact .workflow-step strong { color: var(--studio-fg); }
    #videoStudioView .hub-hero.compact .workflow-step small { color: rgba(246, 244, 238, .6); }

    /* 主区面板:暗玻璃卡片 */
    #videoStudioView .video-studio-panel {
      border: 1px solid rgba(226, 207, 160, .16);
      border-radius: 18px;
      background: linear-gradient(180deg, rgba(27, 33, 29, .74) 0%, rgba(14, 15, 16, .72) 100%);
      box-shadow: 0 22px 56px rgba(0, 0, 0, .4);
      backdrop-filter: blur(8px);
      padding: 22px;
      margin-top: 18px;
    }
    #videoStudioView .studio-panel-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 16px;
    }
    #videoStudioView .studio-panel-head h2 {
      color: var(--studio-fg);
      font-size: 20px;
      font-weight: 900;
    }
    #videoStudioView .studio-panel-head p {
      color: rgba(246, 244, 238, .66);
      font-size: 13px;
      line-height: 1.6;
      margin-top: 4px;
      max-width: 760px;
    }
    #videoStudioView .mini-badge {
      border-color: rgba(226, 207, 160, .28);
      background: rgba(201, 168, 106, .12);
      color: #99f6e4;
      white-space: nowrap;
    }

    /* 表单控件:暗输入框 */
    #videoStudioView .control,
    #videoStudioView textarea.control,
    #videoStudioView select.control {
      border: 1px solid rgba(226, 207, 160, .18);
      background: rgba(9, 11, 10, .5);
      color: var(--studio-fg);
      border-radius: 12px;
      padding: 10px 12px;
      width: 100%;
    }
    #videoStudioView select.control option { background: #14181a; color: var(--studio-fg); }
    #videoStudioView .field { display: flex; flex-direction: column; gap: 6px; }
    #videoStudioView .field .label { color: rgba(246, 244, 238, .82); font-size: 13px; font-weight: 700; }

    /* 模型卡片网格 */
    #videoStudioView .video-model-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
      gap: 14px;
    }
    #videoStudioView .video-model-card {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 8px;
      text-align: left;
      border: 1px solid rgba(226, 207, 160, .16);
      border-radius: 16px;
      background: rgba(255, 255, 255, .035);
      padding: 16px 16px 14px;
      cursor: pointer;
      transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, background .18s ease;
    }
    #videoStudioView .video-model-card:hover {
      border-color: rgba(226, 207, 160, .4);
      transform: translateY(-2px);
    }
    #videoStudioView .video-model-card.is-highlight {
      border-color: rgba(201, 168, 106, .36);
      background: rgba(201, 168, 106, .08);
    }
    #videoStudioView .video-model-card.is-recommended {
      border-color: rgba(94, 234, 212, .42);
      box-shadow: 0 0 0 1px rgba(94, 234, 212, .22) inset;
    }
    #videoStudioView .video-model-card.is-selected {
      border-color: var(--gold-line);
      background: rgba(201, 168, 106, .18);
      box-shadow: 0 0 0 2px rgba(226, 207, 160, .4), 0 18px 36px rgba(0, 0, 0, .4);
    }
    #videoStudioView .video-model-tier {
      display: inline-flex;
      width: fit-content;
      align-items: center;
      gap: 4px;
      border-radius: 999px;
      padding: 2px 10px;
      font-size: 11.5px;
      font-weight: 800;
      background: rgba(201, 168, 106, .2);
      color: var(--gold-soft);
    }
    #videoStudioView .video-model-card.is-recommended .video-model-tier {
      background: rgba(94, 234, 212, .18);
      color: #99f6e4;
    }
    #videoStudioView .video-model-name { font-size: 17px; font-weight: 900; color: var(--studio-fg); }
    #videoStudioView .video-model-desc { font-size: 12.5px; line-height: 1.6; color: rgba(246, 244, 238, .68); }
    #videoStudioView .video-model-specs {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4px 12px;
      margin: 4px 0 2px;
      list-style: none;
      padding: 0;
    }
    #videoStudioView .video-model-specs li {
      display: flex;
      flex-direction: column;
      font-size: 11px;
    }
    #videoStudioView .video-model-specs li span { color: rgba(246, 244, 238, .5); }
    #videoStudioView .video-model-specs li em { color: rgba(246, 244, 238, .86); font-style: normal; font-weight: 700; }
    #videoStudioView .video-model-cost {
      margin-top: 4px;
      font-size: 12px;
      font-weight: 800;
      color: #99f6e4;
    }

    /* 参数表单区 */
    #videoStudioView .video-form-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.5fr) minmax(220px, .9fr);
      gap: 20px;
      align-items: start;
    }
    #videoStudioView .video-form-main { display: flex; flex-direction: column; gap: 16px; }
    #videoStudioView .video-side-fields { display: flex; flex-direction: column; gap: 14px; }

    #videoStudioView .video-upload-block { display: flex; flex-direction: column; gap: 8px; }
    #videoStudioView .video-upload-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    #videoStudioView .video-ref-limit-note { font-size: 12px; color: rgba(246, 244, 238, .56); }
    #videoStudioView .video-dropzone {
      display: flex;
      align-items: center;
      gap: 10px;
      border: 1px dashed rgba(226, 207, 160, .32);
      border-radius: 14px;
      background: rgba(9, 11, 10, .45);
      padding: 16px 18px;
      color: rgba(246, 244, 238, .72);
      font-size: 13px;
      cursor: pointer;
      transition: border-color .18s ease, background .18s ease;
    }
    #videoStudioView .video-dropzone:hover {
      border-color: rgba(226, 207, 160, .55);
      background: rgba(201, 168, 106, .08);
    }
    #videoStudioView .video-ref-preview {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }
    #videoStudioView .video-ref-thumb {
      position: relative;
      width: 84px;
      height: 84px;
      border-radius: 12px;
      overflow: hidden;
      border: 1px solid rgba(226, 207, 160, .24);
    }
    #videoStudioView .video-ref-thumb img { width: 100%; height: 100%; object-fit: cover; }
    #videoStudioView .video-ref-remove {
      position: absolute;
      top: 3px;
      right: 3px;
      width: 22px;
      height: 22px;
      border-radius: 999px;
      border: none;
      background: rgba(9, 11, 10, .78);
      color: #fff;
      font-size: 15px;
      line-height: 1;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    #videoStudioView .video-ref-remove:hover { background: rgba(220, 60, 60, .9); }

    #videoStudioView #videoGenerateBtn { width: 100%; justify-content: center; }
    #videoStudioView #videoGenerateBtn.is-busy { opacity: .7; cursor: progress; }

    /* 进度条 */
    #videoStudioView .video-progress { margin-bottom: 14px; }
    #videoStudioView .video-progress.hidden { display: none; }
    #videoStudioView .video-progress-head {
      display: flex;
      justify-content: space-between;
      font-size: 13px;
      color: rgba(246, 244, 238, .82);
      margin-bottom: 6px;
    }
    #videoStudioView .video-progress-pct { font-weight: 800; color: #99f6e4; }
    #videoStudioView .video-progress-track {
      height: 8px;
      border-radius: 999px;
      background: rgba(255, 255, 255, .08);
      overflow: hidden;
    }
    #videoStudioView .video-progress-bar {
      height: 100%;
      border-radius: 999px;
      background: linear-gradient(90deg, #5eead4, #c9a86a);
      transition: width .4s ease;
    }
    #videoStudioView .video-progress-bar.is-failed { background: linear-gradient(90deg, #f87171, #b91c1c); }
    #videoStudioView .video-progress-bar.is-indeterminate {
      animation: videoProgressPulse 1.2s ease-in-out infinite;
    }
    @keyframes videoProgressPulse {
      0%, 100% { opacity: .55; }
      50% { opacity: 1; }
    }

    /* 结果区 */
    #videoStudioView .video-result-card {
      display: flex;
      flex-direction: column;
      gap: 14px;
    }
    #videoStudioView .video-result-card video {
      width: 100%;
      max-height: 60vh;
      border-radius: 14px;
      background: #000;
      border: 1px solid rgba(226, 207, 160, .2);
    }
    #videoStudioView .video-result-actions {
      display: flex;
      align-items: center;
      gap: 16px;
      flex-wrap: wrap;
    }
    #videoStudioView .video-result-cost { font-size: 13px; color: #99f6e4; font-weight: 700; }
    #videoStudioView .video-result-error {
      border: 1px solid rgba(248, 113, 113, .4);
      border-radius: 14px;
      background: rgba(248, 113, 113, .1);
      padding: 16px 18px;
      color: #fecaca;
    }
    #videoStudioView .video-result-error strong { display: block; font-size: 15px; margin-bottom: 4px; }
    #videoStudioView .video-result-error p { font-size: 13px; line-height: 1.6; }
    #videoStudioView .video-result-error small { display: block; margin-top: 6px; color: rgba(254, 202, 202, .72); }

    @media (max-width: 880px) {
      #videoStudioView .video-form-grid { grid-template-columns: 1fr; }
    }

    /* ===== T16-R2 AI 商业短视频 Agent 工作台（两模式：超级版 / 标准版） ===== */
    #videoStudioView .vs-main {
      min-height: 100vh;
      padding: 0;
      background: #090d0b;
      /* 必用 clip 而非 hidden:overflow-x:hidden 会把 overflow-y 隐式算成 auto,
         给左栏 .vs-wb-rail 的 position:sticky 建一个「自身不滚动」的参照容器→sticky 永不生效,
         rail 随页面滚走、下方左列露出 .vs-workbench 深底(即用户反复反馈的「左侧黑色空白」)。
         clip 是唯一能与 overflow-y:visible 共存、不逼出 auto 的值:照样裁掉装饰光斑横向溢出,
         又不建滚动容器,sticky 恢复相对整窗生效。这才是真因,与 .app-view 的 clip 无关。 */
      overflow-x: clip;
    }
    #videoStudioView .vs-main[data-vs-screen="entry"] .vs-workbench,
    #videoStudioView .vs-main[data-vs-screen="workbench"] .vs-entry {
      display: none;
    }
    #videoStudioView .vs-entry {
      color: #fff8e8;
      background: #030806;
    }
    #videoStudioView .vs-entry-hero {
      position: relative;
      isolation: isolate;
      overflow: hidden;
      min-height: min(760px, calc(100vh - 1px));
      padding: 42px clamp(20px, 4vw, 56px) 28px;
    }
    #videoStudioView .vs-hero-decor,
    #videoStudioView .vs-hero-beam,
    #videoStudioView .vs-hero-grid,
    #videoStudioView .vs-hero-glow {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: -1;
    }
    #videoStudioView .vs-hero-decor {
      background:
        linear-gradient(90deg, rgba(4, 10, 8, .98) 0%, rgba(4, 10, 8, .86) 45%, rgba(4, 10, 8, .42) 100%),
        url('media/hub-bg-20260622.jpg') center / cover no-repeat;
    }
    #videoStudioView .vs-hero-beam {
      inset: 70px 34px auto 34px;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(226, 207, 160, .8), transparent);
      box-shadow: 0 0 48px rgba(226, 207, 160, .28);
    }
    #videoStudioView .vs-hero-grid {
      inset: auto -8% -22% -8%;
      height: 44%;
      opacity: .24;
      transform: perspective(900px) rotateX(58deg);
      transform-origin: center bottom;
      background-image:
        linear-gradient(rgba(226, 207, 160, .28) 1px, transparent 1px),
        linear-gradient(90deg, rgba(226, 207, 160, .18) 1px, transparent 1px);
      background-size: 76px 76px;
      mask-image: linear-gradient(180deg, transparent 0%, black 28%, transparent 100%);
    }
    #videoStudioView .vs-hero-glow {
      background:
        radial-gradient(circle at 75% 28%, rgba(226, 207, 160, .16), transparent 26%),
        radial-gradient(circle at 48% 74%, rgba(20, 120, 97, .18), transparent 28%);
    }
    #videoStudioView .vs-hero-inner {
      width: min(1440px, 100%);
      margin: 0 auto;
      min-height: 660px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(420px, 580px);
      gap: clamp(24px, 4vw, 56px);
      align-items: center;
    }
    #videoStudioView .vs-eyebrow,
    #videoStudioView .vs-wb-kicker {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      width: fit-content;
      min-height: 32px;
      padding: 0 12px;
      border: 1px solid rgba(226, 207, 160, .34);
      border-radius: 999px;
      color: #f3d48a;
      background: rgba(226, 207, 160, .1);
      font-size: 13px;
      font-weight: 800;
    }
    #videoStudioView .vs-hero-title {
      margin: 22px 0 16px;
      max-width: 820px;
      color: #fff8e8;
      font-size: clamp(42px, 5.6vw, 78px);
      line-height: 1.02;
      letter-spacing: 0;
      font-weight: 950;
    }
    #videoStudioView .vs-hero-sub {
      max-width: 760px;
      margin: 0;
      color: rgba(255, 248, 232, .8);
      font-size: 18px;
      line-height: 1.85;
      font-weight: 650;
    }
    #videoStudioView .vs-flow-signature,
    #videoStudioView .vs-param-strip {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 6px;
      margin-top: 22px;
    }
    #videoStudioView .vs-flow-signature span,
    #videoStudioView .vs-param-strip span {
      display: inline-flex;
      align-items: center;
      min-height: 32px;
      padding: 0 11px;
      border: 1px solid rgba(255, 248, 232, .14);
      border-radius: 8px;
      background: rgba(255, 255, 255, .06);
      color: rgba(255, 248, 232, .82);
      font-size: 12px;
      font-weight: 800;
      white-space: nowrap;
    }
    #videoStudioView .vs-param-strip span {
      padding: 0 8px;
    }
    #videoStudioView .vs-flow-signature i {
      width: 18px;
      height: 1px;
      background: rgba(226, 207, 160, .62);
    }
    #videoStudioView .vs-hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 30px;
    }
    #videoStudioView .vs-hero-actions .btn {
      min-height: 48px;
      border-radius: 8px;
      padding-inline: 18px;
      white-space: nowrap;
    }
    #videoStudioView .vs-stage-head,
    #videoStudioView .vs-progress-head,
    #videoStudioView .vs-result-actions {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
    }
    #videoStudioView .vs-stage-title h2 {
      color: #fff8e8;
      font-size: 20px;
      font-weight: 920;
    }
    #videoStudioView .vs-count-badge,
    #videoStudioView .vs-wb-mode-chip,
    #videoStudioView .vs-wb-progress-chip {
      display: inline-flex;
      align-items: center;
      min-height: 28px;
      padding: 0 10px;
      border-radius: 999px;
      background: rgba(7, 123, 109, .12);
      border: 1px solid rgba(7, 123, 109, .28);
      color: #087b6d;
      font-size: 12px;
      font-weight: 900;
      white-space: nowrap;
    }
    #videoStudioView .vs-agent-panel {
      border: 1px solid rgba(226, 207, 160, .28);
      border-radius: 16px;
      background: linear-gradient(180deg, rgba(20, 30, 25, .82), rgba(7, 12, 10, .78));
      box-shadow: 0 28px 80px rgba(0, 0, 0, .42);
      backdrop-filter: blur(16px);
      padding: 24px;
    }
    #videoStudioView .vs-agent-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 14px;
    }
    #videoStudioView .vs-agent-head strong {
      display: block;
      color: #fff8e8;
      font-size: 21px;
      font-weight: 920;
    }
    #videoStudioView .vs-agent-head small {
      display: block;
      margin-top: 7px;
      max-width: 440px;
      color: rgba(255, 248, 232, .62);
      font-size: 12px;
      line-height: 1.65;
    }
    #videoStudioView .vs-live {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      flex-shrink: 0;
      min-height: 28px;
      padding: 0 12px;
      border-radius: 999px;
      color: #99f6e4;
      background: rgba(94, 234, 212, .14);
      border: 1px solid rgba(94, 234, 212, .32);
      font-size: 12px;
      font-weight: 900;
      white-space: nowrap;
    }
    #videoStudioView .vs-agent-metrics {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
      margin-top: 22px;
    }
    #videoStudioView .vs-agent-metrics div {
      min-width: 0;
      border: 1px solid rgba(226, 207, 160, .18);
      border-radius: 10px;
      background: rgba(255, 255, 255, .055);
      padding: 13px 10px;
    }
    #videoStudioView .vs-agent-metrics strong {
      display: block;
      color: #f4d58b;
      font-size: 25px;
      line-height: 1;
    }
    #videoStudioView .vs-agent-metrics span {
      display: block;
      margin-top: 6px;
      color: rgba(255, 248, 232, .58);
      font-size: 11px;
      font-weight: 800;
    }
    #videoStudioView .vs-showcase {
      width: 100%;
      margin-top: 28px;
    }
    #videoStudioView .vs-showcase-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
      align-items: start;
      margin-top: 18px;
    }
    #videoStudioView .vs-showcase-type {
      position: absolute;
      top: 8px;
      left: 8px;
      z-index: 2;
      display: inline-flex;
      align-items: center;
      min-height: 22px;
      padding: 0 9px;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 900;
      letter-spacing: .2px;
      color: #15211c;
      box-shadow: 0 4px 12px rgba(0, 0, 0, .4);
    }
    #videoStudioView .vs-showcase-card.is-tall .vs-showcase-type {
      background: linear-gradient(135deg, #f6dd9b, #e0b558);
    }
    #videoStudioView .vs-showcase-card.is-mid .vs-showcase-type {
      background: linear-gradient(135deg, #7af0dc, #2dd4bf);
    }
    #videoStudioView .vs-showcase-card.is-low .vs-showcase-type {
      background: linear-gradient(135deg, #cdbdfd, #a78bfa);
      color: #1a1330;
    }
    #videoStudioView .vs-showcase-card {
      display: flex;
      flex-direction: column;
      gap: 11px;
      padding: 0;
      border: 0;
      background: transparent;
      text-align: left;
      cursor: pointer;
      -webkit-appearance: none;
      appearance: none;
      transition: transform .22s ease;
    }
    #videoStudioView .vs-showcase-card:hover { transform: translateY(-4px); }
    #videoStudioView .vs-showcase-media {
      position: relative;
      display: block;
      border-radius: 14px;
      overflow: hidden;
      border: 1px solid rgba(226, 207, 160, .28);
      background: #0a120f;
      box-shadow: 0 20px 50px rgba(0, 0, 0, .5);
      transition: border-color .22s ease, box-shadow .22s ease;
    }
    #videoStudioView .vs-showcase-card:hover .vs-showcase-media {
      border-color: rgba(243, 212, 138, .55);
      box-shadow: 0 26px 64px rgba(0, 0, 0, .58);
    }
    #videoStudioView .vs-showcase-media::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: linear-gradient(180deg, transparent 52%, rgba(4, 10, 8, .58) 100%);
    }
    #videoStudioView .vs-showcase-card .vs-showcase-media { aspect-ratio: 9 / 16; }
    #videoStudioView .vs-showcase-card.is-tall { margin-top: 28px; }
    #videoStudioView .vs-showcase-card.is-low { margin-top: 28px; }
    #videoStudioView .vs-showcase-video {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    #videoStudioView .vs-showcase-play {
      position: absolute;
      inset: 0;
      margin: auto;
      z-index: 1;
      width: 48px;
      height: 48px;
      display: grid;
      place-items: center;
      border-radius: 999px;
      color: #15211c;
      background: rgba(255, 248, 232, .94);
      box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
      transition: transform .18s ease, opacity .18s ease;
    }
    #videoStudioView .vs-showcase-card:hover .vs-showcase-play { transform: scale(1.1); }
    #videoStudioView .vs-showcase-card.is-playing .vs-showcase-play { opacity: 0; pointer-events: none; }
    #videoStudioView .vs-showcase-meta {
      padding-inline: 2px;
    }
    #videoStudioView .vs-showcase-meta strong {
      display: block;
      color: #fff8e8;
      font-size: 14px;
      font-weight: 900;
      letter-spacing: .2px;
    }
    #videoStudioView .vs-showcase-meta span {
      display: block;
      margin-top: 4px;
      color: rgba(255, 248, 232, .58);
      font-size: 12px;
      line-height: 1.55;
    }
    #videoStudioView .vs-stage-order {
      display: inline-grid;
      place-items: center;
      width: 34px;
      height: 34px;
      border-radius: 8px;
      background: #087b6d;
      color: #fff;
      font-size: 12px;
      font-weight: 900;
      font-style: normal;
    }
    #videoStudioView .vs-stage-note,
    #videoStudioView .vs-subhead,
    #videoStudioView .vs-empty,
    #videoStudioView .vs-result-empty {
      color: #68736f;
      line-height: 1.7;
    }
    #videoStudioView .vs-stage-panel,
    #videoStudioView .vs-asset-slot,
    #videoStudioView .vs-choice,
    #videoStudioView .vs-mode-card,
    #videoStudioView .vs-shot,
    #videoStudioView .vs-result-card,
    #videoStudioView .vs-handoff-note {
      border: 1px solid #e3d8c6;
      border-radius: 8px;
      background: #fffdf8;
      box-shadow: 0 14px 32px rgba(36, 31, 22, .08);
    }
    #videoStudioView .vs-mode-tag,
    #videoStudioView .vs-version-meta,
    #videoStudioView .vs-refpack-meta {
      color: #087b6d;
      font-size: 12px;
      font-style: normal;
      font-weight: 900;
    }
    /* ===== Agent 工作台 · 黑金指挥舱（左侧竖向阶段导航） ===== */
    /* 工作台模式下隐藏全站产品导航，左侧只留阶段导航(对齐截图3单栏导航) */
    #videoStudioView[data-vs-screen="workbench"] .saas-nav {
      display: none;
    }
    #videoStudioView[data-vs-screen="workbench"] .saas-shell {
      grid-template-columns: minmax(0, 1fr);
    }
    .video-studio-view[data-vs-screen="workbench"] .saas-shell {
      grid-template-columns: minmax(0, 1fr);
    }
    #videoStudioView .vs-workbench {
      position: relative;
      display: grid;
      grid-template-columns: 268px minmax(0, 1fr);
      align-items: stretch;
      min-height: 100vh;
      color: #fff8e7;
      background:
        radial-gradient(circle at 74% 10%, rgba(47, 209, 188, .10), transparent 28%),
        radial-gradient(circle at 16% 88%, rgba(226, 190, 113, .10), transparent 32%),
        linear-gradient(135deg, #070b08 0%, #0a100d 44%, #050604 100%);
    }
    /* Rail panel band: fills the full-height left column so a short sticky
       rail never leaves a blank strip below it when the stage column is tall. */
    #videoStudioView .vs-workbench::before {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      width: 268px;
      background: linear-gradient(180deg, #17170f 0%, #09100d 100%);
      border-right: 1px solid rgba(226, 190, 113, .14);
      pointer-events: none;
      z-index: 0;
    }
    #videoStudioView .vs-wb-stage {
      position: relative;
      z-index: 1;
    }
    #videoStudioView .vs-wb-rail {
      position: sticky;
      top: 0;
      z-index: 1;
      align-self: start;
      height: 100vh;
      display: flex;
      flex-direction: column;
      gap: 16px;
      padding: 22px 16px;
      overflow-y: auto;
      background:
        linear-gradient(180deg, rgba(255, 248, 231, .05), transparent 18%),
        linear-gradient(180deg, #17170f 0%, #09100d 100%);
      border-right: 1px solid rgba(226, 190, 113, .14);
    }
    #videoStudioView .vs-wb-rail-brand {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 2px 2px 16px;
      border-bottom: 1px solid rgba(255, 248, 231, .12);
    }
    #videoStudioView .vs-wb-rail-mark {
      width: 46px;
      height: 46px;
      border-radius: 13px;
      display: grid;
      place-items: center;
      color: #06231d;
      font-weight: 950;
      background:
        radial-gradient(circle at 28% 24%, #fff1bb, transparent 22%),
        linear-gradient(135deg, #e6c477, #139987);
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35);
    }
    #videoStudioView .vs-wb-rail-brand strong {
      display: block;
      font-size: 17px;
      line-height: 1.1;
      color: #fff8e7;
    }
    #videoStudioView .vs-wb-rail-brand small {
      display: block;
      margin-top: 3px;
      font-size: 12px;
      font-weight: 750;
      color: rgba(255, 248, 231, .6);
    }
    #videoStudioView .vs-wb-rail-back {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 38px;
      padding: 0 12px;
      border-radius: 9px;
      border: 1px solid rgba(226, 190, 113, .26);
      background: rgba(255, 248, 231, .04);
      color: rgba(255, 248, 231, .82);
      font-size: 13px;
      font-weight: 800;
      cursor: pointer;
    }
    #videoStudioView .vs-wb-rail-back:hover {
      border-color: rgba(226, 190, 113, .5);
      color: #fff8e7;
    }
    #videoStudioView .vs-stepper {
      display: grid;
      gap: 8px;
    }
    #videoStudioView .vs-step {
      display: grid;
      grid-template-columns: 26px minmax(0, 1fr);
      align-items: center;
      gap: 10px;
      min-height: 46px;
      padding: 0 12px;
      border: 1px solid transparent;
      border-radius: 11px;
      background: transparent;
      color: rgba(255, 248, 231, .76);
      text-align: left;
      cursor: pointer;
      transition: background .16s ease, border-color .16s ease, color .16s ease;
    }
    #videoStudioView .vs-step:hover {
      background: rgba(255, 248, 231, .05);
      color: #fff8e7;
    }
    #videoStudioView .vs-step.is-active {
      border-color: rgba(226, 190, 113, .42);
      background: linear-gradient(120deg, rgba(226, 190, 113, .18), rgba(47, 209, 188, .12));
      color: #fff8e7;
      box-shadow: inset 0 0 0 1px rgba(226, 190, 113, .18);
    }
    #videoStudioView .vs-step.is-done {
      color: rgba(131, 230, 177, .9);
    }
    #videoStudioView .vs-step-dot {
      display: grid;
      place-items: center;
      width: 26px;
      height: 26px;
      border-radius: 8px;
      font-size: 11px;
      font-weight: 900;
      background: rgba(255, 248, 231, .08);
      color: inherit;
    }
    #videoStudioView .vs-step.is-active .vs-step-dot {
      background: linear-gradient(135deg, #e6c477, #2fd1bc);
      color: #06231d;
    }
    #videoStudioView .vs-step.is-done .vs-step-dot {
      background: rgba(47, 209, 188, .2);
      color: #83e6b1;
    }
    #videoStudioView .vs-step-name {
      display: block;
      font-size: 13px;
      line-height: 1.2;
      font-weight: 820;
    }
    #videoStudioView .vs-wb-rail-note {
      margin-top: 4px;
      padding: 14px;
      border-radius: 12px;
      border: 1px solid rgba(226, 190, 113, .16);
      background: rgba(255, 248, 231, .04);
    }
    #videoStudioView .vs-wb-rail-note-label {
      display: inline-block;
      margin-bottom: 6px;
      font-size: 11px;
      font-weight: 900;
      letter-spacing: .12em;
      color: var(--vs-gold, #e2be71);
    }
    #videoStudioView .vs-wb-rail-note p {
      margin: 0;
      font-size: 12px;
      line-height: 1.65;
      color: rgba(255, 248, 231, .62);
    }
    #videoStudioView .vs-wb-stage {
      display: flex;
      flex-direction: column;
      min-width: 0;
      min-height: 100vh;
    }
    #videoStudioView .vs-wb-topbar {
      position: sticky;
      top: 0;
      z-index: 4;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      flex-wrap: wrap;
      padding: 16px clamp(16px, 3vw, 34px);
      background: rgba(7, 11, 9, .82);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid rgba(226, 190, 113, .14);
    }
    #videoStudioView .vs-wb-topbar-title {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-size: 15px;
      font-weight: 880;
      color: #fff8e7;
    }
    #videoStudioView .vs-wb-pulse {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: #2fd1bc;
      box-shadow: 0 0 0 0 rgba(47, 209, 188, .55);
      animation: vsPulse 2.2s ease-out infinite;
    }
    @keyframes vsPulse {
      0% { box-shadow: 0 0 0 0 rgba(47, 209, 188, .5); }
      70% { box-shadow: 0 0 0 9px rgba(47, 209, 188, 0); }
      100% { box-shadow: 0 0 0 0 rgba(47, 209, 188, 0); }
    }
    #videoStudioView .vs-wb-topbar-meta {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }
    #videoStudioView .vs-wb-project-chip {
      display: inline-flex;
      align-items: center;
      min-height: 30px;
      padding: 0 14px;
      border-radius: 999px;
      border: 1px solid rgba(226, 190, 113, .28);
      background: rgba(255, 248, 231, .05);
      color: rgba(255, 248, 231, .86);
      font-size: 13px;
      font-weight: 820;
      max-width: 320px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    #videoStudioView .vs-wb-topbar .vs-wb-mode-chip,
    #videoStudioView .vs-wb-topbar .vs-wb-progress-chip {
      background: rgba(226, 190, 113, .14);
      border-color: rgba(226, 190, 113, .32);
      color: #e2be71;
    }
    #videoStudioView .vs-stage-foot-right,
    #videoStudioView .vs-stage-foot-left {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: center;
    }
    #videoStudioView .vs-wb-body {
      flex: 1 1 auto;
      width: 100%;
      padding: 20px clamp(16px, 3vw, 34px) 56px;
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: clamp(16px, 2vw, 26px);
      align-items: start;
    }
    /* 右栏 Agent 面板仅在「选择模特」步开启(data-vs-rail=on),其他步骤恒单栏全宽。 */
    #videoStudioView .vs-wb-body[data-vs-rail="on"] {
      grid-template-columns: minmax(0, 1fr) 340px;
    }
    @media (max-width: 1180px) {
      #videoStudioView .vs-wb-body[data-vs-rail="on"] { grid-template-columns: minmax(0, 1fr); }
      #videoStudioView .vs-agent-rail { position: static; top: auto; }
    }
    #videoStudioView .vs-stage-panel {
      padding: 0;
      overflow: hidden;
      min-width: 0;
    }
    #videoStudioView .vs-agent-rail {
      position: sticky;
      top: 84px;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }
    #videoStudioView .vs-rail-card {
      border: 1px solid rgba(226, 190, 113, .18);
      border-radius: 14px;
      background:
        linear-gradient(180deg, rgba(226, 190, 113, .06), transparent 40%),
        rgba(255, 248, 231, .035);
      padding: 13px 14px 14px;
      box-shadow: inset 0 1px 0 rgba(255, 248, 231, .05);
    }
    #videoStudioView .vs-rail-card-head {
      display: flex;
      align-items: center;
      gap: 7px;
      color: #e2be71;
      font-size: 12px;
      font-weight: 850;
      letter-spacing: .03em;
      margin-bottom: 11px;
      padding-bottom: 9px;
      border-bottom: 1px solid rgba(226, 190, 113, .12);
    }
    #videoStudioView .vs-rail-card-head i { width: 14px; height: 14px; }
    #videoStudioView .vs-rail-dec {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 9px;
    }
    #videoStudioView .vs-rail-dec-item {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 12px;
    }
    #videoStudioView .vs-rail-dec-label {
      flex: 0 0 auto;
      font-size: 12px;
      font-weight: 700;
      color: rgba(255, 248, 231, .5);
    }
    #videoStudioView .vs-rail-dec-val {
      flex: 1 1 auto;
      text-align: right;
      font-size: 12.5px;
      font-weight: 750;
      color: rgba(255, 248, 231, .92);
      line-height: 1.45;
    }
    #videoStudioView .vs-rail-dec-empty {
      font-size: 12.5px;
      font-weight: 600;
      color: rgba(255, 248, 231, .5);
      line-height: 1.55;
    }
    #videoStudioView .vs-rail-flow {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    #videoStudioView .vs-rail-flow-item {
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 5px 0;
      font-size: 12.5px;
      font-weight: 700;
    }
    #videoStudioView .vs-rail-flow-ic {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      flex: 0 0 22px;
      border: 1px solid rgba(226, 190, 113, .25);
      color: rgba(255, 248, 231, .55);
    }
    #videoStudioView .vs-rail-flow-name {
      color: rgba(255, 248, 231, .62);
    }
    #videoStudioView .vs-rail-flow-item.is-done .vs-rail-flow-ic {
      background: rgba(47, 209, 188, .16);
      border-color: rgba(47, 209, 188, .5);
      color: #2fd1bc;
    }
    #videoStudioView .vs-rail-flow-item.is-done .vs-rail-flow-name {
      color: rgba(255, 248, 231, .82);
    }
    #videoStudioView .vs-rail-flow-item.is-active .vs-rail-flow-ic {
      background: rgba(226, 190, 113, .2);
      border-color: #e2be71;
      color: #e2be71;
    }
    #videoStudioView .vs-rail-flow-item.is-active .vs-rail-flow-name {
      color: #fff8e7;
      font-weight: 850;
    }
    #videoStudioView .vs-rail-flow-item.is-locked {
      opacity: .6;
    }
    #videoStudioView .vs-stage-head,
    #videoStudioView .vs-stage-body,
    #videoStudioView .vs-stage-foot {
      padding: 22px;
    }
    #videoStudioView .vs-stage-head {
      border-bottom: 1px solid #eadfce;
      background: linear-gradient(180deg, #fffdf8, #faf2e5);
      display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap;
    }
    #videoStudioView .vs-stage-head-aside { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
    #videoStudioView .vs-draft-badge {
      display: inline-flex; align-items: center; gap: 6px;
      font-size: 12px; font-weight: 600; color: #8a7b58;
      background: #f6efdf; border: 1px solid #e7dcc2; border-radius: 999px; padding: 4px 11px;
    }
    #videoStudioView .vs-draft-badge.is-saved { color: #2f7d56; background: #e8f6ee; border-color: #c5e7d3; }
    #videoStudioView .vs-bcell-gen.is-dequeue {
      background: #fbeee0; color: #b06a2c; border: 1px solid #ecd3b4;
    }
    #videoStudioView .vs-bcell-gen.is-dequeue:hover { background: #f6e2cb; }
    #videoStudioView .vs-stage-title {
      display: flex;
      align-items: flex-start;
      gap: 14px;
    }
    #videoStudioView .vs-stage-title h2 {
      color: #17211d;
      margin: 0;
    }
    #videoStudioView .vs-stage-title p {
      margin: 5px 0 0;
      color: #68736f;
      line-height: 1.6;
    }
    #videoStudioView .vs-stage-body {
      display: grid;
      gap: 18px;
    }
    #videoStudioView .vs-stage-foot {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      border-top: 1px solid #eadfce;
      background: #fffaf1;
    }
    /* ===== T18 短视频工作台：门禁 / 锁定步骤 / 分镜标签 / 新增页面 ===== */
    #videoStudioView .vs-step.is-locked {
      color: rgba(255, 248, 231, .42);
      cursor: not-allowed;
    }
    #videoStudioView .vs-step.is-locked .vs-step-dot {
      background: rgba(255, 248, 231, .06);
      color: rgba(255, 248, 231, .42);
    }
    #videoStudioView .vs-stage-foot-mid {
      flex: 1 1 auto;
      display: flex;
      justify-content: center;
      min-width: 0;
    }
    #videoStudioView .vs-stage-blocker {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      max-width: 540px;
      padding: 9px 14px;
      border-radius: 10px;
      font-size: 12.5px;
      font-weight: 700;
      line-height: 1.5;
      color: #9a5a12;
      background: #fff5e2;
      border: 1px solid #f1d59a;
    }
    #videoStudioView .vs-stage-blocker svg { flex: 0 0 auto; }
    #videoStudioView .btn.is-locked {
      opacity: .55;
      cursor: not-allowed;
      filter: grayscale(.3);
    }
    #videoStudioView .vs-shot-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin: 2px 0 4px;
    }
    #videoStudioView .vs-shot-tag {
      display: inline-flex;
      align-items: center;
      padding: 2px 8px;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 800;
      color: #5a6560;
      background: #f1ece1;
      border: 1px solid #e4dccb;
    }
    #videoStudioView .vs-shot-tag.is-purpose {
      color: #1c5c4f;
      background: #dcf3ec;
      border-color: #b5e3d6;
    }
    #videoStudioView .vs-shot-tag.is-hero {
      color: #8a5a0f;
      background: #fbeccb;
      border-color: #efd596;
    }
    #videoStudioView .vs-shot-tag.is-ref {
      color: #4b4f8a;
      background: #ebecf8;
      border-color: #d2d4ef;
    }
    #videoStudioView .vs-shot-tag.is-warn {
      color: #a23b2e;
      background: #fbe3df;
      border-color: #f0c2ba;
    }
    /* 新建项目 / 项目中心 / 脚本表 / 作品详情 公共卡片 */
    #videoStudioView .vs-new-intro {
      padding: 16px 18px;
      border-radius: 14px;
      background: linear-gradient(135deg, #fff8ec, #f3f8f4);
      border: 1px solid #ecdfca;
      color: #3a443f;
      line-height: 1.7;
    }
    #videoStudioView .vs-divider {
      height: 1px;
      background: #eadfce;
      margin: 6px 0;
    }
    #videoStudioView .vs-optional-block {
      margin-top: 14px;
      border: 1px solid #ecdfca;
      border-radius: 14px;
      background: #fffdf8;
      overflow: hidden;
    }
    #videoStudioView .vs-optional-block > summary {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px 16px;
      cursor: pointer;
      font-weight: 850;
      color: #31443b;
      list-style: none;
      user-select: none;
    }
    #videoStudioView .vs-optional-block > summary::-webkit-details-marker { display: none; }
    #videoStudioView .vs-optional-block > summary::after {
      content: "展开";
      margin-left: auto;
      font-size: 12px;
      font-weight: 800;
      color: #9a8b6f;
    }
    #videoStudioView .vs-optional-block[open] > summary::after { content: "收起"; }
    #videoStudioView .vs-optional-block[open] > summary { border-bottom: 1px solid #ecdfca; }
    /* UA 默认 details:not([open])>* 隐藏会被子元素 display:grid/flex 覆盖,显式钉死收起态。 */
    #videoStudioView .vs-optional-block:not([open]) > .vs-optional-body { display: none; }
    #videoStudioView .vs-optional-body {
      display: grid;
      gap: 12px;
      padding: 14px 16px 16px;
    }
    /* ===== 选择模特双板(模特身份板 + 商品结构板)· 浅奶油主体 ===== */
    #videoStudioView .vs-board-intro {
      display: flex;
      align-items: flex-start;
      gap: 9px;
      margin: 4px 0 12px;
      padding: 11px 14px;
      border: 1px solid #ecdfca;
      border-radius: 12px;
      background: linear-gradient(180deg, #fffaf0, #fffdf8);
      color: #5a6661;
      font-size: 13px;
      line-height: 1.65;
    }
    #videoStudioView .vs-board-intro i { color: #087b6d; flex: 0 0 auto; margin-top: 2px; }
    #videoStudioView .vs-board-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
    }
    /* 纯商品(无真人)模式:只剩商品结构板,单列铺满 */
    #videoStudioView .vs-board-grid.is-single { grid-template-columns: minmax(0, 1fr); }
    /* R4 识图质检黄牌/绿标 */
    #videoStudioView .vs-refslot-qc {
      display: flex;
      align-items: flex-start;
      gap: 6px;
      font-size: 12px;
      line-height: 1.45;
      padding: 6px 9px;
      border-radius: 8px;
      margin-top: 6px;
    }
    #videoStudioView .vs-refslot-qc i { flex: 0 0 auto; margin-top: 1px; }
    #videoStudioView .vs-refslot-qc.is-checking { background: rgba(8, 123, 109, 0.06); color: #0b5c52; }
    #videoStudioView .vs-refslot-qc.is-warn { background: rgba(196, 138, 12, 0.12); color: #8a5d00; border: 1px solid rgba(196, 138, 12, 0.35); }
    #videoStudioView .vs-refslot-qc.is-ok { background: rgba(8, 123, 109, 0.08); color: #087b6d; }
    /* 3 屏产线·屏1(2026-07-03 全流程重构):带货风卡 + 模特精选行 */
    #videoStudioView .vs-approach-card .vs-approach-desc {
      margin: 6px 0 0;
      font-size: 12.5px;
      line-height: 1.55;
      color: rgba(15, 61, 54, 0.7);
      text-align: left;
    }
    #videoStudioView .vs-model-mini-row { display: flex; gap: 10px; flex-wrap: wrap; }
    #videoStudioView .vs-model-mini {
      position: relative;
      width: 84px;
      height: 104px;
      border-radius: 12px;
      overflow: hidden;
      border: 2px solid rgba(8, 123, 109, 0.18);
      padding: 0;
      cursor: pointer;
      background: #f4f1ea;
    }
    #videoStudioView .vs-model-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
    #videoStudioView .vs-model-mini.is-on { border-color: #087b6d; box-shadow: 0 0 0 3px rgba(8, 123, 109, 0.18); }
    #videoStudioView .vs-model-mini-check {
      position: absolute; top: 6px; right: 6px;
      width: 20px; height: 20px; border-radius: 999px;
      background: #087b6d; color: #fff;
      display: flex; align-items: center; justify-content: center;
    }
    /* 出片进度诚实提示(2026-07-03 商业化收口:卡半程数分钟属正常,防用户误以为死机) */
    #videoStudioView .vs-progress-hint {
      margin-top: 6px;
      font-size: 12px;
      line-height: 1.5;
      color: rgba(11, 92, 82, 0.6);
    }
    /* 非中文脚本的中文对照行(2026-07-03) */
    #videoStudioView .vs-script-zh,
    #videoStudioView .vs-hook-zh {
      display: block;
      margin-top: 3px;
      font-size: 12px;
      line-height: 1.5;
      color: rgba(11, 92, 82, 0.62);
      font-weight: 400;
    }
    #videoStudioView .vs-hook-chip.is-on .vs-hook-zh { color: rgba(255, 255, 255, 0.85); }
    /* R2 开场钩子候选 chips */
    #videoStudioView .vs-hook-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
    #videoStudioView .vs-hook-chip {
      border: 1px solid rgba(8, 123, 109, 0.35);
      background: rgba(8, 123, 109, 0.06);
      color: #0b5c52;
      border-radius: 999px;
      padding: 6px 12px;
      font-size: 12.5px;
      line-height: 1.4;
      text-align: left;
      cursor: pointer;
      transition: background .15s ease, border-color .15s ease;
    }
    #videoStudioView .vs-hook-chip:hover { background: rgba(8, 123, 109, 0.12); }
    #videoStudioView .vs-hook-chip.is-on {
      background: #087b6d;
      border-color: #087b6d;
      color: #fff;
      font-weight: 600;
    }
    @media (max-width: 900px) {
      #videoStudioView .vs-board-grid { grid-template-columns: minmax(0, 1fr); }
    }
    #videoStudioView .vs-board {
      display: grid;
      gap: 12px;
      align-content: start;
      padding: 16px;
      border: 1px solid #e3d8c6;
      border-radius: 14px;
      background: #fffdf8;
      box-shadow: 0 14px 32px rgba(36, 31, 22, .07);
    }
    #videoStudioView .vs-board-head {
      display: flex;
      align-items: center;
      gap: 11px;
      padding-bottom: 11px;
      border-bottom: 1px solid #eadfce;
    }
    #videoStudioView .vs-board-ic {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
      width: 34px;
      height: 34px;
      border-radius: 9px;
      background: #087b6d;
      color: #fff;
    }
    #videoStudioView .vs-board-ic i { width: 16px; height: 16px; }
    #videoStudioView .vs-board-tx { display: grid; gap: 3px; }
    #videoStudioView .vs-board-tx strong { color: #2b3a33; font-size: 14px; font-weight: 850; }
    #videoStudioView .vs-board-tx small { color: #7a857f; font-size: 12px; line-height: 1.5; }
    /* ===== 身份板 / 结构板:多角度真实生成格 + 通过/需重做 ===== */
    #videoStudioView .vs-board-toolbar {
      display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
    }
    #videoStudioView .vs-board-progress {
      display: inline-flex; align-items: center; gap: 5px;
      font-size: 12px; font-weight: 800; color: #0c7a5e;
      background: #e7f6f0; border: 1px solid #bfe6d8; padding: 4px 10px; border-radius: 999px;
    }
    #videoStudioView .vs-bcell-grid {
      display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;
    }
    @media (max-width: 1100px) { #videoStudioView .vs-bcell-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    #videoStudioView .vs-bcell {
      display: grid; gap: 7px; padding: 8px;
      border: 1px solid #e3d8c6; border-radius: 11px; background: #fff;
    }
    #videoStudioView .vs-bcell.is-pass { border-color: #9fd9c4; box-shadow: inset 0 0 0 1px rgba(8, 123, 109, .12); }
    #videoStudioView .vs-bcell.is-redo { border-color: #f0b9a6; }
    #videoStudioView .vs-bcell.is-gen { border-color: #c9a86a; }
    #videoStudioView .vs-bcell-media {
      position: relative; border-radius: 8px; overflow: hidden; background: #f5f0e6; aspect-ratio: 3 / 4;
    }
    #videoStudioView .vs-bcell-img { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
    #videoStudioView .vs-bcell-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
    #videoStudioView .vs-bcell-empty {
      width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
      color: #a99e88; font-size: 11.5px; font-weight: 700;
    }
    #videoStudioView .vs-bcell-st {
      position: absolute; top: 6px; left: 6px;
      display: inline-flex; align-items: center; gap: 3px;
      font-size: 10.5px; font-weight: 800; padding: 2px 7px; border-radius: 999px; color: #fff;
      backdrop-filter: blur(4px);
    }
    #videoStudioView .vs-bcell-st.is-pass { background: rgba(8, 123, 109, .92); }
    #videoStudioView .vs-bcell-st.is-redo { background: rgba(214, 98, 60, .92); }
    #videoStudioView .vs-bcell-st.is-empty { background: rgba(60, 55, 45, .6); }
    #videoStudioView .vs-bcell-cap { display: grid; gap: 2px; }
    #videoStudioView .vs-bcell-cap strong { font-size: 12.5px; font-weight: 850; color: #2b3a33; }
    #videoStudioView .vs-bcell-cap small {
      font-size: 10.5px; line-height: 1.45; color: #8a9189;
      display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    }
    #videoStudioView .vs-bcell-acts { display: flex; align-items: center; gap: 4px; }
    #videoStudioView .vs-bcell-act {
      flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 3px;
      font-size: 11px; font-weight: 800; padding: 5px 6px; border-radius: 7px; cursor: pointer;
      border: 1px solid #d9cdb8; background: #fbf7ef; color: #6a7269;
    }
    #videoStudioView .vs-bcell-act.is-on { background: #087b6d; border-color: #087b6d; color: #fff; }
    #videoStudioView .vs-bcell-act.is-redo.is-on { background: #d6623c; border-color: #d6623c; color: #fff; }
    #videoStudioView .vs-bcell-act.is-regen { flex: 0 0 auto; width: 30px; padding: 5px 0; }
    #videoStudioView .vs-bcell-act[disabled] { opacity: .5; cursor: not-allowed; }
    #videoStudioView .vs-bcell-gen {
      display: inline-flex; align-items: center; justify-content: center; gap: 5px;
      width: 100%; font-size: 12px; font-weight: 800; padding: 7px 8px; border-radius: 8px; cursor: pointer;
      border: 1px solid #c9a86a; background: linear-gradient(135deg, #f3ead7, #e7d3a8); color: #5a4a1f;
    }
    #videoStudioView .vs-bcell-gen[disabled] { opacity: .5; cursor: not-allowed; filter: grayscale(.3); }
    /* ===== 身份板/结构板·按脚本智能生成多角度/多表情合成卡(大卡多宫格风格) ===== */
    #videoStudioView .vs-board-plan {
      display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px;
      padding: 16px 18px; border: 1px dashed #d6c69e; border-radius: 14px;
      background: linear-gradient(135deg, #fffdf6, #f7efdd);
    }
    #videoStudioView .vs-board-plan-ic {
      display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
      width: 42px; height: 42px; border-radius: 12px; color: #fff;
      background: linear-gradient(135deg, #0c8d76, #087b6d); box-shadow: 0 8px 18px rgba(8, 123, 109, .28);
    }
    #videoStudioView .vs-board-plan-tx { display: grid; gap: 5px; min-width: 0; }
    #videoStudioView .vs-board-plan-tx strong { color: #2b3a33; font-size: 14.5px; font-weight: 850; }
    #videoStudioView .vs-board-plan-tx small { color: #7a857f; font-size: 12px; line-height: 1.6; }
    #videoStudioView .vs-board-plan-tx small b { color: #0c7a5e; font-weight: 800; }
    #videoStudioView .vs-board-plan-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 2px; }
    #videoStudioView .vs-board-plan-chips span {
      font-size: 11px; font-weight: 800; color: #5a4a1f; padding: 3px 9px; border-radius: 999px;
      background: #f3ead7; border: 1px solid #e0cfa3;
    }
    #videoStudioView .vs-board-plan-chips em { font-style: normal; font-size: 11px; font-weight: 800; color: #0c7a5e; }
    #videoStudioView .vs-board-plan-btn { flex: 0 0 auto; white-space: nowrap; }
    #videoStudioView .vs-board-plan-warn {
      grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 5px; margin: 0;
      font-size: 11.5px; font-weight: 700; color: #b06a2c;
    }
    @media (max-width: 900px) {
      #videoStudioView .vs-board-plan { grid-template-columns: auto 1fr; }
      #videoStudioView .vs-board-plan-btn { grid-column: 1 / -1; justify-content: center; }
    }
    #videoStudioView .vs-board-toolbar-acts { display: inline-flex; align-items: center; gap: 8px; }
    #videoStudioView .vs-board-replan {
      display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 800; cursor: pointer;
      padding: 5px 11px; border-radius: 999px; color: #6a7269; background: #fbf7ef; border: 1px solid #d9cdb8;
    }
    #videoStudioView .vs-board-replan:hover { color: #2b3a33; border-color: #c2b48f; }
    #videoStudioView .vs-board-replan[disabled] { opacity: .5; cursor: not-allowed; }
    #videoStudioView .vs-board-pause {
      display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 800; cursor: pointer;
      padding: 6px 14px; border-radius: 999px; color: #b0481f; background: #fdeee4; border: 1px solid #f0c3a8;
    }
    #videoStudioView .vs-board-pause:hover { background: #fbe2d2; }
    #videoStudioView .vs-board-pause[disabled] { opacity: .6; cursor: progress; }
    /* 排队中合成卡:虚线琥珀边 + 轻微脉动,让用户看到这张在队列里等待出图 */
    #videoStudioView .vs-bcell.is-queued { border-color: #e2cf9f; border-style: dashed; }
    #videoStudioView .vs-bcell.is-queued .vs-bcell-empty { color: #b89544; }
    /* 合成卡更大更精致:每行 2 张,留足多宫格细节空间 */
    #videoStudioView .vs-bcell-grid.is-sheets { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    @media (max-width: 760px) { #videoStudioView .vs-bcell-grid.is-sheets { grid-template-columns: minmax(0, 1fr); } }
    #videoStudioView .vs-bcell-grid.is-sheets .vs-bcell { padding: 10px; gap: 9px; }
    #videoStudioView .vs-bcell-grid.is-sheets .vs-bcell-media { aspect-ratio: 4 / 3; }
    #videoStudioView .vs-bcell-cap-top { display: flex; align-items: center; gap: 7px; }
    #videoStudioView .vs-bcell-cap-top strong { font-size: 13px; font-weight: 850; color: #2b3a33; }
    #videoStudioView .vs-bcell-ess {
      flex: 0 0 auto; font-size: 10px; font-weight: 850; color: #0c7a5e; letter-spacing: .04em;
      padding: 1px 7px; border-radius: 999px; background: #e7f6f0; border: 1px solid #bfe6d8;
    }
    #videoStudioView .vs-bcell-panels {
      display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 800; color: #8a6d2f;
      padding: 2px 8px; border-radius: 7px; background: #faf3e2; border: 1px solid #ecdcb6; width: max-content; max-width: 100%;
    }
    #videoStudioView .vs-bcell-panels i { flex: 0 0 auto; color: #c0992f; }
    /* ===== 九宫格分镜逐镜头真实画面(截图8):每镜一张 AI 生成首帧 + 通过/需重做 ===== */
    #videoStudioView .vs-shot.is-pass { border-color: #9fd9c4; box-shadow: inset 0 0 0 1px rgba(8, 123, 109, .12); }
    #videoStudioView .vs-shot.is-redo { border-color: #f0b9a6; }
    #videoStudioView .vs-shot.is-gen { border-color: #c9a86a; }
    #videoStudioView .vs-shot-media {
      position: relative; border-radius: 9px; overflow: hidden; background: #f5f0e6; aspect-ratio: 9 / 16;
    }
    #videoStudioView .vs-shot-img { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
    #videoStudioView .vs-shot-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
    #videoStudioView .vs-shot-img-empty {
      width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
      color: #a99e88; font-size: 11.5px; font-weight: 700;
    }
    /* ===== 右栏 Agent 审核 · 一致性打分卡(黑金指挥舱内,仅选模特步出现) ===== */
    #videoStudioView .vs-score-card { display: grid; gap: 11px; }
    #videoStudioView .vs-score-list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      gap: 12px;
    }
    #videoStudioView .vs-score-row { display: grid; gap: 6px; }
    #videoStudioView .vs-score-row-top {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 8px;
    }
    #videoStudioView .vs-score-label { color: #f3e7cb; font-size: 12.5px; font-weight: 700; }
    #videoStudioView .vs-score-val { font-size: 16px; font-weight: 900; letter-spacing: .01em; }
    #videoStudioView .vs-score-val small { font-size: 11px; font-weight: 700; margin-left: 3px; opacity: .85; }
    #videoStudioView .vs-score-val.is-ok { color: #34d399; }
    #videoStudioView .vs-score-val.is-warn { color: #e2be71; }
    #videoStudioView .vs-score-val.is-risk { color: #f87171; }
    #videoStudioView .vs-score-track {
      height: 7px;
      border-radius: 99px;
      background: rgba(255, 248, 231, .08);
      overflow: hidden;
    }
    #videoStudioView .vs-score-bar { height: 100%; border-radius: 99px; transition: width .4s ease; }
    #videoStudioView .vs-score-bar.is-ok { background: linear-gradient(90deg, #0f9d72, #34d399); }
    #videoStudioView .vs-score-bar.is-warn { background: linear-gradient(90deg, #c79a45, #e2be71); }
    #videoStudioView .vs-score-bar.is-risk { background: linear-gradient(90deg, #c4453a, #f87171); }
    #videoStudioView .vs-score-refpack {
      display: flex;
      align-items: center;
      gap: 7px;
      padding: 9px 11px;
      border-radius: 10px;
      background: rgba(226, 190, 113, .07);
      border: 1px solid rgba(226, 190, 113, .14);
      color: #e6d7b4;
      font-size: 12px;
    }
    #videoStudioView .vs-score-refpack b { color: #e2be71; font-weight: 900; }
    #videoStudioView .vs-score-issues-head {
      display: flex;
      align-items: center;
      gap: 7px;
      color: #e2be71;
      font-size: 11.5px;
      font-weight: 850;
      letter-spacing: .03em;
      margin-top: 1px;
    }
    #videoStudioView .vs-score-issues {
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      gap: 8px;
    }
    #videoStudioView .vs-score-issues li {
      display: flex;
      align-items: flex-start;
      gap: 7px;
      color: #d8cba9;
      font-size: 12px;
      line-height: 1.6;
    }
    #videoStudioView .vs-score-issues li i { color: #f0b34d; flex: 0 0 auto; margin-top: 2px; }
    #videoStudioView .vs-score-clear {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 9px 11px;
      border-radius: 10px;
      background: rgba(52, 211, 153, .08);
      border: 1px solid rgba(52, 211, 153, .2);
      color: #8ee9c5;
      font-size: 12px;
      line-height: 1.5;
    }
    #videoStudioView .vs-score-clear i { color: #34d399; flex: 0 0 auto; }
    #videoStudioView .vs-score-actions {
      display: grid;
      gap: 8px;
      margin-top: 2px;
    }
    #videoStudioView .vs-score-actions .btn { width: 100%; justify-content: center; }
    #videoStudioView .vs-project-card {
      padding: 18px;
      border-radius: 16px;
      background: #fffdf8;
      border: 1px solid #ecdfca;
      box-shadow: 0 10px 30px -22px rgba(40, 30, 10, .5);
    }
    #videoStudioView .vs-project-card-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
    }
    #videoStudioView .vs-project-card-kicker {
      display: block;
      margin-bottom: 4px;
      font-size: 12px;
      font-weight: 800;
      color: #8a7a5c;
      letter-spacing: .04em;
    }
    #videoStudioView .vs-project-card-head strong {
      font-size: 18px;
      color: #202924;
    }
    #videoStudioView .vs-project-card-badge {
      display: inline-flex;
      align-items: center;
      padding: 4px 10px;
      border-radius: 999px;
      font-size: 11.5px;
      font-weight: 800;
      color: #1c5c4f;
      background: #dcf3ec;
      border: 1px solid #b5e3d6;
    }
    #videoStudioView .vs-project-meta-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 12px;
      margin-top: 14px;
    }
    #videoStudioView .vs-project-meta-grid > div {
      padding: 11px 13px;
      border-radius: 11px;
      background: #f7f1e6;
      border: 1px solid #eadfce;
    }
    #videoStudioView .vs-project-meta-grid span {
      display: block;
      font-size: 11.5px;
      color: #8a7a5c;
      font-weight: 700;
    }
    #videoStudioView .vs-project-meta-grid strong {
      display: block;
      margin-top: 3px;
      color: #2a332e;
      font-size: 14px;
    }
    #videoStudioView .vs-project-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 16px;
    }
    #videoStudioView .vs-clear-btn {
      color: #f0a5a5;
    }
    #videoStudioView .vs-clear-btn:hover {
      color: #ff8585;
      border-color: rgba(255, 120, 120, 0.45);
      background: rgba(255, 90, 90, 0.08);
    }
    /* 脚本表 */
    #videoStudioView .vs-script-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
    }
    #videoStudioView .vs-script-hint {
      color: #68736f;
      font-size: 13px;
      line-height: 1.6;
    }
    #videoStudioView .vs-script-table-wrap {
      overflow-x: auto;
      border-radius: 14px;
      border: 1px solid #ecdfca;
    }
    #videoStudioView .vs-script-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 13px;
      background: #fffdf8;
    }
    #videoStudioView .vs-script-table th,
    #videoStudioView .vs-script-table td {
      padding: 11px 13px;
      text-align: left;
      vertical-align: top;
      border-bottom: 1px solid #f0e7d8;
      color: #36403b;
      line-height: 1.6;
    }
    #videoStudioView .vs-script-table th {
      background: #f7f1e6;
      color: #6a5c3e;
      font-weight: 800;
      white-space: nowrap;
    }
    #videoStudioView .vs-script-no {
      font-weight: 800;
      color: #1c5c4f;
      white-space: nowrap;
    }
    #videoStudioView .vs-script-sec { white-space: nowrap; font-weight: 700; color: #1c5c4f; }
    #videoStudioView .vs-script-frame-cell { width: 78px; padding: 8px; }
    #videoStudioView .vs-script-thumb {
      display: block; width: 60px; height: 80px; padding: 0; border: 0; border-radius: 8px;
      overflow: hidden; background: #f3ead7; cursor: zoom-in;
    }
    #videoStudioView .vs-script-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
    #videoStudioView .vs-script-thumb.is-empty {
      display: flex; align-items: center; justify-content: center; color: #c2b694; cursor: default;
    }
    /* 分镜页内嵌「逐镜脚本表」折叠段 */
    #videoStudioView .vs-script-section {
      margin-top: 18px;
      border: 1px solid #ecdfca;
      border-radius: 14px;
      background: #fffdf8;
      overflow: hidden;
    }
    #videoStudioView .vs-script-summary {
      display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
      padding: 14px 16px; cursor: pointer; list-style: none;
      font-weight: 800; color: #1c5c4f; user-select: none;
    }
    #videoStudioView .vs-script-summary::-webkit-details-marker { display: none; }
    #videoStudioView .vs-script-summary::after {
      content: "▸"; margin-left: auto; color: #b79a5e; font-size: 13px;
      transition: transform .18s ease;
    }
    #videoStudioView .vs-script-section[open] .vs-script-summary::after { transform: rotate(90deg); }
    #videoStudioView .vs-script-summary-hint {
      font-weight: 600; color: #9a8a66; font-size: 12px;
    }
    #videoStudioView .vs-script-section[open] .vs-script-summary { border-bottom: 1px solid #f0e6d2; }
    #videoStudioView .vs-script-section > .vs-script-bar { padding: 14px 16px 0; }
    #videoStudioView .vs-script-section > .vs-script-table-wrap { padding: 12px 16px 16px; }
    /* 分段生成页「送审参考图 · 二次确认」面板(截图7：上传到引擎的 9 张图) */
    #videoStudioView .vs-feed-panel {
      margin: 16px 0;
      padding: 16px;
      border: 1px solid #e6d8bf;
      border-radius: 14px;
      background: linear-gradient(180deg, #fffdf7 0%, #fbf4e6 100%);
    }
    #videoStudioView .vs-feed-panel.is-empty { background: #fbf6ec; }
    #videoStudioView .vs-feed-head {
      display: flex; align-items: center; gap: 8px;
      font-weight: 800; color: #1c5c4f;
    }
    #videoStudioView .vs-feed-head .vs-count-badge { margin-left: auto; }
    #videoStudioView .vs-feed-note { margin: 8px 0 12px; color: #6a5c3e; font-size: 13px; line-height: 1.6; }
    #videoStudioView .vs-feed-empty { margin: 8px 0 0; color: #9a8a66; font-size: 13px; line-height: 1.6; }
    #videoStudioView .vs-feed-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
      gap: 10px;
    }
    #videoStudioView .vs-feed-cell { margin: 0; display: flex; flex-direction: column; gap: 6px; }
    #videoStudioView .vs-feed-img {
      position: relative; display: block; width: 100%; aspect-ratio: 9 / 16;
      padding: 0; border: 1px solid #e6d8bf; border-radius: 10px; overflow: hidden;
      background: #f3ead7; cursor: zoom-in;
    }
    #videoStudioView .vs-feed-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
    #videoStudioView .vs-feed-no {
      position: absolute; top: 4px; left: 4px; min-width: 18px; height: 18px; padding: 0 5px;
      display: inline-flex; align-items: center; justify-content: center;
      border-radius: 9px; background: rgba(28,92,79,.92); color: #fff; font-size: 11px; font-weight: 800;
    }
    #videoStudioView .vs-feed-cell figcaption { display: flex; flex-direction: column; gap: 2px; }
    #videoStudioView .vs-feed-cell figcaption strong { font-size: 12px; color: #1c2b28; font-weight: 700; line-height: 1.3; }
    #videoStudioView .vs-feed-cell figcaption span { font-size: 11px; color: #9a8a66; line-height: 1.35; }
    /* 「每一张都有价值」诚实闸:被引擎参考图上限砍掉、未喂进 Seedance 的图,如实列出(不静默丢弃)。 */
    #videoStudioView .vs-feed-dropped { margin-top: 14px; padding-top: 12px; border-top: 1px dashed #e0cfa0; }
    #videoStudioView .vs-feed-dropped-head { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; color: #b4791f; font-size: 13px; }
    #videoStudioView .vs-feed-dropped-head strong { font-weight: 700; }
    #videoStudioView .vs-feed-dropped-head span { color: #9a8a66; font-size: 12px; font-weight: 500; }
    #videoStudioView .vs-feed-grid.is-dropped { margin-top: 8px; opacity: 0.62; }
    #videoStudioView .vs-feed-cell.is-dropped .vs-feed-img { filter: grayscale(0.5); outline: 1px dashed #d8b86a; }
    #videoStudioView .vs-feed-dropped-tip { margin: 8px 0 0; color: #8a7a56; font-size: 12px; line-height: 1.55; }
    /* 作品详情 */
    #videoStudioView .vs-detail-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
      gap: 16px;
    }
    #videoStudioView .vs-detail-card {
      padding: 16px;
      border-radius: 14px;
      background: #fffdf8;
      border: 1px solid #ecdfca;
    }
    #videoStudioView .vs-detail-player {
      position: relative;
      border-radius: 12px;
      overflow: hidden;
      background: #0c0f12;
      aspect-ratio: 9 / 16;
      max-height: 460px;
    }
    #videoStudioView .vs-detail-card.is-picked {
      border-color: #caa24a;
      box-shadow: 0 0 0 2px rgba(202, 162, 74, .28);
    }
    #videoStudioView .vs-detail-flag,
    #videoStudioView .vs-vcard-flag {
      position: absolute;
      top: 8px;
      left: 8px;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 3px 8px;
      border-radius: 999px;
      background: rgba(202, 162, 74, .92);
      color: #1d1606;
      font-size: 11.5px;
      font-weight: 600;
    }
    #videoStudioView .vs-detail-acts {
      display: flex;
      gap: 8px;
      margin-top: 10px;
    }
    #videoStudioView .vs-detail-acts .btn { flex: 1; }
    #videoStudioView .vs-gallery {
      margin-top: 16px;
    }
    #videoStudioView .vs-gallery-head {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      gap: 8px 12px;
      margin-bottom: 10px;
    }
    #videoStudioView .vs-gallery-tip {
      font-size: 12.5px;
      color: #6b756f;
    }
    #videoStudioView .vs-gallery-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
      gap: 12px;
    }
    #videoStudioView .vs-vcard {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 6px;
      padding: 8px;
      border-radius: 12px;
      border: 1px solid #ecdfca;
      background: #fffdf8;
      text-align: left;
      cursor: pointer;
      transition: border-color .15s, box-shadow .15s, transform .15s;
    }
    #videoStudioView .vs-vcard:hover { transform: translateY(-2px); }
    #videoStudioView .vs-vcard.is-active {
      border-color: #1c5c4f;
      box-shadow: 0 0 0 2px rgba(28, 92, 79, .22);
    }
    #videoStudioView .vs-vcard.is-picked {
      border-color: #caa24a;
      box-shadow: 0 0 0 2px rgba(202, 162, 74, .28);
    }
    #videoStudioView .vs-vcard-no {
      font-size: 12px;
      font-weight: 600;
      color: #2e3a35;
    }
    #videoStudioView .vs-vcard-video {
      display: block;
      border-radius: 9px;
      overflow: hidden;
      background: #0c0f12;
      aspect-ratio: 9 / 16;
      max-height: 200px;
    }
    #videoStudioView .vs-vcard-video video {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    #videoStudioView .vs-vcard-meta {
      font-size: 11px;
      color: #6b756f;
    }
    #videoStudioView .vs-vcard-pick {
      font-size: 11.5px;
      font-weight: 600;
      color: #1c5c4f;
    }
    #videoStudioView .vs-review-gates {
      margin: 14px 0 4px;
      padding: 14px 16px 16px;
      border-radius: 14px;
      border: 1px solid #ecdfca;
      background: #fffdf8;
    }
    #videoStudioView .vs-review-gates-head {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      gap: 8px 12px;
      margin-bottom: 12px;
    }
    #videoStudioView .vs-review-gates-tip {
      font-size: 12.5px;
      color: #6b756f;
    }
    #videoStudioView .vs-review-gates-tip.is-ok {
      color: #1c5c4f;
      font-weight: 600;
    }
    #videoStudioView .vs-review-gates-list {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
      gap: 8px;
    }
    #videoStudioView .vs-review-gate {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      padding: 10px 12px;
      border-radius: 11px;
      border: 1px solid #ecdfca;
      background: #fffefb;
      text-align: left;
      cursor: pointer;
      transition: border-color .15s, box-shadow .15s, background .15s;
    }
    #videoStudioView .vs-review-gate:hover { border-color: #d8c79f; }
    #videoStudioView .vs-review-gate.is-checked {
      border-color: #1c5c4f;
      background: #f3f8f5;
      box-shadow: 0 0 0 1px rgba(28, 92, 79, .18);
    }
    #videoStudioView .vs-review-gate-box {
      flex: none;
      margin-top: 1px;
      color: #9aa39c;
    }
    #videoStudioView .vs-review-gate.is-checked .vs-review-gate-box { color: #1c5c4f; }
    #videoStudioView .vs-review-gate-text {
      display: flex;
      flex-direction: column;
      gap: 3px;
    }
    #videoStudioView .vs-review-gate-text strong {
      font-size: 13px;
      font-weight: 600;
      color: #2e3a35;
    }
    #videoStudioView .vs-review-gate-text small {
      font-size: 11.5px;
      line-height: 1.5;
      color: #6b756f;
    }
    #videoStudioView .vs-detail-player video,
    #videoStudioView .vs-detail-player img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    #videoStudioView .vs-detail-info-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 10px;
    }
    #videoStudioView .vs-detail-specs {
      display: grid;
      gap: 8px;
    }
    #videoStudioView .vs-detail-specs > div {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      padding: 8px 11px;
      border-radius: 9px;
      background: #f7f1e6;
      font-size: 12.5px;
      color: #4a544f;
    }
    #videoStudioView .vs-confirm-check {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: #1c5c4f;
      font-weight: 800;
      font-size: 12.5px;
    }
    #videoStudioView .vs-review-root { display: grid; gap: 16px; }
    /* 9 槽参考图包 */
    #videoStudioView .vs-refpack-bar {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 10px;
    }
    #videoStudioView .vs-refslot-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 12px;
    }
    #videoStudioView .vs-refslot {
      padding: 13px;
      border-radius: 14px;
      background: #fffdf8;
      border: 1px solid #ecdfca;
    }
    #videoStudioView .vs-refslot.is-bound { border-color: #b5e3d6; background: #f6fdfa; }
    #videoStudioView .vs-refslot.is-gap { border-color: #f1d59a; background: #fffaef; }
    #videoStudioView .vs-refslot-head {
      display: flex;
      align-items: flex-start;
      gap: 10px;
    }
    #videoStudioView .vs-refslot-no {
      flex: 0 0 auto;
      display: grid;
      place-items: center;
      width: 24px;
      height: 24px;
      border-radius: 7px;
      font-size: 12px;
      font-weight: 900;
      color: #1c5c4f;
      background: #dcf3ec;
    }
    #videoStudioView .vs-refslot.is-gap .vs-refslot-no { color: #9a5a12; background: #fbeccb; }
    #videoStudioView .vs-refslot-meta { flex: 1 1 auto; min-width: 0; }
    #videoStudioView .vs-refslot-meta strong { display: block; color: #2a332e; font-size: 13.5px; }
    #videoStudioView .vs-refslot-meta small { display: block; margin-top: 2px; color: #8a7a5c; font-size: 11.5px; line-height: 1.4; }
    #videoStudioView .vs-refslot-pill {
      flex: 0 0 auto;
      padding: 3px 9px;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 800;
      color: #5a6560;
      background: #f1ece1;
      border: 1px solid #e4dccb;
    }
    #videoStudioView .vs-refslot.is-bound .vs-refslot-pill { color: #1c5c4f; background: #dcf3ec; border-color: #b5e3d6; }
    #videoStudioView .vs-refslot.is-gap .vs-refslot-pill { color: #9a5a12; background: #fbeccb; border-color: #efd596; }
    #videoStudioView .vs-refslot-assets {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
      margin: 10px 0;
    }
    #videoStudioView .vs-refasset {
      position: relative;
      width: 52px;
      height: 52px;
      padding: 0;
      border-radius: 9px;
      overflow: hidden;
      cursor: pointer;
      border: 2px solid transparent;
      background: #f1ece1;
      transition: border-color .15s ease, transform .12s ease;
    }
    #videoStudioView .vs-refasset:hover { transform: translateY(-1px); }
    #videoStudioView .vs-refasset img { width: 100%; height: 100%; object-fit: cover; display: block; }
    #videoStudioView .vs-refasset.is-on { border-color: #2fbf9e; }
    #videoStudioView .vs-refasset-check {
      position: absolute;
      top: 2px;
      right: 2px;
      display: grid;
      place-items: center;
      width: 16px;
      height: 16px;
      border-radius: 5px;
      color: #fff;
      background: #2fbf9e;
    }
    #videoStudioView .vs-refasset-tag {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      padding: 1px 0;
      text-align: center;
      font-size: 9px;
      font-weight: 800;
      color: #fff;
      background: rgba(20, 26, 22, .62);
    }
    #videoStudioView .vs-refslot-empty-hint {
      margin: 0;
      padding: 12px;
      width: 100%;
      border-radius: 9px;
      background: #f7f1e6;
      color: #8a7a5c;
      font-size: 12px;
      line-height: 1.6;
    }
    #videoStudioView .vs-refslot-note { font-size: 12.5px; }
    #videoStudioView .vs-refslot-foot {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    #videoStudioView .vs-refslot-foot .btn-xs {
      align-self: flex-start;
      padding: 4px 9px;
      font-size: 11.5px;
      border-radius: 8px;
      line-height: 1.2;
    }
    #videoStudioView .vs-refslot-foot .btn-xs i { width: 13px; height: 13px; }
    #videoStudioView .vs-refslot.is-gen { border-color: #b9d6ff; background: #f5f9ff; }
    /* 槽位主预览:一张大图(可点放大),取代旧的「一墙候选缩略图手动点选」。 */
    #videoStudioView .vs-refslot-prev {
      position: relative;
      display: grid;
      place-items: center;
      width: 100%;
      aspect-ratio: 4 / 5;
      margin: 10px 0;
      padding: 0;
      border-radius: 11px;
      overflow: hidden;
      border: 1px solid #ecdfca;
      background: #f7f1e6;
      color: #a08c66;
      font-size: 12px;
      gap: 6px;
      text-align: center;
    }
    #videoStudioView .vs-refslot-prev.is-busy { color: #3a6fb0; background: #eef5ff; border-color: #cfe0f8; }
    #videoStudioView .vs-refslot-prev.has-img { cursor: zoom-in; border-color: #b5e3d6; }
    #videoStudioView .vs-refslot-prev.has-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
    #videoStudioView .vs-refslot-prev .vs-refslot-zoom {
      position: absolute;
      right: 7px;
      bottom: 7px;
      display: grid;
      place-items: center;
      width: 24px;
      height: 24px;
      border-radius: 7px;
      color: #fff;
      background: rgba(20, 26, 22, .56);
      opacity: 0;
      transition: opacity .15s ease;
    }
    #videoStudioView .vs-refslot-prev.has-img:hover .vs-refslot-zoom { opacity: 1; }
    #videoStudioView .vs-refslot-acts {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
      margin-bottom: 8px;
    }
    #videoStudioView .vs-refslot-acts .btn-xs {
      padding: 4px 10px;
      font-size: 11.5px;
      border-radius: 8px;
      line-height: 1.2;
    }
    #videoStudioView .vs-refslot-acts .btn-xs i { width: 13px; height: 13px; }
    #videoStudioView .vs-refslot-acts .btn-ghost.is-active { background: #eaf6f1; color: #1c5c4f; }
    #videoStudioView .vs-refslot-swap {
      margin-top: 9px;
      padding: 9px;
      border-radius: 10px;
      background: #f7f1e6;
      border: 1px dashed #e0d2b6;
    }
    #videoStudioView .vs-refslot-swap-tip { margin: 0 0 7px; color: #8a7a5c; font-size: 11.5px; }
    #videoStudioView .vs-refslot-swap-grid { display: flex; flex-wrap: wrap; gap: 7px; }
    /* 全片分镜定妆总表卡片：一致性脊柱，置于 9 槽之上 */
    #videoStudioView .vs-sheet-card {
      display: flex; gap: 16px; align-items: stretch;
      border: 1px solid #e7dcc6; border-radius: 14px;
      background: linear-gradient(135deg, #fffdf8, #fbf4e6);
      padding: 16px; margin-bottom: 16px;
      box-shadow: 0 6px 18px rgba(180, 150, 90, 0.08);
    }
    #videoStudioView .vs-sheet-card.has-img { border-color: #d8c79c; }
    #videoStudioView .vs-sheet-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
    #videoStudioView .vs-sheet-tag {
      display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
      font-size: 12px; font-weight: 700; color: #8a6d2f;
      background: #f3e7c8; border: 1px solid #e3d2a4; border-radius: 999px; padding: 3px 10px;
    }
    #videoStudioView .vs-sheet-info p { margin: 0; font-size: 13px; line-height: 1.6; color: #5b5343; }
    #videoStudioView .vs-sheet-acts { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: auto; }
    #videoStudioView .vs-sheet-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: #6b5f48; cursor: pointer; }
    #videoStudioView .vs-sheet-toggle input { width: 14px; height: 14px; accent-color: #b8923c; }
    #videoStudioView .vs-sheet-prev {
      position: relative; flex: 0 0 168px; width: 168px; min-height: 168px;
      border-radius: 12px; overflow: hidden; border: 1px solid #e3d6b8;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 8px; background: #fbf6ea; color: #a89564; font-size: 12px; padding: 0;
    }
    #videoStudioView .vs-sheet-prev.has-img { cursor: zoom-in; background: #000; }
    #videoStudioView .vs-sheet-prev.has-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
    #videoStudioView .vs-sheet-prev.is-busy { color: #8a6d2f; }
    @media (max-width: 720px) {
      #videoStudioView .vs-sheet-card { flex-direction: column; }
      #videoStudioView .vs-sheet-prev { flex-basis: auto; width: 100%; aspect-ratio: 1 / 1; min-height: 0; }
    }
    @media (max-width: 720px) {
      #videoStudioView .vs-detail-grid { grid-template-columns: 1fr; }
      #videoStudioView .vs-stage-foot-mid { order: 3; width: 100%; }
      #videoStudioView .vs-stage-blocker { max-width: 100%; }
      #videoStudioView .vs-refslot-grid { grid-template-columns: 1fr; }
    }
    #videoStudioView .vs-field-grid,
    #videoStudioView .vs-mode-grid,
    #videoStudioView .vs-choice-grid,
    #videoStudioView .vs-asset-slots,
    #videoStudioView .vs-engine-controls {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
    }
    #videoStudioView .vs-asset-slots.is-single {
      grid-template-columns: 1fr;
    }
    #videoStudioView .vs-field.wide,
    #videoStudioView .vs-field.is-wide,
    #videoStudioView .vs-asset-slot.is-wide {
      grid-column: 1 / -1;
    }
    #videoStudioView .vs-field {
      display: grid;
      gap: 7px;
    }
    #videoStudioView .vs-field-label {
      color: #37443d;
      font-size: 13px;
      font-weight: 850;
    }
    #videoStudioView .vs-control {
      width: 100%;
      min-height: 42px;
      border: 1px solid #e3d8c6;
      border-radius: 8px;
      background: #fffdf8;
      color: #17211d;
      font: inherit;
      padding: 10px 12px;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75);
    }
    #videoStudioView textarea.vs-control {
      resize: vertical;
      line-height: 1.65;
    }
    #videoStudioView .vs-control:focus {
      outline: 2px solid rgba(8, 123, 109, .28);
      border-color: rgba(8, 123, 109, .44);
    }
    #videoStudioView .vs-asset-slot {
      padding: 16px;
    }
    #videoStudioView .vs-asset-slot-head {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: flex-start;
      margin-bottom: 10px;
    }
    #videoStudioView .vs-asset-slot-head strong {
      display: block;
      color: #17211d;
    }
    #videoStudioView .vs-asset-slot-head span {
      display: block;
      margin-top: 4px;
      color: #68736f;
      font-size: 12px;
    }
    #videoStudioView .vs-dropzone {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 78px;
      border: 1px dashed rgba(8, 123, 109, .34);
      border-radius: 8px;
      background: #f3fbf7;
      color: #087b6d;
      font-size: 13px;
      font-weight: 850;
      cursor: pointer;
      text-align: center;
      padding: 12px;
    }
    #videoStudioView .vs-dropzone.is-disabled {
      cursor: not-allowed;
      color: #8b948d;
      border-color: #e3d8c6;
      background: #f4efe4;
    }
    #videoStudioView .vs-asset-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 9px;
      margin-top: 10px;
    }
    #videoStudioView .vs-asset-thumb {
      position: relative;
      width: 78px;
      min-height: 78px;
      border: 1px solid #e3d8c6;
      border-radius: 8px;
      overflow: hidden;
      background: #fbf4e8;
    }
    #videoStudioView .vs-asset-thumb img {
      display: block;
      width: 100%;
      height: 78px;
      object-fit: cover;
    }
    #videoStudioView .vs-asset-audio {
      display: grid;
      place-items: center;
      height: 78px;
      padding: 8px;
      color: #087b6d;
      font-size: 11px;
      font-weight: 850;
      text-align: center;
    }
    #videoStudioView .vs-asset-remove {
      position: absolute;
      top: 4px;
      right: 4px;
      width: 22px;
      height: 22px;
      border: 0;
      border-radius: 999px;
      background: rgba(22, 28, 24, .78);
      color: #fff;
      cursor: pointer;
    }
    #videoStudioView .vs-choice,
    #videoStudioView .vs-mode-card {
      padding: 16px;
      text-align: left;
      cursor: pointer;
      color: #17211d;
    }
    #videoStudioView .vs-choice.is-selected,
    #videoStudioView .vs-mode-card.is-selected,
    #videoStudioView .vs-chip-choice.is-selected,
    #videoStudioView .vs-seg-btn.is-active {
      border-color: rgba(8, 123, 109, .5);
      background: #e7f4ef;
      color: #075c53;
    }
    #videoStudioView .vs-choice strong,
    #videoStudioView .vs-mode-card strong {
      display: block;
      font-size: 16px;
      color: #17211d;
    }
    #videoStudioView .vs-choice span,
    #videoStudioView .vs-mode-card p {
      display: block;
      margin-top: 6px;
      color: #68736f;
      font-size: 13px;
      line-height: 1.6;
    }
    #videoStudioView .vs-mode-top {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      align-items: flex-start;
    }
    #videoStudioView .vs-mode-highlights {
      margin: 12px 0 0;
      padding: 0;
      list-style: none;
      display: grid;
      gap: 6px;
    }
    #videoStudioView .vs-mode-highlights li,
    #videoStudioView .vs-gap-row,
    #videoStudioView .vs-refpack-meta {
      color: #4f5f57;
      font-size: 13px;
      line-height: 1.55;
    }
    #videoStudioView .vs-mode-credits {
      display: inline-flex;
      width: fit-content;
      min-height: 28px;
      align-items: center;
      padding: 0 10px;
      border-radius: 999px;
      background: #151d18;
      color: #f2d27d;
      font-size: 12px;
      font-weight: 900;
    }
    #videoStudioView .vs-mode-credits strong {
      display: inline-block;
      margin: 0 4px;
      color: #fff3c4;
      font-size: 15px;
      line-height: 1;
    }
    #videoStudioView .vs-toggle-row,
    #videoStudioView .vs-chip-row,
    #videoStudioView .vs-seg {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }
    #videoStudioView .vs-toggle,
    #videoStudioView .vs-chip-choice,
    #videoStudioView .vs-seg-btn {
      min-height: 40px;
      border: 1px solid #e3d8c6;
      border-radius: 8px;
      background: #fffdf8;
      color: #31443b;
      font: inherit;
      font-weight: 850;
      padding: 0 12px;
      cursor: pointer;
    }
    #videoStudioView .vs-toggle {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      max-width: 100%;
    }
    #videoStudioView .vs-casting-filters {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }
    #videoStudioView .vs-cast-drop { position: relative; }
    #videoStudioView .vs-cast-drop-head {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 40px;
      padding: 0 12px;
      border: 1px solid #e3d8c6;
      border-radius: 10px;
      background: #fffdf8;
      cursor: pointer;
      list-style: none;
      user-select: none;
      transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
    }
    #videoStudioView .vs-cast-drop-head::-webkit-details-marker { display: none; }
    #videoStudioView .vs-cast-drop-head:hover { border-color: #c9b994; }
    #videoStudioView .vs-cast-drop[open] .vs-cast-drop-head {
      border-color: #2f6f5e;
      box-shadow: 0 0 0 3px rgba(47, 111, 94, .12);
    }
    #videoStudioView .vs-cast-drop.is-active .vs-cast-drop-head {
      border-color: #2f6f5e;
      background: #f1f8f4;
    }
    #videoStudioView .vs-cast-drop-label {
      font-size: 12px;
      font-weight: 850;
      color: #6b7a72;
    }
    #videoStudioView .vs-cast-drop-val {
      font-size: 13.5px;
      font-weight: 850;
      color: #26352e;
    }
    #videoStudioView .vs-cast-drop.is-active .vs-cast-drop-val { color: #1f6f5b; }
    #videoStudioView .vs-cast-drop-caret {
      color: #9aa79f;
      transition: transform .16s ease;
    }
    #videoStudioView .vs-cast-drop[open] .vs-cast-drop-caret { transform: rotate(180deg); }
    #videoStudioView .vs-cast-drop-menu {
      position: absolute;
      z-index: 30;
      top: calc(100% + 6px);
      left: 0;
      min-width: 172px;
      padding: 6px;
      display: flex;
      flex-direction: column;
      gap: 2px;
      border: 1px solid #e3d8c6;
      border-radius: 12px;
      background: #fffefb;
      box-shadow: 0 18px 40px -18px rgba(38, 53, 46, .45), 0 2px 8px rgba(38, 53, 46, .08);
      animation: vsCastDropIn .14s ease;
    }
    #videoStudioView .vs-cast-drop:not([open]) .vs-cast-drop-menu { display: none; }
    @keyframes vsCastDropIn {
      from { opacity: 0; transform: translateY(-4px); }
      to { opacity: 1; transform: translateY(0); }
    }
    #videoStudioView .vs-cast-opt {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      min-height: 36px;
      padding: 0 10px;
      border: 0;
      border-radius: 8px;
      background: transparent;
      color: #31443b;
      font: inherit;
      font-weight: 800;
      text-align: left;
      cursor: pointer;
    }
    #videoStudioView .vs-cast-opt:hover { background: #f1f4f0; }
    #videoStudioView .vs-cast-opt.is-selected { background: #eaf5ef; color: #1f6f5b; }
    #videoStudioView .vs-cast-opt i { color: #2f9e7e; }
    #videoStudioView .vs-model-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
      gap: 12px;
    }
    #videoStudioView .vs-model-card {
      display: flex;
      flex-direction: column;
      border: 1px solid #e3d8c6;
      border-radius: 14px;
      background: #fffdf8;
      overflow: hidden;
      transition: border-color .16s ease, box-shadow .16s ease;
    }
    #videoStudioView .vs-model-card.is-selected {
      border-color: rgba(8, 123, 109, .55);
      box-shadow: 0 6px 18px rgba(8, 123, 109, .16);
    }
    #videoStudioView .vs-model-portrait {
      position: relative;
      height: 132px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, #1f2c26, #314840);
    }
    #videoStudioView .vs-model-portrait--a { background: linear-gradient(135deg, #2a3a33, #4a6f5f); }
    #videoStudioView .vs-model-portrait--b { background: linear-gradient(135deg, #2c2418, #6b5326); }
    #videoStudioView .vs-model-portrait--c { background: linear-gradient(135deg, #1e2a30, #3f6776); }
    #videoStudioView .vs-model-portrait--d { background: linear-gradient(135deg, #2d2230, #6a3f5a); }
    #videoStudioView .vs-model-letter {
      font-size: 34px;
      font-weight: 900;
      color: rgba(255, 255, 255, .92);
    }
    #videoStudioView .vs-model-best {
      position: absolute;
      left: 10px;
      bottom: 10px;
      padding: 2px 10px;
      border-radius: 999px;
      background: rgba(0, 0, 0, .42);
      color: #f6edd6;
      font-size: 11px;
      font-weight: 800;
    }
    #videoStudioView .vs-model-meta {
      padding: 9px 10px 11px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    #videoStudioView .vs-model-meta h3 {
      margin: 0;
      font-size: 13px;
      font-weight: 900;
      color: #17211d;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    #videoStudioView .vs-model-meta .btn {
      margin-top: 2px;
      align-self: stretch;
      justify-content: center;
      min-height: 32px;
      font-size: 12px;
    }
    /* 「选择」按钮对比度修复(2026-07-08 用户报:白卡上浅描边浅字看不清):金描边+深字+暖底,清晰可点;选中→金实底「已选」自然过渡。id+2class 高特异度稳压基类 btn-outline。 */
    #videoStudioView .vs-model-meta .btn-outline {
      border: 1.5px solid var(--gold-strong);
      background: #fbf1d8;
      color: #3a2c0c;
      font-weight: 800;
    }
    #videoStudioView .vs-model-meta .btn-outline:hover,
    #videoStudioView .vs-model-meta .btn-outline:focus-visible {
      background: var(--gold);
      border-color: var(--gold-strong);
      color: var(--ink);
    }
    /* 「选择」按钮提亮(2026-07-09 用户报浅色模特卡上仍太暗):实底金+近黑字,任何底色上都清晰;
       id+3class 特异度稳压上面奶油底规则;选中态 btn-primary 不受影响。 */
    #videoStudioView .vs-model-grid .vs-model-meta .btn-outline {
      border: 1.5px solid #8a6508;
      background: #E8A83C;
      color: #1c1303;
      font-weight: 800;
    }
    #videoStudioView .vs-model-grid .vs-model-meta .btn-outline:hover,
    #videoStudioView .vs-model-grid .vs-model-meta .btn-outline:focus-visible {
      background: #f4bc55;
      border-color: #6e5006;
      color: #140d02;
    }
    /* 05 抽卡选模特：tab + 真实模特照片卡 + Agent 推荐角标 */
    #videoStudioView .vs-cast-tabs {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin: 4px 0 16px;
      padding-bottom: 12px;
      border-bottom: 1px solid #ecdfca;
    }
    #videoStudioView .vs-cast-tab {
      min-height: 38px;
      padding: 0 16px;
      border: 1px solid #e3d8c6;
      border-radius: 999px;
      background: #fffdf8;
      color: #4f5f57;
      font: inherit;
      font-weight: 850;
      cursor: pointer;
      transition: border-color .14s ease, background .14s ease, color .14s ease;
    }
    #videoStudioView .vs-cast-tab.is-active {
      border-color: rgba(8, 123, 109, .5);
      background: #075c53;
      color: #fbf8f1;
    }
    #videoStudioView .vs-cast-panel { margin-top: 2px; }
    #videoStudioView .vs-cast-rec-hint {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      padding: 10px 12px;
      margin-bottom: 14px;
      border-radius: 10px;
      background: #e7f4ef;
      border: 1px solid #bfe2d6;
      color: #075c53;
      font-size: 13px;
      line-height: 1.55;
      font-weight: 700;
    }
    #videoStudioView .vs-cast-rec-hint i { flex: 0 0 auto; margin-top: 2px; }
    #videoStudioView .vs-cast-gate {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 12px;
      padding: 40px 28px;
      border-radius: 16px;
      background: linear-gradient(160deg, #fbf8f1 0%, #f1ead9 100%);
      border: 1px solid rgba(178, 138, 62, .28);
    }
    #videoStudioView .vs-cast-gate-ic {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 52px;
      height: 52px;
      border-radius: 14px;
      background: linear-gradient(135deg, #0a5b53, #b28a3e);
      color: #fbf8f1;
    }
    #videoStudioView .vs-cast-gate h3 {
      margin: 0;
      font-size: 16px;
      font-weight: 850;
      color: #1f2a24;
    }
    #videoStudioView .vs-cast-gate p {
      margin: 0;
      max-width: 540px;
      font-size: 13px;
      line-height: 1.65;
      color: #5b6b62;
    }
    #videoStudioView .vs-cast-gate .btn { margin-top: 4px; }
    #videoStudioView .vs-cast-allrow { margin: 12px 0 4px; }
    #videoStudioView .vs-subhead-tag {
      margin-left: 6px;
      font-size: 12px;
      font-weight: 800;
      color: #8a7a52;
    }
    #videoStudioView .vs-model-photo {
      position: relative;
      display: block;
      width: 100%;
      padding: 0;
      border: 0;
      aspect-ratio: 4 / 5;
      background: #efe7d6;
      overflow: hidden;
      cursor: zoom-in;
    }
    #videoStudioView .vs-model-photo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform .2s ease;
    }
    #videoStudioView .vs-model-photo:hover img { transform: scale(1.04); }
    #videoStudioView .vs-model-zoom {
      position: absolute;
      right: 8px;
      bottom: 8px;
      width: 26px;
      height: 26px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      background: rgba(15, 24, 20, .55);
      color: #fbf8f1;
      opacity: 0;
      transition: opacity .16s ease;
      pointer-events: none;
    }
    #videoStudioView .vs-model-zoom i { width: 14px; height: 14px; }
    #videoStudioView .vs-model-photo:hover .vs-model-zoom { opacity: 1; }
    #videoStudioView .vs-model-picked {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(8, 92, 83, .34);
    }
    #videoStudioView .vs-model-picked span {
      width: 34px;
      height: 34px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: #075c53;
      color: #fbf8f1;
      box-shadow: 0 4px 12px rgba(8, 92, 83, .4);
    }
    #videoStudioView .vs-model-picked i { width: 18px; height: 18px; }
    #videoStudioView .vs-cast-allrow {
      display: flex;
      justify-content: center;
      margin: 14px 0 4px;
    }
    #videoStudioView .vs-cast-more {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      min-height: 38px;
      padding: 0 18px;
      border: 1px solid #e3d8c6;
      border-radius: 999px;
      background: #fffdf8;
      color: #6c5d39;
      font: inherit;
      font-weight: 800;
      cursor: pointer;
      transition: border-color .14s ease, color .14s ease;
    }
    #videoStudioView .vs-cast-more:hover {
      border-color: #b89a5e;
      color: #5a4a23;
    }
    #videoStudioView .vs-cast-more i { width: 16px; height: 16px; }
    #videoStudioView .vs-model-rec {
      position: absolute;
      left: 8px;
      top: 8px;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 3px 9px;
      border-radius: 999px;
      background: rgba(8, 92, 83, .92);
      color: #fbf8f1;
      font-size: 11px;
      font-weight: 850;
    }
    #videoStudioView .vs-model-rec i { width: 12px; height: 12px; }
    #videoStudioView .vs-model-reasons {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
    }
    #videoStudioView .vs-model-reason {
      display: inline-flex;
      align-items: center;
      padding: 2px 8px;
      border-radius: 999px;
      background: linear-gradient(135deg, rgba(8, 92, 83, .14), rgba(178, 138, 62, .16));
      border: 1px solid rgba(8, 92, 83, .26);
      color: #0a5b53;
      font-size: 10.5px;
      font-weight: 850;
      letter-spacing: .01em;
    }
    #videoStudioView .vs-model-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }
    #videoStudioView .vs-model-tag {
      padding: 2px 8px;
      border-radius: 999px;
      background: #f1ead9;
      color: #6c5d39;
      font-size: 11px;
      font-weight: 800;
    }
    #videoStudioView .vs-model-angles {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 6px;
      font-size: 11px;
      color: #7a8a82;
      font-weight: 700;
    }
    #videoStudioView .vs-model-angles span { color: #4f5f57; }
    #videoStudioView .vs-model-angles i {
      font-style: normal;
      padding: 2px 7px;
      border-radius: 6px;
      background: #f6f1e6;
      border: 1px solid #e7ddc9;
      color: #6c5d39;
    }
    #videoStudioView .vs-cast-generate-placeholder {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 10px;
      padding: 36px 24px;
      border: 1px dashed #d8c9ac;
      border-radius: 14px;
      background: #fffdf8;
      color: #4f5f57;
    }
    #videoStudioView .vs-cast-generate-placeholder h3 {
      margin: 0;
      font-size: 16px;
      font-weight: 900;
      color: #17211d;
    }
    /* 05 自助生成：高级时尚版 */
    #videoStudioView .vs-castgen {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    #videoStudioView .vs-castgen-hero {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 16px 18px;
      border-radius: 16px;
      border: 1px solid #ecd9b0;
      background:
        radial-gradient(120% 140% at 0% 0%, rgba(226, 190, 113, .22), transparent 55%),
        linear-gradient(135deg, #fffaf0 0%, #fdf2dd 100%);
      box-shadow: 0 8px 24px rgba(120, 92, 36, .08);
    }
    #videoStudioView .vs-castgen-hero-ic {
      flex: 0 0 auto;
      width: 46px;
      height: 46px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 13px;
      color: #fbf3df;
      background: linear-gradient(135deg, #b89a5e, #8a6516);
      box-shadow: 0 6px 16px rgba(138, 101, 22, .32);
    }
    #videoStudioView .vs-castgen-hero-tx h3 {
      margin: 0 0 3px;
      font-size: 16px;
      font-weight: 900;
      color: #2c2110;
      letter-spacing: .01em;
    }
    #videoStudioView .vs-castgen-hero-tx p {
      margin: 0;
      font-size: 12.5px;
      line-height: 1.55;
      color: #7c6a42;
      font-weight: 600;
    }
    #videoStudioView .vs-castgen-steps {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px;
    }
    #videoStudioView .vs-castgen-step {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 7px 13px 7px 9px;
      border-radius: 999px;
      border: 1px solid #e7ddc9;
      background: #fffdf8;
      font-size: 12px;
      font-weight: 800;
      color: #8a7a52;
    }
    #videoStudioView .vs-castgen-step b {
      display: none;
    }
    #videoStudioView .vs-castgen-step-ic {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: #f1ead9;
      color: #a08a55;
    }
    #videoStudioView .vs-castgen-step.is-active {
      border-color: rgba(184, 154, 94, .55);
      background: #fdf4e1;
      color: #6f5a22;
    }
    #videoStudioView .vs-castgen-step.is-active .vs-castgen-step-ic {
      background: linear-gradient(135deg, #b89a5e, #8a6516);
      color: #fbf3df;
    }
    #videoStudioView .vs-castgen-step.is-done {
      border-color: rgba(8, 123, 109, .35);
      color: #075c53;
    }
    #videoStudioView .vs-castgen-step.is-done .vs-castgen-step-ic {
      background: #d8efe7;
      color: #075c53;
    }
    #videoStudioView .vs-castgen-step-sep {
      width: 16px;
      height: 16px;
      color: #cdbf9f;
    }
    #videoStudioView .vs-castgen-card {
      border: 1px solid #ecdfca;
      border-radius: 16px;
      background: #fffdf8;
      padding: 16px;
      box-shadow: 0 4px 16px rgba(120, 92, 36, .05);
    }
    #videoStudioView .vs-castgen-card-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 10px;
      margin-bottom: 11px;
    }
    #videoStudioView .vs-castgen-card-label {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 13px;
      font-weight: 850;
      color: #4f5f57;
    }
    #videoStudioView .vs-castgen-aibtns {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    #videoStudioView .vs-castgen-ai {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      min-height: 32px;
      padding: 0 12px;
      border-radius: 999px;
      border: 1px solid rgba(184, 154, 94, .42);
      background: #fdf6e8;
      color: #8a6516;
      font: inherit;
      font-size: 12.5px;
      font-weight: 800;
      cursor: pointer;
      transition: border-color .14s ease, background .14s ease, color .14s ease;
    }
    #videoStudioView .vs-castgen-ai:hover:not([disabled]) {
      background: #f8ecd2;
      border-color: #b89a5e;
    }
    #videoStudioView .vs-castgen-ai[disabled] { opacity: .5; cursor: not-allowed; }
    #videoStudioView .vs-castgen-input {
      width: 100%;
      box-sizing: border-box;
      resize: vertical;
      min-height: 116px;
      padding: 13px 15px;
      border: 1px solid #e2d6bd;
      border-radius: 13px;
      background: #fffef9;
      color: #17211d;
      font-size: 14px;
      line-height: 1.65;
      font-family: inherit;
      transition: border-color .14s ease, box-shadow .14s ease;
    }
    #videoStudioView .vs-castgen-input:focus {
      outline: none;
      border-color: #b89a5e;
      box-shadow: 0 0 0 3px rgba(184, 154, 94, .16);
    }
    #videoStudioView .vs-castgen-input[disabled] { opacity: .6; cursor: not-allowed; }
    #videoStudioView .vs-castgen-foot {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 14px;
      margin-top: 14px;
    }
    #videoStudioView .vs-castgen-cta {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 44px;
      padding: 0 24px;
      border: 0;
      border-radius: 12px;
      color: #fbf3df;
      background: linear-gradient(135deg, #c5a868 0%, #8a6516 100%);
      font: inherit;
      font-size: 14px;
      font-weight: 850;
      cursor: pointer;
      box-shadow: 0 8px 20px rgba(138, 101, 22, .28);
      transition: transform .12s ease, box-shadow .14s ease, filter .14s ease;
    }
    #videoStudioView .vs-castgen-cta:hover:not([disabled]) {
      transform: translateY(-1px);
      box-shadow: 0 12px 26px rgba(138, 101, 22, .34);
      filter: brightness(1.04);
    }
    #videoStudioView .vs-castgen-cta[disabled] {
      opacity: .5;
      cursor: not-allowed;
      box-shadow: none;
    }
    #videoStudioView .vs-castgen-foot-note {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      font-weight: 650;
      color: #8a7a52;
    }
    #videoStudioView .vs-castgen-resulthead {
      display: flex;
      align-items: center;
      gap: 7px;
      font-size: 13px;
      font-weight: 850;
      color: #075c53;
      margin-top: 4px;
    }
    #videoStudioView .vs-castgen-result {
      display: grid;
      grid-template-columns: 168px minmax(0, 1fr);
      gap: 18px;
      align-items: stretch;
      padding: 16px;
      border-radius: 16px;
      border: 1px solid rgba(8, 123, 109, .3);
      background: linear-gradient(135deg, #f3fbf8 0%, #fffdf8 100%);
      box-shadow: 0 8px 22px rgba(8, 92, 83, .1);
    }
    #videoStudioView .vs-castgen-result-photo {
      position: relative;
      display: block;
      padding: 0;
      border: 0;
      border-radius: 12px;
      overflow: hidden;
      aspect-ratio: 3 / 4;
      background: #eef3f0;
      cursor: zoom-in;
    }
    #videoStudioView .vs-castgen-result-photo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    #videoStudioView .vs-castgen-result-photo:hover .vs-model-zoom { opacity: 1; }
    #videoStudioView .vs-castgen-result-meta {
      display: flex;
      flex-direction: column;
      gap: 8px;
      justify-content: center;
    }
    #videoStudioView .vs-castgen-result-tag {
      align-self: flex-start;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 3px 10px;
      border-radius: 999px;
      background: rgba(8, 92, 83, .1);
      color: #075c53;
      font-size: 11px;
      font-weight: 850;
    }
    #videoStudioView .vs-castgen-result-meta h3 {
      margin: 0;
      font-size: 16px;
      font-weight: 900;
      color: #17211d;
    }
    #videoStudioView .vs-castgen-result-meta p {
      margin: 0;
      font-size: 12.5px;
      line-height: 1.55;
      color: #68736f;
      font-weight: 600;
    }
    #videoStudioView .vs-castgen-result-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 4px;
    }
    #videoStudioView .vs-spin { animation: vsSpin .9s linear infinite; }
    #videoStudioView .vs-asset-slots.is-single {
      grid-template-columns: minmax(0, 1fr);
      max-width: 360px;
    }
    #videoStudioView .vs-note-warn,
    #videoStudioView .vs-note-ok,
    #videoStudioView .vs-note-tip {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      margin-top: 12px;
      padding: 10px 12px;
      border-radius: 10px;
      font-size: 13px;
      line-height: 1.55;
    }
    #videoStudioView .vs-note-tip {
      background: #eef4fb;
      border: 1px solid #cfe0f2;
      color: #2f5b86;
    }
    #videoStudioView .vs-note-tip i {
      flex: 0 0 auto;
      margin-top: 2px;
    }
    #videoStudioView .vs-note-tip strong { color: #1f4f7d; }
    #videoStudioView .vs-result-tip {
      display: flex;
      align-items: flex-start;
      gap: 6px;
      margin: 10px 0 0;
      font-size: 12px;
      line-height: 1.5;
      color: #6b6256;
    }
    #videoStudioView .vs-result-tip i {
      flex: 0 0 auto;
      margin-top: 2px;
      color: #087b6d;
    }
    #videoStudioView .vs-note-warn {
      background: #fdf3e2;
      border: 1px solid #e2c98f;
      color: #5f4407; /* 2026-07-05 用户反馈奶油底上浅琥珀字看不清,加深 */
      font-weight: 500;
    }
    #videoStudioView .vs-note-ok {
      background: #e7f4ef;
      border: 1px solid #bfe2d6;
      color: #075c53;
    }
    #videoStudioView .vs-note-warn i,
    #videoStudioView .vs-note-ok i {
      flex: 0 0 auto;
      margin-top: 2px;
    }
    #videoStudioView .vs-toggle-dot {
      width: 34px;
      height: 20px;
      border-radius: 999px;
      background: #d7d0c5;
      position: relative;
      flex: 0 0 auto;
    }
    #videoStudioView .vs-toggle-dot::after {
      content: "";
      position: absolute;
      width: 16px;
      height: 16px;
      top: 2px;
      left: 2px;
      border-radius: 50%;
      background: #fff;
      transition: transform .16s ease;
    }
    #videoStudioView .vs-toggle.is-on .vs-toggle-dot {
      background: #087b6d;
    }
    #videoStudioView .vs-toggle.is-on .vs-toggle-dot::after {
      transform: translateX(14px);
    }
    #videoStudioView .vs-toggle-text span {
      display: block;
      color: #68736f;
      font-size: 12px;
      font-weight: 600;
    }
    #videoStudioView .vs-formula-bar {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px 14px;
      margin: 4px 0 12px;
    }
    #videoStudioView .vs-formula {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-weight: 800;
      color: #075c53;
      font-size: 13px;
    }
    #videoStudioView .vs-formula-note {
      color: #68736f;
      font-size: 12px;
      font-weight: 600;
    }
    #videoStudioView .vs-plan-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }
    #videoStudioView .vs-plan-card {
      border: 1px solid #e3d8c6;
      border-radius: 12px;
      background: #fffdf8;
      padding: 14px;
      text-align: left;
      cursor: pointer;
      color: #31443b;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    #videoStudioView .vs-plan-card.is-selected {
      border-color: rgba(8, 123, 109, .55);
      background: #e7f4ef;
      box-shadow: 0 0 0 1px rgba(8, 123, 109, .25);
    }
    #videoStudioView .vs-plan-head {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }
    #videoStudioView .vs-plan-code {
      flex: 0 0 auto;
      width: 22px;
      height: 22px;
      border-radius: 6px;
      background: #087b6d;
      color: #fff;
      font-weight: 850;
      font-size: 12px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    #videoStudioView .vs-plan-head strong {
      font-size: 14px;
      color: #17211d;
      line-height: 1.3;
    }
    #videoStudioView .vs-plan-tag {
      margin-left: auto;
      flex: 0 0 auto;
      font-size: 11px;
      font-weight: 800;
      color: #8a5a00;
      background: #fbecc8;
      border-radius: 999px;
      padding: 2px 8px;
    }
    #videoStudioView .vs-plan-score {
      color: #d8a200;
      font-size: 13px;
      letter-spacing: 1px;
      line-height: 1;
    }
    #videoStudioView .vs-plan-bullets {
      margin: 0;
      padding-left: 16px;
      display: flex;
      flex-direction: column;
      gap: 3px;
    }
    #videoStudioView .vs-plan-bullets li {
      font-size: 12px;
      color: #56635d;
      font-weight: 600;
      line-height: 1.45;
    }
    #videoStudioView .vs-seg-inline {
      margin-bottom: 12px;
    }
    #videoStudioView .vs-timeline {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    #videoStudioView .vs-tl-row {
      display: flex;
      gap: 12px;
      align-items: flex-start;
      border-left: 2px solid rgba(8, 123, 109, .3);
      padding: 2px 0 2px 12px;
    }
    #videoStudioView .vs-tl-time {
      flex: 0 0 64px;
      font-weight: 850;
      color: #075c53;
      font-size: 12px;
      padding-top: 1px;
    }
    #videoStudioView .vs-tl-body strong {
      display: block;
      font-size: 13px;
      color: #17211d;
    }
    #videoStudioView .vs-tl-body span {
      display: block;
      font-size: 12px;
      color: #68736f;
      font-weight: 600;
      line-height: 1.45;
    }
    /* ---- 03 带货风格：三大功能带图展示卡 ---- */
    #videoStudioView .vs-show-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
    }
    #videoStudioView .vs-show-card {
      border: 1px solid #e3d8c6;
      border-radius: 14px;
      background: #fffdf8;
      padding: 0;
      text-align: left;
      cursor: pointer;
      color: #31443b;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
    }
    #videoStudioView .vs-show-card:hover {
      border-color: rgba(8, 123, 109, .45);
      transform: translateY(-2px);
      box-shadow: 0 10px 24px rgba(23, 33, 29, .08);
    }
    #videoStudioView .vs-show-card.is-selected {
      border-color: rgba(8, 123, 109, .65);
      box-shadow: 0 0 0 2px rgba(8, 123, 109, .28);
    }
    #videoStudioView .vs-show-media {
      position: relative;
      display: block;
      width: 100%;
      aspect-ratio: 9 / 11;
      background: #ece3d3;
      overflow: hidden;
    }
    #videoStudioView .vs-show-media img,
    #videoStudioView .vs-show-media .vs-show-video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    #videoStudioView .vs-show-tag {
      position: absolute;
      left: 10px;
      bottom: 10px;
      font-size: 11px;
      font-weight: 800;
      color: #fff;
      background: rgba(8, 123, 109, .9);
      border-radius: 999px;
      padding: 3px 10px;
      backdrop-filter: blur(2px);
    }
    #videoStudioView .vs-show-demo {
      position: absolute;
      right: 10px;
      bottom: 10px;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .02em;
      color: #fff;
      background: rgba(17, 24, 28, .62);
      border: 1px solid rgba(255, 255, 255, .28);
      border-radius: 999px;
      padding: 3px 9px;
      backdrop-filter: blur(3px);
      pointer-events: none;
    }
    #videoStudioView .vs-show-check {
      position: absolute;
      top: 10px;
      right: 10px;
      width: 26px;
      height: 26px;
      border-radius: 50%;
      background: #087b6d;
      color: #fff;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 6px rgba(8, 123, 109, .4);
    }
    #videoStudioView .vs-show-body {
      display: flex;
      flex-direction: column;
      gap: 5px;
      padding: 12px 14px 14px;
    }
    #videoStudioView .vs-show-body strong {
      font-size: 15px;
      font-weight: 850;
      color: #17211d;
    }
    #videoStudioView .vs-show-sub {
      font-size: 12px;
      color: #68736f;
      font-weight: 600;
      line-height: 1.5;
    }
    #videoStudioView .vs-show-pill {
      font-size: 11px;
      font-weight: 800;
      color: #075c53;
      background: #e7f4ef;
      border: 1px solid rgba(8, 123, 109, .25);
      border-radius: 999px;
      padding: 3px 10px;
    }
    #videoStudioView .vs-seg-btn.is-disabled {
      opacity: .5;
      cursor: not-allowed;
      color: #9aa39e;
    }
    #videoStudioView .vs-stage-hint {
      font-size: 12px;
      color: #8a948f;
      font-weight: 600;
      margin: 8px 0 0;
    }
    /* ---- 04 创意方案：风格 hero + 9 图职责 ---- */
    #videoStudioView .vs-plan-hero {
      display: grid;
      grid-template-columns: 168px 1fr;
      gap: 16px;
      border: 1px solid #e3d8c6;
      border-radius: 14px;
      background: #fffdf8;
      padding: 14px;
      margin-bottom: 16px;
    }
    #videoStudioView .vs-plan-hero-media {
      position: relative;
      border-radius: 10px;
      overflow: hidden;
      background: #ece3d3;
      aspect-ratio: 4 / 5;
    }
    #videoStudioView .vs-plan-hero-media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    #videoStudioView .vs-plan-hero-tag {
      position: absolute;
      left: 8px;
      bottom: 8px;
      font-size: 10px;
      font-weight: 800;
      color: #fff;
      background: rgba(8, 123, 109, .9);
      border-radius: 999px;
      padding: 2px 8px;
    }
    #videoStudioView .vs-plan-hero-copy {
      display: flex;
      flex-direction: column;
      gap: 8px;
      justify-content: center;
    }
    #videoStudioView .vs-plan-hero-kicker {
      font-size: 11px;
      font-weight: 850;
      color: #8a5a00;
      letter-spacing: .04em;
    }
    #videoStudioView .vs-plan-hero-copy h3 {
      margin: 0;
      font-size: 19px;
      font-weight: 850;
      color: #17211d;
    }
    #videoStudioView .vs-plan-hero-copy p {
      margin: 0;
      font-size: 13px;
      color: #56635d;
      font-weight: 600;
      line-height: 1.55;
    }
    #videoStudioView .vs-plan-hero-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 2px;
    }
    #videoStudioView .vs-refduty-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
    }
    #videoStudioView .vs-refduty {
      display: flex;
      align-items: center;
      gap: 8px;
      border: 1px solid #e3d8c6;
      border-radius: 9px;
      background: #fffdf8;
      padding: 8px 10px;
      font-size: 12px;
      font-weight: 700;
      color: #31443b;
    }
    #videoStudioView .vs-refduty-no {
      flex: 0 0 auto;
      width: 20px;
      height: 20px;
      border-radius: 6px;
      background: #087b6d;
      color: #fff;
      font-weight: 850;
      font-size: 11px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    /* ===== 本方案脚本公式（opus 4.8 定制）===== */
    #videoStudioView .vs-subhead-tag {
      margin-left: 6px;
      padding: 1px 7px;
      border-radius: 999px;
      background: #ecf7f3;
      border: 1px solid #bfe3d8;
      color: #087b6d;
      font-size: 11px;
      font-weight: 800;
      vertical-align: middle;
    }
    #videoStudioView .vs-plan-formula {
      border: 1px solid #e3d8c6;
      border-radius: 12px;
      background: #fffdf8;
      padding: 12px 14px;
    }
    #videoStudioView .vs-formula-bar.is-custom {
      background: linear-gradient(180deg, #f3fbf8 0%, #ecf7f3 100%);
      border: 1px solid #bfe3d8;
      border-radius: 9px;
      padding: 8px 10px;
      margin-bottom: 10px;
    }
    #videoStudioView .vs-formula-bar.is-custom .vs-formula { color: #0a5f54; font-weight: 800; }
    #videoStudioView .vs-beat-list { display: grid; gap: 8px; }
    #videoStudioView .vs-beat {
      display: flex;
      gap: 10px;
      align-items: flex-start;
      border: 1px solid #ece2d2;
      border-radius: 9px;
      background: #fff;
      padding: 8px 10px;
    }
    #videoStudioView .vs-beat-time {
      flex: 0 0 auto;
      min-width: 48px;
      text-align: center;
      padding: 2px 6px;
      border-radius: 6px;
      background: #087b6d;
      color: #fff;
      font-size: 11px;
      font-weight: 850;
      line-height: 1.6;
    }
    #videoStudioView .vs-beat-body { display: flex; flex-direction: column; gap: 2px; }
    #videoStudioView .vs-beat-body strong { font-size: 13px; color: #25382f; font-weight: 850; }
    #videoStudioView .vs-beat-body span { font-size: 12px; color: #5c6b62; line-height: 1.5; }
    #videoStudioView .vs-formula-loading {
      display: flex;
      align-items: center;
      gap: 8px;
      color: #087b6d;
      font-size: 13px;
      font-weight: 700;
      padding: 6px 2px;
    }
    #videoStudioView .vs-spin { animation: vsSpin 0.9s linear infinite; }
    @keyframes vsSpin { to { transform: rotate(360deg); } }
    #videoStudioView .vs-formula-gen,
    #videoStudioView .vs-formula-regen {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border-radius: 8px;
      cursor: pointer;
      font-weight: 800;
      font-size: 12px;
    }
    #videoStudioView .vs-formula-gen {
      margin-top: 6px;
      padding: 8px 14px;
      background: #087b6d;
      border: 1px solid #087b6d;
      color: #fff;
    }
    #videoStudioView .vs-formula-gen:hover { background: #0a6c60; }
    #videoStudioView .vs-formula-regen {
      margin-top: 10px;
      padding: 6px 11px;
      background: #fff;
      border: 1px solid #cdbfa8;
      color: #5c6b62;
    }
    #videoStudioView .vs-formula-regen:hover { border-color: #087b6d; color: #087b6d; }
    /* ===== AI 生成脚本：镜头卡片化排版 ===== */
    #videoStudioView .vs-script-out { display: grid; gap: 12px; }
    #videoStudioView .vs-script-pills { display: flex; flex-wrap: wrap; gap: 8px; }
    #videoStudioView .vs-script-pill {
      display: flex;
      flex-direction: column;
      gap: 2px;
      border: 1px solid #bfe3d8;
      border-radius: 9px;
      background: #f3fbf8;
      padding: 7px 11px;
      flex: 1 1 240px;
    }
    #videoStudioView .vs-script-pill span { font-size: 11px; font-weight: 800; color: #087b6d; }
    #videoStudioView .vs-script-pill strong { font-size: 13px; font-weight: 700; color: #25382f; line-height: 1.5; }
    #videoStudioView .vs-script-cards { display: grid; gap: 10px; }
    #videoStudioView .vs-script-card {
      border: 1px solid #e3d8c6;
      border-radius: 12px;
      background: #fffdf8;
      overflow: hidden;
    }
    #videoStudioView .vs-script-card-head {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 7px 12px;
      background: #f4ede0;
      border-bottom: 1px solid #ece2d2;
    }
    #videoStudioView .vs-script-no {
      width: 20px;
      height: 20px;
      border-radius: 6px;
      background: #25382f;
      color: #fff;
      font-size: 11px;
      font-weight: 850;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    #videoStudioView .vs-script-time { font-size: 12px; font-weight: 850; color: #087b6d; }
    #videoStudioView .vs-script-card-body { display: grid; gap: 7px; padding: 10px 12px; }
    #videoStudioView .vs-script-line { display: flex; gap: 9px; align-items: flex-start; }
    #videoStudioView .vs-script-line p { margin: 0; font-size: 13px; color: #33453b; line-height: 1.55; flex: 1; }
    #videoStudioView .vs-script-tag {
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 2px 8px;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 800;
      line-height: 1.7;
    }
    #videoStudioView .vs-script-tag.is-cam { background: #eaf1fb; color: #2d5fa6; }
    #videoStudioView .vs-script-tag.is-vo { background: #fdf0e7; color: #b5651d; }
    #videoStudioView .vs-script-tag.is-cap { background: #ecf7f3; color: #087b6d; }
    #videoStudioView .vs-script-raw { border-top: 1px dashed #ddd0bb; padding-top: 8px; }
    #videoStudioView .vs-script-raw > summary {
      cursor: pointer;
      list-style: none;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      font-weight: 800;
      color: #5c6b62;
      padding: 4px 0;
    }
    #videoStudioView .vs-script-raw > summary::-webkit-details-marker { display: none; }
    #videoStudioView .vs-script-raw > summary:hover { color: #087b6d; }
    #videoStudioView .vs-script-raw[open] > summary { margin-bottom: 8px; }
    @media (max-width: 720px) {
      #videoStudioView .vs-show-grid { grid-template-columns: 1fr; }
      #videoStudioView .vs-refduty-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      #videoStudioView .vs-plan-hero { grid-template-columns: 1fr; }
      #videoStudioView .vs-plan-hero-media { aspect-ratio: 16 / 9; }
      #videoStudioView .vs-script-pill { flex-basis: 100%; }
    }
    #videoStudioView .vs-lock-block {
      border: 1px solid #e3d8c6;
      border-radius: 10px;
      background: #fffdf8;
      padding: 14px 16px 16px;
    }
    #videoStudioView .vs-lock-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
    }
    #videoStudioView .vs-lock-title {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    #videoStudioView .vs-lock-title strong {
      font-size: 14px;
      color: #17211d;
      font-weight: 850;
    }
    #videoStudioView .vs-lock-count {
      font-size: 11px;
      font-weight: 800;
      color: #8a8170;
      background: #f1ece0;
      border-radius: 999px;
      padding: 2px 9px;
    }
    #videoStudioView .vs-lock-ai {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 11px;
      font-weight: 800;
      color: #7a5a12;
      background: #fbf1d8;
      border: 1px solid rgba(160, 120, 20, .3);
      border-radius: 999px;
      padding: 2px 9px;
    }
    #videoStudioView .vs-lock-count.is-on {
      color: #087b6d;
      background: #e7f4ef;
    }
    #videoStudioView .vs-lock-recommend {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font: inherit;
      font-size: 12px;
      font-weight: 800;
      color: #087b6d;
      background: #e7f4ef;
      border: 1px solid rgba(8, 123, 109, .35);
      border-radius: 999px;
      padding: 5px 12px;
      cursor: pointer;
    }
    #videoStudioView .vs-lock-recommend:hover {
      background: #d8efe7;
    }
    #videoStudioView .vs-lock-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 12px;
    }
    #videoStudioView .vs-lock-chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font: inherit;
      font-size: 13px;
      font-weight: 700;
      color: #6b6354;
      background: #fff;
      border: 1px solid #e3d8c6;
      border-radius: 999px;
      padding: 6px 13px;
      cursor: pointer;
      transition: all .12s ease;
    }
    #videoStudioView .vs-lock-chip:hover {
      border-color: #c9bca4;
    }
    #videoStudioView .vs-lock-chip.is-on {
      color: #087b6d;
      background: #e7f4ef;
      border-color: rgba(8, 123, 109, .5);
    }
    #videoStudioView .vs-confirm-bar {
      width: 100%;
      min-height: 58px;
      border: 1px solid rgba(8, 123, 109, .28);
      border-radius: 8px;
      background: #f3fbf7;
      color: #087b6d;
      font: inherit;
      font-weight: 900;
      cursor: pointer;
    }
    #videoStudioView .vs-confirm-bar.is-confirmed {
      background: #087b6d;
      color: #fff;
    }
    #videoStudioView .vs-ai-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      flex-wrap: wrap;
      margin: 14px 0;
      padding: 14px 16px;
      border: 1px solid rgba(8, 123, 109, .22);
      border-radius: 10px;
      background: linear-gradient(180deg, #f4fbf8, #eef7f2);
    }
    #videoStudioView .vs-ai-bar-text strong {
      display: block;
      color: #0c2b24;
      font-size: 14px;
      font-weight: 900;
    }
    #videoStudioView .vs-ai-bar-text small {
      display: block;
      margin-top: 2px;
      color: #5a6b64;
      font-size: 12px;
      font-weight: 600;
      max-width: 460px;
    }
    #videoStudioView .vs-ai-bar .btn[disabled] {
      opacity: .6;
      cursor: not-allowed;
    }
    #videoStudioView .vs-ai-bar-hero {
      margin-top: 18px;
      padding: 18px 18px;
      border-color: rgba(8, 123, 109, .3);
      background: linear-gradient(180deg, #eef9f4, #e3f3ec);
    }
    #videoStudioView .vs-ai-bar-hero .vs-ai-bar-text strong { font-size: 15px; }
    #videoStudioView .vs-fact-card {
      margin: 12px 0 4px;
      padding: 16px;
      border: 1px solid rgba(8, 123, 109, .18);
      border-radius: 12px;
      background: #fbfdfc;
    }
    #videoStudioView .vs-fact-card-head {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 12px;
    }
    #videoStudioView .vs-fact-card-head strong { color: #0c2b24; font-size: 14px; font-weight: 900; }
    #videoStudioView .vs-fact-card-head small { color: #7a8a83; font-size: 12px; font-weight: 700; }
    #videoStudioView .vs-fact-risk {
      margin-top: 14px;
      padding: 12px 14px;
      border: 1px solid rgba(176, 122, 12, .28);
      border-radius: 10px;
      background: #fff8ea;
    }
    #videoStudioView .vs-fact-risk-head {
      display: flex;
      align-items: center;
      gap: 7px;
      color: #7a5a12;
      font-weight: 900;
      font-size: 13px;
    }
    #videoStudioView .vs-fact-risk ul {
      margin: 8px 0 0;
      padding-left: 20px;
      color: #6b5320;
      font-size: 12px;
      font-weight: 600;
      line-height: 1.7;
    }
    #videoStudioView .vs-fact-risk.is-ok {
      display: flex;
      align-items: center;
      gap: 8px;
      border-color: rgba(8, 123, 109, .28);
      background: #ecf8f1;
      color: #0c5a3f;
      font-size: 12px;
      font-weight: 800;
    }
    /* ===== 02 商品事实卡 蓝图版（两栏：左事实卡 + 右卖点/风险） ===== */
    #videoStudioView .vs-fact-layout {
      display: grid;
      grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
      gap: 14px;
      margin-top: 4px;
    }
    @media (max-width: 920px) {
      #videoStudioView .vs-fact-layout { grid-template-columns: 1fr; }
    }
    #videoStudioView .vs-fact-col-side { display: flex; flex-direction: column; gap: 14px; }
    #videoStudioView .vs-fact-card-state {
      margin-left: auto;
      font-size: 11px;
      font-weight: 800;
      color: #0c5a3f;
      background: #e3f3ec;
      border: 1px solid rgba(8, 123, 109, .28);
      border-radius: 999px;
      padding: 2px 10px;
    }
    #videoStudioView .vs-fact-card-state.is-empty { color: #7a5a12; background: #fff3da; border-color: rgba(176, 122, 12, .3); }
    #videoStudioView .vs-fact-card-body { display: flex; flex-direction: column; gap: 12px; }
    /* 图片改为顶部横向缩略图条，不再单独占左列(避免右侧事实行被挤窄、左下空出一大块) */
    #videoStudioView .vs-fact-gallery {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      padding-bottom: 12px;
      border-bottom: 1px dashed rgba(8, 40, 34, .12);
    }
    #videoStudioView .vs-fact-gallery-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }
    #videoStudioView .vs-fact-thumb {
      position: relative;
      width: 58px;
      height: 58px;
      border-radius: 9px;
      overflow: hidden;
      background: #eef2f0;
      border: 1px solid rgba(8, 40, 34, .08);
      flex: 0 0 auto;
    }
    #videoStudioView .vs-fact-thumb { padding: 0; cursor: zoom-in; display: block; }
    #videoStudioView .vs-fact-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
    #videoStudioView .vs-fact-thumb-zoom {
      position: absolute;
      right: 3px;
      bottom: 3px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 18px;
      height: 18px;
      border-radius: 6px;
      color: #fff;
      background: rgba(8, 40, 34, .55);
      opacity: 0;
      transition: opacity .14s ease;
      pointer-events: none;
    }
    #videoStudioView .vs-fact-thumb:hover .vs-fact-thumb-zoom,
    #videoStudioView .vs-fact-thumb:focus-visible .vs-fact-thumb-zoom { opacity: 1; }
    #videoStudioView .vs-fact-thumb:hover { border-color: rgba(8, 123, 109, .5); }
    #videoStudioView .vs-fact-thumb.is-empty { display: flex; align-items: center; justify-content: center; color: #9bb0a8; width: 58px; height: 58px; cursor: default; }
    /* 商品图放大灯箱 */
    .vs-lightbox { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 4vw; }
    .vs-lightbox-backdrop { position: absolute; inset: 0; background: rgba(8, 20, 17, .78); backdrop-filter: blur(2px); cursor: zoom-out; }
    .vs-lightbox-fig { position: relative; margin: 0; max-width: min(92vw, 720px); max-height: 88vh; }
    .vs-lightbox-fig img { display: block; max-width: 100%; max-height: 88vh; border-radius: 12px; box-shadow: 0 24px 60px rgba(0, 0, 0, .5); }
    .vs-lightbox-close {
      position: absolute;
      top: -14px;
      right: -14px;
      width: 36px;
      height: 36px;
      border-radius: 999px;
      border: none;
      background: #fff;
      color: #11302a;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
    }
    @media (max-width: 560px) { .vs-lightbox-close { top: 6px; right: 6px; } }
    #videoStudioView .vs-fact-gallery-foot {
      margin: 0;
      font-size: 11px;
      font-weight: 800;
      color: #0c5a3f;
      background: #e8f5ee;
      border: 1px solid rgba(8, 123, 109, .2);
      border-radius: 999px;
      padding: 4px 11px;
      white-space: nowrap;
    }
    /* 事实行两列网格：横向铺满卡片宽度，每个值有更大空间不再截断 */
    #videoStudioView .vs-fact-rows {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }
    @media (max-width: 560px) {
      #videoStudioView .vs-fact-rows { grid-template-columns: 1fr; }
    }
    /* 每格上下两行：标签在上、输入框+确认在下，让输入框拿满整格宽度不再截断 */
    #videoStudioView .vs-fact-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      grid-template-areas:
        "label label"
        "input ok";
      align-items: center;
      gap: 5px 8px;
      padding: 8px 10px;
      border-radius: 8px;
      background: #f7faf9;
      border: 1px solid rgba(8, 40, 34, .06);
      min-width: 0;
    }
    #videoStudioView .vs-fact-row-label { grid-area: label; }
    #videoStudioView .vs-fact-row-input { grid-area: input; }
    #videoStudioView .vs-fact-row-value { grid-area: input; }
    #videoStudioView .vs-fact-ok { grid-area: ok; }
    /* 目标平台与不可编造（只读/长值）跨满两列 */
    #videoStudioView .vs-fact-row.is-readonly,
    #videoStudioView .vs-fact-row--forbidden { grid-column: 1 / -1; }
    /* 目标平台只读行保持单行内联（整宽够用） */
    #videoStudioView .vs-fact-row.is-readonly {
      grid-template-columns: 72px minmax(0, 1fr) auto;
      grid-template-areas: "label input ok";
    }
    #videoStudioView .vs-fact-row.is-ok { background: #eef9f3; border-color: rgba(8, 123, 109, .25); }
    #videoStudioView .vs-fact-row-label { font-size: 12px; font-weight: 800; color: #46615a; }
    #videoStudioView .vs-fact-row-input {
      width: 100%;
      border: 1px solid rgba(8, 40, 34, .14);
      border-radius: 6px;
      padding: 6px 10px;
      font-size: 13.5px;
      color: #11302a;
      background: #fff;
    }
    #videoStudioView .vs-fact-row-input:focus { outline: none; border-color: rgba(8, 123, 109, .55); box-shadow: 0 0 0 2px rgba(8, 123, 109, .12); }
    #videoStudioView .vs-fact-row-value { font-size: 12.5px; font-weight: 700; color: #11302a; }
    #videoStudioView .vs-fact-ok {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      white-space: nowrap;
      font-size: 11px;
      font-weight: 800;
      color: #5a6b64;
      background: #fff;
      border: 1px solid rgba(8, 40, 34, .16);
      border-radius: 999px;
      padding: 4px 10px;
      cursor: pointer;
    }
    #videoStudioView .vs-fact-ok.is-on { color: #0c5a3f; background: #d9f0e4; border-color: rgba(8, 123, 109, .4); }
    #videoStudioView .vs-fact-ok.is-static { color: #87796a; }
    #videoStudioView .vs-side-card {
      padding: 14px;
      border: 1px solid rgba(8, 40, 34, .1);
      border-radius: 12px;
      background: #fbfdfc;
    }
    #videoStudioView .vs-side-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
    #videoStudioView .vs-side-head strong { color: #0c2b24; font-size: 14px; font-weight: 900; }
    #videoStudioView .vs-side-head small { color: #7a8a83; font-size: 11px; font-weight: 700; }
    #videoStudioView .vs-side-ai {
      margin-left: auto;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 11px;
      font-weight: 800;
      color: #075a4d;
      background: #e3f3ec;
      border: 1px solid rgba(8, 123, 109, .3);
      border-radius: 999px;
      padding: 4px 11px;
      cursor: pointer;
    }
    #videoStudioView .vs-side-ai[disabled] { opacity: .6; cursor: not-allowed; }
    #videoStudioView .vs-side-ai.is-loading svg { animation: vsSpin .9s linear infinite; }
    #videoStudioView .vs-sell-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
    @media (max-width: 620px) { #videoStudioView .vs-sell-grid { grid-template-columns: 1fr; } }
    #videoStudioView .vs-sell-card {
      display: flex;
      align-items: flex-start;
      gap: 7px;
      padding: 9px 10px;
      border-radius: 9px;
      background: #f2faf6;
      border: 1px solid rgba(8, 123, 109, .16);
      font-size: 12px;
      font-weight: 700;
      color: #1d4036;
      line-height: 1.45;
    }
    #videoStudioView .vs-sell-card svg { color: #0c8b6d; flex: 0 0 auto; margin-top: 1px; }
    #videoStudioView .vs-sell-text { min-width: 0; }
    #videoStudioView .vs-sell-text strong { display: block; font-size: 12.5px; font-weight: 800; color: #16352e; }
    #videoStudioView .vs-sell-text small { display: block; margin-top: 2px; font-size: 11px; font-weight: 600; color: #5f7068; line-height: 1.4; }
    #videoStudioView .vs-sell-empty {
      grid-column: 1 / -1;
      padding: 12px;
      border: 1px dashed rgba(8, 40, 34, .2);
      border-radius: 9px;
      font-size: 12px;
      font-weight: 600;
      color: #7a8a83;
      text-align: center;
    }
    #videoStudioView .vs-sell-editwrap { margin-top: 4px; border-top: 1px dashed rgba(8, 40, 34, .1); padding-top: 8px; }
    #videoStudioView .vs-sell-editwrap > summary {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      list-style: none;
      cursor: pointer;
      font-size: 12px;
      font-weight: 700;
      color: #5a6b64;
      user-select: none;
    }
    #videoStudioView .vs-sell-editwrap > summary::-webkit-details-marker { display: none; }
    #videoStudioView .vs-sell-editwrap > summary:hover { color: #0c8b6d; }
    #videoStudioView .vs-sell-editwrap[open] > summary { margin-bottom: 8px; }
    #videoStudioView .vs-sell-edit { font-size: 12.5px; }
    #videoStudioView .vs-check-list { display: flex; flex-direction: column; gap: 8px; }
    #videoStudioView .vs-check-row {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      align-items: center;
      gap: 9px;
      padding: 8px 10px;
      border-radius: 9px;
      background: #f7faf9;
      border: 1px solid rgba(8, 40, 34, .07);
    }
    #videoStudioView .vs-check-ic.ok { color: #0c8b6d; }
    #videoStudioView .vs-check-ic.warn { color: #c2870c; }
    #videoStudioView .vs-check-text strong { display: block; font-size: 12.5px; font-weight: 800; color: #16352e; }
    #videoStudioView .vs-check-text small { display: block; font-size: 11px; font-weight: 600; color: #6c7c75; margin-top: 1px; }
    #videoStudioView .vs-check-act {
      white-space: nowrap;
      font-size: 11px;
      font-weight: 800;
      border-radius: 999px;
      padding: 4px 11px;
      border: 1px solid transparent;
    }
    #videoStudioView .vs-check-act.ok { color: #0c5a3f; background: #d9f0e4; }
    #videoStudioView button.vs-check-act.warn { color: #7a5a12; background: #fff1d4; border-color: rgba(176, 122, 12, .3); cursor: pointer; }
    #videoStudioView span.vs-check-act.warn { color: #7a5a12; background: #fff1d4; border-color: rgba(176, 122, 12, .3); }
    #videoStudioView .vs-fact-actions {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
      margin-top: 16px;
    }
    @media (max-width: 920px) { #videoStudioView .vs-fact-actions { grid-template-columns: 1fr 1fr; } }
    @media (max-width: 520px) { #videoStudioView .vs-fact-actions { grid-template-columns: 1fr; } }
    #videoStudioView .vs-fact-act {
      display: flex;
      align-items: flex-start;
      gap: 9px;
      text-align: left;
      padding: 12px 13px;
      border-radius: 11px;
      background: #fff;
      border: 1px solid rgba(8, 40, 34, .12);
      cursor: pointer;
    }
    #videoStudioView .vs-fact-act svg { flex: 0 0 auto; margin-top: 1px; color: #46615a; }
    #videoStudioView .vs-fact-act strong { display: block; font-size: 13px; font-weight: 800; color: #16352e; }
    #videoStudioView .vs-fact-act small { display: block; font-size: 11px; font-weight: 600; color: #6c7c75; margin-top: 2px; }
    #videoStudioView .vs-fact-act[disabled] { opacity: .55; cursor: not-allowed; }
    #videoStudioView .vs-fact-act.is-primary { background: linear-gradient(180deg, #fff7e8, #fdeecb); border-color: rgba(176, 122, 12, .35); }
    #videoStudioView .vs-fact-act.is-primary svg { color: #b07a0c; }
    #videoStudioView .vs-fact-act.is-primary.is-done { background: linear-gradient(180deg, #e9f8f0, #d7f0e2); border-color: rgba(8, 123, 109, .4); }
    #videoStudioView .vs-fact-act.is-primary.is-done svg { color: #0c8b6d; }
    #videoStudioView .btn.is-loading svg {
      animation: vsSpin .9s linear infinite;
    }
    @keyframes vsSpin {
      to { transform: rotate(360deg); }
    }
    #videoStudioView .vs-spin { animation: vsSpin .9s linear infinite; }
    /* 节点01 底部「下一步即解析」提示 */
    #videoStudioView .vs-next-hint {
      display: flex;
      align-items: center;
      gap: 9px;
      margin-top: 16px;
      padding: 12px 14px;
      border: 1px dashed rgba(8, 40, 34, .2);
      border-radius: 10px;
      background: #f6faf8;
      font-size: 12.5px;
      font-weight: 700;
      color: #5f7068;
    }
    #videoStudioView .vs-next-hint svg { flex: 0 0 auto; color: #8a9a93; }
    #videoStudioView .vs-next-hint.is-ready {
      border-style: solid;
      border-color: rgba(8, 123, 109, .28);
      background: linear-gradient(180deg, #f4fbf8, #eef7f2);
      color: #0c5a3f;
    }
    #videoStudioView .vs-next-hint.is-ready svg { color: #0c8b6d; }
    /* 节点02 Agent 对话气泡头（截图5） */
    #videoStudioView .vs-agent-bubble {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      margin: 14px 0;
      padding: 14px 16px;
      border: 1px solid rgba(8, 123, 109, .22);
      border-radius: 14px;
      background: linear-gradient(180deg, #f4fbf8, #ecf6f1);
    }
    #videoStudioView .vs-agent-bubble.is-busy { border-color: rgba(176, 122, 12, .3); background: linear-gradient(180deg, #fdf8ec, #faf2dd); }
    #videoStudioView .vs-agent-avatar {
      flex: 0 0 auto;
      width: 34px;
      height: 34px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
      color: #fff;
      background: linear-gradient(135deg, #0c8b6d, #0a6f57);
    }
    #videoStudioView .vs-agent-bubble.is-busy .vs-agent-avatar { background: linear-gradient(135deg, #d39a1c, #b07a0c); }
    #videoStudioView .vs-agent-body { flex: 1 1 auto; min-width: 0; }
    #videoStudioView .vs-agent-name { font-size: 13.5px; font-weight: 900; color: #0c2b24; }
    #videoStudioView .vs-agent-say { margin: 3px 0 0; font-size: 12.5px; font-weight: 600; color: #5a6b64; line-height: 1.5; }
    #videoStudioView .vs-agent-act { flex: 0 0 auto; align-self: center; }
    #videoStudioView .vs-agent-act[disabled] { opacity: .6; cursor: not-allowed; }
    @media (max-width: 560px) {
      #videoStudioView .vs-agent-bubble { flex-wrap: wrap; }
      #videoStudioView .vs-agent-act { width: 100%; }
    }
    /* 节点02 解析中骨架占位 */
    #videoStudioView .vs-fact-card--skel { opacity: .9; }
    #videoStudioView .vs-skel-row { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid rgba(8, 40, 34, .06); }
    #videoStudioView .vs-skel { display: block; height: 16px; border-radius: 6px; background: linear-gradient(90deg, #eef3f1 25%, #e0ebe7 37%, #eef3f1 63%); background-size: 400% 100%; animation: vsSkelShimmer 1.3s ease infinite; }
    #videoStudioView .vs-skel-label { width: 70%; }
    #videoStudioView .vs-skel-input { width: 100%; }
    @keyframes vsSkelShimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
    /* ===== AI 解析「扫描中」科技感动效（截图2a）：扫描光束 + 网格叠加 + 多阶段进度 ===== */
    #videoStudioView .vs-rec-scan {
      display: grid;
      grid-template-columns: minmax(210px, 300px) minmax(0, 1fr);
      gap: 22px;
      align-items: center;
      margin-top: 14px;
      padding: 22px;
      border-radius: 18px;
      border: 1px solid rgba(226, 190, 113, .22);
      background:
        radial-gradient(circle at 18% 12%, rgba(47, 209, 188, .12), transparent 42%),
        radial-gradient(circle at 86% 88%, rgba(226, 190, 113, .12), transparent 46%),
        linear-gradient(150deg, #0b1310 0%, #0a0f0d 60%, #080b09 100%);
      box-shadow: 0 22px 60px -32px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 248, 231, .05);
      overflow: hidden;
    }
    #videoStudioView .vs-rec-scan-stage { position: relative; display: grid; place-items: center; }
    #videoStudioView .vs-rec-scan-grid { position: relative; display: grid; gap: 8px; width: 100%; border-radius: 14px; }
    #videoStudioView .vs-rec-scan-grid--1 { grid-template-columns: 1fr; }
    #videoStudioView .vs-rec-scan-grid--2,
    #videoStudioView .vs-rec-scan-grid--3,
    #videoStudioView .vs-rec-scan-grid--4 { grid-template-columns: repeat(2, 1fr); }
    #videoStudioView .vs-rec-scan-cell {
      position: relative; aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden;
      border: 1px solid rgba(226, 190, 113, .26); background: #05201b;
    }
    #videoStudioView .vs-rec-scan-cell.is-empty { display: grid; place-items: center; color: rgba(226, 190, 113, .5); }
    #videoStudioView .vs-rec-scan-cell img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.05) contrast(1.02); }
    #videoStudioView .vs-rec-scan-beam {
      position: absolute; left: 0; right: 0; top: -38%; height: 38%;
      background: linear-gradient(180deg, transparent, rgba(47, 209, 188, .5) 60%, rgba(47, 209, 188, .85));
      box-shadow: 0 0 22px 6px rgba(47, 209, 188, .45); mix-blend-mode: screen;
      animation: vsRecBeam 1.9s cubic-bezier(.5, 0, .5, 1) infinite;
    }
    @keyframes vsRecBeam { 0% { top: -38%; } 100% { top: 100%; } }
    #videoStudioView .vs-rec-scan-grid-overlay {
      position: absolute; inset: 0; pointer-events: none;
      background:
        linear-gradient(rgba(47, 209, 188, .10) 1px, transparent 1px),
        linear-gradient(90deg, rgba(47, 209, 188, .10) 1px, transparent 1px);
      background-size: 14px 14px;
    }
    #videoStudioView .vs-rec-scan-ring {
      position: absolute; inset: -10px; border-radius: 18px; pointer-events: none;
      animation: vsRecRing 2.4s ease-out infinite;
    }
    @keyframes vsRecRing { 0% { box-shadow: 0 0 0 0 rgba(47, 209, 188, .28); } 70%, 100% { box-shadow: 0 0 0 16px rgba(47, 209, 188, 0); } }
    #videoStudioView .vs-rec-scan-title { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 800; color: #fff8e7; letter-spacing: .2px; }
    #videoStudioView .vs-rec-scan-pulse { width: 10px; height: 10px; border-radius: 999px; background: #2fd1bc; animation: vsRecPulse 1.4s ease-out infinite; }
    @keyframes vsRecPulse { 0% { box-shadow: 0 0 0 0 rgba(47, 209, 188, .55); } 70%, 100% { box-shadow: 0 0 0 9px rgba(47, 209, 188, 0); } }
    #videoStudioView .vs-rec-scan-sub { margin: 8px 0 16px; font-size: 12.5px; line-height: 1.7; color: rgba(246, 244, 238, .62); }
    #videoStudioView .vs-rec-pass-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
    #videoStudioView .vs-rec-pass {
      display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 11px;
      border: 1px solid rgba(226, 190, 113, .16); background: rgba(255, 248, 231, .03);
      color: rgba(246, 244, 238, .78); font-size: 13px; font-weight: 600;
      opacity: .5; animation: vsRecPassIn .5s ease both; animation-delay: calc(var(--rec-i) * .35s);
    }
    @keyframes vsRecPassIn { from { opacity: .25; transform: translateY(4px); } to { opacity: 1; transform: none; } }
    #videoStudioView .vs-rec-pass-ic { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; color: #2fd1bc; background: rgba(47, 209, 188, .12); }
    #videoStudioView .vs-rec-pass-tx { flex: 1; }
    #videoStudioView .vs-rec-pass-dots { display: inline-flex; gap: 3px; }
    #videoStudioView .vs-rec-pass-dots b { width: 4px; height: 4px; border-radius: 999px; background: #2fd1bc; opacity: .35; animation: vsRecDot 1.1s ease-in-out infinite; }
    #videoStudioView .vs-rec-pass-dots b:nth-child(2) { animation-delay: .18s; }
    #videoStudioView .vs-rec-pass-dots b:nth-child(3) { animation-delay: .36s; }
    @keyframes vsRecDot { 0%, 100% { opacity: .3; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.15); } }
    #videoStudioView .vs-rec-scan-track { margin-top: 14px; height: 4px; border-radius: 999px; background: rgba(255, 248, 231, .08); overflow: hidden; }
    #videoStudioView .vs-rec-scan-track-fill { display: block; height: 100%; width: 38%; border-radius: 999px; background: linear-gradient(90deg, #2fd1bc, #e2be71); animation: vsRecTrack 2.1s ease-in-out infinite; }
    @keyframes vsRecTrack { 0% { transform: translateX(-110%); } 100% { transform: translateX(360%); } }
    @media (max-width: 720px) { #videoStudioView .vs-rec-scan { grid-template-columns: 1fr; } }
    @media (prefers-reduced-motion: reduce) {
      #videoStudioView .vs-rec-scan-beam,
      #videoStudioView .vs-rec-scan-track-fill,
      #videoStudioView .vs-rec-pass,
      #videoStudioView .vs-rec-scan-ring,
      #videoStudioView .vs-rec-pass-dots b,
      #videoStudioView .vs-rec-scan-pulse { animation: none; }
      #videoStudioView .vs-rec-pass { opacity: 1; }
    }
    #videoStudioView .vs-shot-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
    }
    #videoStudioView .vs-shot {
      padding: 14px;
    }
    #videoStudioView .vs-shot-head,
    #videoStudioView .vs-shot-row,
    #videoStudioView .vs-storyboard-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }
    #videoStudioView .vs-shot-row .vs-control {
      min-width: 0;
      flex: 1 1 0;
    }
    /* 逐镜精修去密集(2026-07-05):每个输入框带中文标签,小白一眼知道填什么 */
    #videoStudioView .vs-shot-field {
      display: flex;
      flex-direction: column;
      gap: 4px;
      min-width: 0;
    }
    #videoStudioView .vs-shot-row .vs-shot-field {
      flex: 1 1 0;
    }
    #videoStudioView .vs-shot-flabel {
      font-size: 11.5px;
      font-weight: 700;
      color: #51605b;
      letter-spacing: .02em;
    }
    #videoStudioView .vs-shot-flabel em {
      font-style: normal;
      font-weight: 500;
      color: #9aa7a2;
      margin-left: 4px;
    }
    #videoStudioView .vs-shot {
      display: flex;
      flex-direction: column;
      gap: 11px;
    }
    /* 抽屉「逐镜精修」里改单列大卡——三列九卡挤成一团是「密密麻麻」的根源(2026-07-05) */
    #videoStudioView .vs-cv-drawer-body .vs-shot-grid {
      grid-template-columns: 1fr;
      gap: 16px;
    }
    #videoStudioView .vs-cv-drawer-body .vs-shot {
      padding: 18px;
      color: #28564d; /* 奶油卡上未覆写文字兜底深色,防继承抽屉浅灰字隐形 */
    }
    /* btn-outline 白底掉进暗抽屉铬=白底近白字看不见(第三次同病):只治「逐镜精修」栏 AI重写文案钮
       (它落在暗抽屉铬上,非奶油卡内),避免误伤落在浅卡上的其它 outline 钮(2026-07-05) */
    #videoStudioView .vs-cv-drawer-body .vs-storyboard-bar .btn-outline {
      background: rgba(227, 200, 120, .14);
      color: #E3C878;
      border-color: rgba(227, 200, 120, .5);
    }
    #videoStudioView .vs-cv-drawer-body .vs-storyboard-bar .btn-outline:hover {
      background: #E3C878;
      color: #141005;
    }
    #videoStudioView .vs-shot-no {
      color: #087b6d;
      font-size: 12px;
      font-weight: 900;
    }
    /* 节拍式分镜场景小标题(vs-chatrail15):像专业分镜的 SCENE 名 */
    #videoStudioView .vs-shot-title {
      font-style: normal;
      font-weight: 700;
      color: #1b2a26;
      margin-left: 8px;
      font-size: 13px;
    }
    #videoStudioView .vs-shot-sec {
      display: flex;
      align-items: center;
      gap: 4px;
      width: 82px;
      color: #68736f;
      font-size: 12px;
      font-weight: 850;
    }
    #videoStudioView .vs-sec-input {
      min-height: 34px;
      padding: 6px;
    }
    #videoStudioView .vs-engine-summary,
    #videoStudioView .vs-inline-warn {
      border: 1px solid rgba(8, 123, 109, .22);
      border-radius: 8px;
      background: #f3fbf7;
      color: #28564d;
      padding: 14px;
      line-height: 1.65;
    }
    #videoStudioView .vs-segment-panel {
      margin-top: 14px;
      border: 1px dashed #cdd4d1;
      border-radius: 10px;
      background: #f6f7f6;
      color: #6a736f;
      padding: 16px;
      opacity: .94;
    }
    #videoStudioView .vs-segment-head {
      display: flex;
      align-items: center;
      gap: 10px;
      color: #51605b;
    }
    #videoStudioView .vs-segment-title {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }
    #videoStudioView .vs-segment-title strong {
      color: #3f4945;
      font-weight: 900;
    }
    #videoStudioView .vs-segment-badge {
      font-size: 11px;
      font-weight: 900;
      letter-spacing: .04em;
      color: #7a716a;
      background: #ece8e1;
      border: 1px solid #ddd6cb;
      border-radius: 999px;
      padding: 3px 10px;
    }
    #videoStudioView .vs-segment-desc {
      margin: 10px 0 12px;
      line-height: 1.65;
    }
    #videoStudioView .vs-segment-steps {
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      gap: 8px;
    }
    #videoStudioView .vs-segment-steps li {
      display: flex;
      align-items: center;
      gap: 10px;
      line-height: 1.5;
    }
    #videoStudioView .vs-seg-tag {
      flex: none;
      min-width: 58px;
      text-align: center;
      font-size: 11px;
      font-weight: 900;
      letter-spacing: .03em;
      color: #5b665f;
      background: #e8ebe9;
      border: 1px solid #d6dcd8;
      border-radius: 6px;
      padding: 3px 8px;
    }
    #videoStudioView .vs-segment-note {
      display: flex;
      align-items: center;
      gap: 8px;
      margin: 12px 0 0;
      padding-top: 12px;
      border-top: 1px solid #e3e6e3;
      font-size: 13px;
      color: #837a70;
    }
    #videoStudioView .vs-segment-note i {
      flex: none;
    }
    #videoStudioView .vs-job-status {
      display: grid;
      gap: 12px;
    }
    #videoStudioView .vs-progress {
      border: 1px solid #e3d8c6;
      border-radius: 8px;
      background: #fffdf8;
      padding: 14px;
    }
    #videoStudioView .vs-progress-track {
      height: 9px;
      border-radius: 999px;
      background: #eee4d4;
      overflow: hidden;
      margin-top: 8px;
    }
    #videoStudioView .vs-progress-bar {
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, #087b6d, #d8aa4e);
      transition: width .3s ease;
    }
    #videoStudioView .vs-progress-err {
      color: #b42318;
      margin-top: 8px;
      font-size: 13px;
    }
    #videoStudioView .vs-result-card {
      padding: 16px;
    }
    #videoStudioView .vs-result-card video {
      width: 100%;
      max-height: 62vh;
      border-radius: 8px;
      background: #000;
      border: 1px solid #e3d8c6;
    }
    #videoStudioView .vs-versions,
    #videoStudioView .vs-version-list,
    #videoStudioView .vs-gap-list {
      display: grid;
      gap: 10px;
    }
    #videoStudioView .vs-version-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      border: 1px solid #e3d8c6;
      border-radius: 8px;
      background: #fffdf8;
      padding: 12px;
      color: #17211d;
      text-decoration: none;
    }
    #videoStudioView .vs-handoff-note {
      padding: 14px;
      color: #68736f;
      line-height: 1.7;
    }
    #videoStudioView .vs-entry-foot {
      padding: 0 clamp(20px, 4vw, 56px) clamp(28px, 4vw, 48px);
    }
    #videoStudioView .vs-metrics-bar {
      width: min(1440px, 100%);
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 30px;
      flex-wrap: wrap;
      padding: 22px 24px;
      border: 1px solid rgba(226, 207, 160, .18);
      border-radius: 22px;
      background:
        radial-gradient(circle at 16% 0%, rgba(201, 168, 106, .14), transparent 36%),
        radial-gradient(circle at 84% 100%, rgba(153, 246, 228, .08), transparent 38%),
        linear-gradient(135deg, rgba(13, 34, 29, .92), rgba(6, 18, 16, .96));
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 24px 60px rgba(0, 0, 0, .26);
    }
    #videoStudioView .vs-metrics-intro {
      flex: 0 1 auto;
      min-width: 0;
    }
    #videoStudioView .vs-metrics-intro strong {
      display: block;
      font-size: clamp(15px, 1.5vw, 19px);
      font-weight: 800;
      line-height: 1.32;
      letter-spacing: .01em;
      color: #fbfaf6;
    }
    #videoStudioView .vs-metric-cell {
      position: relative;
      display: flex;
      flex-direction: row;
      align-items: center;
      text-align: left;
      gap: 13px;
      flex: 0 0 auto;
      padding-left: 24px;
    }
    #videoStudioView .vs-metric-cell + .vs-metric-cell::before {
      content: "";
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 1px;
      height: 42px;
      background: rgba(226, 207, 160, .18);
    }
    #videoStudioView .vs-metric-icon {
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      border-radius: 13px;
      background: linear-gradient(135deg, rgba(201, 168, 106, .24), rgba(201, 168, 106, .07));
      border: 1px solid rgba(226, 207, 160, .32);
      color: #e2cfa0;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
    }
    #videoStudioView .vs-metric-text {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    #videoStudioView .vs-metric-text strong {
      font-size: clamp(22px, 2vw, 30px);
      font-weight: 950;
      line-height: 1;
      letter-spacing: -.02em;
      background: linear-gradient(120deg, #f3ead7, #c9a86a);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    #videoStudioView .vs-metric-text span {
      color: rgba(226, 232, 240, .8);
      font-size: 12.5px;
      font-weight: 850;
      text-align: left;
    }
    @media (max-width: 1120px) {
      #videoStudioView .vs-hero-inner {
        grid-template-columns: 1fr 1fr;
      }
      #videoStudioView .vs-workbench {
        grid-template-columns: 232px minmax(0, 1fr);
      }
      #videoStudioView .vs-workbench::before {
        width: 232px;
      }
      #videoStudioView .vs-shot-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }
    @media (max-width: 760px) {
      #videoStudioView .vs-entry-hero,
      #videoStudioView .vs-workbench {
        padding-left: 14px;
        padding-right: 14px;
      }
      #videoStudioView .vs-hero-inner,
      #videoStudioView .vs-showcase-grid,
      #videoStudioView .vs-field-grid,
      #videoStudioView .vs-mode-grid,
      #videoStudioView .vs-choice-grid,
      #videoStudioView .vs-asset-slots,
      #videoStudioView .vs-engine-controls,
      #videoStudioView .vs-plan-grid,
      #videoStudioView .vs-castgen-result,
      #videoStudioView .vs-shot-grid {
        grid-template-columns: 1fr;
      }
      #videoStudioView .vs-hero-inner {
        min-height: auto;
        gap: 22px;
      }
      #videoStudioView .vs-showcase {
        margin-top: 0;
      }
      #videoStudioView .vs-entry-foot {
        padding: 0 14px 24px;
      }
      #videoStudioView .vs-metrics-bar {
        gap: 14px;
        padding: 18px 16px;
      }
      #videoStudioView .vs-metrics-intro {
        flex: 1 1 100%;
      }
      #videoStudioView .vs-metric-cell {
        padding-left: 0;
        flex: 1 1 auto;
      }
      #videoStudioView .vs-metric-cell + .vs-metric-cell::before {
        display: none;
      }
      #videoStudioView .vs-agent-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      #videoStudioView .vs-showcase-grid {
        justify-items: center;
      }
      #videoStudioView .vs-showcase-card {
        width: 100%;
        max-width: 280px;
      }
      #videoStudioView .vs-showcase-card.is-tall,
      #videoStudioView .vs-showcase-card.is-low {
        margin-top: 0;
      }
      #videoStudioView .vs-hero-title {
        font-size: 40px;
      }
      #videoStudioView .vs-hero-sub {
        font-size: 15px;
      }
      #videoStudioView .vs-flow-signature i {
        display: none;
      }
      #videoStudioView .vs-stage-head,
      #videoStudioView .vs-stage-foot {
        flex-direction: column;
        align-items: stretch;
      }
      #videoStudioView .vs-workbench {
        grid-template-columns: 1fr;
      }
      #videoStudioView .vs-workbench::before {
        display: none;
      }
      #videoStudioView .vs-wb-body {
        grid-template-columns: 1fr;
      }
      #videoStudioView .vs-agent-rail {
        position: static;
      }
      #videoStudioView .vs-wb-rail {
        position: static;
        height: auto;
        border-right: none;
        border-bottom: 1px solid rgba(226, 190, 113, .14);
      }
      #videoStudioView .vs-stepper {
        grid-auto-flow: column;
        grid-auto-columns: minmax(150px, 1fr);
        overflow-x: auto;
        padding-bottom: 4px;
      }
      #videoStudioView .vs-wb-rail-note {
        display: none;
      }
      #videoStudioView .vs-stage-head,
      #videoStudioView .vs-stage-body,
      #videoStudioView .vs-stage-foot {
        padding: 16px;
      }
      #videoStudioView .vs-stage-title {
        flex-direction: column;
      }
      #videoStudioView .vs-hero-actions .btn,
      #videoStudioView .vs-stage-foot .btn,
      #videoStudioView .vs-generate-btn {
        width: 100%;
        justify-content: center;
      }
    }
    @media (max-width: 420px) {
      #videoStudioView .vs-entry-hero,
      #videoStudioView .vs-workbench {
        padding-left: 10px;
        padding-right: 10px;
      }
      #videoStudioView .vs-hero-title {
        font-size: 34px;
      }
      #videoStudioView .vs-param-strip span,
      #videoStudioView .vs-flow-signature span {
        width: 100%;
        justify-content: center;
      }
      #videoStudioView .vs-agent-panel,
      #videoStudioView .vs-wb-hero,
      #videoStudioView .vs-stage-panel {
        border-radius: 8px;
      }
    }

    /* ==========================================================================
       T15 · 功能中心首页重设计(hub redesign)
       — 4步流程图 / 平台 logo 条 / 5 卡自适应 / 今日生产进度(真实统计)/
         最近作品(真实记录)/ 快捷入口 / 底部数据条。
       全 append-only,复用既有暗色 SaaS 设计语言(奶油金 + 深绿 + 青色点缀)。
       ========================================================================== */

    /* 4 步横向流程:工作流条改为「步骤 → 箭头 → 步骤」自适应行 */
    .product-center-view .workflow-strip.workflow-strip-flow {
      display: flex;
      flex-wrap: wrap;
      align-items: stretch;
      gap: 8px;
      width: 100%;
      max-width: 880px;
    }

    .product-center-view .workflow-strip-flow .workflow-step {
      flex: 1 1 116px;
      min-width: 0;
    }

    .product-center-view .workflow-strip-flow .workflow-step em {
      color: var(--gold-line);
    }

    .product-center-view .workflow-arrow {
      display: inline-grid;
      place-items: center;
      flex: 0 0 auto;
      width: 22px;
      color: rgba(226, 207, 160, .55);
    }

    @media (max-width: 760px) {
      .product-center-view .workflow-arrow { display: none; }
      .product-center-view .workflow-strip-flow .workflow-step { flex: 1 1 calc(50% - 8px); }
    }

    /* 平台 logo 条 */
    .product-center-view .hub-platform-strip {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 14px;
      margin-top: 18px;
      padding: 14px 22px;
      border: 1px solid rgba(226, 207, 160, .12);
      border-radius: 16px;
      background: linear-gradient(180deg, rgba(8, 10, 9, .92) 0%, rgba(5, 7, 6, .96) 100%);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
    }

    .product-center-view .hub-platform-label {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      color: #99f6e4;
      font-size: 11.5px;
      font-weight: 900;
      letter-spacing: .04em;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .product-center-view .hub-platform-list {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      flex: 1 1 auto;
    }

    .product-center-view .hub-platform-chip {
      display: inline-flex;
      align-items: center;
      padding: 6px 13px;
      border: 1px solid rgba(226, 207, 160, .2);
      border-radius: 999px;
      background: rgba(226, 207, 160, .07);
      color: rgba(245, 245, 240, .9);
      font-size: 12.5px;
      font-weight: 850;
      line-height: 1;
      transition: border-color .18s ease, background .18s ease, transform .18s ease;
    }

    .product-center-view .hub-platform-chip:hover {
      border-color: rgba(226, 207, 160, .42);
      background: rgba(226, 207, 160, .14);
      transform: translateY(-1px);
    }

    /* 5 张功能卡:自适应列(原固定 3 列覆盖) */
    .product-center-view .product-card-grid {
      grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
    }

    /* 通用区块头(统计 / 最近作品 / 快捷入口) */
    .product-center-view .hub-section-head {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-end;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 16px;
    }

    .product-center-view .hub-section-head h2 {
      margin: 0;
      color: #f8fffb;
      font-size: clamp(20px, 1.8vw, 26px);
      font-weight: 950;
      letter-spacing: -.01em;
    }

    .product-center-view .hub-section-head p {
      margin: 6px 0 0;
      color: rgba(203, 213, 225, .72);
      font-size: 13px;
      font-weight: 650;
      line-height: 1.55;
      max-width: 560px;
    }

    .product-center-view .hub-insights,
    .product-center-view .hub-recent,
    .product-center-view .hub-shortcuts {
      margin-top: 32px;
    }

    /* 今日生产进度统计卡 */
    .product-center-view .hub-stat-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
      gap: 16px;
    }

    .product-center-view .hub-stat-placeholder,
    .product-center-view .hub-recent-empty {
      grid-column: 1 / -1;
      padding: 26px 20px;
      border: 1px dashed rgba(226, 207, 160, .22);
      border-radius: 18px;
      background: rgba(4, 24, 21, .34);
      color: rgba(203, 213, 225, .76);
      font-size: 13.5px;
      font-weight: 700;
      text-align: center;
    }

    .product-center-view .hub-stat-card {
      position: relative;
      display: grid;
      grid-template-columns: auto 1fr;
      grid-template-areas:
        "icon value"
        "label label"
        "note note";
      align-items: center;
      gap: 4px 12px;
      padding: 18px 18px 16px;
      border: 1px solid rgba(226, 207, 160, .16);
      border-radius: 20px;
      background:
        radial-gradient(circle at 84% 8%, rgba(201, 168, 106, .14), transparent 42%),
        linear-gradient(160deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .02)),
        rgba(4, 24, 21, .46);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 18px 44px rgba(0, 0, 0, .22);
    }

    .product-center-view .hub-stat-card.is-soon {
      background:
        linear-gradient(160deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .012)),
        rgba(4, 24, 21, .34);
      border-style: dashed;
      border-color: rgba(226, 207, 160, .2);
    }

    .product-center-view .hub-stat-icon {
      grid-area: icon;
      display: inline-grid;
      place-items: center;
      width: 36px;
      height: 36px;
      border-radius: 12px;
      background: rgba(226, 207, 160, .16);
      color: #99f6e4;
    }

    .product-center-view .hub-stat-card.is-soon .hub-stat-icon {
      background: rgba(226, 207, 160, .09);
      color: rgba(226, 207, 160, .7);
    }

    .product-center-view .hub-stat-value {
      grid-area: value;
      justify-self: end;
      color: #f8fffb;
      font-size: 30px;
      font-weight: 950;
      line-height: 1;
      letter-spacing: -.02em;
    }

    .product-center-view .hub-stat-card.is-soon .hub-stat-value {
      color: rgba(245, 245, 240, .5);
    }

    .product-center-view .hub-stat-label {
      grid-area: label;
      margin-top: 10px;
      color: var(--ivory-warm);
      font-size: 13px;
      font-weight: 900;
    }

    .product-center-view .hub-stat-note {
      grid-area: note;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      margin-top: 4px;
      color: rgba(153, 246, 228, .78);
      font-size: 11.5px;
      font-weight: 800;
    }

    .product-center-view .hub-stat-card.is-soon .hub-stat-note {
      color: rgba(226, 207, 160, .68);
    }

    /* 最近作品 */
    .product-center-view .hub-recent-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
      gap: 16px;
    }

    .product-center-view .hub-recent-card {
      display: grid;
      gap: 0;
      padding: 0;
      overflow: hidden;
      border: 1px solid rgba(226, 207, 160, .16);
      border-radius: 18px;
      background: rgba(4, 24, 21, .46);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 16px 38px rgba(0, 0, 0, .2);
      text-align: left;
      cursor: pointer;
      transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
    }

    .product-center-view .hub-recent-card:hover {
      border-color: rgba(226, 207, 160, .42);
      transform: translateY(-2px);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 22px 50px rgba(0, 0, 0, .28);
    }

    .product-center-view .hub-recent-thumb {
      position: relative;
      display: block;
      aspect-ratio: 4 / 3;
      width: 100%;
      overflow: hidden;
      background:
        linear-gradient(135deg, rgba(13, 34, 29, .9), rgba(6, 18, 16, .96));
    }

    .product-center-view .hub-recent-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .product-center-view .hub-recent-thumb.is-failed img { display: none; }

    .product-center-view .hub-recent-thumb.is-failed::after {
      content: "";
    }

    .product-center-view .hub-recent-state {
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      color: rgba(203, 213, 225, .62);
      font-size: 12px;
      font-weight: 800;
    }

    .product-center-view .hub-recent-meta {
      display: grid;
      gap: 4px;
      padding: 11px 13px 13px;
      min-width: 0;
    }

    .product-center-view .hub-recent-meta strong {
      color: var(--ivory-warm);
      font-size: 13px;
      font-weight: 900;
      line-height: 1.3;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .product-center-view .hub-recent-meta small {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      color: rgba(203, 213, 225, .66);
      font-size: 11px;
      font-weight: 750;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    /* 快捷入口 */
    .product-center-view .hub-shortcut-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
      gap: 14px;
    }

    .product-center-view .hub-shortcut-card {
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      gap: 13px;
      padding: 15px 16px;
      border: 1px solid rgba(226, 207, 160, .16);
      border-radius: 16px;
      background:
        linear-gradient(150deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .018)),
        rgba(4, 24, 21, .42);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
      text-align: left;
      cursor: pointer;
      transition: border-color .18s ease, transform .18s ease, background .18s ease;
    }

    .product-center-view .hub-shortcut-card:hover {
      border-color: rgba(226, 207, 160, .42);
      background:
        linear-gradient(150deg, rgba(226, 207, 160, .12), rgba(226, 207, 160, .04)),
        rgba(4, 24, 21, .5);
      transform: translateY(-2px);
    }

    .product-center-view .hub-shortcut-icon {
      display: inline-grid;
      place-items: center;
      width: 40px;
      height: 40px;
      border-radius: 13px;
      background: rgba(226, 207, 160, .16);
      color: #99f6e4;
    }

    .product-center-view .hub-shortcut-copy {
      display: grid;
      gap: 3px;
      min-width: 0;
    }

    .product-center-view .hub-shortcut-copy strong {
      color: var(--ivory-warm);
      font-size: 13.5px;
      font-weight: 950;
      line-height: 1.2;
    }

    .product-center-view .hub-shortcut-copy small {
      color: rgba(203, 213, 225, .66);
      font-size: 11.5px;
      font-weight: 700;
      line-height: 1.35;
    }

    .product-center-view .hub-shortcut-go {
      color: rgba(226, 207, 160, .55);
      transition: transform .18s ease, color .18s ease;
    }

    .product-center-view .hub-shortcut-card:hover .hub-shortcut-go {
      color: #99f6e4;
      transform: translate(2px, -2px);
    }

    /* 底部数据条(营销静态文案) */
    .product-center-view .hub-metrics-bar {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
      margin-top: 34px;
      padding: 22px 18px;
      border: 1px solid rgba(226, 207, 160, .18);
      border-radius: 22px;
      background:
        radial-gradient(circle at 16% 0%, rgba(201, 168, 106, .14), transparent 36%),
        radial-gradient(circle at 84% 100%, rgba(153, 246, 228, .08), transparent 38%),
        linear-gradient(135deg, rgba(13, 34, 29, .92), rgba(6, 18, 16, .96));
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 24px 60px rgba(0, 0, 0, .26);
    }

    .product-center-view .hub-metric-cell {
      display: grid;
      gap: 5px;
      justify-items: center;
      text-align: center;
      position: relative;
    }

    .product-center-view .hub-metric-cell + .hub-metric-cell::before {
      content: "";
      position: absolute;
      left: -7px;
      top: 50%;
      transform: translateY(-50%);
      width: 1px;
      height: 38px;
      background: rgba(226, 207, 160, .16);
    }

    .product-center-view .hub-metric-cell strong {
      color: #f8fffb;
      font-size: clamp(26px, 3vw, 38px);
      font-weight: 950;
      line-height: 1;
      letter-spacing: -.02em;
      background: linear-gradient(120deg, #f3ead7, #c9a86a);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .product-center-view .hub-metric-cell span {
      color: rgba(226, 232, 240, .8);
      font-size: 12.5px;
      font-weight: 850;
    }

    @media (max-width: 620px) {
      .product-center-view .hub-metrics-bar { grid-template-columns: 1fr; gap: 18px; }
      .product-center-view .hub-metric-cell + .hub-metric-cell::before { display: none; }
      .product-center-view .hub-platform-label { width: 100%; }
    }

    /* ===== 作品记录与下载中心 · 三区表格 + 详情面板重设计(append-only,2026-06-22) ===== */
    /* 平台筛选条:仅当有真实平台数据时由 JS 取消 .hidden,无平台则整条隐藏(不假装能筛) */
    .records-view .records-platform-bar {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      padding: 8px 12px;
      border: 1px solid var(--records-line);
      background: var(--records-panel);
      box-shadow: var(--records-shadow);
    }

    .records-view .records-platform-bar.hidden {
      display: none;
    }

    .records-view .records-platform-label {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      font-weight: 900;
      color: var(--records-muted);
      flex: 0 0 auto;
    }

    .records-view .records-platform-label i {
      color: var(--gold-strong);
    }

    .records-view .records-platform-row {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      min-width: 0;
    }

    .records-view .records-platform-chip {
      min-height: 30px;
      padding: 5px 11px;
      border: 1px solid var(--records-line);
      border-radius: 999px;
      background: var(--panel);
      color: var(--ink-soft);
      font-size: 11.5px;
      font-weight: 850;
      cursor: pointer;
      transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
    }

    .records-view .records-platform-chip:hover,
    .records-view .records-platform-chip:focus-visible,
    .records-view .records-platform-chip.is-active {
      border-color: var(--gold-line);
      background: var(--gold-soft);
      color: var(--ink);
      outline: none;
    }

    .records-view .records-platform-chip:hover {
      transform: translateY(-1px);
    }

    /* 工作区:左表格 + 右详情面板 */
    .records-view .records-workspace {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 320px;
      gap: 12px;
      align-items: start;
    }

    .records-view .records-table-wrap {
      min-width: 0;
      position: relative;
    }

    /* #recordsGrid 原为卡片网格(.records-grid auto-fill),现承载表格 → 取消其 grid 约束,否则表格被塞进 230px 轨道 */
    .records-view .records-table-wrap #recordsGrid.records-grid {
      display: block;
    }

    .records-view .records-table {
      display: grid;
      gap: 0;
      width: 100%;
      border: 1px solid var(--records-line);
      background: var(--records-panel);
      box-shadow: var(--records-shadow);
      overflow: hidden;
    }

    .records-view .records-table-row {
      display: grid;
      grid-template-columns:
        minmax(0, 2.2fr) minmax(64px, 1fr) minmax(80px, 1fr)
        56px 72px 64px minmax(80px, 1fr) 104px;
      align-items: center;
      gap: 8px;
      padding: 10px 12px;
      border-top: 1px solid color-mix(in srgb, var(--records-line) 70%, transparent);
      min-width: 0;
    }

    .records-view .records-table-head {
      border-top: none;
      background: var(--records-panel-soft);
      position: sticky;
      top: 0;
      z-index: 2;
    }

    .records-view .records-table-head .rc-col {
      font-size: 11px;
      font-weight: 950;
      letter-spacing: .02em;
      color: var(--records-muted);
      text-transform: none;
    }

    .records-view .record-row {
      cursor: pointer;
      transition: background .14s ease, box-shadow .14s ease;
    }

    .records-view .record-row:hover,
    .records-view .record-row:focus-visible {
      background: color-mix(in srgb, var(--gold-soft) 52%, transparent);
      outline: none;
    }

    .records-view .record-row.is-selected {
      background: var(--gold-soft);
      box-shadow: inset 3px 0 0 var(--gold-strong);
    }

    .records-view .rc-col {
      min-width: 0;
      font-size: 12px;
      font-weight: 760;
      color: var(--ink-soft);
      overflow: hidden;
    }

    .records-view .rc-col-product {
      display: flex;
      align-items: center;
      gap: 9px;
      min-width: 0;
    }

    .records-view .rc-thumb {
      flex: 0 0 auto;
      width: 38px;
      height: 38px;
      display: grid;
      place-items: center;
      overflow: hidden;
      border: 1px solid var(--line-soft);
      border-radius: var(--radius-sm);
      background: var(--ivory-warm);
      color: var(--records-muted);
    }

    .records-view .rc-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .records-view .rc-thumb.is-blank {
      color: var(--records-muted);
    }

    .records-view .rc-product-text {
      min-width: 0;
    }

    .records-view .rc-product-text strong {
      display: block;
      font-size: 12.5px;
      font-weight: 920;
      color: var(--ink);
      line-height: 1.3;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .records-view .rc-type-tag {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 3px 8px;
      border: 1px solid var(--records-line);
      border-radius: 999px;
      background: var(--panel);
      font-size: 11px;
      font-weight: 850;
      color: var(--ink-soft);
      max-width: 100%;
    }

    .records-view .rc-type-tag i {
      color: var(--gold-strong);
      flex: 0 0 auto;
    }

    .records-view .rc-col-count {
      font-weight: 900;
      color: var(--ink);
    }

    .records-view .rc-status {
      display: inline-flex;
      align-items: center;
      padding: 3px 8px;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 880;
      white-space: nowrap;
    }

    .records-view .rc-status.is-active {
      color: var(--deep-green);
      background: color-mix(in srgb, var(--deep-green) 12%, transparent);
      border: 1px solid color-mix(in srgb, var(--deep-green) 26%, transparent);
    }

    .records-view .rc-status.is-expired {
      color: var(--records-muted);
      background: color-mix(in srgb, var(--records-muted) 10%, transparent);
      border: 1px solid color-mix(in srgb, var(--records-line) 80%, transparent);
    }

    .records-view .rc-na {
      color: var(--records-muted);
      font-weight: 760;
    }

    .records-view .rc-col-ops {
      display: inline-flex;
      gap: 6px;
      justify-content: flex-end;
    }

    .records-view .rc-op-btn {
      width: 30px;
      height: 30px;
      display: inline-grid;
      place-items: center;
      border: 1px solid var(--records-line);
      border-radius: var(--radius-sm);
      background: var(--panel);
      color: var(--ink-soft);
      cursor: pointer;
      transition: background .14s ease, border-color .14s ease, color .14s ease;
    }

    .records-view .rc-op-btn:hover:not(:disabled),
    .records-view .rc-op-btn:focus-visible:not(:disabled) {
      border-color: var(--gold-line);
      background: var(--gold-soft);
      color: var(--ink);
      outline: none;
    }

    .records-view .rc-op-btn.rc-op-danger:hover:not(:disabled) {
      border-color: color-mix(in srgb, #c0392b 60%, var(--records-line));
      background: color-mix(in srgb, #c0392b 12%, transparent);
      color: #c0392b;
    }

    .records-view .rc-op-btn:disabled {
      opacity: .42;
      cursor: not-allowed;
    }

    /* 右侧详情面板 */
    .records-view .records-detail {
      position: sticky;
      top: 12px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      min-height: 240px;
      max-height: calc(100svh - 120px);
      overflow: auto;
      border: 1px solid var(--records-line);
      background: var(--records-panel);
      box-shadow: var(--records-shadow);
      padding: 14px;
    }

    .records-view .records-detail-empty {
      display: grid;
      place-items: center;
      gap: 10px;
      text-align: center;
      color: var(--records-muted);
      font-size: 12.5px;
      font-weight: 820;
      line-height: 1.5;
      padding: 36px 12px;
      margin: auto 0;
    }

    .records-view .records-detail-empty i {
      color: var(--gold-strong);
    }

    .records-view .records-detail-head {
      display: grid;
      gap: 4px;
    }

    .records-view .rdh-title {
      display: flex;
      align-items: center;
      gap: 7px;
      min-width: 0;
    }

    .records-view .rdh-title i {
      color: var(--gold-strong);
      flex: 0 0 auto;
    }

    .records-view .rdh-title strong {
      font-size: 14px;
      font-weight: 950;
      color: var(--ink);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .records-view .rdh-sub {
      font-size: 11.5px;
      font-weight: 760;
      color: var(--records-muted);
      line-height: 1.4;
    }

    .records-view .records-detail-tabs {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 4px;
      padding: 3px;
      border: 1px solid var(--records-line);
      border-radius: var(--radius-sm);
      background: var(--panel);
    }

    .records-view .records-detail-tab {
      min-height: 32px;
      border: none;
      border-radius: 4px;
      background: transparent;
      color: var(--records-muted);
      font-size: 11.5px;
      font-weight: 880;
      cursor: pointer;
      transition: background .14s ease, color .14s ease;
    }

    .records-view .records-detail-tab:hover,
    .records-view .records-detail-tab:focus-visible {
      color: var(--ink);
      outline: none;
    }

    .records-view .records-detail-tab.is-active {
      background: var(--gold-soft);
      color: var(--ink);
    }

    .records-view .records-detail-body {
      min-width: 0;
    }

    .records-view .records-detail-assets {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 8px;
    }

    .records-view .records-detail-asset {
      margin: 0;
      display: grid;
      gap: 5px;
    }

    .records-view .rda-thumb {
      position: relative;
      aspect-ratio: 1 / 1;
      overflow: hidden;
      border: 1px solid var(--line-soft);
      border-radius: var(--radius-sm);
      background: var(--ivory-warm);
      display: grid;
      place-items: center;
      color: var(--records-muted);
    }

    .records-view .rda-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .records-view .rda-zoom {
      position: absolute;
      top: 6px;
      right: 6px;
      width: 28px;
      height: 28px;
      display: inline-grid;
      place-items: center;
      border: 1px solid color-mix(in srgb, var(--gold-line) 48%, transparent);
      border-radius: var(--radius-sm);
      background: color-mix(in srgb, var(--charcoal) 82%, transparent);
      color: var(--gold-soft);
      cursor: pointer;
      backdrop-filter: blur(8px);
      transition: transform .14s ease, background .14s ease;
    }

    .records-view .rda-zoom:hover,
    .records-view .rda-zoom:focus-visible {
      transform: translateY(-1px);
      background: var(--deep-green);
      outline: none;
    }

    .records-view .records-detail-asset.is-expired .rda-thumb {
      opacity: .6;
    }

    .records-view .records-detail-asset figcaption {
      font-size: 10.5px;
      font-weight: 780;
      color: var(--records-muted);
      text-align: center;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .records-view .records-detail-note {
      font-size: 12px;
      font-weight: 780;
      color: var(--records-muted);
      line-height: 1.5;
      padding: 14px;
      border: 1px dashed var(--records-line);
      border-radius: var(--radius-sm);
      background: var(--panel);
      text-align: center;
    }

    /* 版本记录:真实 sourceType 时间线 + 诚实「即将上线」提示 */
    .records-view .records-detail-versions {
      display: grid;
      gap: 8px;
    }

    .records-view .rdv-item {
      display: flex;
      align-items: flex-start;
      gap: 9px;
      padding: 9px 11px;
      border: 1px solid var(--records-line);
      border-radius: var(--radius-sm);
      background: var(--panel);
    }

    .records-view .rdv-item.is-current {
      border-color: var(--gold-line);
      background: var(--gold-soft);
    }

    .records-view .rdv-dot {
      flex: 0 0 auto;
      width: 9px;
      height: 9px;
      margin-top: 4px;
      border-radius: 50%;
      background: var(--gold-strong);
    }

    .records-view .rdv-item strong {
      display: block;
      font-size: 12.5px;
      font-weight: 900;
      color: var(--ink);
    }

    .records-view .rdv-item small {
      font-size: 11px;
      font-weight: 740;
      color: var(--records-muted);
    }

    .records-view .rdv-soon {
      display: flex;
      align-items: center;
      gap: 7px;
      justify-content: center;
    }

    .records-view .rdv-soon i {
      color: var(--gold-strong);
      flex: 0 0 auto;
    }

    /* 下载清单:逐素材真实下载 + ZIP「即将上线」disabled */
    .records-view .records-detail-downloads {
      display: grid;
      gap: 10px;
    }

    .records-view .rdd-list {
      display: grid;
      gap: 6px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .records-view .rdd-list li {
      display: flex;
      align-items: center;
      gap: 8px;
      justify-content: space-between;
      padding: 8px 10px;
      border: 1px solid var(--records-line);
      border-radius: var(--radius-sm);
      background: var(--panel);
    }

    .records-view .rdd-name {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      min-width: 0;
      font-size: 11.5px;
      font-weight: 820;
      color: var(--ink-soft);
      overflow: hidden;
    }

    .records-view .rdd-name i {
      color: var(--gold-strong);
      flex: 0 0 auto;
    }

    .records-view .rdd-name em {
      font-style: normal;
      font-weight: 720;
      color: var(--records-muted);
      flex: 0 0 auto;
    }

    .records-view .rdd-dl {
      flex: 0 0 auto;
      width: 30px;
      height: 30px;
      display: inline-grid;
      place-items: center;
      border: 1px solid var(--records-line);
      border-radius: var(--radius-sm);
      background: var(--panel);
      color: var(--ink-soft);
      cursor: pointer;
      transition: background .14s ease, border-color .14s ease, color .14s ease;
    }

    .records-view .rdd-dl:hover,
    .records-view .rdd-dl:focus-visible {
      border-color: var(--gold-line);
      background: var(--gold-soft);
      color: var(--ink);
      outline: none;
    }

    .records-view .rdd-zip {
      width: 100%;
      justify-content: center;
      opacity: .68;
    }

    .records-view .rdd-zip:disabled {
      cursor: not-allowed;
    }

    /* 响应式:窄屏堆叠详情面板到表格下方,表格转卡片化行 */
    @media (max-width: 1080px) {
      .records-view .records-workspace {
        grid-template-columns: minmax(0, 1fr);
      }
      .records-view .records-detail {
        position: static;
        max-height: none;
      }
      .records-view .records-detail-assets {
        grid-template-columns: repeat(3, 1fr);
      }
    }

    @media (max-width: 720px) {
      .records-view .records-table-head {
        display: none;
      }
      .records-view .records-table-row {
        grid-template-columns: 1fr 1fr;
        gap: 6px 10px;
        padding: 12px;
      }
      .records-view .rc-col-product {
        grid-column: 1 / -1;
      }
      .records-view .rc-col-ops {
        grid-column: 1 / -1;
        justify-content: flex-start;
      }
      .records-view .rc-col-platform::before { content: "平台："; color: var(--records-muted); font-weight: 800; }
      .records-view .rc-col-type::before { content: ""; }
      .records-view .rc-col-count::before { content: "素材："; color: var(--records-muted); font-weight: 800; }
      .records-view .rc-col-credits::before { content: "额度："; color: var(--records-muted); font-weight: 800; }
      .records-view .rc-col-time::before { content: ""; }
      .records-view .records-detail-assets {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    /* 英文界面下窄屏行内标签换成英文 */
    html[lang="en"] .records-view .rc-col-platform::before,
    .lang-en .records-view .rc-col-platform::before { content: "Platform: "; }
    html[lang="en"] .records-view .rc-col-count::before,
    .lang-en .records-view .rc-col-count::before { content: "Assets: "; }
    html[lang="en"] .records-view .rc-col-credits::before,
    .lang-en .records-view .rc-col-credits::before { content: "Credits: "; }
    /* ===== /作品记录与下载中心重设计 ===== */

    /* ============================================================
       T60 · 落地页复刻「跨境详情页工作台」暗色高级 SaaS 重设计
       目标:与功能中心 hub / #imageStudioView 同一暗色 + 奶油/金色设计语言。
       做法:append-only,只重映射 #replicateView 作用域内的设计 token + 视觉层覆盖。
       铁律:不改任何向导业务逻辑/计费闸,不删 hook;3 步 guidance 是真实状态机,
       仅重塑成水平 stepper;额度 pill #replicateQuotaText 仍由 state.quota.remaining 驱动。
       ============================================================ */

    /* 1) 作用域 token 暗色重映射(覆盖 T40 的浅色 token,因后于 T40)。 */
    #replicateView.replicate-view {
      --replicate-fg: #f6f4ee;
      --replicate-surface: rgba(12, 14, 12, .82);
      --replicate-panel: linear-gradient(180deg, rgba(27, 33, 29, .72) 0%, rgba(14, 15, 16, .72) 100%);
      --replicate-panel-soft: rgba(255, 255, 255, .045);
      --replicate-line: rgba(226, 207, 160, .16);
      --replicate-line-strong: rgba(226, 207, 160, .34);
      --replicate-muted: rgba(246, 244, 238, .62);
      --replicate-shadow: 0 22px 56px rgba(0, 0, 0, .4);
      /* 重映射被 T40 规则大量引用的基础 token,让暗化级联到整个工作台 */
      --ink: #f6f4ee;
      --ink-soft: rgba(246, 244, 238, .82);
      --muted: rgba(246, 244, 238, .58);
      --panel: rgba(255, 255, 255, .045);
      --ivory: rgba(14, 15, 16, .7);
      --ivory-warm: rgba(20, 24, 21, .6);
      --line: rgba(226, 207, 160, .16);
      color: var(--ink);
      background:
        linear-gradient(180deg, rgba(9, 11, 10, .88) 0%, rgba(9, 11, 10, .82) 42%, rgba(9, 11, 10, .94) 100%),
        url('media/hub-bg-20260622.jpg') center top / cover no-repeat fixed,
        #0a0b0a;
    }

    #replicateView .saas-shell,
    #replicateView .saas-main {
      background: transparent;
    }

    /* 2) 顶部工作台条:把 hero 头部行做成商业 SaaS 顶栏(返回 + 真实额度 + 提示胶囊)。 */
    #replicateView .replicate-hero {
      border: 1px solid rgba(226, 207, 160, .22);
      background:
        radial-gradient(circle at 80% 14%, rgba(201, 168, 106, .16), transparent 30%),
        linear-gradient(120deg, rgba(9, 11, 10, .93) 0%, rgba(9, 11, 10, .74) 46%, rgba(9, 11, 10, .5) 100%),
        url('media/workbench-banner-20260622.jpg') center / cover no-repeat,
        var(--obsidian);
      box-shadow: 0 22px 52px rgba(0, 0, 0, .44);
    }

    #replicateView .replicate-hero h1 { color: var(--replicate-fg); }
    #replicateView .replicate-hero p { color: rgba(246, 244, 238, .74); }

    #replicateView .hero-kicker,
    #replicateView .hub-mini-pill {
      border-color: rgba(226, 207, 160, .42);
      background: rgba(9, 11, 10, .55);
      color: var(--gold-soft);
    }

    /* 真实额度胶囊:金色描边强调,这是「可生成图片 N 张 / 账号额度」的真实换算来源 */
    #replicateView #replicateQuotaText.hub-mini-pill {
      border-color: rgba(226, 207, 160, .6);
      background: linear-gradient(135deg, rgba(201, 168, 106, .26), rgba(9, 11, 10, .55));
      color: var(--gold-soft);
      font-weight: 950;
    }

    #replicateView .back-to-hub-btn {
      border-color: rgba(226, 207, 160, .34);
      background: rgba(9, 11, 10, .5);
      color: var(--gold-soft);
    }
    #replicateView .back-to-hub-btn:hover {
      border-color: var(--gold-line);
      background: rgba(201, 168, 106, .2);
      color: var(--replicate-fg);
    }

    #replicateView .workflow-step {
      border-color: rgba(226, 207, 160, .2);
      background: rgba(255, 255, 255, .05);
      color: rgba(246, 244, 238, .82);
    }
    #replicateView .workflow-step em {
      background: linear-gradient(135deg, var(--gold), var(--gold-strong, #b8965a));
      color: var(--ink, #11130f);
    }
    #replicateView .workflow-step strong { color: var(--replicate-fg); }
    #replicateView .workflow-step small { color: rgba(246, 244, 238, .66); }

    /* 3) 主面板暗化:复刻输入大卡 + 输出卡 + 各小节。 */
    #replicateView .replicate-panel,
    #replicateView .replicate-output-panel,
    #replicateView .replicate-console-output {
      border-color: var(--replicate-line);
      background: var(--replicate-panel);
      box-shadow: var(--replicate-shadow);
    }

    #replicateView .replicate-panel-head h2,
    #replicateView .replicate-output-head h2,
    #replicateView .replicate-subsection-head h3,
    #replicateView .replicate-link-copy strong,
    #replicateView .replicate-upload-card strong,
    #replicateView .replicate-workflow-toggle strong,
    #replicateView .replicate-scope-summary strong,
    #replicateView .field .label,
    #replicateView .replicate-output-head h2,
    #replicateView #replicateOutputTitle {
      color: var(--replicate-fg);
    }

    #replicateView .replicate-panel-head p,
    #replicateView .replicate-output-head p,
    #replicateView .replicate-subsection-head p,
    #replicateView .replicate-link-copy small,
    #replicateView .replicate-link-status,
    #replicateView .studio-field-hint,
    #replicateView .replicate-upload-card small,
    #replicateView #replicateOutputHint,
    #replicateView #replicateExtractStatus,
    #replicateView #replicateAssetScopeHint,
    #replicateView #replicateProductUploadHint {
      color: var(--replicate-muted);
    }

    #replicateView .replicate-subsection,
    #replicateView .replicate-link-box,
    #replicateView .replicate-asset-workbench,
    #replicateView .replicate-canvas-settings,
    #replicateView .replicate-asset-group {
      border-color: var(--replicate-line);
      background: var(--replicate-panel-soft);
    }

    /* 4) 范围/方式 toggle:暗玻璃 + 选中金色填充。 */
    #replicateView .replicate-type-toggle span,
    #replicateView .replicate-workflow-toggle span,
    #replicateView .replicate-group-tabs button {
      border-color: var(--replicate-line);
      background: rgba(255, 255, 255, .04);
      color: rgba(246, 244, 238, .82);
    }
    #replicateView .replicate-type-toggle input:checked + span,
    #replicateView .replicate-workflow-toggle input:checked + span,
    #replicateView .replicate-group-tabs button.is-active {
      border-color: var(--gold-line);
      background: linear-gradient(135deg, rgba(201, 168, 106, .28), rgba(201, 168, 106, .12));
      color: var(--replicate-fg);
      box-shadow: inset 0 0 0 1px rgba(226, 207, 160, .32);
    }
    #replicateView .replicate-type-toggle span i,
    #replicateView .replicate-workflow-toggle span > i { color: var(--gold-soft); }
    #replicateView .replicate-workflow-toggle em {
      border-color: rgba(226, 207, 160, .3);
      background: rgba(201, 168, 106, .16);
      color: var(--gold-soft);
    }
    #replicateView .replicate-workflow-toggle strong { color: var(--replicate-fg); }
    #replicateView .replicate-workflow-toggle small,
    #replicateView .replicate-workflow-fit { color: var(--replicate-muted); }

    /* 范围摘要卡(#replicateScopeSummary span)硬编码白底 → 暗化 */
    #replicateView .replicate-scope-summary span {
      border-color: var(--replicate-line);
      background: rgba(255, 255, 255, .04);
      color: var(--replicate-muted);
    }
    #replicateView .replicate-scope-summary span:hover {
      border-color: rgba(226, 207, 160, .3);
      background: rgba(201, 168, 106, .1);
    }
    #replicateView .replicate-scope-summary strong { color: var(--replicate-fg); }

    /* 5) 输入控件 + 上传卡:暗底。 */
    #replicateView .control,
    #replicateView .replicate-link-row .control,
    #replicateView .replicate-canvas-settings .control,
    #replicateView .replicate-asset-controls select,
    #replicateView textarea.control,
    #replicateView select.control {
      border-color: var(--replicate-line);
      background: rgba(9, 11, 10, .42);
      color: var(--replicate-fg);
    }
    #replicateView .control::placeholder { color: rgba(246, 244, 238, .4); }
    #replicateView select.control option { background: #14181a; color: var(--replicate-fg); }

    #replicateView .replicate-upload-card {
      border-color: var(--replicate-line);
      background: rgba(255, 255, 255, .04);
    }
    #replicateView .replicate-upload-card::before {
      border-color: rgba(226, 207, 160, .26);
    }
    #replicateView .replicate-upload-card:hover,
    #replicateView .replicate-upload-card:focus-within {
      border-color: var(--gold-line);
      background: rgba(201, 168, 106, .12);
    }
    #replicateView .replicate-upload-card strong span {
      border-color: rgba(226, 207, 160, .3);
      background: rgba(201, 168, 106, .16);
      color: var(--gold-soft);
    }

    /* 素材卡 / 预览卡 / 结果卡暗化 */
    #replicateView .replicate-preview-card,
    #replicateView .replicate-asset-card,
    #replicateView .replicate-generated-card,
    #replicateView .replicate-screen-card,
    #replicateView .replicate-prompt-box,
    #replicateView .replicate-plan-details {
      border-color: var(--replicate-line);
      background: rgba(255, 255, 255, .04);
    }

    /* 6) 操作区 + 结果区 + 空态。 */
    #replicateView .replicate-actions,
    #replicateView .replicate-console-output .replicate-output-actions {
      border-color: var(--replicate-line);
      background: var(--replicate-panel-soft);
    }
    #replicateView .replicate-console-output {
      background: var(--replicate-panel);
    }
    #replicateView .replicate-console-output .replicate-empty,
    #replicateView .replicate-empty {
      border-color: var(--replicate-line);
      background: rgba(9, 11, 10, .4);
      color: var(--replicate-muted);
    }

    #replicateView #replicateGenerateBtn,
    #replicateView .replicate-output-actions .btn-primary {
      background: linear-gradient(135deg, var(--gold), var(--gold-strong, #b8965a));
      color: #11130f;
      box-shadow: 0 12px 28px rgba(201, 168, 106, .28);
    }
    #replicateView .btn-outline {
      border-color: rgba(226, 207, 160, .3);
      background: rgba(255, 255, 255, .04);
      color: var(--gold-soft);
    }
    #replicateView .btn-outline:hover {
      border-color: var(--gold-line);
      background: rgba(201, 168, 106, .16);
      color: var(--replicate-fg);
    }

    /* 政策确认框在暗底保持警示色但可读 */
    #replicateView .replicate-policy-box {
      border-color: rgba(226, 207, 160, .34);
      background: rgba(201, 168, 106, .1);
      color: rgba(246, 244, 238, .86);
    }

    /* 高级设置折叠区 summary 暗化 */
    #replicateView .replicate-advanced {
      border-color: var(--replicate-line);
      background: var(--replicate-panel-soft);
    }
    #replicateView .replicate-advanced summary { color: var(--replicate-fg); }
    #replicateView .replicate-advanced-summary small,
    #replicateView .replicate-advanced summary small { color: var(--replicate-muted); }

    /* 7) 左侧模特库栏:暗化已大体在 T40,这里补前景文字可读性。 */
    #replicateView #replicateInlineModelPanel {
      background: linear-gradient(180deg, rgba(20, 24, 21, .82), rgba(10, 11, 10, .88));
      border-color: var(--replicate-line);
      box-shadow: var(--replicate-shadow);
    }
    #replicateView #replicateInlineModelPanel .replicate-subsection-head h3,
    #replicateView #replicateInlineModelPanel .replicate-model-catalog-head strong,
    #replicateView #replicateInlineModelPanel .replicate-sidebar-model-selected strong,
    #replicateView #replicateInlineModelPanel .replicate-model-card strong,
    #replicateView .replicate-custom-model-panel summary strong {
      color: var(--replicate-fg);
    }

    /* 8) 真实 3 步 guidance → 水平连接 stepper(高级 SaaS 进度条)。
          状态 done/active/pending 仍由 renderReplicateGuidance 真实状态机输出,
          这里只重塑外观,不造假步骤数。 */
    #replicateView .replicate-guidance-strip {
      margin: 0 0 14px;
      border-color: var(--replicate-line);
      background: linear-gradient(135deg, rgba(27, 33, 29, .6), rgba(14, 15, 16, .6));
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
    }
    #replicateView .replicate-guidance-steps {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0;
      align-items: stretch;
    }
    #replicateView .replicate-guidance-step {
      position: relative;
      grid-template-columns: 34px minmax(0, 1fr);
      gap: 10px;
      min-height: 60px;
      border: 1px solid transparent;
      border-radius: var(--radius);
      background: transparent;
      box-shadow: none;
      padding: 8px 14px;
      transform: none;
    }
    /* stepper 连接线:除最后一步外,右侧画一条连接线 */
    #replicateView .replicate-guidance-step:not(:last-child)::after {
      content: "";
      position: absolute;
      top: 26px;
      right: -1px;
      left: auto;
      bottom: auto;
      width: 100%;
      height: 2px;
      border-radius: 0;
      background: rgba(226, 207, 160, .16);
      transform: translateX(50%);
      z-index: 0;
    }
    #replicateView .replicate-guidance-step.is-done:not(:last-child)::after {
      background: linear-gradient(90deg, var(--gold), rgba(201, 168, 106, .3));
    }
    /* 序号圆点(用 index 块做节点)在线之上 */
    #replicateView .replicate-guidance-index {
      position: relative;
      z-index: 1;
      width: 34px;
      height: 34px;
      border-radius: 999px;
      border: 1px solid var(--replicate-line);
      background: rgba(9, 11, 10, .7);
      color: rgba(246, 244, 238, .55);
    }
    /* 图标块隐藏(stepper 用序号圆点即可,避免双图标拥挤) */
    #replicateView .replicate-guidance-icon { display: none; }
    #replicateView .replicate-guidance-copy strong { color: rgba(246, 244, 238, .72); font-size: 13px; }
    #replicateView .replicate-guidance-copy small { color: var(--replicate-muted); }

    /* 覆盖 T40 浅色 .is-active/.is-done 背景(否则白字落在奶油块上不可读);
       active 用极浅金色玻璃、done 用极浅绿玻璃,保持暗底。 */
    #replicateView .replicate-guidance-step.is-active {
      border-color: rgba(226, 207, 160, .28);
      background: rgba(201, 168, 106, .08);
      box-shadow: none;
      transform: none;
    }
    #replicateView .replicate-guidance-step.is-done {
      border-color: rgba(226, 207, 160, .18);
      background: rgba(255, 255, 255, .03);
    }

    #replicateView .replicate-guidance-step.is-active .replicate-guidance-index {
      border-color: var(--gold-line);
      background: linear-gradient(135deg, var(--gold), var(--gold-strong, #b8965a));
      color: #11130f;
      box-shadow: 0 0 0 4px rgba(201, 168, 106, .16);
    }
    #replicateView .replicate-guidance-step.is-active .replicate-guidance-copy strong { color: var(--replicate-fg); }
    #replicateView .replicate-guidance-step.is-done .replicate-guidance-index {
      border-color: rgba(201, 168, 106, .5);
      background: rgba(201, 168, 106, .2);
      color: var(--gold-soft);
    }
    #replicateView .replicate-guidance-step.is-done .replicate-guidance-copy strong { color: rgba(246, 244, 238, .82); }
    #replicateView .replicate-guidance-step.is-pending { opacity: .58; }

    /* 9) mini-badge / 各种金色标签在暗底保持金色玻璃片观感(覆盖 T40 的奶油填充) */
    #replicateView .mini-badge,
    #replicateView #replicateModeBadge,
    #replicateView .replicate-model-catalog-chip,
    #replicateView .replicate-asset-badge,
    #replicateView .replicate-asset-select-state,
    #replicateView .replicate-generated-title span {
      border-color: rgba(226, 207, 160, .4);
      background: rgba(201, 168, 106, .16);
      color: var(--gold-soft);
    }

    /* 10) 响应式:窄屏 stepper 转竖排,连接线隐藏。390/430 验证。 */
    @media (max-width: 900px) {
      #replicateView .replicate-guidance-steps {
        grid-template-columns: 1fr;
        gap: 6px;
      }
      #replicateView .replicate-guidance-step {
        border: 1px solid var(--replicate-line);
        background: rgba(255, 255, 255, .03);
      }
      #replicateView .replicate-guidance-step:not(:last-child)::after { display: none; }
    }

    @media (max-width: 760px) {
      #replicateView .replicate-hero h1 { color: var(--replicate-fg); }
      #replicateView .replicate-guidance-step { min-height: 52px; padding: 8px 10px; }
    }

    /* ============================================================
       T60-C1 · 复刻范围三选项「一眼看清选中 + 推荐引导」(小白可读性)
       目标:容器改暗槽,未选项提亮,选中项金色实填+加粗金边+✓角标;
             默认「主图+详情页」加「推荐」徽标。纯视觉,不碰 replicateType 业务逻辑。
       ============================================================ */
    /* 容器:从浅奶油条改为暗色凹槽,让金色选中项跳出来 */
    #replicateView .replicate-type-toggle {
      border: 1px solid var(--replicate-line);
      background: rgba(9, 11, 10, .42);
      overflow: visible;
    }
    /* 未选项:玻璃质感、可读,但克制 */
    #replicateView .replicate-type-toggle span {
      position: relative;
      border-color: rgba(226, 207, 160, .22);
      background: rgba(255, 255, 255, .05);
      color: rgba(246, 244, 238, .82);
      font-weight: 800;
    }
    #replicateView .replicate-type-toggle label:hover span {
      border-color: rgba(226, 207, 160, .42);
      background: rgba(255, 255, 255, .09);
    }
    /* 选中项:近实心金填充 + 加粗金边 + 外发光,一眼可辨 */
    #replicateView .replicate-type-toggle input:checked + span {
      border-color: var(--gold-line);
      background: linear-gradient(135deg, rgba(212, 176, 114, .96), rgba(201, 168, 106, .84));
      color: #1a150b;
      font-weight: 900;
      box-shadow:
        inset 0 0 0 1px rgba(255, 246, 224, .55),
        0 8px 22px rgba(201, 168, 106, .30);
    }
    #replicateView .replicate-type-toggle input:checked + span i {
      color: #2a2008;
    }
    /* 选中项左上角 ✓ 角标 */
    #replicateView .replicate-type-toggle input:checked + span::after {
      content: "✓";
      position: absolute;
      top: -8px;
      left: -8px;
      width: 20px;
      height: 20px;
      display: grid;
      place-items: center;
      border-radius: 999px;
      background: var(--gold);
      color: #1a150b;
      font-size: 12px;
      font-weight: 900;
      line-height: 1;
      box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
    }
    /* 默认「主图+详情页」右上角「推荐」徽标 */
    #replicateView .replicate-type-reco {
      position: absolute;
      top: -9px;
      right: -7px;
      padding: 2px 7px;
      border-radius: 999px;
      background: var(--gold);
      color: #1a150b;
      font-size: 10px;
      font-weight: 900;
      letter-spacing: .04em;
      line-height: 1.4;
      box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
      pointer-events: none;
    }

    /* ============================================================
       T60-C2 · 左侧「模特与语言」面板对比增强(小白可读性)
       目标:修暗底上近黑不可读的说明文字 → 提亮为可读 muted;
             给「自定义模特/筛选模特」抽屉头加卡片底色+边框,各区块分得开;
             「完整模特库」chip 文字提亮。纯视觉,不碰模特库渲染/选择逻辑。
       ============================================================ */
    /* a) 暗底上近黑的说明文字 → 提亮为可读 */
    #replicateView #replicateInlineModelPanel > .replicate-subsection-head p,
    #replicateView #replicateInlineModelPanel .replicate-model-catalog-head span,
    #replicateView #replicateInlineModelPanel .replicate-model-card {
      color: var(--replicate-muted);
    }
    /* b) 「自定义模特 / 筛选模特」抽屉头做成可分辨卡片 */
    #replicateView #replicateInlineModelPanel .replicate-custom-model-panel > summary,
    #replicateView #replicateInlineModelPanel .replicate-model-filter-drawer > summary {
      border: 1px solid rgba(226, 207, 160, .2);
      border-radius: var(--radius);
      background: rgba(255, 255, 255, .05);
    }
    #replicateView #replicateInlineModelPanel .replicate-custom-model-panel > summary:hover,
    #replicateView #replicateInlineModelPanel .replicate-model-filter-drawer > summary:hover {
      border-color: rgba(226, 207, 160, .38);
      background: rgba(255, 255, 255, .08);
    }
    /* c) 「完整模特库」chip 文字提亮 */
    #replicateView #replicateInlineModelPanel .replicate-model-catalog-chip {
      color: var(--gold-soft);
    }
    /* d) 修复:摘要卡片/令牌卡/生成头/输出说明 在暗色主题下
          沿用浅绿底(--deep-green-soft #e8f0ec)+strong 取 --ink(暗色域被重映成近白 #f6f4ee)
          → 近白字压在浅绿底上几乎不可见。改成暗色玻璃底 + 亮字,与 workbench 卡片同语言。 */
    #replicateView .replicate-generated-head,
    #replicateView .replicate-summary-chip,
    #replicateView .replicate-token-card,
    #replicateView .replicate-output-note,
    #replicateView .replicate-validation.is-valid {
      border-color: rgba(226, 207, 160, .22);
      background: rgba(255, 255, 255, .05);
      color: rgba(246, 244, 238, .82);
    }
    #replicateView .replicate-generated-head strong,
    #replicateView .replicate-summary-chip strong,
    #replicateView .replicate-token-card strong {
      color: var(--gold-soft);
    }

    /* e) 修复:选中模特卡——库内预设模特只有浅色占位 SVG,暗色域里显成浅色空盒子。
          无真实照片时改用金色图标头像(JS 给 .is-avatar),不再渲染占位图/「暂无可用图片」。 */
    #replicateView .model-library-selected-thumb.is-avatar {
      display: grid;
      place-items: center;
      background:
        radial-gradient(circle at 50% 30%, rgba(226, 207, 160, .22), transparent 60%),
        rgba(255, 255, 255, .05);
      border-color: rgba(226, 207, 160, .3);
      color: var(--gold-soft);
    }
    #replicateView .model-library-selected-thumb.is-avatar::before { content: none; }
    #replicateView .model-library-selected-thumb.is-avatar svg { width: 22px; height: 22px; }

    /* f) 修复:模特库底部计数文案——暗色域 footer 底被改成深绿半透,
          但 chip 文字仍是 var(--deep-green) 深绿 → 深压深不可读。改亮字+金图标。 */
    #replicateView #replicateInlineModelPanel .replicate-model-footer,
    #replicateView #replicateInlineModelPanel .replicate-model-footer > span,
    #replicateView #replicateInlineModelPanel .replicate-model-count-chip,
    #replicateView #replicateInlineModelPanel .replicate-model-count-chip span {
      color: rgba(246, 244, 238, .82);
    }
    #replicateView #replicateInlineModelPanel .replicate-model-count-chip i {
      color: var(--gold-soft);
    }

    /* g) 中文位置预处理:从折叠「高级设置」里埋着的小勾选框,提为始终可见的醒目开关卡。 */
    #replicateView .replicate-textzone-toggle {
      grid-column: 1 / -1;
      display: flex;
      align-items: center;
      gap: 14px;
      margin: 0;
      padding: 13px 15px;
      border-radius: var(--radius);
      border: 1px solid rgba(226, 207, 160, .32);
      background:
        linear-gradient(135deg, rgba(226, 207, 160, .12), rgba(226, 207, 160, .04)),
        rgba(255, 255, 255, .04);
      cursor: pointer;
      transition: border-color .18s ease, background .18s ease;
    }
    #replicateView .replicate-textzone-toggle:hover {
      border-color: rgba(226, 207, 160, .5);
    }
    #replicateView .replicate-textzone-toggle-body {
      display: grid;
      gap: 5px;
      min-width: 0;
      flex: 1 1 auto;
    }
    #replicateView .replicate-textzone-toggle-title {
      display: flex;
      align-items: center;
      gap: 7px;
      flex-wrap: wrap;
      color: var(--gold-soft);
      font-size: 13.5px;
      font-weight: 900;
      line-height: 1.2;
    }
    #replicateView .replicate-textzone-toggle-title i { flex: 0 0 auto; }
    #replicateView .replicate-textzone-toggle-badge {
      font-style: normal;
      font-size: 10.5px;
      font-weight: 900;
      letter-spacing: .02em;
      padding: 2px 8px;
      border-radius: 999px;
      color: #0c1a16;
      background: linear-gradient(135deg, var(--gold-soft), #d9bf86);
    }
    #replicateView .replicate-textzone-toggle-desc {
      color: rgba(246, 244, 238, .72);
      font-size: 11.5px;
      font-weight: 640;
      line-height: 1.5;
    }
    #replicateView .replicate-textzone-switch {
      position: relative;
      flex: 0 0 auto;
      width: 50px;
      height: 28px;
    }
    #replicateView .replicate-textzone-switch input {
      position: absolute;
      inset: 0;
      margin: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      cursor: pointer;
      z-index: 2;
    }
    #replicateView .replicate-textzone-switch-track {
      position: absolute;
      inset: 0;
      border-radius: 999px;
      background: rgba(255, 255, 255, .12);
      border: 1px solid rgba(226, 207, 160, .28);
      transition: background .18s ease, border-color .18s ease;
    }
    #replicateView .replicate-textzone-switch-thumb {
      position: absolute;
      top: 50%;
      left: 4px;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: rgba(246, 244, 238, .92);
      transform: translateY(-50%);
      transition: left .18s ease, background .18s ease;
    }
    #replicateView .replicate-textzone-switch input:checked ~ .replicate-textzone-switch-track {
      background: linear-gradient(135deg, var(--gold-soft), #d9bf86);
      border-color: var(--gold-soft);
    }
    #replicateView .replicate-textzone-switch input:checked ~ .replicate-textzone-switch-track .replicate-textzone-switch-thumb {
      left: 26px;
      background: #0c1a16;
    }
    #replicateView .replicate-textzone-switch input:focus-visible ~ .replicate-textzone-switch-track {
      outline: 2px solid var(--gold-soft);
      outline-offset: 2px;
    }
    /* ===== /T60 落地页复刻暗色工作台重设计 ===== */

    /* ============================================================
       T61 · 跨境详情页工作台 (#workbench / body.workbench-mode) 暗色高级 SaaS 重塑
       目标:把旧 T30「奶油浅色 workbench 皮肤」翻成与 功能中心 hub / #imageStudioView
            同一套「大理石暗底 + 奶油/金色点缀」设计语言。
       做法:append-only,后置于 T30 整段(同/更高特异性后写覆盖)。
            手法同 #imageStudioView:在 body.workbench-mode 作用域内「重映射 --workbench-* +
            基础 --panel/--ink/--ivory-warm/--line 调色变量为暗色」,让 T30 既有规则级联翻暗,
            再补少量大理石背景 / 英雄区 / stepper / chip 显式规则。
       铁律:DOM 与全部 id/class/data-* hook 一个不动;不碰任何向导业务逻辑/2 道生成计费 confirm 闸/
            requestImage/额度扣减/identity-lock;额度 pill #workbenchQuotaText 仍由 state.quota 驱动;
            必拍清单 angle-chip 沿用既有真实「缺角」状态类(is-missing/is-covered)只改配色。
       ============================================================ */

    /* 1) 作用域 token 暗色重映射(覆盖 T30 浅色 token,因后于 T30 且同特异性)。 */
    body.workbench-mode {
      --ink: #f6f4ee;
      --ink-soft: rgba(246, 244, 238, .82);
      --muted: rgba(246, 244, 238, .6);
      --panel: rgba(255, 255, 255, .045);
      --ivory: rgba(14, 15, 16, .7);
      --ivory-warm: rgba(20, 24, 21, .62);
      --line: rgba(226, 207, 160, .16);
      /* workbench 专用面板/描边 token 一并翻暗 */
      --workbench-surface: rgba(12, 14, 12, .82);
      --workbench-panel: linear-gradient(180deg, rgba(27, 33, 29, .74) 0%, rgba(14, 15, 16, .72) 100%);
      --workbench-panel-soft: rgba(255, 255, 255, .045);
      --workbench-line: rgba(226, 207, 160, .16);
      --workbench-line-strong: rgba(226, 207, 160, .34);
      --workbench-shadow: 0 22px 56px rgba(0, 0, 0, .4);
      /* 暗底专用前景色(不能用被重映射成暗色的 --ivory-warm 当文字色) */
      --wb-fg: #f6f4ee;
      --wb-fg-soft: rgba(246, 244, 238, .78);
      --wb-fg-muted: rgba(246, 244, 238, .56);
    }

    /* 1b) 方案 A(C7):主内容区子树翻回浅色/米白(仅 #appShell > .main 内生效)。
           侧边栏(.sidebar 兄弟节点)不在此作用域,保留①段全局暗 token 维持暗色左导航。
           几百条 color:var(--wb-fg)/var(--ink) 会自动跟随翻成深色文字,无需逐条改。 */
    body.workbench-mode #appShell > .main {
      --ink: #211f1b;
      --ink-soft: rgba(33, 31, 27, .8);
      --muted: rgba(33, 31, 27, .56);
      --panel: #ffffff;
      --ivory: #fbfaf6;
      --ivory-warm: #f4f1ea;
      --line: rgba(33, 31, 27, .12);
      --workbench-surface: #ffffff;
      --workbench-panel: linear-gradient(180deg, #ffffff 0%, #fbfaf6 100%);
      --workbench-panel-soft: #f4f1ea;
      --workbench-line: rgba(33, 31, 27, .12);
      --workbench-line-strong: rgba(201, 168, 106, .5);
      --workbench-shadow: 0 18px 44px rgba(33, 31, 27, .1);
      --wb-fg: #211f1b;
      --wb-fg-soft: rgba(33, 31, 27, .74);
      --wb-fg-muted: rgba(33, 31, 27, .52);
    }

    /* 2) 整页大理石暗背景:仅 body/#appShell 兜底(衬暗色侧边栏);主区单独翻浅。 */
    body.workbench-mode,
    body.workbench-mode #appShell {
      background:
        linear-gradient(180deg, rgba(9, 11, 10, .9) 0%, rgba(9, 11, 10, .82) 42%, rgba(9, 11, 10, .96) 100%),
        url('media/hub-bg-20260622.jpg') center top / cover no-repeat fixed,
        #0a0b0a;
      color: var(--ink);
    }
    /* 2b) 方案 A(C7):主内容区奶油浅底(对齐截图2 浅色主区)。 */
    body.workbench-mode #appShell > .main {
      background: linear-gradient(180deg, var(--ivory-warm) 0%, var(--ivory) 100%);
      color: var(--ink);
    }

    /* 3) 顶栏工具条:奶油浅卡片 + 金描边(方案 A·C7 翻浅,原 C5 是深玻璃)。 */
    body.workbench-mode .workbench-toolbar {
      border: 1px solid rgba(33, 31, 27, .1);
      border-radius: var(--radius);
      background:
        linear-gradient(120deg, #ffffff 0%, #f7f4ee 100%);
      box-shadow: 0 14px 34px rgba(33, 31, 27, .08);
      backdrop-filter: none;
    }

    /* 工具条里的描边按钮:浅底奶油卡片 */
    body.workbench-mode .workbench-toolbar .btn-outline,
    body.workbench-mode .workbench-reset-btn,
    body.workbench-mode .workbench-toolbar .back-to-hub-btn {
      border-color: rgba(33, 31, 27, .16);
      background: #ffffff;
      color: var(--wb-fg-soft);
      box-shadow: none;
    }
    body.workbench-mode .workbench-toolbar .btn-outline:hover,
    body.workbench-mode .workbench-reset-btn:hover,
    body.workbench-mode .workbench-toolbar .back-to-hub-btn:hover {
      border-color: rgba(201, 168, 106, .55);
      background: rgba(201, 168, 106, .14);
      color: var(--gold-strong);
    }

    /* 「先展开AI套图 / 生成图片套组」主按钮 沿用金色高亮,补暗底阴影 */
    body.workbench-mode .workbench-toolbar .btn-primary,
    body.workbench-mode #generateBtn {
      border-color: var(--gold-strong);
      background: linear-gradient(135deg, var(--gold), var(--gold-strong));
      color: var(--ink);
      box-shadow: 0 14px 28px rgba(201, 168, 106, .26);
    }

    /* 额度 pill / 平台 pill:金描边玻璃片(真实额度文案不动,仅外观) */
    body.workbench-mode .workbench-toolbar .hub-mini-pill,
    body.workbench-mode .workbench-quota-pill,
    body.workbench-mode .workbench-current-pill {
      border-color: rgba(226, 207, 160, .42);
      background: rgba(9, 11, 10, .55);
      color: var(--gold-soft);
    }
    body.workbench-mode .workbench-quota-pill.is-low {
      border-color: var(--attention-line);
      background: color-mix(in srgb, var(--attention-soft) 30%, rgba(9, 11, 10, .55));
      color: var(--attention);
    }

    /* 4) 引导壳/主区面板/8 步面板:暗玻璃卡片(原 T30 是奶油白底)。 */
    body.workbench-mode .guided-workbench-panel,
    body.workbench-mode .main-flow-stage > .flow-step-card,
    body.workbench-mode .main-flow-stage > .panel,
    body.workbench-mode #platformStepPanel,
    body.workbench-mode #slotPlanStepPanel,
    body.workbench-mode #settingsStepPanel,
    body.workbench-mode #resultsStepPanel,
    body.workbench-mode #workbenchWizardHostPanel,
    body.workbench-mode .settings-panel {
      border: 1px solid rgba(226, 207, 160, .16);
      border-radius: var(--radius);
      background:
        linear-gradient(180deg, rgba(27, 33, 29, .74) 0%, rgba(14, 15, 16, .72) 100%);
      color: var(--wb-fg);
      box-shadow: var(--workbench-shadow);
      backdrop-filter: blur(8px);
    }

    /* 引导壳标题:大字奶油色 */
    body.workbench-mode .guided-panel-head h1 {
      color: var(--wb-fg);
    }
    body.workbench-mode .hero-kicker {
      border-color: rgba(226, 207, 160, .42);
      background: rgba(9, 11, 10, .55);
      color: var(--gold-soft);
    }
    body.workbench-mode .guided-panel-mark {
      border: 1px solid rgba(226, 207, 160, .3);
      background: rgba(201, 168, 106, .16);
      color: var(--gold-soft);
    }
    body.workbench-mode .guided-reset-btn {
      border-color: rgba(226, 207, 160, .24);
      background: rgba(255, 255, 255, .05);
      color: var(--wb-fg-soft);
    }
    body.workbench-mode .guided-reset-btn:hover {
      border-color: rgba(226, 207, 160, .44);
      background: rgba(201, 168, 106, .14);
      color: var(--gold-soft);
    }

    /* 5) 8 步水平 stepper:暗节点 + 金色 active/done。 */
    body.workbench-mode .workbench-stepper-item {
      border: 1px solid rgba(226, 207, 160, .14);
      border-radius: var(--radius);
      background: rgba(255, 255, 255, .04);
      color: var(--wb-fg-muted);
      box-shadow: none;
    }
    body.workbench-mode .workbench-stepper-item.active {
      border-color: rgba(226, 207, 160, .5);
      background:
        linear-gradient(180deg, rgba(201, 168, 106, .2), rgba(255, 255, 255, .04));
      color: var(--wb-fg);
      box-shadow: inset 0 -3px 0 var(--gold);
    }
    body.workbench-mode .workbench-stepper-item.done {
      border-color: rgba(31, 58, 51, .6);
      background:
        linear-gradient(180deg, rgba(31, 58, 51, .42), rgba(255, 255, 255, .04));
      color: var(--wb-fg-soft);
    }
    body.workbench-mode .workbench-stepper-item.locked {
      opacity: .55;
    }
    /* 步骤序号徽标:未到=深绿、进行中/已完成=金 */
    body.workbench-mode .workbench-stepper-index,
    body.workbench-mode .flow-step-badge,
    body.workbench-mode .prep-chip-index {
      background: rgba(31, 58, 51, .85);
      color: var(--wb-fg);
      box-shadow: 0 0 0 3px rgba(31, 58, 51, .3);
    }
    body.workbench-mode .workbench-stepper-item.active .workbench-stepper-index,
    body.workbench-mode .workbench-stepper-item.done .workbench-stepper-index,
    body.workbench-mode .flow-step-card.is-active .flow-step-badge,
    body.workbench-mode .flow-step-card.is-complete .flow-step-badge,
    body.workbench-mode .prep-flow-chip.is-active .prep-chip-index,
    body.workbench-mode .prep-flow-chip.is-done .prep-chip-index {
      background: var(--gold);
      color: var(--ink);
      box-shadow: 0 0 0 3px rgba(201, 168, 106, .3);
    }
    body.workbench-mode .workbench-stepper-copy strong,
    body.workbench-mode .main-flow-stage .flow-step-title,
    body.workbench-mode .settings-header h2,
    body.workbench-mode .platform-shell-head h2,
    body.workbench-mode .slot-card-title {
      color: var(--wb-fg);
    }
    body.workbench-mode .workbench-stepper-copy small,
    body.workbench-mode .main-flow-stage .flow-step-why,
    body.workbench-mode .settings-header p,
    body.workbench-mode .platform-shell-head p,
    body.workbench-mode .slot-card-brief {
      color: var(--wb-fg-muted);
    }

    /* 6) 主区 flow-step 当前步:大理石玻璃 + 金左条强调。 */
    body.workbench-mode .main-flow-stage .flow-step-card::before {
      width: 3px;
      background: var(--gold);
    }
    body.workbench-mode .main-flow-stage .flow-step-card.is-active {
      border-color: rgba(226, 207, 160, .4);
      background:
        linear-gradient(145deg, rgba(31, 37, 32, .8), rgba(14, 15, 16, .76));
      box-shadow: 0 18px 42px rgba(0, 0, 0, .42);
    }

    /* 步骤内引导行/页脚/小结:暗玻璃软底 */
    body.workbench-mode .main-flow-stage .prep-stage-footer,
    body.workbench-mode .main-flow-stage .prep-stage-summary,
    body.workbench-mode .confirm-box,
    body.workbench-mode .guided-summary-panel,
    body.workbench-mode .language-policy-note,
    body.workbench-mode .settings-alert-panel,
    body.workbench-mode .size-summary,
    body.workbench-mode .platform-shell,
    body.workbench-mode .platform-current-card,
    body.workbench-mode .amazon-package-panel,
    body.workbench-mode .model-reference-panel {
      border-color: rgba(226, 207, 160, .14);
      background: rgba(255, 255, 255, .04);
      color: var(--wb-fg-soft);
      box-shadow: none;
    }
    /* 「需要…」提示条 + 语言策略提示:金左条 + 金底玻璃 */
    body.workbench-mode .main-flow-stage .flow-step-need,
    body.workbench-mode .language-policy-note {
      border-left-color: var(--gold);
      background: rgba(201, 168, 106, .12);
      color: var(--wb-fg-soft);
    }
    body.workbench-mode .prep-stage-footer small,
    body.workbench-mode .flow-step-need {
      color: var(--wb-fg-soft);
    }

    /* 7) 表单控件:暗输入框。 */
    body.workbench-mode .control,
    body.workbench-mode input.control,
    body.workbench-mode textarea.control,
    body.workbench-mode select.control {
      border-color: rgba(226, 207, 160, .18);
      background: rgba(9, 11, 10, .5);
      color: var(--wb-fg);
    }
    body.workbench-mode .control:focus,
    body.workbench-mode input.control:focus,
    body.workbench-mode textarea.control:focus,
    body.workbench-mode select.control:focus {
      border-color: var(--gold);
      box-shadow: 0 0 0 3px rgba(201, 168, 106, .2);
    }
    /* select 下拉项强制深底,避免白上白 */
    body.workbench-mode select.control option {
      background: #14181a;
      color: var(--wb-fg);
    }
    body.workbench-mode .field label,
    body.workbench-mode .field > label {
      color: var(--wb-fg-soft);
    }

    /* 8) step2 上传区 + 必拍清单 chips。 */
    body.workbench-mode .upload-zone {
      border-color: rgba(226, 207, 160, .22);
      border-radius: var(--radius);
      background: rgba(255, 255, 255, .04);
      color: var(--wb-fg);
    }
    body.workbench-mode .upload-zone:hover,
    body.workbench-mode .upload-zone.dragover {
      border-color: rgba(226, 207, 160, .5);
      background: rgba(201, 168, 106, .12);
    }
    body.workbench-mode .upload-zone .text-stone-400,
    body.workbench-mode .upload-size-note {
      color: var(--wb-fg-muted);
    }
    body.workbench-mode .upload-size-pill {
      border-color: rgba(226, 207, 160, .3);
      background: rgba(9, 11, 10, .5);
      color: var(--gold-soft);
    }
    /* 必拍清单角度 chip:暗玻璃;真实「缺角(is-missing)/已覆盖(is-covered)」状态色保留语义 */
    body.workbench-mode .angle-chip,
    body.workbench-mode .chip,
    body.workbench-mode .coverage-pill,
    body.workbench-mode .twin-fact-chip {
      border-color: rgba(226, 207, 160, .16);
      border-radius: var(--radius-sm);
      background: rgba(255, 255, 255, .045);
      color: var(--wb-fg-soft);
    }
    body.workbench-mode .chip.active,
    body.workbench-mode .angle-chip.is-covered,
    body.workbench-mode .coverage-pill.is-covered {
      border-color: rgba(187, 210, 200, .4);
      background: rgba(31, 58, 51, .5);
      color: rgba(214, 233, 223, .95);
    }
    body.workbench-mode .angle-chip.is-missing,
    body.workbench-mode .coverage-pill.is-missing,
    body.workbench-mode .settings-alert-item.warn {
      border-color: var(--attention-line);
      background: color-mix(in srgb, var(--attention-soft) 24%, rgba(9, 11, 10, .5));
      color: var(--attention);
    }

    /* 9) 各类卡片(平台/槽位/结果/模特库/选择步骤)统一暗玻璃。 */
    body.workbench-mode .platform-nav-group,
    body.workbench-mode .platform-card-btn,
    body.workbench-mode .settings-section,
    body.workbench-mode .settings-alert-item,
    body.workbench-mode .slot-card,
    body.workbench-mode .result-card,
    body.workbench-mode .generation-progress-card,
    body.workbench-mode .model-reference-mode,
    body.workbench-mode .model-choice-step,
    body.workbench-mode .main-model-library,
    body.workbench-mode .main-model-selected,
    body.workbench-mode .replicate-model-card,
    body.workbench-mode .main-library-card {
      border-color: rgba(226, 207, 160, .14);
      border-radius: var(--radius);
      background: rgba(255, 255, 255, .04);
      color: var(--wb-fg);
      box-shadow: none;
    }
    body.workbench-mode .platform-card-btn:hover,
    body.workbench-mode .platform-card-btn.active,
    body.workbench-mode .slot-card:hover,
    body.workbench-mode .slot-card.selected,
    body.workbench-mode .settings-alert-item.is-active,
    body.workbench-mode .language-chip-grid .chip.active,
    body.workbench-mode .model-reference-mode:has(input:checked) {
      border-color: rgba(226, 207, 160, .42);
      background: rgba(201, 168, 106, .16);
      color: var(--wb-fg);
      box-shadow: inset 0 0 0 1px rgba(201, 168, 106, .2);
    }

    /* 10) 主区里散落的 Tailwind 浅色文字工具类在暗底回正。 */
    body.workbench-mode #appShell > .main .text-stone-900,
    body.workbench-mode #appShell > .main .text-stone-800,
    body.workbench-mode #appShell > .main .text-stone-700 {
      color: var(--wb-fg);
    }
    body.workbench-mode #appShell > .main .text-stone-600,
    body.workbench-mode #appShell > .main .text-stone-500,
    body.workbench-mode #appShell > .main .text-stone-400 {
      color: var(--wb-fg-muted);
    }

    /* 11) 识别遮罩卡片在暗底贴合(不改业务,仅外观)。 */
    body.workbench-mode .recognition-card,
    body.workbench-mode .twin-status-body,
    body.workbench-mode .twin-locked,
    body.workbench-mode .twin-views-panel {
      border-color: rgba(226, 207, 160, .14);
      background: rgba(255, 255, 255, .04);
      color: var(--wb-fg-soft);
    }
    /* 12) 必拍清单 chip 的 #flowStep2Panel/#twinStatusPanel 高特异性变体覆盖
           (T31 那批规则用 --gold-soft/--deep-green-soft 浅色,在新暗底要压暗;
            保留 required(金)/covered(绿)/missing(警示) 的语义色,仅换暗底配比)。 */
    body.workbench-mode #flowStep2Panel .angle-chip,
    body.workbench-mode #twinStatusPanel .angle-chip,
    body.workbench-mode #twinStatusPanel .coverage-pill {
      border-color: rgba(226, 207, 160, .16);
      background: rgba(255, 255, 255, .045);
      color: var(--wb-fg-soft);
    }
    body.workbench-mode #flowStep2Panel .angle-chip.is-required {
      border-color: rgba(226, 207, 160, .42);
      background: rgba(201, 168, 106, .18);
      color: var(--gold-soft);
    }
    body.workbench-mode #flowStep2Panel .angle-chip.is-covered,
    body.workbench-mode #twinStatusPanel .angle-chip.is-covered,
    body.workbench-mode #twinStatusPanel .coverage-pill.is-covered {
      border-color: rgba(187, 210, 200, .4);
      background: rgba(31, 58, 51, .5);
      color: rgba(214, 233, 223, .95);
    }
    body.workbench-mode #flowStep2Panel .angle-chip.is-missing,
    body.workbench-mode #twinStatusPanel .angle-chip.is-missing,
    body.workbench-mode #twinStatusPanel .coverage-pill.is-missing {
      border-color: var(--danger-line);
      background: color-mix(in srgb, var(--danger-soft) 26%, rgba(9, 11, 10, .5));
      color: var(--danger);
    }
    /* step2 上传区(高特异性 T31 版本)压暗,接管 --panel/--ivory-warm 浅色渐变 */
    body.workbench-mode #flowStep2Panel .upload-zone {
      border: 1px dashed rgba(226, 207, 160, .28);
      background: rgba(255, 255, 255, .04);
      color: var(--wb-fg);
      box-shadow: inset 0 0 0 1px rgba(226, 207, 160, .1);
    }
    body.workbench-mode #flowStep2Panel .upload-zone:hover,
    body.workbench-mode #flowStep2Panel .upload-zone.dragover {
      border-color: rgba(226, 207, 160, .55);
      background: rgba(201, 168, 106, .12);
    }
    body.workbench-mode #flowStep2Panel .upload-size-pill,
    body.workbench-mode #twinStatusPanel .upload-size-pill {
      border-color: rgba(226, 207, 160, .3);
      background: rgba(9, 11, 10, .5);
      color: var(--gold-soft);
    }
    /* ============================================================
       T61-C7 · 方案A 浅色主内容区精修(append-only,后于 T61 段4-12)
       作用域全部 body.workbench-mode #appShell > .main 下,特异性更高 + 后写,
       把段4-12 为「暗底」硬编码的暗玻璃/暗渐变/暗输入翻成与浅主区协调的米白卡片。
       侧边栏(.sidebar)与 hero 横幅不在此作用域,保留暗色。
       新增:暗色 hero 横幅 / 5 步进度条 / 底部平台支持排(纯展示,无 JS 钩子)。
       ============================================================ */

    /* ---- C7-1) 暗色 hero 横幅(唯一保留暗色的主区块) ---- */
    body.workbench-mode #appShell > .main .wb-hero {
      position: relative;
      overflow: hidden;
      border-radius: var(--radius);
      padding: clamp(22px, 4vw, 40px) clamp(20px, 4vw, 44px);
      margin-bottom: 16px;
      color: #f6f4ee;
      background:
        linear-gradient(105deg, rgba(9, 11, 10, .92) 0%, rgba(9, 11, 10, .72) 46%, rgba(9, 11, 10, .42) 100%),
        url('media/web/hero-cinematic-bg-20260622.jpg') center right / cover no-repeat,
        #0a0b0a;
      box-shadow: 0 20px 48px rgba(33, 31, 27, .18);
    }
    body.workbench-mode #appShell > .main .wb-hero-copy {
      position: relative;
      max-width: 640px;
    }
    body.workbench-mode #appShell > .main .wb-hero-kicker {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 5px 12px;
      border-radius: 999px;
      border: 1px solid rgba(226, 207, 160, .42);
      background: rgba(9, 11, 10, .42);
      color: var(--gold-soft);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .02em;
    }
    body.workbench-mode #appShell > .main .wb-hero-title {
      margin: 14px 0 8px;
      font-size: clamp(22px, 3.4vw, 34px);
      font-weight: 900;
      line-height: 1.2;
      color: #fbf8f1;
      text-shadow: 0 2px 18px rgba(0, 0, 0, .45);
    }
    body.workbench-mode #appShell > .main .wb-hero-sub {
      margin: 0;
      font-size: clamp(13px, 1.4vw, 15px);
      line-height: 1.7;
      color: rgba(246, 244, 238, .86);
      text-shadow: 0 1px 12px rgba(0, 0, 0, .4);
    }

    /* ---- C7-2) 5 步进度条(浅色版式) ---- */
    body.workbench-mode #appShell > .main .wb-flow {
      list-style: none;
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin: 0 0 16px;
      padding: 12px 14px;
      border: 1px solid rgba(33, 31, 27, .1);
      border-radius: var(--radius);
      background: linear-gradient(120deg, #ffffff 0%, #f7f4ee 100%);
      box-shadow: 0 10px 28px rgba(33, 31, 27, .06);
    }
    body.workbench-mode #appShell > .main .wb-flow-step {
      flex: 1 1 140px;
      display: flex;
      align-items: center;
      gap: 9px;
      min-width: 0;
      padding: 8px 12px;
      border-radius: var(--radius-sm, 12px);
      background: rgba(244, 241, 234, .7);
      border: 1px solid rgba(33, 31, 27, .07);
    }
    body.workbench-mode #appShell > .main .wb-flow-num {
      flex: none;
      width: 26px;
      height: 26px;
      display: grid;
      place-items: center;
      border-radius: 999px;
      background: linear-gradient(135deg, var(--gold), var(--gold-strong));
      color: #211f1b;
      font-size: 13px;
      font-weight: 900;
      box-shadow: 0 0 0 3px rgba(201, 168, 106, .18);
    }
    body.workbench-mode #appShell > .main .wb-flow-label {
      font-size: 13px;
      font-weight: 700;
      color: #2c2a25;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* ---- C7-3) 底部平台支持排(文字字标占位) ---- */
    body.workbench-mode #appShell > .main .wb-platforms {
      margin-top: 18px;
      padding: 18px 16px 6px;
      border-top: 1px solid rgba(33, 31, 27, .1);
      text-align: center;
    }
    body.workbench-mode #appShell > .main .wb-platforms-title {
      display: block;
      margin-bottom: 12px;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .06em;
      color: rgba(33, 31, 27, .5);
    }
    body.workbench-mode #appShell > .main .wb-platforms-row {
      list-style: none;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px;
      margin: 0;
      padding: 0;
    }
    body.workbench-mode #appShell > .main .wb-platform-chip {
      padding: 7px 16px;
      border-radius: 999px;
      border: 1px solid rgba(33, 31, 27, .12);
      background: #ffffff;
      color: rgba(33, 31, 27, .62);
      font-size: 13px;
      font-weight: 700;
      letter-spacing: .01em;
      box-shadow: 0 4px 12px rgba(33, 31, 27, .04);
      transition: color .18s, border-color .18s, box-shadow .18s;
    }
    body.workbench-mode #appShell > .main .wb-platform-chip:hover {
      color: var(--gold-strong);
      border-color: rgba(201, 168, 106, .5);
      box-shadow: 0 8px 18px rgba(201, 168, 106, .14);
    }

    /* ---- C7-4) 主区面板/8步面板:翻成米白浅卡片(覆盖段4 暗渐变) ---- */
    body.workbench-mode #appShell > .main .guided-workbench-panel,
    body.workbench-mode #appShell > .main .main-flow-stage > .flow-step-card,
    body.workbench-mode #appShell > .main .main-flow-stage > .panel,
    body.workbench-mode #appShell > .main #platformStepPanel,
    body.workbench-mode #appShell > .main #slotPlanStepPanel,
    body.workbench-mode #appShell > .main #settingsStepPanel,
    body.workbench-mode #appShell > .main #resultsStepPanel,
    body.workbench-mode #appShell > .main #workbenchWizardHostPanel,
    body.workbench-mode #appShell > .main .settings-panel {
      border: 1px solid rgba(33, 31, 27, .1);
      background: linear-gradient(180deg, #ffffff 0%, #fbfaf6 100%);
      color: var(--wb-fg);
      box-shadow: 0 14px 34px rgba(33, 31, 27, .07);
      backdrop-filter: none;
    }

    /* ---- C7-5) hero-kicker / guided-mark / reset 按钮(浅版) ---- */
    body.workbench-mode #appShell > .main .hero-kicker,
    body.workbench-mode #appShell > .main .guided-panel-mark {
      border-color: rgba(201, 168, 106, .4);
      background: rgba(201, 168, 106, .12);
      color: var(--gold-strong);
    }
    body.workbench-mode #appShell > .main .guided-reset-btn {
      border-color: rgba(33, 31, 27, .16);
      background: #ffffff;
      color: var(--wb-fg-soft);
    }
    body.workbench-mode #appShell > .main .guided-reset-btn:hover {
      border-color: rgba(201, 168, 106, .5);
      background: rgba(201, 168, 106, .12);
      color: var(--gold-strong);
    }

    /* ---- C7-6) 水平 stepper(浅节点 + 金 active/done) ---- */
    body.workbench-mode #appShell > .main .workbench-stepper-item {
      border: 1px solid rgba(33, 31, 27, .1);
      background: rgba(244, 241, 234, .7);
      color: var(--wb-fg-muted);
    }
    body.workbench-mode #appShell > .main .workbench-stepper-item.active {
      border-color: rgba(201, 168, 106, .5);
      background: linear-gradient(180deg, rgba(201, 168, 106, .16), #ffffff);
      color: var(--wb-fg);
      box-shadow: inset 0 -3px 0 var(--gold);
    }
    body.workbench-mode #appShell > .main .workbench-stepper-item.done {
      border-color: rgba(31, 58, 51, .35);
      background: linear-gradient(180deg, rgba(31, 58, 51, .1), #ffffff);
      color: var(--wb-fg-soft);
    }
    /* 序号徽标:未到=浅绿底深字、active/done=金 */
    body.workbench-mode #appShell > .main .workbench-stepper-index,
    body.workbench-mode #appShell > .main .flow-step-badge,
    body.workbench-mode #appShell > .main .prep-chip-index {
      background: rgba(31, 58, 51, .12);
      color: #1f3a33;
      box-shadow: 0 0 0 3px rgba(31, 58, 51, .08);
    }
    body.workbench-mode #appShell > .main .workbench-stepper-item.active .workbench-stepper-index,
    body.workbench-mode #appShell > .main .workbench-stepper-item.done .workbench-stepper-index,
    body.workbench-mode #appShell > .main .flow-step-card.is-active .flow-step-badge,
    body.workbench-mode #appShell > .main .flow-step-card.is-complete .flow-step-badge,
    body.workbench-mode #appShell > .main .prep-flow-chip.is-active .prep-chip-index,
    body.workbench-mode #appShell > .main .prep-flow-chip.is-done .prep-chip-index {
      background: var(--gold);
      color: #211f1b;
      box-shadow: 0 0 0 3px rgba(201, 168, 106, .26);
    }

    /* ---- C7-7) 当前 flow-step 卡片(浅米白高亮替暗渐变) ---- */
    body.workbench-mode #appShell > .main .main-flow-stage .flow-step-card.is-active {
      border-color: rgba(201, 168, 106, .42);
      background: linear-gradient(145deg, #fffdf8, #f6f1e6);
      box-shadow: 0 18px 40px rgba(33, 31, 27, .1);
    }

    /* ---- C7-8) 步骤内引导行/页脚/小结/平台壳等:浅米白软底 ---- */
    body.workbench-mode #appShell > .main .main-flow-stage .prep-stage-footer,
    body.workbench-mode #appShell > .main .main-flow-stage .prep-stage-summary,
    body.workbench-mode #appShell > .main .confirm-box,
    body.workbench-mode #appShell > .main .guided-summary-panel,
    body.workbench-mode #appShell > .main .settings-alert-panel,
    body.workbench-mode #appShell > .main .size-summary,
    body.workbench-mode #appShell > .main .platform-shell,
    body.workbench-mode #appShell > .main .platform-current-card,
    body.workbench-mode #appShell > .main .amazon-package-panel,
    body.workbench-mode #appShell > .main .model-reference-panel,
    body.workbench-mode #appShell > .main .recognition-card,
    body.workbench-mode #appShell > .main .twin-status-body,
    body.workbench-mode #appShell > .main .twin-locked,
    body.workbench-mode #appShell > .main .twin-views-panel {
      border-color: rgba(33, 31, 27, .1);
      background: rgba(244, 241, 234, .55);
      color: var(--wb-fg-soft);
      box-shadow: none;
    }
    /* 「需要…」提示条 + 语言策略提示:金左条 + 金底浅玻璃 */
    body.workbench-mode #appShell > .main .main-flow-stage .flow-step-need,
    body.workbench-mode #appShell > .main .language-policy-note {
      border-left-color: var(--gold);
      background: rgba(201, 168, 106, .1);
      color: var(--wb-fg-soft);
    }

    /* ---- C7-9) 表单控件:浅输入框(覆盖段7 暗底) ---- */
    body.workbench-mode #appShell > .main .control,
    body.workbench-mode #appShell > .main input.control,
    body.workbench-mode #appShell > .main textarea.control,
    body.workbench-mode #appShell > .main select.control {
      border-color: rgba(33, 31, 27, .16);
      background: #ffffff;
      color: var(--wb-fg);
    }
    body.workbench-mode #appShell > .main select.control option {
      background: #ffffff;
      color: #211f1b;
    }

    /* ---- C7-10) 上传区 + 必拍清单 chips:浅米白(覆盖段8/12 暗底) ---- */
    body.workbench-mode #appShell > .main .upload-zone,
    body.workbench-mode #appShell > .main #flowStep2Panel .upload-zone {
      border-color: rgba(33, 31, 27, .18);
      background: rgba(244, 241, 234, .6);
      color: var(--wb-fg);
      box-shadow: none;
    }
    body.workbench-mode #appShell > .main .upload-zone:hover,
    body.workbench-mode #appShell > .main .upload-zone.dragover,
    body.workbench-mode #appShell > .main #flowStep2Panel .upload-zone:hover,
    body.workbench-mode #appShell > .main #flowStep2Panel .upload-zone.dragover {
      border-color: rgba(201, 168, 106, .55);
      background: rgba(201, 168, 106, .1);
    }
    body.workbench-mode #appShell > .main .upload-size-pill,
    body.workbench-mode #appShell > .main #flowStep2Panel .upload-size-pill,
    body.workbench-mode #appShell > .main #twinStatusPanel .upload-size-pill {
      border-color: rgba(201, 168, 106, .4);
      background: rgba(201, 168, 106, .1);
      color: var(--gold-strong);
    }
    body.workbench-mode #appShell > .main .angle-chip,
    body.workbench-mode #appShell > .main .chip,
    body.workbench-mode #appShell > .main .coverage-pill,
    body.workbench-mode #appShell > .main .twin-fact-chip,
    body.workbench-mode #appShell > .main #flowStep2Panel .angle-chip,
    body.workbench-mode #appShell > .main #twinStatusPanel .angle-chip,
    body.workbench-mode #appShell > .main #twinStatusPanel .coverage-pill {
      border-color: rgba(33, 31, 27, .12);
      background: #ffffff;
      color: var(--wb-fg-soft);
    }
    body.workbench-mode #appShell > .main #flowStep2Panel .angle-chip.is-required {
      border-color: rgba(201, 168, 106, .45);
      background: rgba(201, 168, 106, .14);
      color: var(--gold-strong);
    }
    body.workbench-mode #appShell > .main .chip.active,
    body.workbench-mode #appShell > .main .angle-chip.is-covered,
    body.workbench-mode #appShell > .main .coverage-pill.is-covered,
    body.workbench-mode #appShell > .main #flowStep2Panel .angle-chip.is-covered,
    body.workbench-mode #appShell > .main #twinStatusPanel .angle-chip.is-covered,
    body.workbench-mode #appShell > .main #twinStatusPanel .coverage-pill.is-covered {
      border-color: rgba(31, 58, 51, .35);
      background: rgba(31, 58, 51, .1);
      color: #1f3a33;
    }
    body.workbench-mode #appShell > .main .angle-chip.is-missing,
    body.workbench-mode #appShell > .main .coverage-pill.is-missing,
    body.workbench-mode #appShell > .main .settings-alert-item.warn,
    body.workbench-mode #appShell > .main #flowStep2Panel .angle-chip.is-missing,
    body.workbench-mode #appShell > .main #twinStatusPanel .angle-chip.is-missing,
    body.workbench-mode #appShell > .main #twinStatusPanel .coverage-pill.is-missing {
      border-color: var(--attention-line);
      background: color-mix(in srgb, var(--attention-soft) 30%, #ffffff);
      color: var(--attention);
    }

    /* ---- C7-11) 各类卡片(平台/槽位/结果/模特库/选择步骤):浅米白 ---- */
    body.workbench-mode #appShell > .main .platform-nav-group,
    body.workbench-mode #appShell > .main .platform-card-btn,
    body.workbench-mode #appShell > .main .settings-section,
    body.workbench-mode #appShell > .main .settings-alert-item,
    body.workbench-mode #appShell > .main .slot-card,
    body.workbench-mode #appShell > .main .result-card,
    body.workbench-mode #appShell > .main .generation-progress-card,
    body.workbench-mode #appShell > .main .model-reference-mode,
    body.workbench-mode #appShell > .main .model-choice-step,
    body.workbench-mode #appShell > .main .main-model-library,
    body.workbench-mode #appShell > .main .main-model-selected,
    body.workbench-mode #appShell > .main .replicate-model-card,
    body.workbench-mode #appShell > .main .main-library-card {
      border-color: rgba(33, 31, 27, .1);
      background: #ffffff;
      color: var(--wb-fg);
      box-shadow: 0 6px 16px rgba(33, 31, 27, .04);
    }
    body.workbench-mode #appShell > .main .platform-card-btn:hover,
    body.workbench-mode #appShell > .main .platform-card-btn.active,
    body.workbench-mode #appShell > .main .slot-card:hover,
    body.workbench-mode #appShell > .main .slot-card.selected,
    body.workbench-mode #appShell > .main .settings-alert-item.is-active,
    body.workbench-mode #appShell > .main .language-chip-grid .chip.active,
    body.workbench-mode #appShell > .main .model-reference-mode:has(input:checked) {
      border-color: rgba(201, 168, 106, .5);
      background: rgba(201, 168, 106, .12);
      color: var(--wb-fg);
      box-shadow: inset 0 0 0 1px rgba(201, 168, 106, .22);
    }

    /* ---- C7-12) 工具条额度/平台 pill:浅米白(覆盖段3 暗 pill 残留) ---- */
    body.workbench-mode #appShell > .main .workbench-toolbar .hub-mini-pill,
    body.workbench-mode #appShell > .main .workbench-toolbar .workbench-quota-pill,
    body.workbench-mode #appShell > .main .workbench-toolbar .workbench-current-pill {
      border-color: rgba(201, 168, 106, .42);
      background: rgba(201, 168, 106, .1);
      color: var(--gold-strong);
    }

    /* ===== /T61 跨境详情页工作台暗色重塑 ===== */

    /* ============================================================
       T15-C8 · 功能中心(hub)重设计(append-only)
       1) 卡片接入 GPT 生成的展示图(.product-card-photo),覆盖原抽象 mock;
          仅 .has-photo 卡隐藏其 mock(作品记录卡无图,保留 mock)。
       2) 隐藏底部三段(今日生产进度/最近作品/快捷入口):用 display:none 而非删节点,
          保全 #hubInsightsStats / #hubRecentWorks / hubInsightsRefresh / hub-shortcut-card
          等全部 JS 钩子(bundle 仍可安全写 innerHTML,只是不可见)。
       ============================================================ */

    /* ---- C8-1) 卡片展示图 ---- */
    .saas-main .product-card-visual.has-photo {
      position: relative;
      padding: 0;
      border-radius: 16px;
      overflow: hidden;
    }
    .saas-main .product-card-visual.has-photo .product-card-photo {
      display: block;
      width: 100%;
      aspect-ratio: 16 / 10;
      object-fit: cover;
      border-radius: 16px;
      border: 1px solid rgba(33, 31, 27, .08);
      box-shadow: 0 12px 30px rgba(33, 31, 27, .1);
    }
    /* 接了真图的卡:隐藏原抽象 mock(只在 has-photo 内,作品记录卡不受影响) */
    .saas-main .product-card-visual.has-photo .mock-window,
    .saas-main .product-card-visual.has-photo .mock-stack,
    .saas-main .product-card-visual.has-photo .mock-blueprint {
      display: none;
    }

    /* ---- C8-2) 隐藏底部三段(节点保留,仅不可见,JS 钩子完好) ---- */
    .saas-main .hub-insights,
    .saas-main .hub-recent,
    .saas-main .hub-shortcuts {
      display: none !important;
    }
    /* ===== /T15-C8 功能中心重设计 ===== */

    /* ===== T15-C9 · 超能作图 白底精修前后对比(working slider) ===== */
    #imageStudioView .studio-c4-compare.is-live {
      margin: 0;
    }
    #imageStudioView .studio-c4-compare.is-live .studio-c4-compare-stage {
      height: auto;
      aspect-ratio: 16 / 10;
      max-height: 360px;
      background: #0d0f0e;
      cursor: ew-resize;
      touch-action: none;
      user-select: none;
    }
    #imageStudioView .studio-c4-compare.is-live .studio-c4-compare-img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      pointer-events: none;
      -webkit-user-drag: none;
      user-select: none;
    }
    #imageStudioView .studio-c4-compare.is-live .studio-c4-compare-after {
      position: absolute;
      inset: 0;
      overflow: hidden;
      clip-path: inset(0 calc(100% - var(--cmp-pos, 50%)) 0 0);
      pointer-events: none;
    }
    #imageStudioView .studio-c4-compare.is-live .studio-c4-compare-label {
      z-index: 3;
    }
    #imageStudioView .studio-c4-compare.is-live .studio-c4-compare-handle {
      z-index: 4;
    }
    #imageStudioView .studio-c4-compare.is-live .studio-c4-compare-range {
      opacity: 1;
      cursor: ew-resize;
    }
    /* ===== /T15-C9 ===== */

    /* ===== T15-C10 · 平台 chip 品牌 logo 徽标(hub 暗 + workbench 浅 共用) ===== */
    .product-center-view .hub-platform-chip,
    body.workbench-mode #appShell > .main .wb-platform-chip {
      display: inline-flex;
      align-items: center;
      gap: 7px;
    }
    .plat-glyph {
      flex: 0 0 auto;
      width: 18px;
      height: 18px;
      border-radius: 5px;
      background: var(--bc, #888);
      color: #fff;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 10px;
      font-weight: 900;
      font-style: normal;
      line-height: 1;
      letter-spacing: 0;
    }
    .plat-glyph.plat-glyph-num {
      font-size: 8px;
      letter-spacing: -.02em;
    }
    /* ===== /T15-C10 ===== */

    /* ===== T15-C12 · 进阶控制台「画面比例」接真(可点 chip + 选中态) ===== */
    #imageStudioView .studio-c4-group.is-live legend { opacity: 1; }
    #imageStudioView .studio-c4-group.is-live .studio-c4-chip {
      color: rgba(246, 244, 238, .82);
      cursor: pointer;
      transition: border-color .15s ease, background .15s ease, color .15s ease;
    }
    #imageStudioView .studio-c4-group.is-live .studio-c4-chip:hover {
      border-color: rgba(226, 207, 160, .42);
      color: #f6f4ee;
    }
    #imageStudioView .studio-c4-group.is-live .studio-c4-chip.is-active {
      border-color: var(--gold);
      background: color-mix(in srgb, var(--gold) 22%, rgba(9, 11, 10, .42));
      color: #fff;
      font-weight: 700;
    }
    /* ===== /T15-C12 ===== */

    /* ===== T15-C15 · 进阶控制台「已接真」徽标 + 主体锁定常开指示 ===== */
    #imageStudioView .studio-c4-live-pill {
      flex: none;
      padding: 4px 12px;
      border-radius: 999px;
      border: 1px solid rgba(120, 200, 150, .5);
      background: rgba(80, 180, 120, .16);
      color: #8fe3b3;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .04em;
    }
    #imageStudioView .studio-c4-group.is-live .studio-c4-toggle input:checked {
      accent-color: #58c98a;
    }
    /* ===== /T15-C15 ===== */

    /* ===== 背景替换编辑器 全屏 editor-shell（D1 共用外壳）BG-EDITOR-1 ===== */
    .image-editor-shell-view {
      position: fixed;
      inset: 0;
      z-index: 40;
      background: var(--night);
      color: var(--gold-soft);
    }
    .image-editor-shell-view.hidden { display: none; }
    .ied-shell {
      display: flex;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }

    /* 左栏 */
    .ied-rail {
      flex: 0 0 232px;
      display: flex;
      flex-direction: column;
      gap: 14px;
      padding: 18px 14px;
      background: var(--charcoal);
      border-right: 1px solid var(--night-line);
      overflow-y: auto;
    }
    .ied-brand {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 4px 6px 10px;
    }
    .ied-brand-icon {
      display: grid;
      place-items: center;
      width: 34px;
      height: 34px;
      border-radius: 9px;
      background: linear-gradient(135deg, var(--gold-line), var(--gold) 62%, var(--gold-strong));
      color: #1d1a12;
    }
    .ied-brand strong { display: block; font-size: 15px; color: var(--gold-soft); }
    .ied-brand small { display: block; font-size: 11px; color: #8b9488; letter-spacing: .04em; }
    .ied-rail-nav { display: flex; flex-direction: column; gap: 6px; }
    .ied-rail-btn {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
      padding: 10px 12px;
      border: 1px solid transparent;
      border-radius: 10px;
      background: transparent;
      color: #c5cdc4;
      font-size: 14px;
      text-align: left;
      cursor: pointer;
      transition: background .15s, border-color .15s, color .15s;
    }
    .ied-rail-btn span { flex: 1; }
    .ied-rail-btn:hover:not(:disabled) {
      background: rgba(201,168,106,.08);
      border-color: var(--night-line);
      color: var(--gold-soft);
    }
    .ied-rail-btn.is-active {
      background: linear-gradient(135deg, rgba(201,168,106,.18), rgba(31,58,51,.28));
      border-color: var(--gold-line);
      color: var(--gold-soft);
    }
    .ied-rail-btn.is-soon { cursor: not-allowed; color: #6f786e; }
    .ied-rail-btn:disabled { cursor: not-allowed; }
    .ied-soon {
      font-size: 10px;
      font-style: normal;
      padding: 2px 6px;
      border-radius: 999px;
      background: rgba(201,168,106,.14);
      color: var(--gold);
      white-space: nowrap;
    }
    .ied-rail-sep {
      display: flex;
      align-items: center;
      gap: 8px;
      margin: 4px 4px 0;
      font-size: 11px;
      color: #7c857a;
    }
    .ied-rail-sep::before,
    .ied-rail-sep::after {
      content: "";
      flex: 1;
      height: 1px;
      background: var(--night-line);
    }
    .ied-rail-note {
      margin-top: auto;
      padding: 12px;
      border-radius: 10px;
      background: rgba(255,255,255,.02);
      border: 1px solid var(--night-line);
    }
    .ied-rail-note .mini-badge {
      display: inline-block;
      font-size: 10px;
      padding: 2px 8px;
      border-radius: 999px;
      background: rgba(31,58,51,.4);
      color: var(--gold-line);
      margin-bottom: 6px;
    }
    .ied-rail-note p { font-size: 11.5px; line-height: 1.55; color: #9aa399; }
    .ied-rail-back {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 9px;
      border: 1px solid var(--night-line);
      border-radius: 10px;
      background: transparent;
      color: #b6bfb4;
      font-size: 13px;
      cursor: pointer;
    }
    .ied-rail-back:hover { border-color: var(--gold-line); color: var(--gold-soft); }

    /* 主区 */
    .ied-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
    .ied-topbar {
      flex: 0 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 14px 20px;
      border-bottom: 1px solid var(--night-line);
      background: var(--night-panel);
    }
    .ied-topbar-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
    .ied-step {
      display: grid;
      place-items: center;
      width: 26px;
      height: 26px;
      border-radius: 8px;
      background: linear-gradient(135deg, var(--gold-line), var(--gold-strong));
      color: #1d1a12;
      font-weight: 700;
      font-size: 14px;
    }
    .ied-topbar-heading h1 { font-size: 17px; font-weight: 700; color: var(--gold-soft); line-height: 1.2; }
    .ied-topbar-heading p { font-size: 12px; color: #8b9488; }
    .ied-subject-badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 4px 10px;
      border-radius: 999px;
      background: rgba(31,58,51,.45);
      border: 1px solid var(--deep-green);
      color: var(--gold-line);
      font-size: 11.5px;
      white-space: nowrap;
    }
    .ied-topbar-actions { display: flex; align-items: center; gap: 8px; }
    .ied-tool {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 7px 12px;
      border: 1px solid var(--night-line);
      border-radius: 9px;
      background: transparent;
      color: #c5cdc4;
      font-size: 13px;
      cursor: pointer;
      transition: border-color .15s, color .15s, background .15s;
    }
    .ied-tool:hover:not(:disabled) { border-color: var(--gold-line); color: var(--gold-soft); }
    .ied-tool.is-primary {
      background: linear-gradient(135deg, var(--gold-line), var(--gold) 62%, var(--gold-strong));
      border-color: var(--gold);
      color: #1d1a12;
    }
    .ied-tool.is-primary:disabled { opacity: .45; }
    .ied-tool.is-soon,
    .ied-tool:disabled { cursor: not-allowed; opacity: .5; }

    .ied-body { flex: 1; display: flex; min-height: 0; }

    /* 中区画布 */
    .ied-canvas {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 14px;
      padding: 20px;
      min-width: 0;
      overflow-y: auto;
    }
    .ied-stage {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 320px;
      padding: 12px;
      min-width: 0;
      border-radius: 14px;
      border: 1px solid var(--night-line);
      background:
        radial-gradient(120% 120% at 50% 0%, rgba(31,58,51,.18), transparent 60%),
        repeating-conic-gradient(#191e1a 0% 25%, #15191500 0% 50%) 50% / 22px 22px;
      position: relative;
      overflow: hidden;
    }
    .ied-upload {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      max-width: 360px;
      padding: 32px;
      text-align: center;
      color: #9aa399;
      cursor: pointer;
    }
    .ied-upload:hover { color: var(--gold-soft); }
    .ied-upload-title { font-size: 15px; font-weight: 600; color: var(--gold-soft); }
    .ied-upload-hint { font-size: 12px; line-height: 1.55; color: #8b9488; }
    .ied-stage:not([data-empty="true"]) .ied-upload { display: none; }

    /* 对比滑杆（标准前后擦除 wipe；画框按图片真实比例贴合，去留白） */
    .ied-compare {
      position: relative;
      height: 100%;
      width: auto;
      max-width: 100%;
      max-height: 100%;
      min-height: 0;
      margin: auto;
      aspect-ratio: var(--ied-frame-ratio, 4 / 5);
    }
    .ied-compare.hidden { display: none; }
    .ied-compare-stage {
      position: relative;
      width: 100%;
      height: 100%;
      overflow: hidden;
      border-radius: 12px;
      transform: scale(var(--ied-zoom, 1)) translate(var(--ied-pan-x, 0px), var(--ied-pan-y, 0px));
      transform-origin: center center;
      will-change: transform;
    }
    .ied-compare-img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: contain;
      user-select: none;
      -webkit-user-drag: none;
    }
    /* 效果图层与原图层完全同框同尺寸；仅用 clip-path 擦除，保证像素对齐、无鬼影 */
    .ied-compare-after {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      clip-path: inset(0 0 0 var(--cmp-pos, 50%));
    }
    /* 擦除分界线 */
    .ied-compare.has-result .ied-compare-stage::after {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      left: var(--cmp-pos, 50%);
      width: 2px;
      margin-left: -1px;
      background: var(--gold);
      pointer-events: none;
    }
    .ied-compare-label {
      position: absolute;
      bottom: 10px;
      padding: 2px 8px;
      border-radius: 6px;
      font-size: 11px;
      background: rgba(0,0,0,.5);
      color: #fff;
      pointer-events: none;
      z-index: 2;
    }
    .ied-compare-label.is-before { left: 10px; }
    .ied-compare-label.is-after { right: 10px; }
    .ied-compare-handle {
      position: absolute;
      top: 50%;
      left: var(--cmp-pos, 50%);
      transform: translate(-50%, -50%);
      display: grid;
      place-items: center;
      width: 30px;
      height: 30px;
      border-radius: 999px;
      background: var(--gold);
      color: #1d1a12;
      box-shadow: 0 0 0 4px rgba(201,168,106,.25);
      pointer-events: none;
      z-index: 3;
    }
    .ied-compare-range {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      margin: 0;
      opacity: 0;
      cursor: ew-resize;
      z-index: 4;
    }
    /* 未生成结果：只静态展示产品图，藏掉手柄/range/效果图标签 */
    .ied-compare:not(.has-result) .ied-compare-after,
    .ied-compare:not(.has-result) .ied-compare-handle,
    .ied-compare:not(.has-result) .ied-compare-range,
    .ied-compare:not(.has-result) .ied-compare-label.is-after { display: none; }
    /* 自由文生图无「原图」：单图直显，整套对比手柄/分隔线/标签/滑杆全部去掉 */
    .ied-compare--single .ied-compare-after { clip-path: none; }
    .ied-compare--single.has-result .ied-compare-stage::after { display: none; }
    .ied-compare--single .ied-compare-handle,
    .ied-compare--single .ied-compare-range,
    .ied-compare--single .ied-compare-label { display: none; }
    /* 抓手平移模式：拖拽 = 平移，禁用擦除 range */
    .ied-canvas.is-hand .ied-compare-range { pointer-events: none; }
    .ied-canvas.is-hand .ied-stage { cursor: grab; }
    .ied-canvas.is-hand .ied-stage:active { cursor: grabbing; }

    /* 缩放条（已上线） */
    .ied-zoombar {
      display: flex;
      align-items: center;
      gap: 10px;
      align-self: center;
      padding: 6px 12px;
      border-radius: 999px;
      border: 1px solid var(--night-line);
      background: var(--night-panel);
      color: var(--gold-soft);
    }
    .ied-zoom-btn {
      display: grid;
      place-items: center;
      width: 24px;
      height: 24px;
      border-radius: 7px;
      cursor: pointer;
      color: #c8d0c4;
      user-select: none;
    }
    .ied-zoom-btn:hover { background: rgba(201,168,106,.16); color: var(--gold-soft); }
    .ied-zoom-btn.is-active { background: rgba(201,168,106,.22); color: var(--gold); }
    .ied-zoom-pct { font-size: 12px; min-width: 44px; text-align: center; cursor: pointer; }
    .ied-zoom-pct:hover { color: var(--gold); }

    /* 生成历史（本会话内存） */
    .ied-history { display: flex; flex-direction: column; gap: 8px; }
    .ied-history-empty { font-size: 12px; color: #8b9488; padding: 10px 2px; }
    .ied-history-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 8px;
      border-radius: 10px;
      border: 1px solid var(--night-line);
      background: var(--night-panel);
    }
    .ied-history-item.is-active { border-color: var(--gold); }
    .ied-history-thumb { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; flex: none; background: #15191a; }
    .ied-history-meta { min-width: 0; flex: 1; }
    .ied-history-label { font-size: 13px; color: #d6ddd2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .ied-history-size { font-size: 11px; color: #8b9488; }
    .ied-history-actions { display: flex; gap: 8px; flex: none; }
    .ied-history-btn {
      font-size: 12px;
      padding: 5px 10px;
      border-radius: 7px;
      border: 1px solid var(--night-line);
      background: transparent;
      color: #c8d0c4;
      cursor: pointer;
    }
    .ied-history-btn:hover { border-color: var(--gold); color: var(--gold-soft); }
    .ied-canvas:fullscreen { background: var(--night-bg, #11150f); padding: 24px; }

    .ied-tabs { display: flex; gap: 8px; border-bottom: 1px solid var(--night-line); }
    .ied-tab {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 8px 4px;
      margin-bottom: -1px;
      border: none;
      border-bottom: 2px solid transparent;
      background: transparent;
      color: #8b9488;
      font-size: 13px;
      cursor: pointer;
    }
    .ied-tab.is-active { color: var(--gold-soft); border-bottom-color: var(--gold); }
    .ied-tab.is-soon { cursor: not-allowed; }

    .ied-thumbs { display: flex; gap: 10px; flex-wrap: wrap; }
    .ied-thumb {
      width: 76px;
      height: 76px;
      border-radius: 10px;
      border: 1px solid var(--night-line);
      background: var(--night-panel);
      color: #7c857a;
      font-size: 11px;
      display: grid;
      place-items: center;
      overflow: hidden;
      cursor: pointer;
      padding: 0;
    }
    .ied-thumb img { width: 100%; height: 100%; object-fit: cover; }
    .ied-thumb.is-active { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(201,168,106,.3); }
    .ied-thumb.is-empty { cursor: default; }
    /* 自由文生图失败槽：单张失败后在结果区留一个「重试这张」入口，手动补图(最省额度) */
    .ied-thumb.is-failed { border-color: rgba(224,122,95,.55); background: rgba(224,122,95,.08); color: #e07a5f; font-size: 11px; line-height: 1.3; text-align: center; padding: 4px; }
    .ied-thumb.is-failed[disabled] { opacity: .6; cursor: progress; }
    .ied-history-thumb--failed { display: grid; place-items: center; color: #e07a5f; font-size: 12px; border: 1px solid rgba(224,122,95,.45); background: rgba(224,122,95,.08); }

    .ied-status {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      padding: 10px 12px;
      border-radius: 10px;
      background: rgba(255,255,255,.02);
      border: 1px solid var(--night-line);
      font-size: 12px;
      color: #9aa399;
    }
    .ied-status strong { color: var(--gold-soft); }
    .ied-status-sep { color: #4f574d; }

    /* 右栏控制面板 */
    .ied-panel {
      flex: 0 0 348px;
      display: flex;
      flex-direction: column;
      gap: 18px;
      padding: 20px;
      border-left: 1px solid var(--night-line);
      background: var(--night-panel);
      overflow-y: auto;
    }
    .ied-panel-field,
    .ied-panel-section { display: flex; flex-direction: column; gap: 8px; }
    .ied-panel-label,
    .ied-panel-h {
      font-size: 13px;
      font-weight: 600;
      color: var(--gold-soft);
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .ied-panel-sub,
    .ied-panel-hint { font-size: 11px; color: #8b9488; font-weight: 400; line-height: 1.5; }
    .ied-select {
      width: 100%;
      padding: 9px 12px;
      border-radius: 9px;
      border: 1px solid var(--night-line);
      background: var(--charcoal);
      color: var(--gold-soft);
      font-size: 13px;
    }
    .ied-presets {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
    }
    .ied-preset {
      display: flex;
      flex-direction: column;
      gap: 6px;
      padding: 8px;
      border-radius: 10px;
      border: 1px solid var(--night-line);
      background: var(--charcoal);
      cursor: pointer;
      text-align: left;
      transition: border-color .15s, background .15s;
      position: relative;
    }
    .ied-preset:hover { border-color: var(--gold-line); }
    .ied-preset.is-active { border-color: var(--gold); background: rgba(201,168,106,.1); }
    .ied-preset-thumb {
      width: 100%;
      aspect-ratio: 4 / 3;
      border-radius: 7px;
      overflow: hidden;
      background:
        repeating-conic-gradient(#1d231e 0% 25%, #181d1900 0% 50%) 50% / 14px 14px,
        var(--night);
      display: grid;
      place-items: center;
      color: #5f685d;
      font-size: 10px;
    }
    .ied-preset-thumb img { width: 100%; height: 100%; object-fit: cover; }
    .ied-preset-sample {
      position: absolute;
      top: 12px;
      left: 12px;
      font-size: 9px;
      padding: 1px 5px;
      border-radius: 4px;
      background: rgba(0,0,0,.55);
      color: var(--gold-line);
    }
    .ied-preset-label {
      font-size: 12px;
      color: var(--gold-soft);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 4px;
    }
    .ied-preset-label .ied-preset-check { color: var(--gold); opacity: 0; }
    .ied-preset.is-active .ied-preset-check { opacity: 1; }
    .ied-preset-reason { font-size: 10.5px; color: #8b9488; line-height: 1.45; }

    .ied-chips { display: flex; flex-wrap: wrap; gap: 8px; }
    .ied-chip {
      padding: 7px 13px;
      border-radius: 999px;
      border: 1px solid var(--night-line);
      background: var(--charcoal);
      color: #c5cdc4;
      font-size: 12.5px;
      cursor: pointer;
      transition: border-color .15s, background .15s, color .15s;
    }
    .ied-chip:hover { border-color: var(--gold-line); color: var(--gold-soft); }
    .ied-chip.is-active {
      border-color: var(--gold);
      background: rgba(201,168,106,.16);
      color: var(--gold-soft);
    }
    .ied-more-hidden { display: none; }
    .ied-platform-chips.is-expanded .ied-more-hidden { display: inline-block; }
    .ied-more-toggle { color: var(--gold); border-style: dashed; }

    /* 产品精修 · 精修规格缩略图档 */
    .ied-spec-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
      gap: 8px;
    }
    .ied-spec-tile {
      display: flex;
      flex-direction: column;
      gap: 5px;
      padding: 5px;
      border-radius: 10px;
      border: 1px solid var(--night-line);
      background: var(--charcoal);
      cursor: pointer;
      transition: border-color .15s, background .15s;
    }
    .ied-spec-tile:hover { border-color: var(--gold-line); }
    .ied-spec-tile.is-active {
      border-color: var(--gold);
      background: rgba(201,168,106,.12);
    }
    .ied-spec-thumb {
      display: flex;
      align-items: center;
      justify-content: center;
      aspect-ratio: 1 / 1;
      border-radius: 7px;
      background: #1b211b;
      overflow: hidden;
    }
    .ied-spec-thumb img { width: 100%; height: 100%; object-fit: cover; }
    /* 有真实演示图时隐藏占位文字;若 img onerror 自移除,占位文字自动回显(诚实兜底)。 */
    .ied-spec-thumb img ~ .ied-spec-ph { display: none; }
    .ied-spec-ph { font-size: 10.5px; color: #6f786e; letter-spacing: .02em; }
    .ied-spec-label { font-size: 12px; color: #c5cdc4; text-align: center; }
    .ied-spec-tile.is-active .ied-spec-label { color: var(--gold-soft); }

    /* 产品精修 · 精修强度三档段控 */
    .ied-segment {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 4px;
      padding: 4px;
      border-radius: 10px;
      border: 1px solid var(--night-line);
      background: var(--charcoal);
    }
    .ied-seg {
      padding: 7px 0;
      border: none;
      border-radius: 7px;
      background: transparent;
      color: #c5cdc4;
      font-size: 12.5px;
      cursor: pointer;
      transition: background .15s, color .15s;
    }
    .ied-seg:hover { color: var(--gold-soft); }
    .ied-seg.is-active {
      background: rgba(201,168,106,.18);
      color: var(--gold-soft);
      box-shadow: inset 0 0 0 1px var(--gold);
    }

    /* 产品精修 · 高级微调折叠 */
    .ied-adv { border-top: 1px dashed var(--night-line); padding-top: 12px; }
    .ied-adv-summary {
      list-style: none;
      cursor: pointer;
      font-size: 13px;
      color: #c5cdc4;
      display: flex;
      align-items: center;
      gap: 6px;
      user-select: none;
    }
    .ied-adv-summary::-webkit-details-marker { display: none; }
    .ied-adv-summary::before {
      content: "›";
      display: inline-block;
      transition: transform .15s;
      color: var(--gold);
      font-size: 15px;
    }
    .ied-adv[open] > .ied-adv-summary::before { transform: rotate(90deg); }
    .ied-adv[open] > .ied-adv-summary { margin-bottom: 12px; }

    /* 产品精修 · 保留项勾选 chip */
    .ied-keep-chips .ied-chip { display: inline-flex; align-items: center; gap: 4px; }
    .ied-keep-chips .ied-chip i { opacity: .35; transition: opacity .15s; }
    .ied-keep-chips .ied-chip.is-active i { opacity: 1; }

    .ied-custom-row {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }
    .ied-custom-row.hidden { display: none; }
    .ied-num {
      width: 84px;
      padding: 7px 10px;
      border-radius: 8px;
      border: 1px solid var(--night-line);
      background: var(--charcoal);
      color: var(--gold-soft);
      font-size: 13px;
    }
    .ied-custom-row small { font-size: 10.5px; color: #8b9488; width: 100%; }

    .ied-strength-soon { opacity: .82; }
    .ied-slider { width: 100%; accent-color: var(--gold); }
    .ied-slider:disabled { cursor: not-allowed; }
    .ied-slider-ends {
      display: flex;
      justify-content: space-between;
      font-size: 11px;
      color: #8b9488;
    }

    .ied-lock {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 4px 10px;
      padding: 12px;
      border-radius: 10px;
      background: rgba(31,58,51,.22);
      border: 1px solid var(--deep-green);
      cursor: not-allowed;
    }
    .ied-lock input { margin-top: 3px; accent-color: var(--gold); cursor: not-allowed; }
    .ied-lock span {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 13px;
      color: var(--gold-soft);
    }
    .ied-lock small { grid-column: 2; font-size: 11px; color: #9aa399; line-height: 1.5; }

    .ied-panel-foot {
      margin-top: auto;
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding-top: 6px;
    }
    .ied-generate {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      padding: 13px;
      border: none;
      border-radius: 11px;
      background: linear-gradient(135deg, var(--gold-line), var(--gold) 58%, var(--gold-strong));
      color: #1d1a12;
      font-size: 15px;
      font-weight: 700;
      cursor: pointer;
      transition: filter .15s, opacity .15s;
    }
    .ied-generate:hover { filter: brightness(1.05); }
    .ied-generate:disabled { opacity: .55; cursor: not-allowed; }
    .ied-cost { text-align: center; font-size: 12.5px; color: #9aa399; }
    .ied-cost strong { color: var(--gold-line); font-size: 14px; }

    /* ===== 图片翻译编辑器 TRANSLATE-EDITOR-1 ===== */
    .ied-toggle-text {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 13px;
      color: var(--gold-soft);
    }
    .ied-help { color: #8b9488; cursor: help; }
    .ied-textarea {
      width: 100%;
      min-height: 70px;
      padding: 9px 12px;
      border-radius: 9px;
      border: 1px solid var(--night-line);
      background: rgba(13,24,21,.5);
      color: #e7ece4;
      font-size: 12.5px;
      line-height: 1.6;
      resize: vertical;
      font-family: inherit;
    }
    .ied-textarea:focus { outline: none; border-color: var(--gold-line); }
    .ied-textarea::placeholder { color: #6f7a6e; }
    .ied-ocr-row {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 4px 10px;
      padding: 11px 12px;
      border-radius: 10px;
      background: rgba(31,58,51,.18);
      border: 1px dashed var(--deep-green);
    }
    .ied-ocr-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 26px;
      height: 26px;
      border-radius: 7px;
      background: rgba(198,166,100,.14);
      color: var(--gold);
    }
    .ied-ocr-copy { display: flex; flex-direction: column; gap: 3px; }
    .ied-ocr-copy strong { font-size: 12.5px; color: var(--gold-soft); font-weight: 600; }
    .ied-ocr-copy small { font-size: 11px; color: #8b9488; line-height: 1.5; }
    .ied-confirm {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 10px;
      padding: 11px 12px;
      border-radius: 10px;
      background: rgba(31,58,51,.22);
      border: 1px solid var(--deep-green);
      cursor: pointer;
    }
    .ied-confirm input { margin-top: 2px; accent-color: var(--gold); cursor: pointer; }
    .ied-confirm span { font-size: 11.5px; color: #c3cabb; line-height: 1.55; }

    /* ===== 场景融合编辑器 SCENE-EDITOR-1 ===== */
    .ied-fusion { display: flex; flex-direction: column; gap: 14px; }
    .ied-fusion-row { display: flex; flex-direction: column; gap: 5px; }
    .ied-fusion-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      font-size: 13px;
      color: var(--gold-soft);
    }
    .ied-fusion-head em {
      font-style: normal;
      font-size: 12px;
      font-weight: 700;
      color: var(--gold-line);
      min-width: 28px;
      text-align: right;
    }
    .ied-fusion-row small { font-size: 11px; color: #8b9488; line-height: 1.45; }

    .ied-toggle {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 4px 10px;
      padding: 12px;
      border-radius: 10px;
      background: rgba(255,255,255,.02);
      border: 1px solid var(--night-line);
      cursor: pointer;
    }
    .ied-toggle input { margin-top: 3px; accent-color: var(--gold); cursor: pointer; }
    .ied-toggle span {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 13px;
      color: var(--gold-soft);
    }
    .ied-toggle small { grid-column: 2; font-size: 11px; color: #9aa399; line-height: 1.5; }

    .ied-scene-upload {
      position: relative;
      display: block;
      padding: 14px;
      border-radius: 10px;
      border: 1px dashed var(--night-line);
      background: rgba(255,255,255,.02);
      cursor: pointer;
      transition: border-color .15s;
    }
    .ied-scene-upload:hover { border-color: var(--gold-line); }
    .ied-scene-upload-empty {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      text-align: center;
      color: #9aa399;
      font-size: 12px;
    }
    .ied-scene-upload-empty small { font-size: 11px; color: #8b9488; line-height: 1.5; }
    .ied-scene-upload-preview { display: block; }
    .ied-scene-upload-preview img {
      width: 100%;
      max-height: 160px;
      object-fit: contain;
      border-radius: 8px;
    }
    .ied-scene-clear {
      align-self: flex-start;
      margin-top: 8px;
      padding: 5px 12px;
      border-radius: 8px;
      border: 1px solid var(--night-line);
      background: transparent;
      color: #9aa399;
      font-size: 12px;
      cursor: pointer;
    }
    .ied-scene-clear:hover { border-color: var(--gold-line); color: var(--gold-soft); }

    @media (max-width: 1080px) {
      .ied-rail { flex-basis: 76px; padding: 16px 8px; }
      .ied-rail-btn span:not(.ied-soon),
      .ied-brand div,
      .ied-rail-sep span,
      .ied-rail-note,
      .ied-rail-back span { display: none; }
      .ied-rail-btn { justify-content: center; }
      .ied-panel { flex-basis: 300px; }
    }
    @media (max-width: 860px) {
      .ied-body { flex-direction: column; overflow-y: auto; }
      .ied-panel { flex-basis: auto; border-left: none; border-top: 1px solid var(--night-line); }
    }
    /* ===== /背景替换编辑器 BG-EDITOR-1 ===== */

    /* ===== 护肤品商业制图·暗色换肤 SKINCARE-DARK-1 =====
       护肤品面板已搬进暗色编辑器壳(#imageEditorShellView)。原 .skincare-* 是浅色商城样式;
       这里只做「换肤覆盖」:全部以 #imageEditorShellView 作用域钉死(绝不裸 .skincare-*),
       用既有夜色变量重涂底/线/字,业务结构与 id 一律不动。 */
    #imageEditorShellView #studioSkincarePanel {
      border-color: var(--night-line);
      background: var(--charcoal);
      box-shadow: none;
    }
    #imageEditorShellView #studioSkincarePanel > .studio-panel-head {
      border-bottom: 1px solid var(--night-line);
      background: var(--night-panel);
    }
    #imageEditorShellView #studioSkincarePanel > .studio-panel-head h2 { color: var(--gold-soft); }
    #imageEditorShellView #studioSkincarePanel > .studio-panel-head p { color: #8b9488; }
    #imageEditorShellView #studioSkincarePanel .mini-badge {
      border-color: var(--night-line);
      background: rgba(201,168,106,.08);
      color: var(--gold);
    }

    #imageEditorShellView .skincare-flow-shell { background: var(--charcoal); }
    #imageEditorShellView .skincare-step-rail {
      border-right: 1px solid var(--night-line);
      background: var(--night-panel);
    }
    #imageEditorShellView .skincare-step-btn { background: transparent; color: #c5cdc4; }
    #imageEditorShellView .skincare-step-btn:hover { border-color: var(--night-line); background: var(--charcoal); }
    #imageEditorShellView .skincare-step-btn.is-active {
      border-color: var(--gold);
      background: var(--charcoal);
      color: var(--gold-soft);
      box-shadow: none;
    }
    #imageEditorShellView .skincare-step-index { background: var(--charcoal); color: #c5cdc4; }
    #imageEditorShellView .skincare-step-btn.is-done .skincare-step-index { background: var(--gold); color: var(--charcoal); }
    #imageEditorShellView .skincare-step-label small { color: #8b9488; }

    #imageEditorShellView .skincare-step-top { border-bottom: 1px solid var(--night-line); }
    #imageEditorShellView .skincare-step-top h3 { color: var(--gold-soft); }
    #imageEditorShellView .skincare-step-top p { color: #8b9488; }
    #imageEditorShellView .skincare-step-eyebrow { color: var(--gold); }
    #imageEditorShellView .skincare-step-chip {
      border-color: var(--night-line);
      background: var(--charcoal);
      color: var(--gold);
    }
    #imageEditorShellView .skincare-step-actions { border-top: 1px solid var(--night-line); }

    #imageEditorShellView .skincare-workflow-strip span,
    #imageEditorShellView .skincare-console-card,
    #imageEditorShellView .skincare-upload-card {
      border-color: var(--night-line);
      background: var(--night-panel);
      box-shadow: none;
    }
    #imageEditorShellView .skincare-workflow-strip strong { color: var(--gold-soft); }
    #imageEditorShellView .skincare-workflow-strip small { color: #8b9488; }

    #imageEditorShellView .skincare-upload-card label {
      border-color: var(--night-line);
      background: var(--charcoal);
    }
    #imageEditorShellView .skincare-upload-card label:hover {
      border-color: var(--gold-line);
      background: rgba(201,168,106,.06);
    }
    #imageEditorShellView .skincare-upload-card strong { color: var(--gold-soft); }
    #imageEditorShellView .skincare-upload-card small,
    #imageEditorShellView .skincare-upload-card p { color: #8b9488; }
    #imageEditorShellView .skincare-upload-status {
      border-color: var(--night-line);
      background: rgba(201,168,106,.08);
      color: var(--gold);
    }
    #imageEditorShellView .skincare-upload-thumb {
      border-color: var(--night-line);
      background: var(--charcoal);
    }
    #imageEditorShellView .skincare-upload-thumb img,
    #imageEditorShellView .skincare-role-thumb,
    #imageEditorShellView .skincare-role-thumb img { background: var(--charcoal); }
    #imageEditorShellView .skincare-upload-thumb small { color: #8b9488; }
    #imageEditorShellView .skincare-thumb-action {
      border-color: var(--night-line);
      background: var(--night-panel);
      color: #c5cdc4;
      box-shadow: none;
    }

    #imageEditorShellView .skincare-console-card h3,
    #imageEditorShellView .skincare-section-head h3 { color: var(--gold-soft); }
    #imageEditorShellView .skincare-section-head p { color: #8b9488; }

    #imageEditorShellView .skincare-role-item {
      border-color: var(--night-line);
      background: var(--night-panel);
    }
    #imageEditorShellView .skincare-role-meta strong { color: var(--gold-soft); }
    #imageEditorShellView .skincare-role-meta small,
    #imageEditorShellView .skincare-fact-card,
    #imageEditorShellView .skincare-missing-facts,
    #imageEditorShellView .skincare-packaging-map,
    #imageEditorShellView .skincare-package-summary,
    #imageEditorShellView .skincare-copy-preview { color: #c5cdc4; }
    #imageEditorShellView .skincare-role-badge {
      border-color: var(--night-line);
      background: rgba(201,168,106,.08);
      color: var(--gold);
    }
    #imageEditorShellView .skincare-role-select {
      border-color: var(--night-line);
      background: var(--charcoal);
      color: #c5cdc4;
    }
    #imageEditorShellView .skincare-fact-row b,
    #imageEditorShellView .skincare-flow-summary-row b { color: var(--gold); }

    #imageEditorShellView .skincare-copy-summary-card,
    #imageEditorShellView .skincare-copy-details,
    #imageEditorShellView .skincare-fact-row,
    #imageEditorShellView .skincare-missing-facts li,
    #imageEditorShellView .skincare-packaging-map li,
    #imageEditorShellView .skincare-package-summary li,
    #imageEditorShellView .skincare-copy-slot {
      border-color: var(--night-line);
      background: var(--night-panel);
    }
    #imageEditorShellView .skincare-copy-summary-card span { color: #8b9488; }
    #imageEditorShellView .skincare-copy-summary-card strong,
    #imageEditorShellView .skincare-copy-slot-head strong { color: var(--gold-soft); }
    #imageEditorShellView .skincare-copy-details summary { color: var(--gold); }
    #imageEditorShellView .skincare-risk-pill {
      border-color: var(--night-line);
      background: rgba(201,168,106,.08);
      color: var(--gold);
    }
    #imageEditorShellView .skincare-copy-lines span,
    #imageEditorShellView .skincare-lock-tags span {
      border-color: var(--night-line);
      background: var(--charcoal);
      color: #c5cdc4;
    }

    #imageEditorShellView .skincare-analysis-panel {
      border-color: var(--gold-line);
      background: var(--night-panel);
    }
    #imageEditorShellView .skincare-analysis-head strong,
    #imageEditorShellView .skincare-analysis-copy strong { color: var(--gold-soft); }
    #imageEditorShellView .skincare-analysis-head small,
    #imageEditorShellView .skincare-analysis-copy small,
    #imageEditorShellView .skincare-model-note { color: #8b9488; }
    #imageEditorShellView .skincare-analysis-status { color: var(--gold); }
    #imageEditorShellView .skincare-analysis-status.is-running {
      border-color: var(--gold-line);
      background: var(--charcoal);
      color: var(--gold-soft);
      box-shadow: none;
    }

    #imageEditorShellView .skincare-flow-summary {
      border-color: var(--night-line);
      background: var(--night-panel);
    }
    #imageEditorShellView .skincare-flow-summary-row span { color: #c5cdc4; }

    #imageEditorShellView .skincare-style-card,
    #imageEditorShellView .skincare-model-card,
    #imageEditorShellView .skincare-slot-lock-card {
      border-color: var(--night-line);
      background: var(--night-panel);
    }
    #imageEditorShellView .skincare-style-card.is-selected,
    #imageEditorShellView .skincare-model-card.is-recommended {
      border-color: var(--gold);
      background: var(--charcoal);
      box-shadow: none;
    }
    #imageEditorShellView .skincare-style-card strong,
    #imageEditorShellView .skincare-model-card strong,
    #imageEditorShellView .skincare-slot-lock-card strong { color: var(--gold-soft); }
    #imageEditorShellView .skincare-style-card small,
    #imageEditorShellView .skincare-model-card small,
    #imageEditorShellView .skincare-slot-lock-card small { color: #8b9488; }

    #imageEditorShellView .skincare-result-toolbar {
      border-color: var(--night-line);
      background: var(--night-panel);
    }
    #imageEditorShellView .skincare-result-toolbar strong { color: var(--gold-soft); }
    #imageEditorShellView .skincare-result-toolbar span { color: #8b9488; }
    #imageEditorShellView .skincare-result-section-head { border-bottom: 1px solid var(--night-line); }
    #imageEditorShellView .skincare-result-section-head h3 { color: var(--gold-soft); }
    #imageEditorShellView .skincare-result-section-head p { color: #8b9488; }

    #imageEditorShellView .skincare-simple-card,
    #imageEditorShellView .skincare-optional-panel {
      border-color: var(--night-line);
      background: var(--night-panel);
    }
    #imageEditorShellView .skincare-simple-card.is-muted { background: var(--charcoal); }
    #imageEditorShellView .skincare-simple-card h4 { color: var(--gold-soft); }
    #imageEditorShellView .skincare-simple-card p,
    #imageEditorShellView .skincare-optional-panel summary { color: #8b9488; }

    #imageEditorShellView .skincare-metric,
    #imageEditorShellView .skincare-plan-pill {
      border-color: var(--night-line);
      background: var(--night-panel);
    }
    #imageEditorShellView .skincare-metric span,
    #imageEditorShellView .skincare-plan-pill span { color: #8b9488; }
    #imageEditorShellView .skincare-metric strong,
    #imageEditorShellView .skincare-plan-pill strong { color: var(--gold-soft); }

    #imageEditorShellView #studioSkincarePanel .skincare-upload-card,
    #imageEditorShellView #studioSkincarePanel .skincare-role-item,
    #imageEditorShellView #studioSkincarePanel .skincare-copy-summary-card,
    #imageEditorShellView #studioSkincarePanel .skincare-fact-row,
    #imageEditorShellView #studioSkincarePanel .skincare-copy-slot,
    #imageEditorShellView #studioSkincarePanel .skincare-style-card,
    #imageEditorShellView #studioSkincarePanel .skincare-model-card,
    #imageEditorShellView #studioSkincarePanel .skincare-slot-lock-card {
      background: var(--night-panel);
    }
    /* 面板内的通用 .btn-outline 默认是白底浅色,在暗壳里刺眼;只在护肤品面板作用域内改暗色描边按钮。
       .btn-primary(金)/.btn-dark(夜)本身已适配暗背景,保持不动。 */
    #imageEditorShellView #studioSkincarePanel .btn-outline {
      border-color: var(--night-line);
      background: transparent;
      color: #c5cdc4;
    }
    #imageEditorShellView #studioSkincarePanel .btn-outline:hover {
      border-color: var(--gold-line);
      color: var(--gold-soft);
    }
    /* 整宽 pane:撑满 ied-body,内部自带滚动 */
    #imageEditorShellView .ied-skincare-full {
      flex: 1 1 auto;
      min-width: 0;
      overflow: auto;
      padding: 20px;
    }
    /* ===== /护肤品商业制图·暗色换肤 SKINCARE-DARK-1 ===== */

    /* ===== 达人分享独立页 CREATOR-SHARE-1 ===== */
    .creator-share-view .saas-main {
      display: grid;
      gap: 18px;
      align-content: start;
    }
    .creator-share-state {
      display: grid;
      gap: 18px;
    }
    .creator-share-view .creator-hero {
      grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
      align-items: stretch;
      gap: 22px;
      background:
        linear-gradient(100deg, rgba(6, 10, 9, .97) 16%, rgba(6, 10, 9, .58) 50%, rgba(6, 10, 9, .14) 100%),
        url("media/web/hero-cinematic-bg-20260622.jpg") center / cover no-repeat;
    }
    .creator-share-view .creator-hero::after {
      display: none;
    }
    .creator-share-view .hero-kicker {
      color: var(--gold-soft);
      border-color: rgba(226, 207, 160, .4);
      background: rgba(20, 16, 8, .55);
    }
    .creator-state-card {
      position: relative;
      z-index: 1;
      display: grid;
      align-content: center;
      gap: 10px;
      padding: 22px;
      border: 1px solid rgba(226, 207, 160, .22);
      border-radius: 18px;
      background: linear-gradient(160deg, rgba(18, 16, 11, .92), rgba(8, 8, 6, .96));
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
    }
    .creator-state-label {
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .04em;
      color: rgba(226, 232, 240, .62);
    }
    .creator-state-card > strong {
      font-size: 20px;
      font-weight: 950;
      color: #f8fffb;
    }
    .creator-state-hint {
      font-size: 12.5px;
      font-weight: 700;
      line-height: 1.6;
      color: rgba(226, 232, 240, .66);
    }
    .creator-code-card > strong {
      font-family: "SFMono-Regular", ui-monospace, Menlo, monospace;
      letter-spacing: .06em;
      color: var(--gold-soft);
    }
    .creator-info-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 14px;
    }
    .creator-info-card {
      display: grid;
      gap: 8px;
      padding: 20px;
      border: 1px solid var(--night-line);
      border-radius: 16px;
      background: linear-gradient(160deg, rgba(15, 19, 16, .9), rgba(8, 11, 9, .95));
    }
    .creator-info-value {
      font-size: 30px;
      font-weight: 950;
      line-height: 1;
      color: var(--gold-soft);
    }
    .creator-info-label {
      font-size: 12.5px;
      font-weight: 800;
      color: rgba(226, 232, 240, .66);
    }
    .creator-steps-card,
    .creator-actions-card,
    .creator-commission-card,
    .creator-tip-card {
      border: 1px solid var(--night-line);
      border-radius: 18px;
      background: linear-gradient(160deg, rgba(13, 16, 14, .9), rgba(7, 9, 8, .95));
      padding: 22px;
    }
    .creator-steps-card > h2,
    .creator-actions-card > h2 {
      margin: 0 0 16px;
      font-size: 17px;
      font-weight: 900;
      color: #f8fffb;
    }
    .creator-steps {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .creator-steps li {
      display: flex;
      gap: 12px;
      align-items: flex-start;
      padding: 16px;
      border: 1px solid var(--night-line);
      border-radius: 14px;
      background: rgba(8, 11, 9, .6);
    }
    .creator-step-num {
      flex: 0 0 auto;
      display: grid;
      place-items: center;
      width: 30px;
      height: 30px;
      border-radius: 999px;
      background: linear-gradient(140deg, var(--gold-line), var(--gold));
      color: #1a130a;
      font-weight: 950;
      font-size: 14px;
    }
    .creator-steps li strong {
      display: block;
      color: #f8fffb;
      font-size: 14.5px;
      font-weight: 900;
    }
    .creator-steps li small {
      display: block;
      margin-top: 4px;
      color: rgba(226, 232, 240, .66);
      font-size: 12.5px;
      font-weight: 700;
      line-height: 1.55;
    }
    .creator-tip-card {
      display: flex;
      gap: 12px;
      align-items: flex-start;
    }
    .creator-tip-card i {
      flex: 0 0 auto;
      color: var(--gold-line);
      margin-top: 2px;
    }
    .creator-tip-card p {
      margin: 0;
      color: rgba(226, 232, 240, .78);
      font-size: 13.5px;
      font-weight: 700;
      line-height: 1.7;
    }
    .creator-actions-row {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
    }
    .creator-data-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .creator-data-grid .account-summary-item {
      background: linear-gradient(160deg, rgba(15, 19, 16, .92), rgba(8, 11, 9, .96));
      border: 1px solid var(--night-line);
      border-radius: 16px;
    }
    .creator-data-grid .account-summary-item.is-total {
      grid-column: auto;
      background: linear-gradient(150deg, rgba(201, 168, 106, .22), rgba(15, 19, 16, .95));
      border-color: rgba(201, 168, 106, .45);
    }
    .creator-data-grid .account-summary-item span {
      color: rgba(226, 232, 240, .66);
    }
    .creator-data-grid .account-summary-item strong,
    .creator-data-grid .account-summary-item.is-total strong {
      color: var(--gold-soft);
    }
    .creator-commission-card .account-record-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 14px;
    }
    .creator-commission-card .account-record-head strong {
      color: #f8fffb;
      font-size: 15px;
      font-weight: 900;
    }
    .creator-commission-card .account-record-list {
      display: grid;
      gap: 10px;
    }
    .creator-commission-card .account-record-row {
      background: rgba(8, 11, 9, .6);
      border: 1px solid var(--night-line);
    }
    .creator-commission-card .account-record-row strong {
      color: #f8fffb;
    }
    .creator-commission-card .account-record-row span,
    .creator-commission-card .account-record-row small {
      color: rgba(226, 232, 240, .66);
    }
    .creator-commission-card .account-empty-state {
      color: rgba(226, 232, 240, .7);
    }
    @media (max-width: 1080px) {
      .creator-data-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .creator-share-view .creator-hero {
        grid-template-columns: minmax(0, 1fr);
      }
      .creator-info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .creator-steps,
      .creator-actions-row {
        grid-template-columns: minmax(0, 1fr);
      }
    }
    /* ===== /达人分享独立页 CREATOR-SHARE-1 ===== */

    /* === 阶段4 功能卡 浅色横排 5 卡(PC4) === */
    .product-center-view .pc4-card-grid {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 14px;
      margin-top: 14px;
    }
    .product-center-view .pc4-card {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 12px;
      min-height: 0;
      padding: 16px 16px 18px;
      border: 1px solid rgba(226, 207, 160, .22);
      border-radius: 18px;
      background: linear-gradient(180deg, #ffffff 0%, #fbf7ef 100%);
      box-shadow: 0 18px 40px rgba(0, 0, 0, .28);
      transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    }
    .product-center-view .pc4-card:hover {
      transform: translateY(-3px);
      border-color: #d8bf86;
      box-shadow: 0 26px 60px rgba(0, 0, 0, .34);
    }
    .product-center-view .pc4-card-body {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .product-center-view .pc4-card-title {
      margin: 0;
      font-size: 17px;
      font-weight: 700;
      line-height: 1.25;
      color: #1a1c1a;
      letter-spacing: .01em;
    }
    .product-center-view .pc4-card-subs {
      display: flex;
      flex-direction: column;
      gap: 2px;
      margin: 0;
    }
    .product-center-view .pc4-card-subs span {
      font-size: 12.5px;
      line-height: 1.45;
      color: #7c7f78;
    }
    .product-center-view .pc4-card-thumb {
      position: relative;
      margin-top: auto;
      aspect-ratio: 4 / 3;
      border-radius: 14px;
      overflow: hidden;
      background: #f1ede4;
      border: 1px solid rgba(0, 0, 0, .06);
    }
    .product-center-view .pc4-card-photo {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .product-center-view .pc4-card-thumb-blank {
      border-style: dashed;
      border-color: rgba(0, 0, 0, .1);
      background: repeating-linear-gradient(135deg, #f4f0e8 0 10px, #efe9df 10px 20px);
    }
    .product-center-view .pc4-demo-tag {
      position: absolute;
      top: 8px;
      left: 8px;
      padding: 2px 9px;
      border-radius: 999px;
      background: rgba(10, 12, 10, .6);
      color: #f6f4ee;
      font-size: 11px;
      line-height: 1.6;
      letter-spacing: .04em;
      backdrop-filter: blur(2px);
    }
    .product-center-view .pc4-card-go {
      position: absolute;
      right: 16px;
      bottom: 16px;
      width: 42px;
      height: 42px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 0;
      border-radius: 50%;
      color: #ffffff;
      background: linear-gradient(135deg, #c9a86a 0%, #b8945a 100%);
      box-shadow: 0 8px 20px rgba(120, 90, 30, .35);
      cursor: pointer;
      transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
    }
    .product-center-view .pc4-card-go:hover {
      transform: scale(1.08);
      filter: brightness(1.05);
      box-shadow: 0 10px 26px rgba(120, 90, 30, .45);
    }
    .product-center-view .pc4-card-go:active { transform: scale(.96); }
    @media (max-width: 1180px) {
      .product-center-view .pc4-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    }
    @media (max-width: 760px) {
      .product-center-view .pc4-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (max-width: 460px) {
      .product-center-view .pc4-card-grid { grid-template-columns: minmax(0, 1fr); }
    }
    /* === /阶段4 功能卡 PC4 === */

    /* 5 卡圆形箭头改深色(对齐截图2) */
    .product-center-view .pc4-card-go {
      background: linear-gradient(135deg, #232521 0%, #0e100e 100%);
      box-shadow: 0 8px 20px rgba(0, 0, 0, .35);
    }
    .product-center-view .pc4-card-go:hover {
      box-shadow: 0 10px 26px rgba(0, 0, 0, .5);
    }

    /* === Banner V2 文字直接压图(对齐截图2,去半透明底) === */
    .product-center-view .hub-hero-banner-v2 { min-height: 380px; }
    .product-center-view .hub-hero-banner-v2 .hub-hero-content {
      max-width: 60%;
      background: transparent;
      border: 0;
      box-shadow: none;
      backdrop-filter: none;
      padding: 0;
      gap: 14px;
    }
    .product-center-view .hub-hero-banner-v2::before {
      background: linear-gradient(90deg, rgba(6,8,7,.90) 0%, rgba(6,8,7,.70) 34%, rgba(6,8,7,.16) 62%, rgba(6,8,7,0) 88%);
    }
    .product-center-view .hub-hero-banner-v2 h1 {
      margin: 0;
      font-size: clamp(30px, 3vw, 46px);
      font-weight: 800;
      line-height: 1.12;
      color: var(--ivory-warm);
    }
    .product-center-view .hub-hero-banner-v2 h1 .hero-title-accent {
      color: var(--gold-line);
      margin-left: .12em;
    }
    .product-center-view .hub-hero-banner-v2 p {
      margin: 0;
      max-width: 540px;
      color: rgba(246, 244, 238, .8);
      font-size: 14px;
      line-height: 1.55;
    }
    .product-center-view .hub-flow-v2 {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      margin-top: 10px;
      flex-wrap: nowrap;
    }
    .product-center-view .hub-flow-step {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 7px;
      flex: 0 1 auto;
      min-width: 86px;
    }
    .product-center-view .hub-flow-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 52px;
      height: 52px;
      border-radius: 50%;
      border: 1.5px solid rgba(226, 207, 160, .55);
      background: rgba(12, 16, 13, .35);
      color: var(--gold-line);
      font-style: normal;
    }
    .product-center-view .hub-flow-step strong {
      font-size: 14px;
      font-weight: 600;
      color: var(--ivory-warm);
      white-space: nowrap;
    }
    .product-center-view .hub-flow-step small {
      font-size: 11.5px;
      line-height: 1.35;
      color: rgba(246, 244, 238, .6);
      max-width: 110px;
    }
    .product-center-view .hub-flow-arrow {
      flex: 0 0 auto;
      width: 20px;
      height: 20px;
      margin-top: 16px;
      color: rgba(226, 207, 160, .6);
    }
    @media (max-width: 980px) {
      .product-center-view .hub-hero-banner-v2 .hub-hero-content { max-width: 100%; }
      .product-center-view .hub-flow-v2 { flex-wrap: wrap; justify-content: flex-start; }
      .product-center-view .hub-hero-banner-v2::before {
        background: linear-gradient(180deg, rgba(6,8,7,.78) 0%, rgba(6,8,7,.9) 100%);
      }
    }
    /* === /Banner V2 === */

    /* === 功能中心左栏:个人中心卡贴底 pc-4 === */
    .product-center-view .saas-nav {
      display: flex;
      flex-direction: column;
    }
    .product-center-view .saas-nav-personal {
      margin-top: auto;
    }
    /* === /个人中心卡贴底 === */

    /* === 功能中心 pc-5:对齐截图5 === */
    /* 平台条 v2:纯黑整条 + 强制单行真彩色 logo + 居中(无标签) */
    .product-center-view .hub-platform-strip-v2 {
      flex-wrap: nowrap;
      justify-content: center;
      gap: 8px;
      padding: 16px 18px;
      border-color: rgba(226, 207, 160, .14);
      background: linear-gradient(180deg, #050605 0%, #020302 100%);
      overflow-x: auto;
      scrollbar-width: none;
    }
    .product-center-view .hub-platform-strip-v2::-webkit-scrollbar { display: none; }
    .product-center-view .hub-platform-strip-v2 .hub-platform-list {
      flex: 0 1 auto;
      flex-wrap: nowrap;
      justify-content: center;
      gap: 7px;
    }
    .product-center-view .hub-platform-strip-v2 .hub-platform-chip {
      flex: 0 0 auto;
      padding: 6px 11px;
      font-size: 12px;
      white-space: nowrap;
      background: rgba(255, 255, 255, .04);
      border-color: rgba(255, 255, 255, .1);
    }
    .product-center-view .hub-platform-strip-v2 .hub-platform-chip:hover {
      border-color: rgba(226, 207, 160, .5);
      background: rgba(226, 207, 160, .12);
    }

    /* 卡5:4 图 2×2 网格缩略图(替代空白占位) */
    .product-center-view .pc4-card-thumb-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr 1fr;
      gap: 3px;
      background: #f1ede4;
    }
    .product-center-view .pc4-card-thumb-grid img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    /* 左栏 pc-5:纯黑变窄 + 金色高亮 active(仅功能中心,保留全部导航项) */
    /* pc-10:左栏黑金配色由「仅功能中心」推广到全部黑金 SaaS 视图
       (功能中心/超能作图/AI视频生成/落地页复刻/作品记录/达人分享/个人中心),
       覆盖原共享规则的墨绿底 + 作品记录自带的墨绿底,统一成截图1 的纯黑金 */
    :is(.product-center-view, .creator-share-view, .records-view, .image-studio-view, .video-studio-view, .personal-center-view) .saas-nav {
      background: linear-gradient(180deg, #0a0b0a 0%, #050605 100%);
      border-right: 1px solid rgba(226, 207, 160, .1);
      box-shadow: 12px 0 34px rgba(0, 0, 0, .34);
    }
    :is(.product-center-view, .creator-share-view, .records-view, .image-studio-view, .video-studio-view, .personal-center-view) .saas-nav-item.is-active {
      background: linear-gradient(120deg, rgba(201, 168, 106, .22), rgba(201, 168, 106, .08));
      border-color: rgba(226, 207, 160, .5);
      color: #f3ead7;
      box-shadow: inset 2px 0 0 #c9a86a;
    }
    :is(.product-center-view, .creator-share-view, .records-view, .image-studio-view, .video-studio-view, .personal-center-view) .saas-nav-item.is-active i {
      color: #c9a86a;
    }
    /* === /pc-5 === */

    /* === 功能中心 pc-7:截图2 平台条融入 banner + 截图3/4 白底卡片网格 === */
    /* Task2:平台条绝对定位到 banner 底部,透明渐隐融入背景图,毛玻璃 chip 保可读 */
    .product-center-view .hub-hero-banner-v2 { padding-bottom: 66px; }
    /* 新 banner 图(faceless)产品在画面底部大理石台面,裁切锚点下移让产品露出 */
    .product-center-view .hub-hero-banner-v2 .hub-hero-bg { object-position: center 82%; }
    .product-center-view .hub-platform-strip-merged {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 3;
      border: 0;
      border-radius: 0 0 24px 24px;
      background: linear-gradient(0deg, rgba(4,6,5,.74) 0%, rgba(4,6,5,.32) 62%, rgba(4,6,5,0) 100%);
      padding: 14px 18px 14px;
      justify-content: center;
    }
    .product-center-view .hub-platform-strip-merged .hub-platform-chip {
      background: rgba(10,12,10,.40);
      border-color: rgba(255,255,255,.16);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
    }
    .product-center-view .hub-platform-strip-merged .hub-platform-chip:hover {
      border-color: rgba(226,207,160,.6);
      background: rgba(226,207,160,.16);
    }
    /* 平台条左对齐 AIGC 文案(与 banner 内容同左内边距,不再居中) */
    .product-center-view .hub-platform-strip-merged {
      justify-content: flex-start;
      padding-left: clamp(24px, 3vw, 44px);
    }
    .product-center-view .hub-platform-strip-merged .hub-platform-list {
      justify-content: flex-start;
    }

    /* Task3:5 卡网格落在白色圆角底图上(对齐截图4),卡片自带边框+投影保持分离 */
    .product-center-view .pc4-card-grid {
      background: #ffffff;
      border: 1px solid rgba(226,207,160,.18);
      border-radius: 24px;
      padding: 22px;
      box-shadow: 0 24px 60px rgba(0,0,0,.16);
      margin-top: 18px;
    }
    @media (max-width: 980px) {
      .product-center-view .pc4-card-grid { padding: 16px; border-radius: 18px; }
      .product-center-view .hub-platform-strip-merged { justify-content: flex-start; }
    }

    /* Task4:数据栏复刻截图2 设计(左引导语 + 圆角图标徽标 + 横向「图标+大数字/小标签」组),文案沿用诚实版 */
    .product-center-view .hub-metrics-bar-v2 {
      display: flex;
      grid-template-columns: none;
      align-items: center;
      justify-content: flex-start;
      gap: 30px;
      flex-wrap: wrap;
    }
    .product-center-view .hub-metrics-intro {
      flex: 0 1 auto;
      min-width: 0;
    }
    .product-center-view .hub-metrics-intro strong {
      display: block;
      font-size: clamp(15px, 1.5vw, 19px);
      font-weight: 800;
      line-height: 1.32;
      letter-spacing: .01em;
      color: var(--ivory-warm);
    }
    .product-center-view .hub-metrics-bar-v2 .hub-metric-cell {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-items: initial;
      text-align: left;
      gap: 13px;
      flex: 0 0 auto;
      padding-left: 24px;
    }
    .product-center-view .hub-metrics-bar-v2 .hub-metric-cell::before,
    .product-center-view .hub-metrics-bar-v2 .hub-metric-cell + .hub-metric-cell::before {
      content: "";
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 1px;
      height: 42px;
      background: rgba(226, 207, 160, .18);
    }
    .product-center-view .hub-metric-icon {
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      border-radius: 13px;
      background: linear-gradient(135deg, rgba(201, 168, 106, .24), rgba(201, 168, 106, .07));
      border: 1px solid rgba(226, 207, 160, .32);
      color: var(--gold-line);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
    }
    .product-center-view .hub-metric-text {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .product-center-view .hub-metrics-bar-v2 .hub-metric-cell strong {
      font-size: clamp(22px, 2vw, 30px);
    }
    .product-center-view .hub-metrics-bar-v2 .hub-metric-text span {
      text-align: left;
    }
    @media (max-width: 720px) {
      .product-center-view .hub-metrics-bar-v2 { gap: 14px; }
      .product-center-view .hub-metrics-intro { flex: 1 1 100%; }
      .product-center-view .hub-metrics-bar-v2 .hub-metric-cell { padding-left: 0; flex: 1 1 auto; }
      .product-center-view .hub-metrics-bar-v2 .hub-metric-cell::before,
      .product-center-view .hub-metrics-bar-v2 .hub-metric-cell + .hub-metric-cell::before { display: none; }
    }
    /* === /pc-7 === */
    /* ===== 20260703-vs-oneclick · 一键出片流程(开工零表单/蓝图一页纸/产线大按钮) ===== */
    #videoStudioView .vs-ai-bar.is-hero {
      padding: 18px 20px;
      border: 1px solid rgba(8, 123, 109, .35);
      background: linear-gradient(180deg, #effbf6, #e6f5ee);
      box-shadow: 0 10px 24px rgba(8, 123, 109, .08);
    }
    #videoStudioView .vs-ai-bar.is-hero .btn { padding: 12px 24px; font-size: 15px; }
    #videoStudioView .vs-tag-row {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin: 12px 0 2px;
    }
    #videoStudioView .vs-tag-chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 12px;
      border-radius: 999px;
      border: 1px solid #ecdfca;
      background: #fffdf8;
      font-size: 12px;
      color: #31443b;
    }
    #videoStudioView .vs-tag-chip b { font-weight: 800; color: #9a8b6f; }
    #videoStudioView .vs-oneclick-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      flex-wrap: wrap;
      margin: 14px 0 4px;
      padding: 18px 20px;
      border: 1px solid rgba(8, 123, 109, .45);
      border-radius: 14px;
      background: linear-gradient(180deg, #effbf6, #e2f2e9);
      box-shadow: 0 14px 30px rgba(8, 123, 109, .10);
    }
    #videoStudioView .vs-oneclick-info { display: grid; gap: 6px; max-width: 660px; }
    #videoStudioView .vs-oneclick-info strong { color: #0c2b24; font-size: 15px; }
    #videoStudioView .vs-oneclick-info small { color: #3a443f; line-height: 1.7; }
    #videoStudioView .vs-oneclick-info small b { color: #087b6d; }
    #videoStudioView .vs-oneclick-btn { padding: 14px 26px; font-size: 16px; white-space: nowrap; }
    #videoStudioView .vs-oneclick-btn[disabled] { opacity: .55; cursor: not-allowed; }
    /* ===== /20260703-vs-oneclick ===== */
    /* ===== 20260703-vs-gallery · 爆款模板墙(开工屏交互形态B) ===== */
    #videoStudioView .vs-tpl-group { margin: 12px 0 6px; }
    #videoStudioView .vs-tpl-group-head {
      display: flex; align-items: baseline; gap: 10px; margin: 6px 2px 10px;
    }
    #videoStudioView .vs-tpl-group-head strong { font-size: 15px; color: #23332c; font-weight: 850; }
    #videoStudioView .vs-tpl-group-head span { font-size: 12px; color: #9a8b6f; }
    #videoStudioView .vs-tpl-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(264px, 1fr));
      gap: 12px;
    }
    #videoStudioView .vs-tpl-card {
      position: relative;
      display: flex; align-items: flex-start; gap: 12px;
      padding: 14px; text-align: left;
      border: 1px solid #ecdfca; border-radius: 14px;
      background: #fffdf8; cursor: pointer;
      transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
    }
    #videoStudioView .vs-tpl-card:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(60,45,20,.10); border-color: #d9c8a6; }
    #videoStudioView .vs-tpl-card.is-selected {
      border-color: #087b6d; box-shadow: 0 10px 26px rgba(8,123,109,.16);
      background: linear-gradient(180deg, #f2fbf7, #ffffff);
    }
    #videoStudioView .vs-tpl-cover {
      position: relative; flex: 0 0 auto;
      width: 52px; height: 52px; border-radius: 12px;
      display: grid; place-items: center; color: #fff;
      background: linear-gradient(135deg, #8a94a6, #5f6b80);
    }
    #videoStudioView .vs-tpl-card[data-tone="rose"]   .vs-tpl-cover { background: linear-gradient(135deg, #f39ab0, #d76a8a); }
    #videoStudioView .vs-tpl-card[data-tone="amber"]  .vs-tpl-cover { background: linear-gradient(135deg, #f4c266, #dd9a34); }
    #videoStudioView .vs-tpl-card[data-tone="teal"]   .vs-tpl-cover { background: linear-gradient(135deg, #5ec6b4, #1f9e8b); }
    #videoStudioView .vs-tpl-card[data-tone="violet"] .vs-tpl-cover { background: linear-gradient(135deg, #b39af3, #7e5fd0); }
    #videoStudioView .vs-tpl-card[data-tone="slate"]  .vs-tpl-cover { background: linear-gradient(135deg, #8a94a6, #566079); }
    #videoStudioView .vs-tpl-card[data-tone="warm"]   .vs-tpl-cover { background: linear-gradient(135deg, #e6a97e, #c9793f); }
    #videoStudioView .vs-tpl-hot {
      position: absolute; top: -8px; left: -8px;
      font-size: 10px; font-weight: 800; color: #7a3212;
      background: #ffe6c2; border: 1px solid #f4c98a; border-radius: 999px;
      padding: 1px 6px; white-space: nowrap;
    }
    #videoStudioView .vs-tpl-body { display: grid; gap: 4px; min-width: 0; }
    #videoStudioView .vs-tpl-name {
      display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
      font-size: 14px; font-weight: 800; color: #23332c;
    }
    #videoStudioView .vs-tpl-badge {
      font-size: 10px; font-weight: 700; color: #087b6d;
      background: #e3f4ef; border-radius: 999px; padding: 1px 7px;
    }
    #videoStudioView .vs-tpl-desc { font-size: 12px; line-height: 1.6; color: #6a6152; }
    #videoStudioView .vs-tpl-check {
      position: absolute; top: 10px; right: 10px;
      width: 20px; height: 20px; border-radius: 50%;
      display: grid; place-items: center; color: #fff; background: #087b6d;
    }
    /* ===== /20260703-vs-gallery ===== */
    /* ═════ 20260703-vs-canvas · 全景制片画布(深色制片室黑金) ═════ */
    #videoStudioView .vs-wb-body[data-vs-canvas="on"] { background: #0a100d; }
    #videoStudioView .vs-canvas {
      position: relative;
      min-height: 72vh;
      padding: 18px 20px 30px;
      border-radius: 16px;
      background:
        radial-gradient(rgba(212, 175, 55, .07) 1px, transparent 1px),
        radial-gradient(1200px 500px at 20% -10%, rgba(16, 64, 51, .55), transparent 60%),
        linear-gradient(180deg, #0d1512, #090f0c);
      background-size: 22px 22px, auto, auto;
      border: 1px solid rgba(212, 175, 55, .16);
    }
    /* 顶栏 */
    #videoStudioView .vs-cv-topbar {
      display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
      padding: 10px 14px; margin-bottom: 22px;
      border: 1px solid rgba(212, 175, 55, .22); border-radius: 12px;
      background: linear-gradient(180deg, rgba(20, 30, 25, .9), rgba(13, 20, 17, .9));
      box-shadow: 0 10px 26px rgba(0, 0, 0, .35);
    }
    #videoStudioView .vs-cv-title { display: flex; align-items: center; gap: 8px; color: #f2e7cf; font-weight: 850; }
    #videoStudioView .vs-cv-title i { color: #d4af37; }
    #videoStudioView .vs-cv-title span { color: #9fb2a6; font-weight: 600; font-size: 12px; }
    #videoStudioView .vs-cv-live { display: flex; align-items: center; gap: 7px; color: #e8c968; font-size: 12.5px; }
    #videoStudioView .vs-cv-topbar .btn { margin-left: auto; }
    /* 画布网格:蛇形生产流 ①② / ④③ / ⑤⑤ */
    #videoStudioView .vs-cv-board {
      display: grid; grid-template-columns: 1fr 1fr;
      grid-template-areas: "c1 c2" "c4 c3" "c5 c5";
      gap: 40px 48px; max-width: 1180px; margin: 0 auto;
    }
    #videoStudioView .vs-cv-card {
      position: relative; display: flex; flex-direction: column; gap: 10px;
      padding: 16px 18px; border-radius: 16px;
      border: 1px solid rgba(212, 175, 55, .22);
      background: linear-gradient(180deg, #16211b, #101914);
      box-shadow: 0 16px 34px rgba(0, 0, 0, .4);
      transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
    }
    #videoStudioView .vs-cv-card:hover { border-color: rgba(212, 175, 55, .5); transform: translateY(-2px); }
    #videoStudioView .vs-cv-card.is-focus { border-color: rgba(212, 175, 55, .65); box-shadow: 0 0 0 1px rgba(212, 175, 55, .35), 0 18px 40px rgba(0, 0, 0, .45); }
    #videoStudioView .vs-cv-head { display: flex; align-items: center; gap: 8px; color: #f2e7cf; }
    #videoStudioView .vs-cv-head i { color: #d4af37; }
    #videoStudioView .vs-cv-no {
      display: inline-flex; align-items: center; justify-content: center;
      width: 24px; height: 24px; border-radius: 999px; font-size: 13px; font-weight: 900;
      color: #10190f; background: linear-gradient(180deg, #ecd58a, #c9a03a);
      box-shadow: 0 3px 10px rgba(212, 175, 55, .35);
    }
    #videoStudioView .vs-cv-state {
      margin-left: auto; font-size: 11.5px; font-weight: 800; padding: 3px 10px; border-radius: 999px;
      color: #93a89b; border: 1px solid rgba(148, 168, 155, .3); background: rgba(148, 168, 155, .08);
    }
    #videoStudioView .vs-cv-card.is-done .vs-cv-state { color: #6fe3b2; border-color: rgba(111, 227, 178, .4); background: rgba(111, 227, 178, .1); }
    #videoStudioView .vs-cv-card.is-busy .vs-cv-state { color: #e8c968; border-color: rgba(232, 201, 104, .45); background: rgba(232, 201, 104, .1); animation: vsCvPulse 1.4s ease-in-out infinite; }
    @keyframes vsCvPulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
    #videoStudioView .vs-cv-body { display: grid; gap: 8px; color: #b9c6bc; font-size: 12.5px; line-height: 1.7; }
    #videoStudioView .vs-cv-body p { margin: 0; }
    #videoStudioView .vs-cv-hook { color: #f0e6cd; font-weight: 700; font-size: 13.5px; }
    #videoStudioView .vs-cv-thumbs { display: flex; gap: 8px; flex-wrap: wrap; }
    #videoStudioView .vs-cv-thumb {
      position: relative; width: 52px; height: 52px; border-radius: 10px; overflow: hidden;
      border: 1px solid rgba(212, 175, 55, .3); background: #0b110e;
      display: inline-flex; align-items: center; justify-content: center; color: #5f7268;
    }
    #videoStudioView .vs-cv-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
    #videoStudioView .vs-cv-thumb.is-more { color: #d4af37; font-weight: 800; font-size: 12px; }
    #videoStudioView .vs-cv-thumb.is-warn { border-color: #e8a13c; }
    #videoStudioView .vs-cv-thumb.is-warn i { position: absolute; right: 2px; bottom: 2px; color: #e8a13c; filter: drop-shadow(0 0 4px rgba(0,0,0,.8)); }
    #videoStudioView .vs-cv-tpl { display: flex; gap: 10px; align-items: flex-start; }
    #videoStudioView .vs-cv-tpl-ico {
      flex: 0 0 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center;
      color: #10190f; background: linear-gradient(160deg, #ecd58a, #c9a03a);
    }
    #videoStudioView .vs-cv-tpl strong { color: #f2e7cf; display: block; }
    #videoStudioView .vs-cv-tpl small { color: #9fb2a6; line-height: 1.6; display: block; margin-top: 2px; }
    #videoStudioView .vs-cv-foot { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; }
    #videoStudioView .vs-cv-btn {
      border: 1px solid rgba(212, 175, 55, .4); background: rgba(212, 175, 55, .1); color: #ecd58a;
    }
    #videoStudioView .vs-cv-btn:hover { background: rgba(212, 175, 55, .2); }
    #videoStudioView .vs-cv-btn.is-ghost { border-color: rgba(148, 168, 155, .3); background: transparent; color: #a9bcb0; }
    #videoStudioView .vs-cv-cta {
      padding: 11px 20px; font-size: 14.5px;
      background: linear-gradient(180deg, #ecd58a, #c9a03a); color: #10190f; border: none;
      box-shadow: 0 10px 26px rgba(212, 175, 55, .28);
    }
    #videoStudioView .vs-cv-cta[disabled] { opacity: .45; cursor: not-allowed; }
    #videoStudioView .vs-cv-player { border-radius: 12px; overflow: hidden; border: 1px solid rgba(212, 175, 55, .25); background: #05080a; }
    #videoStudioView .vs-cv-player video { width: 100%; max-height: 300px; display: block; }
    #videoStudioView .vs-cv-player.is-empty {
      display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
      min-height: 120px; color: #5f7268; font-size: 12.5px;
    }
    #videoStudioView .vs-cv-budget { color: #9fb2a6; font-size: 12px; }
    #videoStudioView .vs-cv-card .vs-job-status:empty { display: none; }
    /* 成片卡里的进度条组件在深底上的适配 */
    #videoStudioView .vs-cv-card .vs-progress-hint, #videoStudioView .vs-cv-card .vs-progress-err { color: #b9c6bc; }
    /* 连线箭头:①→② / ②↓③ / ③→④(向左) / ④↓⑤ */
    #videoStudioView .vs-cv-card::before, #videoStudioView .vs-cv-card::after { pointer-events: none; }
    #videoStudioView .vs-cv-card[data-cv="c1"]::after,
    #videoStudioView .vs-cv-card[data-cv="c3"]::after {
      content: "➜"; position: absolute; top: 50%; font-size: 22px;
      color: rgba(212, 175, 55, .85); text-shadow: 0 0 14px rgba(212, 175, 55, .5);
    }
    #videoStudioView .vs-cv-card[data-cv="c1"]::after { right: -36px; transform: translateY(-50%); }
    #videoStudioView .vs-cv-card[data-cv="c3"]::after { left: -36px; transform: translateY(-50%) rotate(180deg); }
    #videoStudioView .vs-cv-card[data-cv="c2"]::before,
    #videoStudioView .vs-cv-card[data-cv="c4"]::before {
      content: "➜"; position: absolute; bottom: -34px; left: 50%; transform: translateX(-50%) rotate(90deg);
      font-size: 22px; color: rgba(212, 175, 55, .85); text-shadow: 0 0 14px rgba(212, 175, 55, .5);
    }
    /* 抽屉:深画布上的奶油纸,原有浅色组件样式原样生效 */
    #videoStudioView .vs-cv-scrim { position: fixed; inset: 0; z-index: 70; background: rgba(4, 8, 6, .55); backdrop-filter: blur(2px); }
    #videoStudioView .vs-cv-drawer {
      position: fixed; top: 0; right: 0; bottom: 0; z-index: 71;
      width: min(680px, 94vw); display: flex; flex-direction: column;
      background: #fdf9f0; border-left: 1px solid rgba(212, 175, 55, .4);
      box-shadow: -26px 0 60px rgba(0, 0, 0, .5);
      animation: vsCvSlideIn .22s ease;
    }
    @keyframes vsCvSlideIn { from { transform: translateX(30px); opacity: .4; } to { transform: none; opacity: 1; } }
    #videoStudioView .vs-cv-drawer-head {
      display: flex; align-items: center; justify-content: space-between; gap: 10px;
      padding: 14px 18px; border-bottom: 1px solid #ecdfca; background: #fffdf8;
      font-weight: 850; color: #31443b;
    }
    #videoStudioView .vs-cv-drawer-close {
      border: 1px solid #ecdfca; background: #fff; border-radius: 8px; padding: 6px; cursor: pointer;
      color: #6b7c72; display: inline-flex; align-items: center;
    }
    #videoStudioView .vs-cv-drawer-close:hover { color: #31443b; border-color: #d9c9a8; }
    #videoStudioView .vs-cv-drawer-body { flex: 1; overflow-y: auto; padding: 16px 18px 30px; }
    /* 抽屉内嵌原 stage:去外壳页眉页脚(上一步/下一步在画布语境无意义) */
    #videoStudioView .vs-cv-embed .vs-stage { border: none; box-shadow: none; background: transparent; padding: 0; margin: 0; }
    #videoStudioView .vs-cv-embed .vs-stage-head, #videoStudioView .vs-cv-embed .vs-stage-foot { display: none; }
    /* 响应式:窄屏单列 ①→⑤,侧向箭头全部转向下 */
    @media (max-width: 920px) {
      #videoStudioView .vs-canvas { padding: 12px 12px 22px; }
      #videoStudioView .vs-cv-board { grid-template-columns: 1fr; grid-template-areas: "c1" "c2" "c3" "c4" "c5"; gap: 34px; }
      #videoStudioView .vs-cv-card[data-cv="c1"]::after, #videoStudioView .vs-cv-card[data-cv="c3"]::after {
        top: auto; right: auto; bottom: -30px; left: 50%; transform: translateX(-50%) rotate(90deg);
      }
      #videoStudioView .vs-cv-card[data-cv="c2"]::before, #videoStudioView .vs-cv-card[data-cv="c4"]::before { bottom: -30px; }
      #videoStudioView .vs-cv-topbar .btn { margin-left: 0; width: 100%; justify-content: center; }
    }
    /* ═════ /20260703-vs-canvas ═════ */
    /* ═════ 20260703-vs-room · 放映室(左制作台+右放映区·真数据装机版) ═════ */
    #videoStudioView .vs-tpl-cover.has-img { padding: 0; overflow: hidden; }
    #videoStudioView .vs-tpl-cover.has-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
    #videoStudioView .vs-room {
      position: relative; border-radius: 16px; padding: 16px 20px 30px;
      color: #F2EFE6; font-size: 14px;
      background:
        radial-gradient(1100px 460px at 18% -8%, rgba(38, 46, 60, .5), transparent 62%),
        linear-gradient(180deg, #101218, #0C0E12);
      border: 1px solid rgba(235, 225, 200, .12);
    }
    #videoStudioView .vs-room::after {
      content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .045; border-radius: inherit;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
    }
    #videoStudioView .vs-rm-brand { display: flex; align-items: baseline; gap: 12px; padding: 6px 2px 14px; border-bottom: 1px solid rgba(235,225,200,.09); }
    #videoStudioView .vs-rm-mark { font-family: "Songti SC","STSong","Noto Serif CJK SC",serif; font-size: 21px; font-weight: 700; letter-spacing: .14em; }
    #videoStudioView .vs-rm-mark em { font-style: normal; color: #E3C878; }
    #videoStudioView .vs-rm-brand small { color: #8E93A3; letter-spacing: .24em; font-size: 10px; }
    #videoStudioView .vs-rm-brand-engine { margin-left: auto; font-size: 12px; color: #8E93A3; border: 1px solid rgba(235,225,200,.16); border-radius: 999px; padding: 4px 12px; font-variant-numeric: tabular-nums; }
    #videoStudioView .vs-rm-main { display: grid; grid-template-columns: 404px 1fr; gap: 24px; padding-top: 18px; position: relative; z-index: 1; }
    /* 左·制作台 */
    #videoStudioView .vs-rm-deck {
      display: flex; flex-direction: column; gap: 17px; padding: 18px 18px 20px; border-radius: 18px;
      background: linear-gradient(180deg, #15171E, #111318); border: 1px solid rgba(235,225,200,.10);
      box-shadow: 0 22px 54px rgba(0,0,0,.35);
    }
    #videoStudioView .vs-rm-eyebrow { display: flex; align-items: center; gap: 10px; font-size: 11px; letter-spacing: .3em; color: #8E93A3; }
    #videoStudioView .vs-rm-eyebrow::after { content: ""; flex: 1; height: 1px; background: rgba(235,225,200,.10); }
    #videoStudioView .vs-rm-eyebrow span { letter-spacing: 0; font-size: 12px; }
    #videoStudioView .vs-rm-eyebrow span.is-ok { color: #7BD9A9; }
    #videoStudioView .vs-rm-label { display: flex; align-items: baseline; gap: 9px; font-size: 14.5px; font-weight: 700; color: #F2EFE6; margin-bottom: 9px; }
    #videoStudioView .vs-rm-label small { color: #8E93A3; font-weight: 400; font-size: 11.5px; }
    #videoStudioView .vs-rm-hint { font-size: 12px; color: #8E93A3; margin: 7px 0 0; line-height: 1.7; }
    #videoStudioView .vs-rm-hint b { color: #E3C878; font-weight: 600; }
    #videoStudioView .vs-rm-hint.is-warn { color: #E8A83C; }
    #videoStudioView .vs-rm-goals { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
    #videoStudioView .vs-rm-goal { all: unset; box-sizing: border-box; cursor: pointer; text-align: center; padding: 8px 4px 7px; border-radius: 12px; border: 1px solid rgba(235,225,200,.16); transition: border-color .15s ease, background .15s ease; }
    #videoStudioView .vs-rm-goal b { display: block; font-size: 12.5px; color: #F2EFE6; }
    #videoStudioView .vs-rm-goal span { font-size: 10px; color: #8E93A3; }
    #videoStudioView .vs-rm-goal:hover { border-color: #B08D3F; }
    #videoStudioView .vs-rm-goal.is-sel { border-color: #E3C878; background: rgba(227,200,120,.08); }
    #videoStudioView .vs-rm-goal.is-sel span { color: #E3C878; }
    #videoStudioView .vs-rm-shots { display: flex; gap: 9px; flex-wrap: wrap; }
    #videoStudioView .vs-rm-shot { position: relative; width: 68px; height: 68px; border-radius: 12px; overflow: hidden; border: 1px solid rgba(235,225,200,.18); flex: none; }
    #videoStudioView .vs-rm-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
    #videoStudioView .vs-rm-shot-x { all: unset; cursor: pointer; position: absolute; top: 3px; right: 3px; width: 18px; height: 18px; border-radius: 99px; background: rgba(8,9,12,.75); color: #F2EFE6; display: flex; align-items: center; justify-content: center; }
    #videoStudioView .vs-rm-shot-x:hover { background: rgba(200,60,60,.85); }
    #videoStudioView .vs-rm-shot.is-add { display: flex; align-items: center; justify-content: center; color: #8E93A3; font-size: 21px; cursor: pointer; border-style: dashed; background: #1C1F28; }
    #videoStudioView .vs-rm-shot.is-add:hover { color: #E3C878; border-color: #B08D3F; }
    #videoStudioView .vs-rm-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 9px; }
    #videoStudioView .vs-rm-tab { all: unset; cursor: pointer; font-size: 11.5px; padding: 4px 11px; border-radius: 999px; border: 1px solid rgba(235,225,200,.12); color: #8E93A3; }
    #videoStudioView .vs-rm-tab:hover { color: #F2EFE6; }
    #videoStudioView .vs-rm-tab.is-sel { border-color: #E3C878; color: #E3C878; background: rgba(227,200,120,.07); }
    #videoStudioView .vs-rm-reel { display: grid; grid-auto-flow: column; grid-auto-columns: 132px; gap: 11px; overflow-x: auto; padding: 2px 2px 10px; scrollbar-width: thin; }
    #videoStudioView .vs-rm-reel::-webkit-scrollbar { height: 6px; }
    #videoStudioView .vs-rm-reel::-webkit-scrollbar-thumb { background: #1C1F28; border-radius: 99px; }
    #videoStudioView .vs-rm-tpl { position: relative; margin: 0; height: 188px; border-radius: 13px; overflow: hidden; border: 1px solid rgba(235,225,200,.12); cursor: pointer; background: #1C1F28; transition: transform .16s ease, border-color .16s ease; }
    #videoStudioView .vs-rm-tpl img { width: 100%; height: 100%; object-fit: cover; display: block; }
    #videoStudioView .vs-rm-tpl:hover { transform: translateY(-2px); border-color: rgba(235,225,200,.28); }
    #videoStudioView .vs-rm-tpl-ico { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #E3C878; background: radial-gradient(240px 180px at 50% 30%, rgba(227,200,120,.16), transparent 70%); }
    #videoStudioView .vs-rm-tpl figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 9px 8px; background: linear-gradient(180deg, transparent, rgba(8,9,12,.94) 58%); }
    #videoStudioView .vs-rm-tpl figcaption b { display: block; font-size: 11.5px; line-height: 1.35; color: #F2EFE6; }
    #videoStudioView .vs-rm-tpl figcaption span { font-size: 9.5px; color: #E3C878; letter-spacing: .04em; }
    #videoStudioView .vs-rm-hot { position: absolute; top: 7px; left: 7px; font-size: 9.5px; background: rgba(8,9,12,.75); border: 1px solid rgba(227,200,120,.5); color: #E3C878; padding: 2px 7px; border-radius: 99px; }
    #videoStudioView .vs-rm-check { position: absolute; top: 7px; right: 7px; width: 20px; height: 20px; border-radius: 99px; background: #E3C878; color: #0E0F13; display: flex; align-items: center; justify-content: center; }
    #videoStudioView .vs-rm-tpl.is-sel { border-color: #E3C878; box-shadow: 0 0 0 1px #E3C878, 0 10px 26px rgba(227,200,120,.16); }
    #videoStudioView .vs-rm-casts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
    #videoStudioView .vs-rm-cast { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 12px; border: 1px solid rgba(235,225,200,.16); }
    #videoStudioView .vs-rm-cast img, #videoStudioView .vs-rm-cast-ph { width: 32px; height: 32px; border-radius: 9px; object-fit: cover; flex: none; }
    #videoStudioView .vs-rm-cast-ph { background: #1C1F28; display: inline-flex; align-items: center; justify-content: center; color: #8E93A3; }
    #videoStudioView .vs-rm-cast b { display: block; font-size: 11.5px; color: #F2EFE6; line-height: 1.3; }
    #videoStudioView .vs-rm-cast small { font-size: 9.5px; color: #8E93A3; }
    #videoStudioView .vs-rm-cast:hover { border-color: #B08D3F; }
    #videoStudioView .vs-rm-cast.is-sel { border-color: #E3C878; background: rgba(227,200,120,.07); }
    #videoStudioView .vs-rm-specs { display: flex; flex-wrap: wrap; gap: 7px; }
    #videoStudioView .vs-rm-spec { all: unset; cursor: pointer; font-size: 11.5px; padding: 5px 12px; border-radius: 999px; border: 1px solid rgba(235,225,200,.12); color: #8E93A3; font-variant-numeric: tabular-nums; }
    #videoStudioView .vs-rm-spec:hover { color: #F2EFE6; }
    #videoStudioView .vs-rm-spec.is-sel { border-color: rgba(235,225,200,.3); color: #F2EFE6; background: #1C1F28; }
    #videoStudioView .vs-rm-spec.is-link { color: #E3C878; border-color: rgba(227,200,120,.3); }
    #videoStudioView .vs-rm-ctabox { display: flex; flex-direction: column; gap: 9px; margin-top: 2px; }
    #videoStudioView .vs-rm-takes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    #videoStudioView .vs-rm-take { all: unset; box-sizing: border-box; cursor: pointer; text-align: center; padding: 7px 8px; border-radius: 12px; border: 1px solid rgba(235,225,200,.16); font-size: 10.5px; color: #8E93A3; }
    #videoStudioView .vs-rm-take b { display: block; font-size: 12.5px; color: #F2EFE6; }
    #videoStudioView .vs-rm-take.is-sel { border-color: #E3C878; background: rgba(227,200,120,.08); }
    #videoStudioView .vs-rm-take.is-sel b { color: #E3C878; }
    #videoStudioView .vs-rm-roll {
      all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px;
      padding: 15px 10px; border-radius: 14px; font-size: 17px; font-weight: 800; letter-spacing: .3em; text-indent: .3em; color: #141005;
      background: linear-gradient(180deg, #F2DF9F, #DAB860 55%, #C29C42);
      box-shadow: 0 16px 38px rgba(217,183,95,.24), inset 0 1px 0 rgba(255,255,255,.5);
    }
    #videoStudioView .vs-rm-roll:hover { filter: brightness(1.06); }
    #videoStudioView .vs-rm-roll:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
    #videoStudioView .vs-rm-roll[disabled] { opacity: .45; cursor: not-allowed; filter: grayscale(.3); }
    #videoStudioView .vs-rm-ctabox small { text-align: center; color: #8E93A3; font-size: 11.5px; }
    #videoStudioView .vs-rm-ctabox small b { color: #F2EFE6; font-weight: 600; }
    #videoStudioView .vs-rm-planbtn { all: unset; cursor: pointer; text-align: center; padding: 9px 0; border: 1px solid rgba(235,225,200,.2); border-radius: 11px; font-size: 12.5px; color: #F2EFE6; letter-spacing: .08em; }
    #videoStudioView .vs-rm-planbtn:hover { border-color: #E3C878; color: #E3C878; }
    #videoStudioView .vs-rm-planbtn[disabled] { opacity: .4; cursor: not-allowed; }
    /* 右·放映区 */
    /* vs-room6:min-width:0 防画布网格的最小内容宽撑爆 grid 列(grid item 默认 min-width:auto 会横向溢出) */
    #videoStudioView .vs-rm-stage { display: flex; flex-direction: column; gap: 16px; min-height: 620px; min-width: 0; }
    #videoStudioView .vs-rm-steps { display: flex; align-items: center; justify-content: center; gap: 0; padding-top: 4px; }
    #videoStudioView .vs-rm-step { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #8E93A3; font-variant-numeric: tabular-nums; }
    #videoStudioView .vs-rm-step-dot { width: 9px; height: 9px; border-radius: 99px; border: 1px solid rgba(235,225,200,.3); }
    #videoStudioView .vs-rm-step.is-done { color: #F2EFE6; }
    #videoStudioView .vs-rm-step.is-done .vs-rm-step-dot { background: #7BD9A9; border-color: #7BD9A9; box-shadow: 0 0 8px rgba(123,217,169,.5); }
    #videoStudioView .vs-rm-step.is-busy { color: #E3C878; }
    #videoStudioView .vs-rm-step.is-busy .vs-rm-step-dot { background: #E3C878; border-color: #E3C878; animation: vsCvPulse 1.4s ease-in-out infinite; }
    #videoStudioView .vs-rm-step-line { width: 64px; height: 1px; background: rgba(235,225,200,.16); margin: 0 13px; }
    #videoStudioView .vs-rm-live { display: flex; align-items: center; justify-content: center; gap: 8px; color: #E8C968; font-size: 12.5px; }
    #videoStudioView .vs-rm-theater { position: relative; display: flex; align-items: center; justify-content: center; padding: 6px 0 2px; }
    #videoStudioView .vs-rm-glow { position: absolute; bottom: -14px; left: 50%; transform: translateX(-50%); width: 540px; height: 160px; background: radial-gradient(ellipse at center, rgba(227,200,120,.15), transparent 65%); pointer-events: none; }
    #videoStudioView .vs-rm-phone {
      position: relative; margin: 0; max-width: 92%; border-radius: 30px; overflow: hidden;
      border: 1px solid rgba(235,225,200,.22); background: #05070a;
      box-shadow: 0 32px 84px rgba(0,0,0,.6), 0 0 0 6px #07080b, 0 0 0 7px rgba(227,200,120,.2);
    }
    #videoStudioView .vs-rm-phone video { width: 100%; height: 100%; object-fit: contain; display: block; background: #05070a; }
    #videoStudioView .vs-rm-phone-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: #5d6570; font-size: 12.5px; }
    #videoStudioView .vs-rm-rec { position: absolute; top: 11px; left: 11px; display: flex; align-items: center; gap: 7px; font-size: 11px; background: rgba(8,9,12,.7); padding: 4px 11px; border-radius: 99px; color: #F2EFE6; }
    #videoStudioView .vs-rm-rec i { width: 7px; height: 7px; border-radius: 99px; }
    #videoStudioView .vs-rm-rec.is-ok i { background: #7BD9A9; box-shadow: 0 0 8px #7BD9A9; }
    #videoStudioView .vs-rm-rec.is-busy i { background: #e85c5c; box-shadow: 0 0 8px #e85c5c; animation: vsCvPulse 1.2s ease-in-out infinite; }
    #videoStudioView .vs-rm-ver { position: absolute; top: 11px; right: 11px; font-size: 11px; background: rgba(8,9,12,.7); padding: 4px 11px; border-radius: 99px; color: #E3C878; }
    #videoStudioView .vs-rm-phonemeta { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 13px 11px; background: linear-gradient(180deg, transparent, rgba(7,8,11,.9)); font-size: 12px; display: flex; justify-content: space-between; align-items: center; pointer-events: none; }
    #videoStudioView .vs-rm-phonemeta b { font-variant-numeric: tabular-nums; color: #F2EFE6; }
    #videoStudioView .vs-rm-phonemeta a { color: #E3C878; text-decoration: none; pointer-events: auto; }
    #videoStudioView .vs-rm-jobstatus { max-width: 640px; margin: 0 auto; width: 100%; }
    #videoStudioView .vs-rm-jobstatus:empty { display: none; }
    #videoStudioView .vs-rm-jobstatus .vs-progress-hint, #videoStudioView .vs-rm-jobstatus .vs-progress-err { color: #b9c1cc; }
    #videoStudioView .vs-rm-lower { display: grid; grid-template-columns: 1fr 330px; gap: 18px; align-items: start; }
    #videoStudioView .vs-rm-card { display: flex; flex-direction: column; gap: 10px; padding: 15px 16px; border-radius: 15px; background: linear-gradient(180deg, #15171E, #111318); border: 1px solid rgba(235,225,200,.10); }
    #videoStudioView .vs-rm-refrow { display: flex; gap: 9px; flex-wrap: wrap; }
    #videoStudioView .vs-rm-ref { all: unset; box-sizing: border-box; cursor: pointer; position: relative; width: 62px; height: 62px; border-radius: 10px; overflow: hidden; border: 1px solid rgba(235,225,200,.18); flex: none; display: inline-flex; align-items: center; justify-content: center; color: #5d6570; background: #1C1F28; }
    #videoStudioView .vs-rm-ref img { width: 100%; height: 100%; object-fit: cover; display: block; }
    #videoStudioView .vs-rm-ref > span { position: absolute; left: 0; right: 0; bottom: 0; font-size: 8.5px; text-align: center; background: rgba(8,9,12,.8); color: #8E93A3; padding: 1px 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    #videoStudioView .vs-rm-ref.is-real { border-color: rgba(123,217,169,.55); }
    #videoStudioView .vs-rm-ref.is-real > span { color: #7BD9A9; }
    #videoStudioView .vs-rm-ref.is-warn { border-color: rgba(232,168,60,.65); }
    #videoStudioView .vs-rm-ref.is-warn > span { color: #E8A83C; }
    #videoStudioView .vs-rm-ref.is-empty { cursor: default; flex-direction: column; gap: 3px; }
    #videoStudioView .vs-rm-cardacts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
    #videoStudioView .vs-rm-card .btn-outline { border-color: rgba(227,200,120,.4); color: #ecd58a; background: rgba(227,200,120,.08); }
    #videoStudioView .vs-rm-card .btn-ghost { color: #a9b2bc; }
    #videoStudioView .vs-rm-gates { display: flex; flex-wrap: wrap; gap: 6px; }
    #videoStudioView .vs-rm-gate { all: unset; cursor: pointer; font-size: 10px; padding: 3px 9px; border-radius: 99px; border: 1px solid rgba(235,225,200,.16); color: #8E93A3; }
    #videoStudioView .vs-rm-gate:hover { color: #F2EFE6; }
    #videoStudioView .vs-rm-gate.is-ok { border-color: rgba(123,217,169,.45); color: #7BD9A9; }
    #videoStudioView .vs-rm-vrow { display: flex; gap: 9px; flex-wrap: wrap; }
    #videoStudioView .vs-rm-vthumb { all: unset; box-sizing: border-box; cursor: pointer; position: relative; width: 60px; height: 92px; border-radius: 10px; overflow: hidden; border: 1px solid rgba(235,225,200,.2); flex: none; background: #05070a; }
    #videoStudioView .vs-rm-vthumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
    #videoStudioView .vs-rm-vthumb > span { position: absolute; left: 0; right: 0; bottom: 0; font-size: 8.5px; text-align: center; background: rgba(8,9,12,.82); color: #E3C878; padding: 1px 0; }
    #videoStudioView .vs-rm-vthumb.is-active { border-color: #E3C878; box-shadow: 0 0 0 1px #E3C878; }
    #videoStudioView .vs-rm-vadd { all: unset; box-sizing: border-box; cursor: pointer; width: 60px; height: 92px; border-radius: 10px; border: 1px dashed rgba(235,225,200,.25); display: inline-flex; flex-direction: column; gap: 3px; align-items: center; justify-content: center; color: #8E93A3; font-size: 9.5px; flex: none; text-align: center; }
    #videoStudioView .vs-rm-vadd b { font-size: 16px; font-weight: 400; }
    #videoStudioView .vs-rm-vadd:hover { color: #E3C878; border-color: #B08D3F; }
    #videoStudioView .vs-rm-vadd[disabled] { opacity: .4; cursor: not-allowed; }
    @media (max-width: 1080px) {
      #videoStudioView .vs-rm-main { grid-template-columns: 1fr; }
      #videoStudioView .vs-rm-lower { grid-template-columns: 1fr; }
      #videoStudioView .vs-rm-step-line { width: 22px; margin: 0 8px; }
      #videoStudioView .vs-rm-goals { grid-template-columns: repeat(2, 1fr); }
      #videoStudioView .vs-rm-casts { grid-template-columns: 1fr; }
    }
    /* ═════ /20260703-vs-room ═════ */
    /* ═════ 20260703-vs-room2 · 两段式确认+模特选项+深色高级设置 ═════ */
    #videoStudioView .vs-rm-modelrow { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 9px; }
    #videoStudioView .vs-rm-model { all: unset; box-sizing: border-box; cursor: pointer; position: relative; width: 54px; height: 54px; border-radius: 11px; overflow: hidden; border: 1px solid rgba(235,225,200,.2); flex: none; display: inline-flex; align-items: center; justify-content: center; color: #8E93A3; background: #1C1F28; }
    /* 模特缩略图放大镜(vs-chatrail5 用户点名):点选与放大分离,hover 出角标,触屏常显 */
    #videoStudioView .vs-rm-model-pick { all: unset; box-sizing: border-box; cursor: pointer; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
    #videoStudioView .vs-rm-model-zoom { all: unset; box-sizing: border-box; cursor: zoom-in; position: absolute; top: 2px; right: 2px; width: 19px; height: 19px; border-radius: 6px; display: flex; align-items: center; justify-content: center; background: rgba(14,15,19,.74); color: #E3C878; opacity: 0; transition: opacity .15s ease; z-index: 1; }
    #videoStudioView .vs-rm-model:hover .vs-rm-model-zoom, #videoStudioView .vs-rm-model-zoom:focus-visible { opacity: 1; }
    @media (hover: none) { #videoStudioView .vs-rm-model-zoom { opacity: .85; } }
    /* 「这一步有什么用」?角标与讲解条(vs-chatrail6):点开讲清每个选择影响什么 */
    #videoStudioView .vs-rm-help { all: unset; box-sizing: border-box; cursor: help; display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; border-radius: 99px; border: 1px solid rgba(227,200,120,.42); color: #E3C878; font-size: 11px; font-weight: 700; margin-left: 7px; vertical-align: middle; flex: none; }
    #videoStudioView .vs-rm-help:hover, #videoStudioView .vs-rm-help.is-on { background: #E3C878; color: #141005; border-color: #E3C878; }
    #videoStudioView .vs-rm-helptip { margin: 6px 0 2px; padding: 10px 13px; border-radius: 10px; border: 1px solid rgba(227,200,120,.22); background: rgba(227,200,120,.05); color: #d6dae3; font-size: 12.5px; line-height: 1.8; }
    #videoStudioView .vs-rm-panel .vs-rm-helptip { margin: 0 4px 6px; }
    /* ⑤ 声音块(2026-07-05):口播/字幕开关段 + 背景音乐预设 chips,按带货风格智能默认 */
    #videoStudioView .vs-audio-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
    #videoStudioView .vs-audio-seg { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; }
    #videoStudioView .vs-audio-lab { font-size: 12px; color: #8E93A3; flex: none; }
    #videoStudioView .vs-audio-btns { display: inline-flex; border: 1px solid rgba(227,200,120,.28); border-radius: 9px; overflow: hidden; }
    #videoStudioView .vs-audio-opt { all: unset; box-sizing: border-box; cursor: pointer; padding: 5px 14px; font-size: 12px; color: #cfd3de; transition: background .15s ease, color .15s ease; }
    #videoStudioView .vs-audio-opt.is-sel { background: #E3C878; color: #141005; font-weight: 700; }
    #videoStudioView .vs-audio-opt:not(.is-sel):hover { color: #E3C878; }
    #videoStudioView .vs-audio-music { margin-top: 10px; }
    #videoStudioView .vs-audio-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
    #videoStudioView .vs-audio-chip { all: unset; box-sizing: border-box; cursor: pointer; padding: 5px 11px; border-radius: 8px; border: 1px solid rgba(227,200,120,.26); font-size: 12px; color: #cfd3de; transition: border-color .15s ease, background .15s ease, color .15s ease; }
    #videoStudioView .vs-audio-chip.is-sel { background: rgba(227,200,120,.16); border-color: #E3C878; color: #E3C878; font-weight: 600; }
    #videoStudioView .vs-audio-chip:not(.is-sel):hover { border-color: rgba(227,200,120,.5); }
    /* 语言过期提示条(2026-07-05):改了视频语言→提示脚本台词还是旧语言,一键快速换(只重译台词字幕) */
    #videoStudioView .vs-lang-warn { display: flex; align-items: center; gap: 10px; margin: 8px 0 2px; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(227,200,120,.4); background: rgba(227,200,120,.08); }
    #videoStudioView .vs-lang-warn > i { color: #E3C878; flex: none; }
    #videoStudioView .vs-lang-warn-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
    #videoStudioView .vs-lang-warn-txt b { color: #E3C878; font-size: 12.5px; font-weight: 700; }
    #videoStudioView .vs-lang-warn-txt span { color: #cfd3de; font-size: 12px; line-height: 1.5; }
    #videoStudioView .vs-lang-switch { all: unset; box-sizing: border-box; cursor: pointer; flex: none; padding: 7px 13px; border-radius: 9px; font-size: 12px; font-weight: 700; color: #141005; background: linear-gradient(180deg, #F2DF9F, #DAB860 55%, #C29C42); text-align: center; }
    #videoStudioView .vs-lang-switch:hover { filter: brightness(1.06); }
    #videoStudioView .vs-lang-switch[disabled] { opacity: .55; cursor: wait; filter: grayscale(.3); }
    #videoStudioView .vs-rm-model img { width: 100%; height: 100%; object-fit: cover; display: block; }
    #videoStudioView .vs-rm-model i[data-lucide="check"] { position: absolute; right: 2px; bottom: 2px; color: #0E0F13; background: #E3C878; border-radius: 99px; padding: 1px; }
    #videoStudioView .vs-rm-model.is-sel { border-color: #E3C878; box-shadow: 0 0 0 1px #E3C878; }
    #videoStudioView .vs-rm-model.is-add { border-style: dashed; }
    #videoStudioView .vs-rm-model.is-add:hover { color: #E3C878; border-color: #B08D3F; }
    /* 查看更多模特(2026-07-07):模特迷你行只显 4 位,此入口打开完整模特浏览器 */
    #videoStudioView .vs-rm-morecast { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; margin-top: 9px; padding: 6px 11px; border-radius: 9px; border: 1px solid rgba(235,225,200,.22); background: rgba(20,22,28,.5); color: #C9B98A; font-size: 12px; font-weight: 600; line-height: 1.4; }
    #videoStudioView .vs-rm-morecast:hover { border-color: #B08D3F; color: #E3C878; background: rgba(232,200,120,.08); }
    /* 开场钩子选择卡(2026-07-07):开拍后在「① 分镜脚本」画布弹中英对照 5 钩子供选,选定再写脚本 */
    #videoStudioView .vs-hookpick { padding: 2px 4px 8px; }
    #videoStudioView .vs-hookpick-head { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; margin-bottom: 12px; border-radius: 12px; border: 1px solid rgba(232,200,120,.3); background: linear-gradient(180deg, rgba(232,200,120,.09), rgba(232,200,120,.03)); }
    #videoStudioView .vs-hookpick-head > i { color: #E3C878; flex: none; margin-top: 2px; }
    #videoStudioView .vs-hookpick-head b { display: block; color: #F2EFE6; font-size: 14.5px; margin-bottom: 3px; }
    #videoStudioView .vs-hookpick-head span { color: #9CA0AD; font-size: 12px; line-height: 1.65; }
    #videoStudioView .vs-hookpick-grid { display: flex; flex-direction: column; gap: 9px; }
    #videoStudioView .vs-hookpick-card { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: flex-start; gap: 12px; padding: 13px 15px; border-radius: 12px; border: 1px solid rgba(235,225,200,.16); background: rgba(22,24,31,.7); transition: border-color .15s, background .15s; }
    #videoStudioView .vs-hookpick-card:hover { border-color: rgba(232,200,120,.5); background: rgba(28,30,38,.9); }
    #videoStudioView .vs-hookpick-card.is-sel { border-color: #E3C878; background: rgba(232,200,120,.1); box-shadow: 0 0 0 1px #E3C878; }
    #videoStudioView .vs-hookpick-no { flex: none; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 700; color: #E3C878; background: rgba(232,200,120,.14); }
    #videoStudioView .vs-hookpick-card.is-sel .vs-hookpick-no { color: #0E0F13; background: #E3C878; }
    #videoStudioView .vs-hookpick-body { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
    #videoStudioView .vs-hookpick-main { color: #F2EFE6; font-size: 14px; line-height: 1.5; font-weight: 500; }
    #videoStudioView .vs-hookpick-zh { color: #8E93A3; font-size: 12.5px; line-height: 1.5; }
    #videoStudioView .vs-hookpick-check { flex: none; color: #E3C878; margin-top: 2px; }
    #videoStudioView .vs-hookpick-go { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 14px; width: 100%; padding: 13px; border-radius: 12px; background: linear-gradient(180deg, #E9CF8F, #D0AC5A); color: #1A1206; font-size: 14px; font-weight: 700; }
    #videoStudioView .vs-hookpick-go:hover:not([disabled]) { filter: brightness(1.05); }
    #videoStudioView .vs-hookpick-go[disabled] { opacity: .5; cursor: default; background: rgba(235,225,200,.12); color: #8E93A3; }
    /* 钩子「换一批」+「继续」并排(2026-07-10 用户:5 个都不满意可一键再推荐 5 个) */
    #videoStudioView .vs-hookpick-acts { display: flex; gap: 9px; margin-top: 14px; }
    #videoStudioView .vs-hookpick-acts .vs-hookpick-go { margin-top: 0; flex: 1 1 58%; }
    #videoStudioView .vs-hookpick-regen { all: unset; box-sizing: border-box; cursor: pointer; flex: 1 1 42%; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 13px 10px; border-radius: 12px; border: 1px solid rgba(232,200,120,.42); background: rgba(232,200,120,.08); color: #E9CF8F; font-size: 13.5px; font-weight: 650; text-align: center; transition: border-color .15s, background .15s; }
    #videoStudioView .vs-hookpick-regen:hover:not([disabled]) { border-color: #E3C878; background: rgba(232,200,120,.16); }
    #videoStudioView .vs-hookpick-regen[disabled] { opacity: .5; cursor: default; }
    @media (max-width: 560px) { #videoStudioView .vs-hookpick-acts { flex-direction: column; } }
    /* AI 写脚本居中加载态(2026-07-10 用户:中间别太空,加高级交互) */
    #videoStudioView .vs-scriptgen { display: flex; flex-direction: column; gap: 14px; padding: 18px 8px 8px; }
    #videoStudioView .vs-scriptgen-head { display: flex; align-items: center; gap: 12px; }
    #videoStudioView .vs-scriptgen-orb { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 13px; color: #0E0F13; background: linear-gradient(135deg, #E9CF8F, #C79B4E); box-shadow: 0 0 0 0 rgba(232,200,120,.5); animation: vsOrbPulse 1.8s ease-in-out infinite; }
    #videoStudioView .vs-scriptgen-head b { display: block; color: #F2EFE6; font-size: 14.5px; margin-bottom: 2px; }
    #videoStudioView .vs-scriptgen-head span { color: #9CA0AD; font-size: 12.5px; }
    #videoStudioView .vs-scriptgen-board { display: flex; flex-direction: column; gap: 10px; }
    #videoStudioView .vs-scriptgen-shot { display: flex; gap: 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(235,225,200,.1); background: rgba(22,24,31,.55); opacity: 0; animation: vsShotIn .5s ease forwards; }
    #videoStudioView .vs-scriptgen-no { flex: none; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 700; color: #E3C878; background: rgba(232,200,120,.14); }
    #videoStudioView .vs-scriptgen-lines { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
    #videoStudioView .vs-scriptgen-line { display: flex; align-items: center; gap: 10px; }
    #videoStudioView .vs-scriptgen-line em { flex: none; width: 62px; font-style: normal; font-size: 11.5px; color: #7E8391; }
    #videoStudioView .vs-scriptgen-line i { display: block; height: 10px; border-radius: 5px; background: linear-gradient(90deg, rgba(232,200,120,.06) 0%, rgba(232,200,120,.28) 45%, rgba(232,200,120,.06) 90%); background-size: 220% 100%; animation: vsShimmer 1.5s linear infinite; }
    #videoStudioView .vs-scriptgen-foot { display: flex; align-items: center; gap: 7px; color: #8E93A3; font-size: 12px; padding: 2px 4px; }
    #videoStudioView .vs-scriptgen-foot i { color: #E3C878; flex: none; }
    @keyframes vsOrbPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(232,200,120,.45); } 50% { box-shadow: 0 0 0 9px rgba(232,200,120,0); } }
    @keyframes vsShotIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes vsShimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }
    /* 独特细节行升级(2026-07-10 用户:升级事实卡确认,独特细节最关键·会锁进出图/视频) */
    #videoStudioView .vs-fact-row--signature { grid-column: 1 / -1; border-radius: 10px; padding: 8px 10px; border: 1px solid rgba(232,200,120,.42); background: linear-gradient(180deg, rgba(232,200,120,.12), rgba(232,200,120,.04)); }
    #videoStudioView .vs-fact-row--signature .vs-fact-row-label { color: #E9CF8F; font-weight: 700; }
    #videoStudioView .vs-fact-row--signature .vs-fact-row-input { border-color: rgba(232,200,120,.4); }
    #videoStudioView .vs-fact-row--signature.is-ok { border-color: rgba(120,200,140,.5); background: linear-gradient(180deg, rgba(120,200,140,.1), rgba(120,200,140,.03)); }
    /* 模板墙发现 CTA(2026-07-07):把隐蔽的「换模板/目标」小灰字换成显眼大卡,引导用户浏览 12 个爆款模板 */
    #videoStudioView .vs-tpl-cta { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 10px; width: 100%; margin: 10px 0 4px; padding: 11px 13px; border-radius: 13px; border: 1px solid rgba(232,200,120,.42); background: linear-gradient(180deg, rgba(232,200,120,.13), rgba(232,200,120,.05)); transition: border-color .15s, background .15s; }
    #videoStudioView .vs-tpl-cta:hover { border-color: #E3C878; background: linear-gradient(180deg, rgba(232,200,120,.2), rgba(232,200,120,.08)); }
    #videoStudioView .vs-tpl-cta-ic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(232,200,120,.2); color: #E9CF8F; }
    #videoStudioView .vs-tpl-cta-txt { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
    #videoStudioView .vs-tpl-cta-txt b { color: #F2EFE6; font-size: 13px; font-weight: 600; }
    #videoStudioView .vs-tpl-cta-txt small { color: #9CA0AD; font-size: 11px; line-height: 1.45; }
    #videoStudioView .vs-tpl-cta-arw { flex: none; color: #C9B98A; }
    #videoStudioView .vs-tpl-cta.is-open { border-color: rgba(232,200,120,.6); background: rgba(232,200,120,.08); }
    /* 深色高级设置面板:把浅色表单组件在放映室内重新上色 */
    #videoStudioView .vs-rm-adv { margin-top: 10px; padding: 13px 13px 14px; border-radius: 13px; border: 1px solid rgba(235,225,200,.14); background: #12141a; display: grid; gap: 11px; }
    #videoStudioView .vs-rm-adv .vs-field-label { color: #8E93A3; }
    #videoStudioView .vs-rm-adv .vs-control { background: #1C1F28; border-color: rgba(235,225,200,.18); color: #F2EFE6; }
    #videoStudioView .vs-rm-adv .vs-control:focus { border-color: #E3C878; }
    #videoStudioView .vs-rm-adv .vs-control::placeholder { color: #5d6570; }
    #videoStudioView .vs-rm-adv .vs-toggle { background: #1C1F28; border-color: rgba(235,225,200,.18); color: #cfd6cd; }
    #videoStudioView .vs-rm-adv .vs-toggle.is-on { border-color: rgba(123,217,169,.5); }
    /* 送审参考图横滑条:比胶片条更大更可核对 */
    #videoStudioView .vs-rm-card.is-wide { gap: 12px; }
    #videoStudioView .vs-rm-feedrow { display: grid; grid-auto-flow: column; grid-auto-columns: 108px; gap: 10px; overflow-x: auto; padding: 2px 2px 10px; scrollbar-width: thin; }
    #videoStudioView .vs-rm-feedrow::-webkit-scrollbar { height: 6px; }
    #videoStudioView .vs-rm-feedrow::-webkit-scrollbar-thumb { background: #1C1F28; border-radius: 99px; }
    #videoStudioView .vs-rm-feedrow .vs-rm-ref { width: 108px; height: 140px; border-radius: 12px; }
    #videoStudioView .vs-rm-ref-no { position: absolute; top: 5px; left: 5px; z-index: 1; width: 19px; height: 19px; border-radius: 99px; font-style: normal; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; color: #10190f; background: linear-gradient(180deg, #ecd58a, #c9a03a); }
    #videoStudioView .vs-rm-feedrow .vs-rm-ref > span { font-size: 9.5px; padding: 3px 3px; white-space: normal; line-height: 1.3; }
    /* 「确认参考图,生成视频」——出片独立确认金按钮 */
    #videoStudioView .vs-rm-film { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 9px; padding: 13px 12px; border-radius: 13px; font-size: 14.5px; font-weight: 800; color: #141005; background: linear-gradient(180deg, #F2DF9F, #DAB860 55%, #C29C42); box-shadow: 0 14px 32px rgba(217,183,95,.22), inset 0 1px 0 rgba(255,255,255,.5); }
    #videoStudioView .vs-rm-film:hover { filter: brightness(1.06); }
    #videoStudioView .vs-rm-film:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
    #videoStudioView .vs-rm-film[disabled] { opacity: .4; cursor: not-allowed; filter: grayscale(.35); }
    /* ═════ /20260703-vs-room2 ═════ */
    /* ═════ 20260703-vs-room4 · 全宽放映室+事实摘要行+分段总表预览 ═════ */
    #videoStudioView .saas-shell.is-room-full { display: block; }
    #videoStudioView .saas-shell.is-room-full > .vs-main { width: 100%; max-width: none; }
    #videoStudioView .vs-rm-navbtns { display: inline-flex; gap: 7px; margin-left: 14px; }
    #videoStudioView .vs-rm-navbtns button { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; padding: 4px 11px; border-radius: 999px; border: 1px solid rgba(235,225,200,.16); color: #8E93A3; }
    #videoStudioView .vs-rm-navbtns button:hover { color: #E3C878; border-color: rgba(227,200,120,.4); }
    /* vs-clearbar:顶栏「清空重开」毁灭性入口用警示红弱化调,与普通导航钮区分防误触 */
    #videoStudioView .vs-rm-navbtns button.vs-rm-clearbtn { color: rgba(248,113,113,.66); border-color: rgba(248,113,113,.22); }
    #videoStudioView .vs-rm-navbtns button.vs-rm-clearbtn:hover { color: #fca5a5; border-color: rgba(248,113,113,.5); background: rgba(248,113,113,.08); }
    #videoStudioView .vs-rm-factline { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 12px; border-radius: 11px; border: 1px solid rgba(232,168,60,.35); background: rgba(232,168,60,.06); font-size: 12px; color: #d9c9a8; }
    #videoStudioView .vs-rm-factline.is-ok { border-color: rgba(123,217,169,.35); background: rgba(123,217,169,.06); color: #a8cbb8; }
    #videoStudioView .vs-rm-factline span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    #videoStudioView .vs-rm-factline b { font-weight: 600; color: #E3C878; white-space: nowrap; }
    #videoStudioView .vs-rm-factline:hover { border-color: #E3C878; }
    #videoStudioView .vs-seg-previews { display: flex; gap: 8px; }
    #videoStudioView .vs-sheet-prev.is-seg { position: relative; width: 96px; height: 138px; flex: none; }
    #videoStudioView .vs-sheet-prev.is-seg img { width: 100%; height: 100%; object-fit: cover; }
    #videoStudioView .vs-sheet-prev.is-seg.is-warn { outline: 2px solid #E8A83C; }
    #videoStudioView .vs-seg-tag { position: absolute; left: 0; right: 0; bottom: 0; font-size: 9.5px; text-align: center; background: rgba(8,9,12,.78); color: #ecd58a; padding: 2px 0; }
    #videoStudioView .vs-sheet-prev.is-empty.is-seg { display: flex; align-items: center; justify-content: center; }
    /* ═════ /20260703-vs-room4 ═════ */
    /* vs-room4 补:工作台左轨真身=.vs-wb-rail;放映室模式藏轨后 .vs-workbench 单列全宽 */
    #videoStudioView .vs-workbench.is-room-full { display: block; }
    #videoStudioView .vs-workbench.is-room-full > .vs-wb-stage { width: 100%; max-width: none; }
    /* ═════ 20260703-vs-room5 · 放映舞台横向 4 屏滑动工作台 ═════ */
    #videoStudioView .vs-rm-ptabs { display: flex; gap: 8px; justify-content: center; margin: 4px 0 12px; flex-wrap: wrap; }
    #videoStudioView .vs-rm-ptab { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(235,225,200,.16); color: #8E93A3; font-size: 13px; font-weight: 600; }
    #videoStudioView .vs-rm-ptab i { color: currentColor; }
    #videoStudioView .vs-rm-ptab:hover { color: #F2EFE6; border-color: rgba(235,225,200,.3); }
    #videoStudioView .vs-rm-ptab.is-sel { color: #10190f; background: linear-gradient(180deg, #ecd58a, #c9a03a); border-color: transparent; }
    #videoStudioView .vs-rm-ptab em { font-style: normal; font-size: 11px; padding: 1px 7px; border-radius: 99px; background: rgba(8,9,12,.18); }
    #videoStudioView .vs-rm-ptab.is-sel em { background: rgba(8,9,12,.28); }
    /* vs-room6:中央横滑容器改名 .vs-rm-canvasdeck——根治与左制作台 .vs-rm-deck 的类名撞车
       (旧写法后一条规则覆盖前一条,左栏 display/gap 被改写;且 JS querySelector 先命中左栏,tab 滚动失效)。 */
    #videoStudioView .vs-rm-canvasdeck { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; scroll-snap-type: x mandatory; gap: 0; scrollbar-width: none; }
    #videoStudioView .vs-rm-canvasdeck::-webkit-scrollbar { display: none; }
    #videoStudioView .vs-rm-panel { scroll-snap-align: start; min-width: 0; padding: 4px 12px 8px; display: flex; flex-direction: column; gap: 12px; min-height: 480px; }
    #videoStudioView .vs-rm-panel-head { display: flex; flex-direction: column; gap: 3px; }
    #videoStudioView .vs-rm-panel-head strong { color: #f2e7cf; font-size: 16px; font-family: "Songti SC","STSong","Noto Serif CJK SC",serif; letter-spacing: .04em; }
    #videoStudioView .vs-rm-panel-head span { color: #8E93A3; font-size: 12px; }
    #videoStudioView .vs-rm-panel-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: #5d6570; text-align: center; padding: 40px 30px; }
    #videoStudioView .vs-rm-panel-empty p { max-width: 460px; line-height: 1.7; font-size: 13px; }
    /* vs-room6 参考图画布:换行网格——「一张张排版贴上去」的画布观感,取代旧横滑条(232px 定宽列) */
    #videoStudioView .vs-rm-canvasgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(206px, 1fr)); gap: 14px; padding: 4px 2px 12px; align-items: start; }
    #videoStudioView .vs-rm-bigref { margin: 0; display: flex; flex-direction: column; gap: 9px; padding: 10px; border-radius: 15px; border: 1px solid rgba(235,225,200,.14); background: linear-gradient(180deg, #15171E, #111318); }
    #videoStudioView .vs-rm-bigref.is-real { border-color: rgba(123,217,169,.4); }
    #videoStudioView .vs-rm-bigref.is-warn { border-color: rgba(232,168,60,.55); }
    #videoStudioView .vs-rm-bigref-img { all: unset; cursor: zoom-in; position: relative; display: block; border-radius: 11px; overflow: hidden; aspect-ratio: 3/4; background: #05070a; }
    #videoStudioView .vs-rm-bigref-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
    #videoStudioView .vs-rm-bigref-img .vs-rm-ref-no { position: absolute; top: 8px; left: 8px; }
    #videoStudioView .vs-rm-bigref-zoom { position: absolute; right: 8px; bottom: 8px; width: 26px; height: 26px; border-radius: 99px; background: rgba(8,9,12,.6); display: flex; align-items: center; justify-content: center; color: #f2efe6; backdrop-filter: blur(4px); }
    #videoStudioView .vs-rm-bigref figcaption { display: flex; flex-direction: column; gap: 2px; }
    #videoStudioView .vs-rm-bigref figcaption b { color: #f2efe6; font-size: 13px; }
    #videoStudioView .vs-rm-bigref figcaption span { font-size: 11px; color: #8E93A3; }
    #videoStudioView .vs-rm-bigref figcaption span.is-real { color: #7BD9A9; }
    #videoStudioView .vs-rm-bigref figcaption span.is-warn { color: #E8A83C; }
    #videoStudioView .vs-rm-bigref figcaption small { font-size: 10.5px; color: #6b7580; line-height: 1.5; }
    /* 产品相似度分级行(vs-simscore):≥80 绿·用户可自选直接出片(锚纠偏)或重画;<80 红·建议重画 */
    #videoStudioView .vs-rm-simline { display: block; font-size: 11px; line-height: 1.55; padding: 4px 8px; border-radius: 7px; margin-top: 2px; }
    #videoStudioView .vs-rm-simline.is-ok { color: #7BD9A9; background: rgba(123,217,169,.10); border: 1px solid rgba(123,217,169,.28); }
    #videoStudioView .vs-rm-simline.is-low { color: #ff9d94; background: rgba(255,120,110,.10); border: 1px solid rgba(255,120,110,.30); }
    /* 分镜总表卡「镜头内容备注」(截图5 风·纯 UI 派生):镜号徽标 + 这一镜拍什么,让用户像看分镜脚本一样逐格核对 */
    #videoStudioView .vs-rm-segnotes { list-style: none; margin: 6px 0 0; padding: 6px 0 0; border-top: 1px dashed rgba(227,200,120,.22); display: flex; flex-direction: column; gap: 3px; }
    #videoStudioView .vs-rm-segnotes li { display: flex; gap: 6px; align-items: flex-start; font-size: 10.5px; line-height: 1.45; }
    #videoStudioView .vs-rm-segnotes li em { flex: 0 0 auto; font-style: normal; font-weight: 700; color: #E3C878; background: rgba(227,200,120,.12); border-radius: 4px; padding: 0 5px; }
    #videoStudioView .vs-rm-segnotes li span { color: #97a0ad; }
    /* 重画已有参考图时的「生成中」动效(2026-07-07):覆盖层盖住旧图 + 转圈,治「点修这张重画大卡没动效」 */
    #videoStudioView .vs-rm-bigref.is-genbusy { border-color: rgba(232,168,60,.5); }
    #videoStudioView .vs-rm-bigref.is-genbusy .vs-rm-bigref-img img { filter: brightness(.5); }
    #videoStudioView .vs-rm-bigref-gen { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; background: rgba(8,9,12,.55); color: #E9CF8F; pointer-events: none; }
    #videoStudioView .vs-rm-bigref-gen b { font-size: 12px; font-weight: 600; }
    #videoStudioView .vs-rm-bigref-edit { justify-content: center; }
    #videoStudioView .vs-rm-panel-cta { display: flex; flex-direction: column; gap: 6px; max-width: 560px; margin: 4px auto 0; width: 100%; }
    /* 分镜脚本表在面板内可横向滚 */
    #videoStudioView .vs-rm-panel .vs-script-table-wrap { max-width: 100%; }
    /* ═════ /20260703-vs-room5 ═════ */
    /* ═════ 20260703-vs-room6 · 上传先行+一键解析+推荐模板 / 三画布确认递进 ═════ */
    /* ① 商品图区内的市场/平台/语言(上传时一并收集,语言影响脚本生成) */
    #videoStudioView .vs-rm-mkt { margin-top: 10px; padding: 10px 11px 11px; }
    #videoStudioView .vs-rm-mkt .vs-field-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
    #videoStudioView .vs-rm-mkt .vs-field-label { font-size: 10.5px; }
    /* ② 一键解析按钮(金描边显眼款) + 重新解析 */
    #videoStudioView .vs-rm-parse {
      all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 9px;
      width: 100%; padding: 12px 10px; border-radius: 13px; font-size: 14px; font-weight: 700; color: #E3C878;
      border: 1px solid rgba(227,200,120,.55); background: rgba(227,200,120,.08);
    }
    #videoStudioView .vs-rm-parse:hover { background: rgba(227,200,120,.14); border-color: #E3C878; }
    #videoStudioView .vs-rm-parse[disabled] { cursor: wait; opacity: .75; }
    #videoStudioView .vs-rm-reparse { display: block; width: 100%; margin-top: 8px; }
    /* ④ 模板推荐徽章 + 一句理由(解析后才出现) */
    #videoStudioView .vs-rm-rec { position: absolute; top: 7px; left: 7px; font-size: 9.5px; background: linear-gradient(180deg, #ecd58a, #c9a03a); color: #10190f; font-weight: 700; padding: 2px 7px; border-radius: 99px; }
    #videoStudioView .vs-rm-rec + .vs-rm-hot { top: 29px; }
    #videoStudioView .vs-rm-tpl figcaption .vs-rm-why { display: block; font-style: normal; font-size: 9px; color: #a8cbb8; margin-top: 1px; }
    /* 画布 tab 状态色(is-sel 金底优先) */
    #videoStudioView .vs-rm-ptab.is-done:not(.is-sel) { border-color: rgba(123,217,169,.45); color: #7BD9A9; }
    #videoStudioView .vs-rm-ptab.is-busy:not(.is-sel) { border-color: rgba(227,200,120,.5); color: #E3C878; }
    /* 画布确认推进按钮(免费闸,与计费金按钮区分:描边绿) */
    #videoStudioView .vs-rm-next {
      all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 9px;
      width: 100%; padding: 12px 10px; border-radius: 13px; font-size: 14px; font-weight: 700; color: #7BD9A9;
      border: 1px solid rgba(123,217,169,.5); background: rgba(123,217,169,.07);
    }
    #videoStudioView .vs-rm-next:hover { background: rgba(123,217,169,.13); border-color: #7BD9A9; }
    #videoStudioView .vs-rm-next[disabled] { opacity: .4; cursor: not-allowed; }
    /* 选市场防漏(2026-07-05):开拍前一直可见的「卖到哪」确认条——未确认时琥珀高亮(默认国内中文,跨境卖家易漏) */
    #videoStudioView .vs-mkt-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; margin-bottom: 10px; border-radius: 12px; border: 1px solid rgba(235,225,200,.16); background: rgba(20,22,28,.7); }
    #videoStudioView .vs-mkt-bar-txt { display: flex; align-items: center; gap: 9px; min-width: 0; }
    #videoStudioView .vs-mkt-bar-txt > i { color: #C9A45C; flex: none; }
    #videoStudioView .vs-mkt-bar-txt > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
    #videoStudioView .vs-mkt-bar-txt b { color: #f2efe6; font-size: 12.5px; line-height: 1.3; }
    #videoStudioView .vs-mkt-bar-txt span { color: #8E93A3; font-size: 11px; line-height: 1.3; }
    #videoStudioView .vs-mkt-bar-edit { flex: none; cursor: pointer; border: 1px solid rgba(235,225,200,.3); background: transparent; color: #f2efe6; border-radius: 8px; padding: 5px 15px; font-size: 12.5px; }
    #videoStudioView .vs-mkt-bar-edit:hover { border-color: #C9A45C; color: #E9CF8F; }
    #videoStudioView .vs-mkt-bar.is-untouched { border-color: rgba(232,168,60,.6); background: rgba(232,168,60,.1); }
    #videoStudioView .vs-mkt-bar.is-untouched .vs-mkt-bar-txt > i { color: #E8A83C; }
    #videoStudioView .vs-mkt-bar.is-untouched span { color: #E8A83C; }
    #videoStudioView .vs-mkt-bar.is-untouched .vs-mkt-bar-edit { border-color: #E8A83C; background: #E8A83C; color: #1a1206; font-weight: 600; }
    /* 统一定妆照(2026-07-05 Option3):模特区「服装已锁定」状态条 + 重出按钮 */
    #videoStudioView .vs-castanchor { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; padding: 7px 10px; border-radius: 10px; border: 1px solid rgba(123,217,169,.35); background: rgba(123,217,169,.08); }
    #videoStudioView .vs-castanchor > span { font-size: 11.5px; color: #9BE3BE; line-height: 1.35; }
    #videoStudioView .vs-castanchor-btn { flex: none; cursor: pointer; border: 1px solid rgba(235,225,200,.3); background: transparent; color: #f2efe6; border-radius: 7px; padding: 4px 11px; font-size: 11.5px; }
    #videoStudioView .vs-castanchor-btn:hover { border-color: #7BD9A9; color: #9BE3BE; }
    /* 凭任务 ID 找回成片(2026-07-06):渲染超时/多条遗留时捞回花钱出的片·纯查询不扣费 */
    #videoStudioView .vs-rm-recover { margin: 10px 4px 2px; padding: 10px 12px; border-radius: 12px; border: 1px dashed rgba(235,225,200,.22); background: rgba(20,22,28,.4); }
    #videoStudioView .vs-rm-recover-lab { font-size: 11.5px; color: #8E93A3; line-height: 1.5; margin-bottom: 8px; }
    #videoStudioView .vs-rm-recover-lab b { color: #E9CF8F; }
    #videoStudioView .vs-rm-recover-row { display: flex; gap: 8px; }
    #videoStudioView .vs-rm-recover-input { flex: 1; min-width: 0; background: rgba(12,13,17,.7); border: 1px solid rgba(235,225,200,.2); border-radius: 8px; color: #e8e6df; padding: 7px 10px; font-size: 12.5px; font-family: ui-monospace, SFMono-Regular, monospace; }
    #videoStudioView .vs-rm-recover-input:focus { outline: none; border-color: #E8A83C; }
    #videoStudioView .vs-rm-recover-btn { white-space: nowrap; border: 1px solid rgba(232,168,60,.5); background: rgba(232,168,60,.12); color: #E9CF8F; }
    #videoStudioView .vs-rm-recover-btn:hover:not(:disabled) { background: rgba(232,168,60,.2); }
    #videoStudioView .vs-rm-recover-btn:disabled { opacity: .55; cursor: default; }
    /* 一致性总灯 P0(2026-07-06):② 参考图画布顶部红/黄/绿总灯,四态配色沿用站内绿#087b6d/琥珀/红/中性灰 */
    #videoStudioView .vs-consistency-light { display: flex; align-items: center; gap: 9px; margin: 0 2px 10px; padding: 9px 12px; border-radius: 12px; border: 1px solid rgba(235,225,200,.18); background: rgba(20,22,28,.5); }
    #videoStudioView .vs-cl-dot { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; }
    #videoStudioView .vs-cl-text { flex: 1; font-size: 12.5px; line-height: 1.6; color: #c9ccd6; }
    #videoStudioView .vs-cl-badge { flex: none; font-style: normal; font-size: 11.5px; font-weight: 600; padding: 2px 9px; border-radius: 999px; }
    #videoStudioView .vs-consistency-light.is-prep .vs-cl-dot { background: rgba(142,147,163,.16); color: #9aa0b0; }
    #videoStudioView .vs-consistency-light.is-green { border-color: rgba(8,123,109,.5); background: rgba(8,123,109,.1); }
    #videoStudioView .vs-consistency-light.is-green .vs-cl-dot { background: rgba(18,179,154,.18); color: #34d3b8; }
    #videoStudioView .vs-consistency-light.is-green .vs-cl-text { color: #a8e6da; }
    #videoStudioView .vs-consistency-light.is-yellow { border-color: rgba(232,168,60,.5); background: rgba(232,168,60,.1); }
    #videoStudioView .vs-consistency-light.is-yellow .vs-cl-dot { background: rgba(232,168,60,.2); color: #E8A83C; }
    #videoStudioView .vs-consistency-light.is-yellow .vs-cl-text { color: #f0c88a; }
    #videoStudioView .vs-consistency-light.is-yellow .vs-cl-badge { background: rgba(232,168,60,.2); color: #E8A83C; }
    #videoStudioView .vs-consistency-light.is-red { border-color: rgba(224,80,80,.55); background: rgba(224,80,80,.1); }
    #videoStudioView .vs-consistency-light.is-red .vs-cl-dot { background: rgba(224,80,80,.2); color: #E85555; }
    #videoStudioView .vs-consistency-light.is-red .vs-cl-text { color: #f0a8a8; }
    #videoStudioView .vs-consistency-light.is-red .vs-cl-badge { background: rgba(224,80,80,.2); color: #E85555; }
    /* P1 门禁(2026-07-07):可点的一致性总灯 + 点后定位高亮问题卡 */
    #videoStudioView .vs-consistency-light.is-jumpable { cursor: pointer; transition: filter .15s ease, transform .15s ease; }
    #videoStudioView .vs-consistency-light.is-jumpable:hover { filter: brightness(1.12); transform: translateY(-1px); }
    #videoStudioView .vs-cl-jump { flex: none; display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 999px; background: rgba(235,225,200,.12); color: #d7d2c4; white-space: nowrap; }
    #videoStudioView .vs-consistency-light.is-red .vs-cl-jump { background: rgba(224,80,80,.18); color: #f0a8a8; }
    #videoStudioView .vs-consistency-light.is-yellow .vs-cl-jump { background: rgba(232,168,60,.2); color: #E8A83C; }
    #videoStudioView .vs-rm-bigref.is-jumped { animation: vsJumpFlash 1.8s ease; }
    @keyframes vsJumpFlash { 0%,100% { box-shadow: 0 0 0 0 rgba(232,168,60,0); } 15% { box-shadow: 0 0 0 3px rgba(232,168,60,.9), 0 0 18px 4px rgba(232,168,60,.5); } 60% { box-shadow: 0 0 0 3px rgba(232,168,60,.6); } }
    /* 成片页声音/规格二次确认卡(2026-07-07):花钱前一眼看清口播/字幕/音乐/版数/引擎 + 一键切省钱测试档 */
    #videoStudioView .vs-rm-filmsum { margin: 12px 2px 4px; padding: 11px 13px; border-radius: 12px; border: 1px solid rgba(235,225,200,.16); background: rgba(20,22,28,.55); display: flex; flex-direction: column; gap: 7px; }
    #videoStudioView .vs-rm-filmsum-row { display: flex; align-items: baseline; gap: 9px; font-size: 12.5px; line-height: 1.5; }
    #videoStudioView .vs-rm-filmsum-k { flex: none; width: 34px; color: #8b90a0; font-size: 11.5px; }
    #videoStudioView .vs-rm-filmsum-v { flex: 1; color: #d3d6de; }
    #videoStudioView .vs-rm-filmsum-warn { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #E8A83C; background: rgba(232,168,60,.1); border: 1px solid rgba(232,168,60,.35); border-radius: 9px; padding: 6px 9px; }
    #videoStudioView .vs-rm-filmsum-eng { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 1px; }
    #videoStudioView .vs-rm-filmsum-engnow { font-size: 11.5px; color: #a8e6da; }
    #videoStudioView .vs-rm-filmsum-sw { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; padding: 5px 11px; border-radius: 999px; cursor: pointer; border: 1px solid rgba(232,168,60,.5); background: rgba(232,168,60,.12); color: #E9CF8F; }
    #videoStudioView .vs-rm-filmsum-sw:hover { background: rgba(232,168,60,.2); }
    /* 三档引擎选择器(2026-07-08 超级/标准/普通):当前档高亮金框,各档规格/积分一目了然 */
    #videoStudioView .vs-rm-filmsum-tier { flex: 1 1 150px; min-width: 130px; display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 7px 11px; border-radius: 10px; cursor: pointer; border: 1px solid rgba(235,225,200,.16); background: rgba(20,22,28,.5); color: #cbd2df; }
    #videoStudioView .vs-rm-filmsum-tier:hover { border-color: rgba(232,168,60,.4); background: rgba(232,168,60,.08); }
    #videoStudioView .vs-rm-filmsum-tier.is-sel { border-color: rgba(232,168,60,.7); background: rgba(232,168,60,.14); color: #E9CF8F; }
    #videoStudioView .vs-rm-filmsum-tier b { font-size: 12px; font-weight: 700; }
    #videoStudioView .vs-rm-filmsum-tier span { font-size: 10.5px; color: #97a0ad; }
    #videoStudioView .vs-rm-filmsum-tier.is-sel span { color: #cdb277; }
    #videoStudioView .vs-rm-filmsum-tiernote { flex: 1 0 100%; font-size: 10.5px; color: #7f8794; margin-top: 1px; }
    /* 分镜喂法 A/B(2026-07-06):合成总表 vs 拆单帧·分段控件 */
    #videoStudioView .vs-feedmode { margin: 0 2px 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(232,168,60,.4); background: rgba(232,168,60,.07); }
    #videoStudioView .vs-feedmode-lab { display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px; }
    #videoStudioView .vs-feedmode-lab b { color: #E9CF8F; font-size: 12.5px; }
    #videoStudioView .vs-feedmode-lab small { color: #8E93A3; font-size: 11px; line-height: 1.5; }
    #videoStudioView .vs-feedmode-btns { display: flex; gap: 8px; }
    #videoStudioView .vs-feedmode-opt { flex: 1; cursor: pointer; border: 1px solid rgba(235,225,200,.25); background: rgba(20,22,28,.6); color: #c9ccd6; border-radius: 9px; padding: 8px 10px; font-size: 12.5px; }
    #videoStudioView .vs-feedmode-opt:hover { border-color: rgba(232,168,60,.6); }
    #videoStudioView .vs-feedmode-opt.is-sel { border-color: #E8A83C; background: rgba(232,168,60,.16); color: #f2efe6; font-weight: 600; }
    /* 画布①占位卡:待生成/生成中(逐卡状态标签,不做假进度条) */
	    #videoStudioView .vs-rm-bigref.is-pend { border-style: dashed; border-color: rgba(235,225,200,.22); }
	    #videoStudioView .vs-rm-pendbox { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; aspect-ratio: 3/4; border-radius: 11px; background: #0b0d12; color: #5d6570; font-size: 12px; }
	    #videoStudioView .vs-rm-bigref.is-pend figcaption span { color: #8E93A3; }
	    /* ① 导演 Agent 画布:同屏串起风格选择 -> 脚本 -> 分镜图 -> 参考图 -> 成片 */
	    #videoStudioView .vs-rm-agent-panel { min-height: 560px; }
	    #videoStudioView .vs-rm-agent-steps { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
	    #videoStudioView .vs-rm-agent-step {
	      display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 7px; row-gap: 2px;
	      align-items: center; min-height: 52px; padding: 8px 9px; border-radius: 12px;
	      border: 1px solid rgba(235,225,200,.12); background: #12141a; color: #8E93A3;
	    }
	    #videoStudioView .vs-rm-agent-step i {
	      grid-row: 1 / 3; width: 18px; height: 18px; border-radius: 99px; display: inline-flex; align-items: center; justify-content: center;
	      border: 1px solid rgba(235,225,200,.22); font-style: normal; font-size: 12px; color: #8E93A3;
	    }
	    #videoStudioView .vs-rm-agent-step b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: #F2EFE6; }
	    #videoStudioView .vs-rm-agent-step small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; color: #6f7782; }
	    #videoStudioView .vs-rm-agent-step.is-done { border-color: rgba(123,217,169,.38); background: rgba(123,217,169,.055); }
	    #videoStudioView .vs-rm-agent-step.is-done i { background: #7BD9A9; border-color: #7BD9A9; color: #10190f; }
	    #videoStudioView .vs-rm-agent-step.is-warn { border-color: rgba(232,168,60,.45); background: rgba(232,168,60,.06); }
	    #videoStudioView .vs-rm-agent-step.is-warn i { border-color: rgba(232,168,60,.55); color: #E8A83C; }
	    #videoStudioView .vs-rm-agent-grid { display: grid; grid-template-columns: minmax(260px, 0.85fr) minmax(320px, 1fr); gap: 14px; align-items: start; }
	    #videoStudioView .vs-rm-agent-card {
	      min-width: 0; display: flex; flex-direction: column; gap: 12px; padding: 13px;
	      border-radius: 14px; border: 1px solid rgba(235,225,200,.12); background: linear-gradient(180deg, #15171E, #111318);
	    }
	    #videoStudioView .vs-rm-agent-card.is-wide { grid-column: 1 / -1; }
	    #videoStudioView .vs-rm-agent-cardhead { display: flex; align-items: center; gap: 8px; color: #f2e7cf; }
	    #videoStudioView .vs-rm-agent-cardhead strong { font-size: 13.5px; }
	    #videoStudioView .vs-rm-agent-cardhead i { color: #E3C878; }
	    #videoStudioView .vs-rm-agent-cardhead button {
	      all: unset; cursor: pointer; margin-left: auto; font-size: 11px; color: #7BD9A9; padding: 4px 9px;
	      border-radius: 999px; border: 1px solid rgba(123,217,169,.3); background: rgba(123,217,169,.06);
	    }
	    #videoStudioView .vs-rm-agent-cardhead button:hover { border-color: #7BD9A9; }
	    #videoStudioView .vs-rm-agent-bubble {
	      border-radius: 13px; padding: 10px 11px; font-size: 12.5px; line-height: 1.6;
	      border: 1px solid rgba(227,200,120,.18); color: #d9c9a8; background: rgba(227,200,120,.055);
	    }
	    #videoStudioView .vs-rm-agent-input,
	    #videoStudioView .vs-rm-agent-script {
	      width: 100%; box-sizing: border-box; resize: vertical; border-radius: 12px; border: 1px solid rgba(235,225,200,.16);
	      background: #0f1117; color: #F2EFE6; padding: 10px 11px; font: inherit; line-height: 1.55;
	    }
	    #videoStudioView .vs-rm-agent-input::placeholder { color: #5d6570; }
	    #videoStudioView .vs-rm-agent-input:focus,
	    #videoStudioView .vs-rm-agent-script:focus { outline: none; border-color: #E3C878; box-shadow: 0 0 0 2px rgba(227,200,120,.12); }
	    #videoStudioView .vs-rm-agent-styles { display: grid; gap: 8px; }
	    #videoStudioView .vs-rm-agent-style {
	      all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 10px;
	      padding: 10px 11px; border-radius: 12px; border: 1px solid rgba(235,225,200,.13); color: #cfd6cd; background: #12141a;
	    }
	    #videoStudioView .vs-rm-agent-style:hover { border-color: rgba(235,225,200,.3); }
	    #videoStudioView .vs-rm-agent-style.is-sel { border-color: #E3C878; background: rgba(227,200,120,.07); }
	    #videoStudioView .vs-rm-agent-style.is-rec:not(.is-sel) { border-color: rgba(123,217,169,.36); }
	    #videoStudioView .vs-rm-agent-style > i { color: #E3C878; flex: none; }
	    #videoStudioView .vs-rm-agent-style span { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
	    #videoStudioView .vs-rm-agent-style b { font-size: 12.5px; color: #F2EFE6; }
	    #videoStudioView .vs-rm-agent-style small { font-size: 10.5px; color: #7f8792; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
	    #videoStudioView .vs-rm-agent-emptyline {
	      min-height: 72px; display: flex; align-items: center; justify-content: center; text-align: center;
	      border-radius: 12px; border: 1px dashed rgba(235,225,200,.16); color: #6f7782; font-size: 12px; line-height: 1.6; padding: 14px;
	    }
	    #videoStudioView .vs-rm-agent-shotlist { display: grid; gap: 7px; }
	    #videoStudioView .vs-rm-agent-shotlist span { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 8px; font-size: 11.5px; color: #8E93A3; }
	    #videoStudioView .vs-rm-agent-shotlist b { color: #E3C878; font-weight: 600; }
	    #videoStudioView .vs-rm-agent-actions { display: flex; gap: 9px; flex-wrap: wrap; }
	    #videoStudioView .vs-rm-agent-act {
	      all: unset; box-sizing: border-box; cursor: pointer; min-width: 170px; flex: 1 1 180px; display: flex; align-items: center; gap: 9px;
	      padding: 10px 11px; border-radius: 12px; border: 1px solid rgba(235,225,200,.16); color: #cfd6cd; background: #12141a;
	    }
	    #videoStudioView .vs-rm-agent-act:hover { border-color: rgba(235,225,200,.3); }
	    #videoStudioView .vs-rm-agent-act i { color: #E3C878; flex: none; }
	    #videoStudioView .vs-rm-agent-act span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
	    #videoStudioView .vs-rm-agent-act b { color: #F2EFE6; font-size: 12.5px; }
	    #videoStudioView .vs-rm-agent-act small { color: #7f8792; font-size: 10.5px; }
	    #videoStudioView .vs-rm-agent-act.is-primary { color: #141005; background: linear-gradient(180deg, #F2DF9F, #DAB860 55%, #C29C42); border-color: transparent; }
	    #videoStudioView .vs-rm-agent-act.is-primary i,
	    #videoStudioView .vs-rm-agent-act.is-primary b,
	    #videoStudioView .vs-rm-agent-act.is-primary small { color: #141005; }
	    #videoStudioView .vs-rm-agent-act.is-ok { border-color: rgba(123,217,169,.4); background: rgba(123,217,169,.07); }
	    #videoStudioView .vs-rm-agent-act[disabled] { opacity: .42; cursor: not-allowed; filter: grayscale(.2); }
	    #videoStudioView .vs-rm-agent-boardstrip { display: grid; grid-template-columns: repeat(9, minmax(74px, 1fr)); gap: 8px; overflow-x: auto; padding-bottom: 4px; }
	    #videoStudioView .vs-rm-agent-frame {
	      all: unset; box-sizing: border-box; cursor: pointer; min-width: 74px; aspect-ratio: 9 / 14; border-radius: 10px;
	      border: 1px solid rgba(235,225,200,.14); background: #0f1117; overflow: hidden; position: relative;
	      display: flex; align-items: center; justify-content: center; color: #5d6570;
	    }
	    #videoStudioView .vs-rm-agent-frame:hover { border-color: rgba(227,200,120,.45); }
	    #videoStudioView .vs-rm-agent-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
	    #videoStudioView .vs-rm-agent-frame b { font-size: 18px; color: #E3C878; }
	    #videoStudioView .vs-rm-agent-frame span {
	      position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 5px 5px; font-size: 9px; line-height: 1.25;
	      color: #d9c9a8; background: linear-gradient(180deg, transparent, rgba(8,9,12,.9) 55%); text-align: center;
	    }
	    #videoStudioView .vs-rm-agent-feed { display: grid; grid-auto-flow: column; grid-auto-columns: 86px; gap: 8px; overflow-x: auto; padding: 2px 0 4px; }
	    #videoStudioView .vs-rm-agent-feedimg {
	      all: unset; box-sizing: border-box; cursor: pointer; position: relative; height: 104px; border-radius: 10px; overflow: hidden;
	      border: 1px solid rgba(235,225,200,.16); background: #0f1117;
	    }
	    #videoStudioView .vs-rm-agent-feedimg img { width: 100%; height: 100%; object-fit: cover; display: block; }
	    #videoStudioView .vs-rm-agent-feedimg i {
	      position: absolute; top: 5px; left: 5px; width: 18px; height: 18px; border-radius: 99px; font-style: normal;
	      display: flex; align-items: center; justify-content: center; font-size: 10px; color: #10190f; background: #E3C878; z-index: 1;
	    }
	    #videoStudioView .vs-rm-agent-feedimg span {
	      position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 4px 4px; text-align: center; font-size: 9px; line-height: 1.2;
	      color: #d9c9a8; background: linear-gradient(180deg, transparent, rgba(8,9,12,.88) 55%);
	    }
	    @media (max-width: 1180px) {
	      #videoStudioView .vs-rm-agent-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	      #videoStudioView .vs-rm-agent-grid { grid-template-columns: 1fr; }
	    }
	    @media (max-width: 640px) {
	      #videoStudioView .vs-room { padding: 12px 10px 22px; border-radius: 12px; }
	      #videoStudioView .vs-rm-brand { align-items: center; flex-wrap: wrap; gap: 8px; }
	      #videoStudioView .vs-rm-mark { white-space: nowrap; font-size: 17px; letter-spacing: .08em; }
	      #videoStudioView .vs-rm-brand small { font-size: 9px; letter-spacing: .16em; }
	      #videoStudioView .vs-rm-navbtns { order: 3; margin-left: 0; width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
	      #videoStudioView .vs-rm-navbtns button { justify-content: center; min-width: 0; padding: 5px 6px; font-size: 10px; }
	      #videoStudioView .vs-rm-brand-engine { margin-left: 0; font-size: 10px; padding: 3px 8px; }
	      #videoStudioView .vs-rm-agent-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	      #videoStudioView .vs-rm-agent-boardstrip { grid-template-columns: repeat(3, minmax(78px, 1fr)); overflow-x: visible; }
	    }
	    /* ═════ /20260703-vs-room6 ═════ */
    /* ═════ 20260703-vs-room7 · 单图二次编辑浮层 ═════ */
    #videoStudioView .vs-refedit-scrim { position: fixed; inset: 0; background: rgba(5,6,9,.72); z-index: 340; }
    #videoStudioView .vs-refedit { position: fixed; z-index: 341; top: 50%; left: 50%; transform: translate(-50%,-50%); width: min(720px, calc(100vw - 40px)); max-height: calc(100vh - 60px); overflow: auto; border-radius: 18px; border: 1px solid rgba(227,200,120,.4); background: linear-gradient(180deg,#15171E,#101216); box-shadow: 0 30px 80px rgba(0,0,0,.6); }
    #videoStudioView .vs-refedit header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px 10px; }
    #videoStudioView .vs-refedit header strong { color: #f2e7cf; font-size: 15px; font-family: "Songti SC","STSong","Noto Serif CJK SC",serif; }
    #videoStudioView .vs-refedit header button { all: unset; cursor: pointer; color: #8E93A3; padding: 4px; }
    #videoStudioView .vs-refedit header button:hover { color: #F2EFE6; }
    #videoStudioView .vs-refedit-body { display: grid; grid-template-columns: 250px 1fr; gap: 16px; padding: 0 18px 18px; }
    #videoStudioView .vs-refedit-imgwrap { all: unset; cursor: zoom-in; position: relative; border-radius: 12px; overflow: hidden; aspect-ratio: 3/4; background: #05070a; }
    #videoStudioView .vs-refedit-imgwrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
    #videoStudioView .vs-refedit-main { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
    #videoStudioView .vs-refedit-role { color: #6b7580; font-size: 11px; line-height: 1.5; }
    #videoStudioView .vs-refedit-notelabel { color: #d9c9a8; font-size: 12.5px; font-weight: 600; }
    #videoStudioView .vs-refedit-note { background: #1C1F28; border-color: rgba(235,225,200,.18); color: #F2EFE6; }
    #videoStudioView .vs-refedit-note:focus { border-color: #E3C878; }
    #videoStudioView .vs-refedit-chips { display: flex; flex-wrap: wrap; gap: 7px; }
    #videoStudioView .vs-refedit-chip { all: unset; cursor: pointer; font-size: 11.5px; padding: 5px 11px; border-radius: 999px; border: 1px solid rgba(235,225,200,.18); color: #8E93A3; }
    #videoStudioView .vs-refedit-chip:hover { color: #E3C878; border-color: #E3C878; }
    #videoStudioView .vs-refedit-acts { display: flex; flex-direction: column; gap: 8px; margin-top: 2px; }
    @media (max-width: 720px) { #videoStudioView .vs-refedit-body { grid-template-columns: 1fr; } }
    /* ═════ /20260703-vs-room7 ═════ */
    /* ═════ 20260703-vs-room8 · 减密呼吸感(用户反馈「密密麻麻」):内容限宽居中+间距放大+文字降噪 ═════ */
    /* 画布内容列限宽居中——宽屏两侧留白,是「高级感」最大单点(复盘#24:高级=留白+影像主角,不是堆字) */
    #videoStudioView .vs-rm-panel > * { width: 100%; max-width: 1080px; margin-left: auto; margin-right: auto; }
    #videoStudioView .vs-rm-panel { padding: 10px 24px 20px; gap: 15px; }
    #videoStudioView .vs-rm-main { gap: 30px; padding-top: 24px; }
    #videoStudioView .vs-rm-main > .vs-rm-deck { gap: 21px; }
    #videoStudioView .vs-rm-ptabs { margin: 10px 0 18px; }
    #videoStudioView .vs-rm-panel-head { gap: 5px; padding-bottom: 2px; }
    #videoStudioView .vs-rm-panel-head strong { font-size: 17px; }
    #videoStudioView .vs-rm-panel-head span { font-size: 11.5px; color: #79808f; }
    #videoStudioView .vs-rm-label small { font-size: 11px; color: #79808f; }
    #videoStudioView .vs-rm-hint { color: #79808f; }
    /* Agent 画布降噪:六步条更细一行、卡片边框更淡内距更松、风格卡描述单行省略 */
    #videoStudioView .vs-rm-agent-steps { gap: 6px; }
    #videoStudioView .vs-rm-agent-step b { font-size: 11.5px; }
    #videoStudioView .vs-rm-agent-step small { font-size: 9.5px; }
    #videoStudioView .vs-rm-agent-card { border-color: rgba(235,225,200,.07); padding: 18px; }
    #videoStudioView .vs-rm-agent-grid { gap: 16px; }
    #videoStudioView .vs-rm-agent-style small { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    /* 左栏松一档:分节间距、模板 hint 与墙的距离 */
    #videoStudioView .vs-rm-eyebrow { margin-bottom: 2px; }
    #videoStudioView .vs-rm-shots { gap: 10px; }
    /* ═════ /20260703-vs-room8 ═════ */
    /* ═════ 20260703-vs-room9 · 一条线引导条:任何时刻只有一个「下一步」金按钮 ═════ */
    #videoStudioView .vs-rm-guide { display: flex; align-items: center; gap: 14px; width: 100%; max-width: 1080px; margin: 0 auto; padding: 13px 18px; border-radius: 15px; border: 1px solid rgba(227,200,120,.4); background: linear-gradient(90deg, rgba(227,200,120,.10), rgba(227,200,120,.03)); }
    #videoStudioView .vs-rm-guide-no { flex: none; width: 44px; height: 44px; border-radius: 99px; display: flex; align-items: baseline; justify-content: center; padding-top: 9px; box-sizing: border-box; font-size: 19px; font-weight: 800; color: #E3C878; border: 1px solid rgba(227,200,120,.45); font-variant-numeric: tabular-nums; }
    #videoStudioView .vs-rm-guide-no em { font-style: normal; font-size: 10px; color: #8E93A3; }
    #videoStudioView .vs-rm-guide-msg { flex: 1; min-width: 0; color: #e8dfc8; font-size: 13.5px; line-height: 1.5; }
    #videoStudioView .vs-rm-guidebtn { all: unset; box-sizing: border-box; cursor: pointer; flex: none; padding: 11px 22px; border-radius: 12px; font-size: 14px; font-weight: 800; color: #141005; background: linear-gradient(180deg, #F2DF9F, #DAB860 55%, #C29C42); box-shadow: 0 10px 26px rgba(217,183,95,.22), inset 0 1px 0 rgba(255,255,255,.5); }
    #videoStudioView .vs-rm-guidebtn:hover { filter: brightness(1.06); }
    #videoStudioView .vs-rm-guidebtn[disabled] { opacity: .5; cursor: wait; filter: grayscale(.3); }
    /* ── 对话式左栏(vs-chatrail 2026-07-04):做完收✓一行、当前步展开、未到不出现 ── */
    #videoStudioView .vs-rm-deck.is-chat { gap: 12px; }
    #videoStudioView .vs-chat-done { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; padding: 11px 13px; border-radius: 12px; border: 1px solid rgba(127,215,168,.28); background: rgba(127,215,168,.05); color: #cfd3de; font-size: 12.5px; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
    #videoStudioView .vs-chat-done i { color: #7fd7a8; flex: none; }
    #videoStudioView .vs-chat-done span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    #videoStudioView .vs-chat-done em { font-style: normal; color: #E3C878; font-size: 12px; flex: none; opacity: .85; }
    #videoStudioView .vs-chat-done:hover { border-color: rgba(227,200,120,.5); background: rgba(227,200,120,.07); }
    #videoStudioView .vs-chat-step { display: flex; flex-direction: column; gap: 11px; padding: 13px; border-radius: 14px; border: 1px solid rgba(227,200,120,.22); background: rgba(255,255,255,.02); }
    #videoStudioView .vs-chat-fold { align-self: flex-end; background: none; border: none; color: #8E93A3; font-size: 12px; cursor: pointer; padding: 2px 4px; }
    #videoStudioView .vs-chat-fold:hover { color: #E3C878; }
    /* script 抽屉「下一步」指路块(vs-chatrail2):方案没生成前替代空壳钩子/分镜段 */
    #videoStudioView .vs-cv-nextstep { display: flex; align-items: flex-start; gap: 11px; margin-top: 14px; padding: 14px 15px; border-radius: 12px; border: 1px solid rgba(127,215,168,.32); background: rgba(127,215,168,.06); color: #dfe3ea; font-size: 13px; line-height: 1.75; }
    #videoStudioView .vs-cv-nextstep i { color: #7fd7a8; flex: none; margin-top: 4px; }
    #videoStudioView .vs-cv-nextstep b { color: #7fd7a8; }
    #videoStudioView .vs-cv-nextstep > div { flex: 1; min-width: 0; }
    #videoStudioView .vs-cv-nextstep .btn { flex: none; align-self: center; white-space: nowrap; }
    /* 2026-07-05 用户「按钮字看不清」:通用 .btn 白底掉进暗抽屉(chatrail4 同病),换专属暗金钮 */
    #videoStudioView .vs-cv-nextstep-btn { all: unset; box-sizing: border-box; cursor: pointer; flex: none; align-self: center; white-space: nowrap; padding: 9px 16px; border-radius: 10px; border: 1px solid rgba(227,200,120,.55); background: rgba(227,200,120,.14); color: #E3C878; font-size: 13px; font-weight: 600; transition: background .15s ease, color .15s ease; }
    #videoStudioView .vs-cv-nextstep-btn:hover { background: #E3C878; color: #141005; }
    #videoStudioView .vs-rm-reel.is-flash { outline: 2px solid #E3C878; outline-offset: 4px; border-radius: 12px; }
    /* Agent 卡「高级操作」折叠 */
    #videoStudioView .vs-rm-agent-adv summary { cursor: pointer; font-size: 11.5px; color: #79808f; padding: 4px 0; list-style: none; }
    #videoStudioView .vs-rm-agent-adv summary::-webkit-details-marker { display: none; }
    #videoStudioView .vs-rm-agent-adv summary::before { content: "› "; color: #E3C878; }
    #videoStudioView .vs-rm-agent-adv[open] summary::before { content: "⌄ "; }
    #videoStudioView .vs-rm-agent-adv:not([open]) > .vs-rm-agent-actions { display: none; }
    #videoStudioView .vs-rm-agent-adv .vs-rm-agent-actions { margin-top: 8px; }
    /* ═════ /20260703-vs-room9 ═════ */
    /* ═════ 20260703-vs-room10 · 左栏 Agent 方案卡(推荐+确认,细改折叠) ═════ */
    #videoStudioView .vs-rm-agentplan { display: flex; flex-direction: column; gap: 10px; padding: 13px; border-radius: 14px; border: 1px solid rgba(235,225,200,.10); background: linear-gradient(180deg, #14161c, #101216); }
    #videoStudioView .vs-rm-agentplan .vs-rm-agent-bubble { margin: 0; }
    /* 2026-07-05 用户「细改钮突然冒出很奇怪」:白底大按钮降级成暗色小片+灰色引导语,主角留给「就按这个来」 */
    #videoStudioView .vs-rm-planacts { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
    #videoStudioView .vs-rm-planacts-lead { color: #8E93A3; font-size: 12px; flex: none; }
    #videoStudioView .vs-rm-planact { background: transparent; border: 1px solid rgba(227,200,120,.26); border-radius: 9px; padding: 6px 11px; color: #cfd3de; font-size: 12px; cursor: pointer; transition: border-color .15s ease, color .15s ease; }
    #videoStudioView .vs-rm-planact:hover { border-color: rgba(227,200,120,.6); color: #E3C878; }
    #videoStudioView .vs-rm-agentplan .vs-rm-reel { grid-auto-columns: 118px; }
    #videoStudioView .vs-rm-agentplan .vs-rm-tpl { height: 168px; }
    /* ═════ /20260703-vs-room10 ═════ */
    /* ═════ 20260703-vs-room12 · 抽屉黑金化(用户点名:整站黑金里一大块白色抽屉很奇怪;历史上也早嫌过浅色抽屉) ═════ */
    #videoStudioView .vs-cv-drawer { background: linear-gradient(180deg, #15171E, #101216); color: #d9d3c4; border-left: 1px solid rgba(235,225,200,.14); box-shadow: -24px 0 60px rgba(0,0,0,.5); }
    #videoStudioView .vs-cv-drawer-head { background: rgba(16,18,22,.92); border-bottom: 1px solid rgba(235,225,200,.12); }
    #videoStudioView .vs-cv-drawer-head strong { color: #f2e7cf; font-family: "Songti SC","STSong","Noto Serif CJK SC",serif; }
    #videoStudioView .vs-cv-drawer-close { color: #8E93A3; }
    #videoStudioView .vs-cv-drawer-close:hover { color: #F2EFE6; }
    #videoStudioView .vs-cv-drawer-body { color: #cfd6cd; }
    #videoStudioView .vs-cv-drawer-body .vs-subhead { color: #f2e7cf; }
    #videoStudioView .vs-cv-drawer-body .vs-subhead-tag { background: rgba(227,200,120,.12); color: #E3C878; }
    #videoStudioView .vs-cv-drawer-body .vs-field-label { color: #8E93A3; }
    #videoStudioView .vs-cv-drawer-body .vs-control,
    #videoStudioView .vs-cv-drawer-body input.vs-control,
    #videoStudioView .vs-cv-drawer-body textarea.vs-control,
    #videoStudioView .vs-cv-drawer-body select.vs-control { background: #1C1F28; border-color: rgba(235,225,200,.18); color: #F2EFE6; }
    #videoStudioView .vs-cv-drawer-body .vs-control:focus { border-color: #E3C878; }
    #videoStudioView .vs-cv-drawer-body .vs-control::placeholder { color: #5d6570; }
    #videoStudioView .vs-cv-drawer-body .vs-stage-note { color: #8E93A3; }
    /* 2026-07-05 用户「警示条看不清」真因:上一行抽屉级灰字覆盖压过 vs-note-warn 的琥珀字,
       灰字(#8E93A3)压奶油底(#fdf3e2)对比度极低——warn/ok 两种带底色的 note 必须保住自己的深色字。 */
    #videoStudioView .vs-cv-drawer-body .vs-stage-note.vs-note-warn { color: #5f4407; }
    #videoStudioView .vs-cv-drawer-body .vs-stage-note.vs-note-ok { color: #075c53; }
    #videoStudioView .vs-cv-drawer-body .vs-divider { background: rgba(235,225,200,.10); }
    #videoStudioView .vs-cv-drawer-body .vs-optional-block { background: #14161c; border-color: rgba(235,225,200,.12); }
    #videoStudioView .vs-cv-drawer-body .vs-optional-block summary { color: #d9c9a8; }
    #videoStudioView .vs-cv-drawer-body .vs-toggle { background: #1C1F28; border-color: rgba(235,225,200,.18); color: #cfd6cd; }
    #videoStudioView .vs-cv-drawer-body .btn-outline { border-color: rgba(235,225,200,.25); color: #F2EFE6; }
    #videoStudioView .vs-cv-drawer-body .btn-ghost { color: #8E93A3; }
    /* 脚本表/定妆预览等纸白卡在深色抽屉里保留(深色桌面上的纸张对比,与画布区一致) */
    /* room13 补:抽屉内浅色残留组件(方案标签 chips/调整折叠/plan 标签)深色化——用户截图点名看不清 */
    #videoStudioView .vs-cv-drawer-body .vs-tag-chip { background: #1C1F28; border: 1px solid rgba(235,225,200,.16); color: #cfd6cd; }
    #videoStudioView .vs-cv-drawer-body .vs-tag-chip b { color: #E3C878; }
    #videoStudioView .vs-cv-drawer-body .vs-tag-chip span { color: #F2EFE6; }
    #videoStudioView .vs-cv-drawer-body .vs-plan-tag { background: rgba(227,200,120,.12); color: #E3C878; }
    #videoStudioView .vs-cv-drawer-body details summary { color: #d9c9a8; }
    /* ═════ /20260703-vs-room12 ═════ */
    /* ═════ vs-dockvis(2026-07-11 用户真机报):dock=全局浮层,恒定深色实底——绝不吃视图主题覆盖 ═════
       根因:body.workbench-mode .generation-progress-card 玻璃卡规则(4%透明白)特异性更高,
       在浅色的跨境详情页工作台把 dock 卡刷成透明白+浅字=看不清。此处同特异性+源顺序在后,恒赢。 */
    body .generation-progress-dock .generation-progress-card {
      border-color: rgba(226, 207, 160, .18);
      border-radius: 12px;
      background: linear-gradient(145deg, rgba(7, 28, 25, .98), rgba(4, 15, 14, .97));
      color: var(--ivory-warm, #f6f4ee);
      box-shadow: 0 16px 42px rgba(2, 6, 6, .28), inset 0 1px 0 rgba(255, 255, 255, .08);
    }
    /* 已暂停态(vs-dockvis):暗黄边+徽标,与「进行中」呼吸动画区分 */
    body .generation-progress-dock .generation-progress-card.is-paused {
      border-color: rgba(232, 168, 60, .45);
    }
    .generation-progress-card.is-paused .generation-progress-meta .is-live.is-paused,
    .generation-progress-dock .generation-progress-meta .is-live.is-paused {
      color: #E8A83C;
      animation: none;
    }
    .generation-progress-card.is-paused .generation-progress-track span {
      animation: none;
      background: linear-gradient(90deg, rgba(232, 168, 60, .75), rgba(232, 168, 60, .5));
    }
    /* ═════ dockhard(2026-07-12 用户真机报「跑到落地页制作 dock 变透明看不清」残留脆弱点):
       dock=body 直接子(html>body>#generationProgressDock),恒深底浮层。vs-dockvis 靠平级源顺序压
       body.workbench-mode .generation-progress-card(透明白 4%)+文字走了会翻转的 --ivory-warm(workbench
       重定义成深墨 rgba(20,24,21,.62)),脆。此处用 #generationProgressDock ID 作用域(特异性(1,1,1))决定性压过
       所有 (0,2,1) 玻璃卡规则、不再靠源顺序;并在 dock 上钉死 --ivory-warm=亮,让后代 var(--ivory-warm) 恒亮。
       只钉背景+文字色,不碰 border(避免误伤 is-done 绿边/is-error 红边)。═════ */
    #generationProgressDock { --ivory-warm: #f6f4ee; }
    body #generationProgressDock .generation-progress-card {
      background: linear-gradient(145deg, rgba(7, 28, 25, .98), rgba(4, 15, 14, .97));
      color: #f6f4ee;
    }
    /* 聚合条/更多提示非 .generation-progress-card,vs-dockvis 覆盖不到,一并 ID 作用域钉死深底 */
    body #generationProgressDock .gpd-agg { background: rgba(4, 15, 14, .95); color: #e2e8f0; }
    body #generationProgressDock .gpd-multi-more { background: rgba(4, 15, 14, .9); color: rgba(226, 232, 240, .82); }
    /* dockdismiss:×移除按钮(与 toggle 同底·hover 转暖红),仅暂停/已停卡渲染 */
    #generationProgressDock .generation-progress-dismiss {
      display: inline-flex; align-items: center; justify-content: center;
      width: 28px; height: 28px; min-height: 28px; padding: 0; flex: none;
      border: 1px solid rgba(226, 207, 160, .16); border-radius: 8px;
      background: rgba(255, 255, 255, .08); color: rgba(226, 232, 240, .82); cursor: pointer;
    }
    #generationProgressDock .generation-progress-dismiss:hover {
      border-color: rgba(248, 160, 120, .5); background: rgba(248, 120, 90, .16); color: #fca5a5;
    }
    /* vs-castlock:三视图人脸一致性红牌(错人自动停用后的原因与出路提示) */
    #videoStudioView .vs-castanchor.is-risk {
      border-color: rgba(255, 120, 110, .45);
      background: rgba(255, 120, 110, .08);
      color: #ff9d94;
    }
    /* ═════ dp(2026-07-16 环2·策划方案步 Focus 对标 P1;killswitch __DETAIL_PLAN_UI__)═════
       浅色工作台配色随 stone 系;编辑态红描边=Focus 交互定稿;文字压产品等纪律在服务端方案里,此处只管编辑器外观。 */
    #detailPlanStepPanel .dp-notice { display: grid; gap: 6px; margin-bottom: 12px; padding: 10px 12px; border: 1px solid rgba(217, 119, 6, .35); border-radius: 10px; background: rgba(255, 237, 213, .5); }
    /* 批46 守卫黄牌:advisory 放行后的屏级/整稿级提醒(不拦截出图,用户裁决) */
    #detailPlanStepPanel .dp-guard-warn { display: grid; gap: 6px; margin: 8px 12px 0; padding: 8px 10px; border: 1px solid rgba(217, 119, 6, .45); border-radius: 8px; background: rgba(255, 243, 205, .6); font-size: 12px; color: #7c4a03; }
    #detailPlanStepPanel .dp-guard-warn-global { margin: 0 0 12px; }
    #detailPlanStepPanel .dp-guard-warn p { display: flex; gap: 6px; align-items: flex-start; margin: 0; line-height: 1.5; }
    #detailPlanStepPanel .dp-guard-warn p svg { flex: none; margin-top: 2px; }
    #detailPlanStepPanel .dp-guard-warn-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
    #detailPlanStepPanel .dp-guard-warn-actions .dp-tool { width: auto; height: auto; padding: 3px 10px; font-size: 11px; font-weight: 600; }
    #detailPlanStepPanel .dp-notice-flash { box-shadow: 0 0 0 3px rgba(217, 119, 6, .45); transition: box-shadow .3s ease; }
    /* 批47 黄牌内嵌补填:字段一键写入方案(零模型秒回) */
    #detailPlanStepPanel .dp-guard-fill { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; padding-left: 20px; }
    #detailPlanStepPanel .dp-guard-fill label { min-width: 120px; font-size: 11px; font-weight: 700; color: #7c4a03; }
    #detailPlanStepPanel .dp-guard-fill .dp-control { flex: 1; min-width: 160px; font-size: 12px; padding: 4px 8px; }
    #detailPlanStepPanel .dp-guard-fill .dp-warn-write { width: auto; height: auto; padding: 4px 10px; font-size: 11px; font-weight: 700; display: inline-flex; gap: 4px; align-items: center; background: rgba(217, 119, 6, .16); border: 1px solid rgba(217, 119, 6, .5); }
    #detailPlanStepPanel .dp-guard-fill .dp-warn-write:disabled { opacity: .5; }
    /* 批51 三卡折叠+切包类目调校+主图设计规范摘要 */
    #detailPlanStepPanel .dp-card.is-folded > *:not(h3) { display: none; }
    #detailPlanStepPanel .dp-card h3 .dp-fold-caret { margin-left: auto; opacity: .6; }
    #detailPlanStepPanel .dp-card h3[data-dp-fold] { display: flex; align-items: center; gap: 6px; user-select: none; }
    #detailPlanStepPanel .dp-pack-card .dp-pack-fitnote { display: block; margin-top: 2px; font-size: 10px; line-height: 1.4; opacity: .72; }
    #detailPlanStepPanel .dp-mi-designspec { display: block; margin-top: 4px; font-size: 11px; opacity: .75; }
    /* 批53 类目冲突可执行条(整套图类目错=最贵的错,视觉必须够重) */
    #detailPlanStepPanel .dp-category-conflict { display: grid; gap: 6px; margin-top: 10px; padding: 10px 12px; border: 1.5px solid rgba(220, 38, 38, .5); border-radius: 10px; background: rgba(254, 226, 226, .55); color: #7f1d1d; }
    #detailPlanStepPanel .dp-category-conflict p { display: flex; gap: 6px; align-items: flex-start; margin: 0; line-height: 1.5; }
    #detailPlanStepPanel .dp-category-conflict .dp-tool { width: auto; height: auto; padding: 5px 12px; font-size: 12px; font-weight: 700; display: inline-flex; gap: 5px; align-items: center; justify-self: start; background: rgba(220, 38, 38, .12); border: 1px solid rgba(220, 38, 38, .45); }
    #detailPlanStepPanel .dp-category-conflict .dp-tool.is-armed { background: rgba(220, 38, 38, .92); color: #fff; border-color: rgba(220, 38, 38, 1); }
    #detailPlanStepPanel .dp-notice p { display: flex; align-items: flex-start; gap: 6px; margin: 0; font-size: 12px; line-height: 1.5; color: #92400e; }
    #detailPlanStepPanel .dp-loading { display: flex; align-items: center; gap: 10px; padding: 28px 16px; color: #57534e; font-size: 13px; }
    #detailPlanStepPanel .dp-spin { animation: dpSpin 1s linear infinite; }
    @keyframes dpSpin { to { transform: rotate(360deg); } }
    #detailPlanStepPanel .dp-empty { display: grid; gap: 12px; padding: 18px 4px; }
    #detailPlanStepPanel .dp-empty-lead { font-size: 13px; line-height: 1.7; color: #44403c; margin: 0; }
    #detailPlanStepPanel .dp-empty-warn { font-size: 12px; color: #b45309; margin: 0; }
    #detailPlanStepPanel .dp-empty-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
    #detailPlanStepPanel .dp-error { font-size: 12px; color: #b91c1c; margin: 0; white-space: pre-wrap; }
    #detailPlanStepPanel .dp-skip-link { align-self: flex-start; border: none; background: none; padding: 0; font-size: 12px; color: #78716c; text-decoration: underline; cursor: pointer; }
    #detailPlanStepPanel .dp-skip-link:hover { color: #44403c; }
    #detailPlanStepPanel .dp-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
    #detailPlanStepPanel .dp-toolbar-left { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
    #detailPlanStepPanel .dp-restored-badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; background: rgba(20, 83, 45, .1); border: 1px solid rgba(20, 83, 45, .25); color: #166534; font-size: 12px; }
    #detailPlanStepPanel .dp-inline-check { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #57534e; }
    #detailPlanStepPanel .dp-screen-count { width: auto; padding: 4px 8px; font-size: 12px; }
    #detailPlanStepPanel .dp-field { display: grid; gap: 4px; }
    #detailPlanStepPanel .dp-field-label { font-size: 11px; font-weight: 700; color: #78716c; letter-spacing: .02em; }
    #detailPlanStepPanel .dp-control { width: 100%; border: 1px solid #d6d3d1; border-radius: 8px; padding: 6px 9px; font-size: 13px; line-height: 1.55; color: #292524; background: #fff; transition: border-color .12s ease, box-shadow .12s ease; }
    #detailPlanStepPanel .dp-control:focus { outline: none; border-color: #dc2626; box-shadow: 0 0 0 2px rgba(220, 38, 38, .18); }
    #detailPlanStepPanel textarea.dp-control { resize: vertical; }
    #detailPlanStepPanel .dp-pack-row { display: grid; gap: 8px; margin-bottom: 16px; }
    #detailPlanStepPanel .dp-pack-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
    #detailPlanStepPanel .dp-pack-toggle { display: inline-flex; flex: none; align-items: center; gap: 5px; min-height: 32px; padding: 5px 10px; border: 1px solid #d6d3d1; border-radius: 8px; background: #fff; color: #57534e; font-size: 11px; font-weight: 700; cursor: pointer; }
    #detailPlanStepPanel .dp-pack-toggle:hover { border-color: #78716c; color: #1c1917; }
    #detailPlanStepPanel .dp-pack-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
    #detailPlanStepPanel .dp-pack-card { position: relative; display: grid; gap: 5px; text-align: left; padding: 10px 12px; border: 1.5px solid #e7e5e4; border-radius: 12px; background: #fff; cursor: pointer; transition: border-color .12s ease, box-shadow .12s ease; }
    #detailPlanStepPanel .dp-pack-card:hover { border-color: #a8a29e; }
    #detailPlanStepPanel .dp-pack-card.is-selected { border-color: var(--accent, #14532d); box-shadow: 0 0 0 2px rgba(20, 83, 45, .16); }
    #detailPlanStepPanel .dp-pack-card strong { font-size: 13px; color: #1c1917; }
    #detailPlanStepPanel .dp-pack-card small { font-size: 11px; line-height: 1.5; color: #78716c; }
    #detailPlanStepPanel .dp-pack-card em { font-size: 10px; font-style: normal; color: #a16207; }
    #detailPlanStepPanel .dp-pack-card.is-applying { border-color: #a16207; opacity: .78; }
    #detailPlanStepPanel .dp-pack-applying { display: inline-flex; align-items: center; gap: 5px; color: #92400e !important; }
    #detailPlanStepPanel .dp-pack-swatch { display: flex; height: 10px; border-radius: 5px; overflow: hidden; }
    #detailPlanStepPanel .dp-pack-swatch i { flex: 1; }
    #detailPlanStepPanel .dp-pack-check { position: absolute; top: 8px; right: 8px; display: inline-flex; width: 18px; height: 18px; align-items: center; justify-content: center; border-radius: 999px; background: var(--accent, #14532d); color: #fff; }
    #detailPlanStepPanel .dp-cards-grid { display: grid; gap: 12px; margin-bottom: 16px; }
    @media (min-width: 1024px) { #detailPlanStepPanel .dp-cards-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
    #detailPlanStepPanel .dp-card { display: grid; gap: 10px; align-content: start; padding: 14px; border: 1px solid #e7e5e4; border-radius: 12px; background: #fafaf9; }
    #detailPlanStepPanel .dp-card h3 { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; font-weight: 800; color: #1c1917; }
    #detailPlanStepPanel .dp-screens-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin-bottom: 10px; }
    #detailPlanStepPanel .dp-screens-head h3 { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 14px; font-weight: 800; color: #1c1917; }
    #detailPlanStepPanel .dp-screens-head small { font-size: 11px; color: #78716c; }
    #detailPlanStepPanel .dp-screens-list { display: grid; gap: 12px; }
    /* ═══ 2026-07-27 P0-1:Focus 对齐的**阅读态**卡片(dp-fcard*)。中文标签窄列 + 值宽列,
       一屏一卡、信息密度高、零输入框。编辑态(dp-screen-card / dp-card)一个字没动。 */
    #detailPlanStepPanel .dp-fcards-list { display: grid; gap: 12px; }
    #detailPlanStepPanel .dp-fcards-grid { display: grid; gap: 12px; margin-bottom: 16px; }
    @media (min-width: 1024px) { #detailPlanStepPanel .dp-fcards-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; } }
    #detailPlanStepPanel .dp-fcard { border: 1px solid #e7e5e4; border-radius: 12px; background: #fff; padding: 12px 14px; }
    #detailPlanStepPanel .dp-fcard.is-disabled { opacity: .5; background: #f5f5f4; }
    #detailPlanStepPanel .dp-fcard-brief { background: #fafaf9; }
    #detailPlanStepPanel .dp-fcard-head { display: flex; align-items: center; gap: 8px; padding-bottom: 9px; margin-bottom: 8px; border-bottom: 1px solid #f0efee; }
    #detailPlanStepPanel .dp-fcard-eye { display: inline-flex; align-items: center; }
    #detailPlanStepPanel .dp-fcard-eye input { width: 15px; height: 15px; cursor: pointer; }
    #detailPlanStepPanel .dp-fcard-no { display: inline-flex; padding: 2px 8px; border-radius: 999px; background: #1c1917; color: #fff; font-size: 11px; font-weight: 800; white-space: nowrap; }
    #detailPlanStepPanel .dp-fcard-title { margin: 0; font-size: 13px; font-weight: 800; color: #1c1917; line-height: 1.45; overflow-wrap: anywhere; }
    #detailPlanStepPanel .dp-fcard-off { margin-left: auto; font-size: 10px; font-weight: 700; color: #a8a29e; white-space: nowrap; }
    #detailPlanStepPanel .dp-fcard-rows { display: grid; }
    #detailPlanStepPanel .dp-fcard-row,
    #detailPlanStepPanel .dp-fcard-group { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 10px; padding: 6px 0; border-top: 1px solid #f5f5f4; }
    #detailPlanStepPanel .dp-fcard-rows > .dp-fcard-row:first-child { border-top: 0; padding-top: 0; }
    #detailPlanStepPanel .dp-fcard-k { font-size: 11px; font-weight: 700; color: #a8a29e; line-height: 1.75; }
    #detailPlanStepPanel .dp-fcard-v { font-size: 12.5px; color: #292524; line-height: 1.65; overflow-wrap: anywhere; }
    #detailPlanStepPanel .dp-fcard-gk { font-size: 11px; font-weight: 800; color: #78716c; line-height: 1.75; }
    #detailPlanStepPanel .dp-fcard-gv { display: grid; }
    #detailPlanStepPanel .dp-fcard-gv .dp-fcard-row { grid-template-columns: 62px minmax(0, 1fr); gap: 8px; padding: 2px 0; border-top: 0; }
    #detailPlanStepPanel .dp-fcard-refs { display: flex; flex-wrap: wrap; gap: 6px; }
    #detailPlanStepPanel .dp-fcard-ref { position: relative; display: block; width: 44px; height: 44px; border: 1px solid #e7e5e4; border-radius: 8px; overflow: hidden; background: #fff; }
    #detailPlanStepPanel .dp-fcard-ref img { width: 100%; height: 100%; object-fit: cover; display: block; }
    #detailPlanStepPanel .dp-fcard-ref i { position: absolute; left: 2px; bottom: 2px; padding: 0 4px; border-radius: 4px; background: rgba(28, 25, 23, .72); color: #fff; font-size: 9px; font-style: normal; font-weight: 700; line-height: 1.5; }
    #detailPlanStepPanel .dp-fcard-warn { display: flex; align-items: flex-start; gap: 6px; margin: 0 0 8px; padding: 6px 8px; border-radius: 8px; background: rgba(180, 83, 9, .07); border: 1px solid rgba(180, 83, 9, .22); color: #92400e; font-size: 11px; line-height: 1.55; overflow-wrap: anywhere; }
    @media (max-width: 640px) {
      #detailPlanStepPanel .dp-fcard-row,
      #detailPlanStepPanel .dp-fcard-group { grid-template-columns: 64px minmax(0, 1fr); gap: 8px; }
      #detailPlanStepPanel .dp-fcard-gv .dp-fcard-row { grid-template-columns: 56px minmax(0, 1fr); }
    }
    #detailPlanStepPanel .dp-screen-card { border: 1px solid #e7e5e4; border-radius: 12px; background: #fff; padding: 12px; }
    #detailPlanStepPanel .dp-screen-card.is-disabled { opacity: .55; background: #f5f5f4; }
    #detailPlanStepPanel .dp-screen-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
    #detailPlanStepPanel .dp-screen-index { display: inline-flex; min-width: 22px; height: 22px; align-items: center; justify-content: center; border-radius: 999px; background: #1c1917; color: #fff; font-size: 11px; font-weight: 700; }
    #detailPlanStepPanel .dp-screen-title { flex: 1 1 160px; font-weight: 700; }
    #detailPlanStepPanel .dp-screen-meta { font-size: 10px; color: #a8a29e; white-space: nowrap; }
    /* S3 主图组来源徽章:背景色由 JS 按 sourcePolicy 内联(绿=原图直用/蓝=抠图白底/灰=AI 生成/橙=抠不动)。
       2026-07-17 夜补:此前只有内联背景色、零基础样式 → 渲染成彩色底上的裸黑字。 */
    #detailPlanStepPanel .dp-mi-badge { margin-left: auto; flex: none; padding: 3px 8px; border-radius: 999px; color: #fff; font-size: 10px; font-weight: 700; line-height: 1.4; white-space: nowrap; }
    #detailPlanStepPanel .dp-screen-tools { display: inline-flex; gap: 4px; margin-left: auto; }
    @media (max-width: 640px) {
      #detailPlanStepPanel .dp-fill-row { flex-direction: column; align-items: stretch !important; }
      #detailPlanStepPanel .dp-fill-row > span { min-width: 0 !important; }
      #detailPlanStepPanel .dp-screen-head { flex-wrap: wrap; align-items: flex-start; }
      #detailPlanStepPanel .dp-screen-title { min-width: 0; flex-basis: calc(100% - 38px); overflow-wrap: anywhere; }
      #detailPlanStepPanel .dp-screen-meta { flex-basis: 100%; white-space: normal; overflow-wrap: anywhere; }
      #detailPlanStepPanel .dp-screen-tools { margin-left: 30px; flex-wrap: wrap; }
      #detailPlanStepPanel .dp-mi-badge { margin-left: 30px; max-width: calc(100% - 30px); white-space: normal; overflow-wrap: anywhere; }
    }
    #detailPlanStepPanel .dp-tool { display: inline-flex; width: 26px; height: 26px; align-items: center; justify-content: center; border: 1px solid #d6d3d1; border-radius: 7px; background: #fff; color: #57534e; cursor: pointer; }
    #detailPlanStepPanel .dp-tool:hover:not(:disabled) { border-color: #78716c; color: #1c1917; }
    #detailPlanStepPanel .dp-tool:disabled { opacity: .35; cursor: default; }
    #detailPlanStepPanel .dp-tool.is-danger:hover { border-color: #dc2626; color: #dc2626; background: rgba(220, 38, 38, .06); }
    /* 批57:资料就绪块包含长文案，不能继承 .dp-tool 的 26×26 图标按钮盒。 */
    #detailPlanStepPanel .dp-readiness-summary { display: grid; grid-template-columns: auto max-content minmax(0, 1fr); align-items: start; gap: 6px; }
    #detailPlanStepPanel .dp-readiness-summary > strong { white-space: nowrap; word-break: keep-all; writing-mode: horizontal-tb; }
    #detailPlanStepPanel .dp-readiness-summary > span { min-width: 0; overflow-wrap: anywhere; }
    #detailPlanStepPanel .dp-readiness-recheck { width: auto; height: auto; min-height: 40px; padding: 7px 12px; gap: 6px; justify-self: start; white-space: normal; line-height: 1.35; font-size: 11px; font-weight: 700; }
    #detailPlanStepPanel .dp-readiness-recheck:disabled { opacity: .7; }
    #detailPlanStepPanel .dp-readiness-detail,
    #detailPlanStepPanel .dp-readiness-guidance { overflow-wrap: anywhere; }
    @media (max-width: 640px) {
      #detailPlanStepPanel .dp-pack-head { align-items: flex-start; flex-direction: column; }
      #detailPlanStepPanel .dp-pack-toggle { min-height: 44px; }
      #detailPlanStepPanel .dp-readiness-summary { grid-template-columns: auto minmax(0, 1fr); }
      #detailPlanStepPanel .dp-readiness-summary > span { grid-column: 2; }
      #detailPlanStepPanel .dp-readiness-recheck { width: 100%; min-height: 44px; justify-content: center; }
    }
    #detailPlanStepPanel .dp-screen-grid { display: grid; gap: 10px; }
    @media (min-width: 900px) { #detailPlanStepPanel .dp-screen-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    #detailPlanStepPanel .dp-model-block { display: grid; gap: 6px; align-content: start; }
    #detailPlanStepPanel .dp-verbatim { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
    #detailPlanStepPanel .dp-verbatim-chip { display: inline-flex; padding: 3px 9px; border-radius: 999px; font-size: 11px; background: rgba(20, 83, 45, .08); border: 1px solid rgba(20, 83, 45, .22); color: #166534; }
    #detailPlanStepPanel .dp-verbatim-chip.is-broken { background: rgba(220, 38, 38, .08); border-color: rgba(220, 38, 38, .4); color: #b91c1c; }
    #detailPlanStepPanel .dp-ref-row { grid-column: 1 / -1; display: grid; gap: 6px; }
    #detailPlanStepPanel .dp-ref-strip { display: flex; flex-wrap: wrap; gap: 6px; }
    #detailPlanStepPanel .dp-ref-thumb { position: relative; width: 46px; height: 46px; padding: 0; border: 2px solid #e7e5e4; border-radius: 9px; overflow: hidden; background: #fff; cursor: pointer; }
    #detailPlanStepPanel .dp-ref-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
    #detailPlanStepPanel .dp-ref-thumb.is-bound { border-color: var(--accent, #14532d); box-shadow: 0 0 0 2px rgba(20, 83, 45, .2); }
    #detailPlanStepPanel .dp-ref-index { position: absolute; left: 2px; bottom: 2px; padding: 0 4px; border-radius: 5px; background: rgba(28, 25, 23, .78); color: #fff; font-size: 9px; }
    #detailPlanStepPanel .dp-ref-check { position: absolute; top: 2px; right: 2px; display: inline-flex; width: 15px; height: 15px; align-items: center; justify-content: center; border-radius: 999px; background: var(--accent, #14532d); color: #fff; }
    #detailPlanStepPanel .dp-tips-grid { grid-column: 1 / -1; display: grid; gap: 10px; }
    @media (min-width: 900px) { #detailPlanStepPanel .dp-tips-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

    /* ── L0 抠图预览确认弹窗(2026-07-17 夜)──
       类名故意不用 .dp- 前缀:护栏钉死所有 .dp-* 规则必须落在 #detailPlanStepPanel 作用域内(防样式外溢),
       而本弹窗挂在 document.body 上,用 dp 前缀会让那条护栏红。 */
    .l0cut-modal { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 16px; }
    .l0cut-backdrop { position: absolute; inset: 0; background: rgba(28, 25, 23, .62); backdrop-filter: blur(2px); }
    .l0cut-panel { position: relative; display: flex; flex-direction: column; width: min(560px, 100%); max-height: min(88vh, 900px); overflow: hidden; border-radius: 16px; background: #fff; box-shadow: 0 24px 60px rgba(28, 25, 23, .3); }
    .l0cut-head { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-bottom: 1px solid #e7e5e4; }
    .l0cut-head h3 { font-size: 14px; font-weight: 800; color: #1c1917; }
    .l0cut-head small { display: block; margin-top: 2px; font-size: 11px; color: #78716c; }
    .l0cut-close { margin-left: auto; display: inline-flex; width: 30px; height: 30px; flex: none; align-items: center; justify-content: center; border-radius: 8px; color: #57534e; cursor: pointer; }
    .l0cut-close:hover { background: #f5f5f4; color: #1c1917; }
    .l0cut-body { overflow-y: auto; padding: 16px; }
    .l0cut-loading { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 180px; font-size: 13px; color: #57534e; }
    /* 复用 recharge-spin:本 CSS 里没有名为 spin 的 keyframes,自造一个名字会静默不转 */
    .l0cut-loading i { animation: recharge-spin .8s linear infinite; }
    .l0cut-fig { border: 1px solid #e7e5e4; border-radius: 12px; background: #fafaf9; overflow: hidden; }
    .l0cut-fig img { display: block; width: 100%; height: auto; }
    .l0cut-lead { margin-top: 12px; font-size: 12px; line-height: 1.65; color: #44403c; }
    .l0cut-facts { margin-top: 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .l0cut-facts > div { border: 1px solid #e7e5e4; border-radius: 9px; padding: 7px 9px; }
    .l0cut-facts dt { font-size: 10px; font-weight: 700; color: #a8a29e; }
    .l0cut-facts dd { margin-top: 2px; font-size: 12px; font-weight: 700; color: #1c1917; }
    .l0cut-warn { margin-top: 12px; display: flex; gap: 8px; border-radius: 10px; background: #fffbeb; padding: 9px 11px; color: #92400e; }
    .l0cut-warn i { flex: none; margin-top: 2px; }
    .l0cut-warn p { font-size: 12px; line-height: 1.6; }
    .l0cut-warn p + p { margin-top: 5px; }
    .l0cut-fail { display: flex; gap: 9px; border-radius: 10px; background: #fffbeb; padding: 11px 12px; color: #92400e; }
    .l0cut-fail i { flex: none; margin-top: 2px; }
    .l0cut-fail p { font-size: 12.5px; line-height: 1.65; }
    .l0cut-actions { margin-top: 14px; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
    /* ═════ /dp ═════ */
    /* ═════ dp-overlay(2026-07-17 环4a-2·结果卡叠层合成)═════ */
    .result-card .overlay-composite-badge { position: absolute; top: 10px; left: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; background: rgba(20, 83, 45, .88); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .04em; }
    .result-card .compose-overlay-btn { background: rgba(20, 83, 45, .92); color: #fff; }
    .result-card .compose-overlay-btn:hover { background: rgba(20, 83, 45, 1); }
    /* ═════ /dp-overlay ═════ */
    /* ═════ dp-plandrive(2026-07-17 S1·方案驱动套图步+结果卡方案详情)═════ */
    .slot-card .plandrive-slot-badge { display: inline-flex; width: 20px; height: 20px; margin-top: 2px; align-items: center; justify-content: center; border-radius: 6px; background: rgba(20, 83, 45, .12); border: 1px solid rgba(20, 83, 45, .3); color: #14532d; }
    /* 参考图溯源(2026-07-26):每张成品卡显示它真正参考了哪几张上传原图 */
    .result-card .refprov { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
    .result-card .refprov-label { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 800; color: #14532d; }
    .result-card .refprov-list { display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; }
    .result-card .refprov-thumb { position: relative; width: 34px; height: 34px; border-radius: 7px; overflow: hidden; border: 1.5px solid rgba(20, 83, 45, .28); background: #fafaf9; display: inline-block; }
    .result-card .refprov-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .result-card .refprov-thumb em { position: absolute; left: 0; right: 0; bottom: 0; font-style: normal; font-size: 9px; line-height: 12px; text-align: center; color: #fff; background: rgba(0, 0, 0, .55); }
    .result-card .refprov-thumb-empty { display: inline-flex; align-items: center; justify-content: center; }
    .result-card .refprov-thumb-empty em { position: static; color: #57534e; background: transparent; font-size: 10px; }
    .result-card .plandrive-result-plan { margin-top: 8px; font-size: 12px; }
    .result-card .plandrive-result-plan summary { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; color: #14532d; font-weight: 700; }
    .result-card .plandrive-result-plan-body { margin-top: 6px; display: grid; gap: 4px; padding: 8px 10px; border-radius: 8px; background: rgba(20, 83, 45, .06); border: 1px solid rgba(20, 83, 45, .16); }
    .result-card .plandrive-result-plan-body p { margin: 0; line-height: 1.55; color: #44403c; }
    /* ═════ /dp-plandrive ═════ */

    /* 批64:AI 解析浅色工作台可读性。旧暗色组件把事实值写成浅色，浅色作用域必须逐项覆写。 */
    body.workbench-mode #twinStatusPanel .twin-variant-summary { color: var(--ink-soft); opacity: 1; }
    body.workbench-mode #twinStatusPanel .twin-variant-label { color: var(--ink-soft); opacity: 1; }
    body.workbench-mode #twinStatusPanel .twin-cat-row dd { color: var(--ink); opacity: 1; }
    body.workbench-mode #twinStatusPanel .twin-cat-row dd.is-empty { color: var(--ink-soft); opacity: 1; }
    body.workbench-mode #twinStatusPanel .twin-cat-row textarea { color: var(--ink); background: var(--panel); opacity: 1; }
    body.workbench-mode #twinStatusPanel .twin-cat-row small { color: var(--ink-soft) !important; opacity: 1; }

#detailPlanStepPanel .dp-ref-exclusion-note {
      display: flex;
      align-items: flex-start;
      gap: 6px;
      margin: 6px 0 0;
      color: #6b6254;
      font-size: 11px;
      line-height: 1.55;
}

#detailPlanStepPanel .dp-ref-exclusion-note > span {
  min-width: 0;
  overflow-wrap: anywhere;
}
    #detailPlanStepPanel .dp-ref-exclusion-note i { flex: none; margin-top: 1px; color: #8a6d2f; }

    /* ===== UX修 2026-07-18(用户真机截图):对比度三处 ===== */
    /* ① 中/EN 切换:active 态「中」字对比度不足 */
    body.workbench-mode #appShell > .sidebar .lang-btn.is-active,
    body.workbench-mode #appShell > .sidebar .lang-btn.active {
      background: linear-gradient(180deg, #E9CA7E, #C9A95F);
      color: #171310;
      font-weight: 1000;
      box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
    }
    body.workbench-mode #appShell > .sidebar .lang-btn:not(.is-active):not(.active) {
      color: rgba(246, 244, 238, .92);
    }
    /* ② 选择平台卡片:图标改品牌色块(灰图标看不清) */
    .platform-card-icon[style*="--pbc"] {
      background: var(--pbc);
      color: #fff;
    }
    .platform-card-btn.active .platform-card-icon[style*="--pbc"] {
      background: var(--pbc);
      color: #fff;
      box-shadow: 0 0 0 2px rgba(31, 58, 51, .35);
    }
    /* ③ 底部平台条:字标与文字提亮 */
    body.workbench-mode #appShell > .main .wb-platform-chip { opacity: .95; }
    /* ===== 批39 2026-07-18:免费模特库面板对比度(截图2:文字全看不清) ===== */
    #mainModelLibraryPanel strong, #mainModelLibraryPanel h4, #mainModelLibraryPanel summary { color: #211d16 !important; }
    #mainModelLibraryPanel p, #mainModelLibraryPanel span, #mainModelLibraryPanel label, #mainModelLibraryPanel small { color: #4a443a; }
    #mainModelLibraryPanel .chip, #mainModelLibraryPanel [class*="tag"] { color: #5a4a22 !important; background: #f4ecd7; border-color: #d6c493; }
    #mainModelLibraryPanel .model-library-clear-btn.is-muted { background: #33413d; color: #fff !important; border-color: #33413d; }
    #mainModelLibraryPanel .model-library-clear-btn.is-muted span { color: #fff !important; }
    /* ===== 批42 2026-07-18:「筛选模特」块对比度真修(用户二次报看不清) =====
       批39 复盘:chips 真身是 .replicate-model-filter-options > button(选中类 .is-active),
       DOM 里根本没有 .chip/.active(JS renderModelLibraryFilterBar 渲染,零内联样式),
       所以批39 的 [class*="filter"] .chip(.active) 两条永远不命中;按钮一直吃基础暗色规则
       (13826 行 color:rgba(226,232,240,.82)+近透明白底)压在批39 刷浅的 #f8f5ee 上=浅字浅底。
       另:批39 一揽子 #mainModelLibraryPanel span 涂深也毒到暗底「选择模特」按钮里的 span。
       本块按真实 DOM 键名重写;批39 的 .chip 两条已删(死选择器)。 */
    /* a) 抽屉容器:米色卡片 + 实体边框,与外层近白面板区分 */
    #mainModelLibraryPanel .main-model-filter-drawer { background: #f5f1e6; border: 1px solid #ddd3bd; box-shadow: none; }
    #mainModelLibraryPanel .main-model-filter-drawer summary:hover { background: #efe9d9; }
    #mainModelLibraryPanel .main-model-filter-drawer .main-model-filter-bar { border-top: 1px solid #e2d9c4; background: transparent; }
    /* b) 抽屉头:标题「筛选模特」深字,摘要「全部年龄·全部风格·全部区域」可读次级 */
    #mainModelLibraryPanel .main-model-filter-title { color: #211d16; }
    #mainModelLibraryPanel .main-model-filter-summary { color: #6b6353; }
    #mainModelLibraryPanel .main-model-filter-drawer.has-active .main-model-filter-summary { color: #7a5c1e; }
    #mainModelLibraryPanel .main-model-filter-chevron { color: #7a6f5c; }
    /* c) 年龄/风格/区域 行标签 */
    #mainModelLibraryPanel .replicate-model-filter-row > span { color: #3d3a33; }
    /* d) chips 真身:未选=白底深字带边框;hover 可辨;选中=金底深字 */
    #mainModelLibraryPanel .replicate-model-filter-row button {
      background: #fff;
      color: #3d3a33;
      border: 1px solid #cfc6b2;
      box-shadow: none;
    }
    #mainModelLibraryPanel .replicate-model-filter-row button:hover {
      background: #f4ecd7;
      border-color: #b8a67d;
      color: #211d16;
    }
    #mainModelLibraryPanel .replicate-model-filter-row button.is-active {
      background: linear-gradient(180deg, #E9CA7E, #C9A95F);
      color: #171310;
      border-color: #b08f47;
      font-weight: 900;
    }
    /* e) 「未使用模特」空态卡:原为暗色玻璃底,被批39 涂深的字压成深压深;
          统一成浅色卡,「选择模特」改金底深字主按钮 */
    #mainModelLibraryPanel .main-model-selected { background: #fffdf8; border: 1px solid #ddd3bd; color: #4a443a; box-shadow: none; }
    #mainModelLibraryPanel .main-model-selected.is-empty { background: #fffdf8; }
    #mainModelLibraryPanel .model-library-empty-avatar { background: #f4ecd7; border-color: #d6c493; color: #8a6d2f; box-shadow: none; }
    #mainModelLibraryPanel .model-library-scroll-btn {
      background: linear-gradient(180deg, #E9CA7E, #C9A95F);
      border: 1px solid #b08f47;
      color: #171310;
    }
    #mainModelLibraryPanel .model-library-scroll-btn span { color: #171310; }
    #mainModelLibraryPanel .model-library-scroll-btn:hover {
      background: linear-gradient(180deg, #F0D68E, #D4B46A);
      border-color: #b08f47;
      color: #171310;
    }