/* Interactive production console shared by the Chinese and English case pages. */
.studio-shell {
  margin-top: 8px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 18px;
  background: #10100f;
  color: #f4f0e8;
  box-shadow: 0 30px 70px -36px rgba(0,0,0,.68);
}
.studio-topbar {
  min-height: 52px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid rgba(255,255,255,.09);
  background: #171715;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.studio-brand { display: flex; align-items: center; gap: 10px; font-weight: 650; }
.studio-lights { display: flex; gap: 5px; }
.studio-lights i { width: 7px; height: 7px; border-radius: 50%; background: #4f4d48; }
.studio-lights i:first-child { background: #c8442a; }
.studio-lights i:nth-child(2) { background: #b8915a; }
.studio-run { display: flex; align-items: center; gap: 8px; color: #aaa59b; }
.studio-run i { width: 7px; height: 7px; border-radius: 50%; background: #72a778; box-shadow: 0 0 0 5px rgba(114,167,120,.12); }
.studio-grid {
  display: grid;
  grid-template-columns: 205px minmax(0,1fr) 230px;
  min-height: 510px;
}
.studio-stages {
  padding: 18px 12px;
  border-right: 1px solid rgba(255,255,255,.08);
  background: #131312;
}
.studio-stages-label,
.inspector-label {
  padding: 0 10px 10px;
  color: #77736b;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.stage-btn {
  width: 100%;
  padding: 12px 10px;
  display: grid;
  grid-template-columns: 25px 1fr 8px;
  gap: 8px;
  align-items: center;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #8f8b82;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: color .2s, background .2s, transform .2s;
}
.stage-btn + .stage-btn { margin-top: 3px; }
.stage-btn:hover { color: #f4f0e8; background: rgba(255,255,255,.045); }
.stage-btn[aria-selected="true"] { color: #fffaf1; background: rgba(200,68,42,.17); transform: translateX(3px); }
.stage-index { font-size: 10px; font-weight: 700; letter-spacing: .08em; color: #6f6a62; }
.stage-btn[aria-selected="true"] .stage-index { color: #e77760; }
.stage-name { font-size: 12px; font-weight: 560; line-height: 1.25; }
.stage-dot { width: 6px; height: 6px; border-radius: 50%; background: #4f4d48; }
.stage-btn[aria-selected="true"] .stage-dot { background: #e8674a; box-shadow: 0 0 0 4px rgba(232,103,74,.13); }
.studio-progress { margin: 18px 10px 0; }
.studio-progress-head { margin-bottom: 7px; display: flex; justify-content: space-between; color: #656159; font-size: 10px; letter-spacing: .1em; }
.studio-progress-track { height: 3px; overflow: hidden; border-radius: 10px; background: #2c2b28; }
.studio-progress-track i { display: block; width: 20%; height: 100%; border-radius: inherit; background: #c8442a; transition: width .45s cubic-bezier(.2,.8,.2,1); }
.stage-view { min-width: 0; padding: 28px; background: radial-gradient(circle at 86% 8%, rgba(200,68,42,.1), transparent 34%), #10100f; }
.stage-scene { min-height: 450px; flex-direction: column; }
.stage-scene:not([hidden]) { display: flex; animation: studioSceneIn .32s ease both; }
@keyframes studioSceneIn { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
.scene-kicker { color: #d26650; font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.scene-title { margin-top: 8px; color: #fffaf1; font-size: clamp(23px,2.6vw,34px); font-weight: 480; line-height: 1.14; letter-spacing: -.03em; }
.scene-sub { max-width: 570px; margin-top: 9px; color: #8f8b82; font-size: 12px; line-height: 1.55; }
.workbench {
  flex: 1;
  margin-top: 24px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 13px;
  background: rgba(255,255,255,.025);
}
.brief-board { padding: 18px; display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; }
.brief-cell { min-width: 0; padding: 13px 14px; border: 1px solid rgba(255,255,255,.075); border-radius: 9px; background: #171715; }
.brief-cell.wide { grid-column: 1 / -1; }
.brief-cell span { display: block; margin-bottom: 5px; color: #706c64; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.brief-cell strong { display: block; color: #e8e3d9; font-size: 12px; font-weight: 520; line-height: 1.45; }
.brief-cell.wide strong { font-size: 16px; color: #fffaf1; }
.config-sheet { padding: 10px 18px 14px; }
.config-row { padding: 12px 0; display: grid; grid-template-columns: 26px 94px 1fr; gap: 9px; border-bottom: 1px solid rgba(255,255,255,.065); font: 11px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; }
.config-row:last-child { border-bottom: 0; }
.config-line { color: #56534e; }
.config-key { color: #d17964; }
.config-value { min-width: 0; overflow-wrap: anywhere; color: #aaa59b; }
.voice-board { padding: 18px; display: grid; gap: 16px; }
.voice-meta { display: flex; justify-content: space-between; gap: 12px; color: #858078; font: 10px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; }
.voice-meta strong { color: #7fb184; font-weight: 600; }
.waveform { height: 104px; padding: 0 10px; display: flex; align-items: center; gap: 4px; border-radius: 10px; background: #171715; }
.waveform i { flex: 1; min-width: 2px; height: var(--h); border-radius: 4px; background: linear-gradient(to top,#7d3f32,#d36b54); opacity: .88; animation: wavePulse 1.8s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -55ms); }
@keyframes wavePulse { to { transform: scaleY(.72); opacity: .62; } }
.caption-track { padding: 13px 15px; border-left: 2px solid #c8442a; border-radius: 0 8px 8px 0; background: #171715; color: #d8d2c8; font-size: 12px; }
.caption-track time { margin-right: 8px; color: #66625b; font: 9px ui-monospace, SFMono-Regular, Menlo, monospace; }
.render-board { padding: 16px; display: grid; grid-template-columns: 1.3fr .7fr; gap: 14px; }
.render-preview { position: relative; min-height: 250px; overflow: hidden; border-radius: 10px; background: #080808; }
.render-preview img { width: 100%; height: 100%; min-height: 250px; display: block; object-fit: cover; object-position: center 48%; opacity: .82; }
.safe-guide { position: absolute; inset: 9% 12%; border: 1px dashed rgba(255,255,255,.48); border-radius: 4px; }
.render-time { position: absolute; left: 12px; bottom: 10px; padding: 4px 7px; border-radius: 5px; background: rgba(0,0,0,.72); color: white; font: 9px ui-monospace, SFMono-Regular, Menlo, monospace; }
.qa-stack { display: grid; align-content: start; gap: 7px; }
.qa-item { padding: 10px; display: flex; justify-content: space-between; gap: 9px; border: 1px solid rgba(255,255,255,.07); border-radius: 8px; color: #8f8b82; font-size: 10px; }
.qa-item b { color: #7fb184; font-weight: 700; }
.release-files { padding: 16px; display: grid; grid-template-columns: repeat(2,1fr); gap: 9px; }
.file-card { min-width: 0; padding: 13px; display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: center; border: 1px solid rgba(255,255,255,.075); border-radius: 9px; background: #171715; }
.file-icon { width: 30px; height: 34px; display: grid; place-items: center; border-radius: 5px; background: #262521; color: #c87661; font: 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.file-copy { min-width: 0; }
.file-copy strong { display: block; overflow: hidden; color: #e6e0d6; font: 10px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace; text-overflow: ellipsis; white-space: nowrap; }
.file-copy span { display: block; margin-top: 3px; color: #706c64; font-size: 10px; }
.stage-inspector { padding: 20px 14px; border-left: 1px solid rgba(255,255,255,.08); background: #151513; }
.output-panel:not([hidden]) { display: block; animation: studioSceneIn .32s ease both; }
.output-state { margin: 2px 8px 18px; padding: 13px; border: 1px solid rgba(114,167,120,.2); border-radius: 9px; background: rgba(114,167,120,.07); }
.output-state span { display: block; color: #6e9973; font-size: 10px; font-weight: 700; letter-spacing: .12em; }
.output-state strong { display: block; margin-top: 4px; color: #dce7dc; font-size: 14px; font-weight: 560; }
.output-list { list-style: none; }
.output-list li { padding: 10px 8px; display: grid; grid-template-columns: 16px 1fr; gap: 7px; border-bottom: 1px solid rgba(255,255,255,.06); color: #99948a; font-size: 10px; line-height: 1.4; }
.output-list li::before { content: '✓'; color: #75a97a; font-weight: 700; }

.release-system {
  padding: 26px;
  display: grid;
  grid-template-columns: minmax(0,1fr) 90px 250px;
  gap: 18px;
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--card);
  box-shadow: var(--shadow);
}
.release-lane-label { color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.release-assets { margin-top: 14px; display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; }
.release-asset { padding: 12px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--paper-soft); opacity: .35; transform: translateY(10px); transition: opacity .36s, transform .36s, border-color .2s; }
.release-system.is-active .release-asset { opacity: 1; transform: none; }
.release-system.is-active .release-asset:nth-child(2) { transition-delay: .08s; }
.release-system.is-active .release-asset:nth-child(3) { transition-delay: .16s; }
.release-system.is-active .release-asset:nth-child(4) { transition-delay: .24s; }
.release-system.is-active .release-asset:nth-child(5) { transition-delay: .32s; }
.release-system.is-active .release-asset:nth-child(6) { transition-delay: .40s; }
.release-asset b { display: block; color: var(--accent); font: 10px ui-monospace, SFMono-Regular, Menlo, monospace; }
.release-asset span { display: block; margin-top: 3px; color: var(--ink-2); font-size: 12px; }
.release-gate { position: relative; min-height: 150px; display: grid; place-items: center; text-align: center; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .1em; }
.release-gate::before { content: ''; position: absolute; top: 50%; left: -18px; right: -18px; height: 1px; background: var(--line); }
.release-gate span { position: relative; z-index: 1; width: 60px; height: 60px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: var(--paper); color: var(--accent); transform: scale(.75); transition: transform .4s .46s cubic-bezier(.2,.8,.2,1); }
.release-system.is-active .release-gate span { transform: scale(1); }
.release-package { min-height: 210px; padding: 20px; position: relative; overflow: hidden; border-radius: 13px; background: #171715; color: #f4f0e8; transform: translateX(16px); opacity: .5; transition: transform .48s .55s cubic-bezier(.2,.8,.2,1), opacity .4s .55s; }
.release-system.is-active .release-package { transform: none; opacity: 1; }
.release-package::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 100% 0,rgba(200,68,42,.22),transparent 42%); }
.release-package > * { position: relative; }
.package-top { display: flex; justify-content: space-between; gap: 10px; color: #7f7a71; font-size: 10px; letter-spacing: .1em; }
.package-count { margin-top: 30px; color: #fffaf1; font-size: 44px; font-weight: 420; line-height: 1; letter-spacing: -.06em; }
.package-count span { margin-left: 7px; color: #89847b; font-size: 12px; letter-spacing: 0; }
.package-ready { margin-top: 20px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.1); display: flex; align-items: center; gap: 8px; color: #7fb184; font-size: 10px; font-weight: 650; letter-spacing: .06em; }
.package-ready i { width: 7px; height: 7px; border-radius: 50%; background: #72a778; box-shadow: 0 0 0 4px rgba(114,167,120,.11); }

.production-compare { display: grid; grid-template-columns: 1fr 54px 1fr; align-items: stretch; }
.compare-side { min-width: 0; padding: 28px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.compare-side.after { border-color: color-mix(in srgb,var(--accent) 32%,var(--line)); box-shadow: var(--shadow); }
.compare-kicker { display: inline-flex; padding: 4px 8px; border-radius: 5px; background: var(--paper-soft); color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .12em; }
.compare-side.after .compare-kicker { background: color-mix(in srgb,var(--accent) 10%,var(--paper)); color: var(--accent); }
.compare-side h3 { margin-top: 16px; font-size: 22px; font-weight: 480; letter-spacing: -.025em; }
.compare-side p { margin-top: 8px; color: var(--muted); font-size: 14px; line-height: 1.55; }
.scatter-board { height: 172px; margin-top: 24px; position: relative; border-radius: 11px; background: var(--paper-soft); }
.scatter-note { position: absolute; padding: 8px 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--card); color: var(--muted); font-size: 10px; box-shadow: 0 7px 15px -12px rgba(0,0,0,.4); }
.scatter-note:nth-child(1) { left: 8%; top: 15%; transform: rotate(-5deg); }
.scatter-note:nth-child(2) { right: 7%; top: 10%; transform: rotate(4deg); }
.scatter-note:nth-child(3) { left: 25%; bottom: 12%; transform: rotate(3deg); }
.scatter-note:nth-child(4) { right: 14%; bottom: 22%; transform: rotate(-4deg); }
.scatter-reset { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; display: grid; place-items: center; border: 1px dashed var(--line); border-radius: 50%; background: var(--paper); color: var(--accent); font-size: 10px; font-weight: 700; letter-spacing: .08em; transform: translate(-50%,-50%); }
.system-chain { min-height: 172px; margin-top: 24px; display: grid; grid-template-columns: repeat(4,1fr); align-items: center; gap: 10px; border-radius: 11px; background: color-mix(in srgb,var(--paper-soft) 74%,transparent); }
.chain-node { position: relative; padding: 12px 8px; text-align: center; }
.chain-node::after { content: '→'; position: absolute; right: -10px; top: 50%; color: var(--accent); transform: translateY(-50%); }
.chain-node:last-child::after { display: none; }
.chain-node i { width: 38px; height: 38px; margin: 0 auto 8px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 9px; background: var(--card); color: var(--accent); font-style: normal; font-size: 10px; font-weight: 700; }
.chain-node strong { display: block; color: var(--ink-2); font-size: 10px; font-weight: 560; }
.compare-shift { display: grid; place-items: center; color: var(--accent); font-size: 28px; }

@media (max-width: 940px) {
  .studio-grid { grid-template-columns: 170px minmax(0,1fr); }
  .stage-inspector { grid-column: 1 / -1; border-top: 1px solid rgba(255,255,255,.08); border-left: 0; }
  .output-panel:not([hidden]) { display: grid; grid-template-columns: 170px 1fr; gap: 12px; align-items: start; }
  .output-list { display: grid; grid-template-columns: repeat(3,1fr); }
  .output-list li { border-bottom: 0; }
  .release-system { grid-template-columns: 1fr; }
  .release-gate { min-height: 58px; }
  .release-gate::before { top: -18px; bottom: -18px; left: 50%; right: auto; width: 1px; height: auto; }
  .release-package { min-height: 190px; }
}
@media (max-width: 700px) {
  .studio-topbar { padding: 10px 13px; flex-wrap: wrap; }
  .studio-grid { display: block; }
  .studio-stages { padding: 10px; display: flex; gap: 6px; overflow-x: auto; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.08); scrollbar-width: none; }
  .studio-stages::-webkit-scrollbar { display: none; }
  .studio-stages-label, .studio-progress { display: none; }
  .stage-btn { min-width: 116px; padding: 10px; grid-template-columns: 21px 1fr; }
  .stage-btn + .stage-btn { margin-top: 0; }
  .stage-btn[aria-selected="true"] { transform: none; }
  .stage-dot { display: none; }
  .stage-view { padding: 20px 16px; }
  .stage-scene { min-height: 460px; }
  .brief-board, .release-files { grid-template-columns: 1fr; }
  .brief-cell.wide { grid-column: auto; }
  .config-row { grid-template-columns: 22px 78px 1fr; }
  .render-board { grid-template-columns: 1fr; }
  .qa-stack { grid-template-columns: repeat(2,1fr); }
  .stage-inspector { padding: 17px 10px; }
  .output-panel:not([hidden]) { display: block; }
  .output-list { grid-template-columns: repeat(2,1fr); }
  .release-system { padding: 18px; }
  .release-assets { grid-template-columns: repeat(2,1fr); }
  .production-compare { grid-template-columns: 1fr; gap: 12px; }
  .compare-shift { transform: rotate(90deg); }
  .compare-side { padding: 22px 18px; }
}
@media (max-width: 420px) {
  .studio-run span { display: none; }
  .config-row { grid-template-columns: 20px 1fr; }
  .config-value { grid-column: 2; }
  .release-assets, .output-list { grid-template-columns: 1fr; }
  .system-chain { grid-template-columns: repeat(2,1fr); padding: 8px; }
  .chain-node:nth-child(2)::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .waveform i { animation: none; }
  .release-asset, .release-package, .release-gate span { opacity: 1; transform: none; }
}