:root {
        color-scheme: light;
        font-family: "Inter", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
        --ink: #182033;
        --muted: #667085;
        --quiet: #98a2b3;
        --paper: #ffffff;
        --paper-strong: #fffdf7;
        --cream: #fff8e8;
        --cream-strong: #fff2c6;
        --duck: #ffc83d;
        --duck-deep: #f5a400;
        --beak: #ff8a1f;
        --beak-deep: #d96b00;
        --blue: #2f7bff;
        --blue-deep: #175ee8;
        --blue-soft: #eaf5ff;
        --green: #12a37f;
        --orange: #ff8a1f;
        --rose: #d94b7a;
        --violet: #7b61ff;
        --soft: #f3f8ff;
        --line: #dce9f6;
        --line-strong: #bfd3e9;
        --shadow: 0 16px 36px rgba(79, 103, 135, 0.08);
        --shadow-soft: 0 9px 22px rgba(79, 103, 135, 0.055);
        --duck-shadow: 0 12px 26px rgba(245, 164, 0, 0.16);
      }

      * { box-sizing: border-box; }
      html { scroll-behavior: smooth; }
      body {
        margin: 0;
        min-height: 100vh;
        overflow-x: hidden;
        background:
          radial-gradient(circle at 8% 0%, rgba(255, 200, 61, 0.18), transparent 26%),
          radial-gradient(circle at 92% 12%, rgba(47, 123, 255, 0.13), transparent 30%),
          linear-gradient(180deg, #fffaf0 0%, #f1f8ff 48%, #fffdf8 100%);
        color: var(--ink);
      }

      header {
        position: sticky;
        top: 0;
        z-index: 20;
        display: grid;
        grid-template-columns: minmax(240px, 1fr) auto minmax(290px, 1fr);
        align-items: center;
        gap: 22px;
        min-height: 72px;
        padding: 13px 22px;
        background: rgba(255, 253, 247, 0.9);
        border-bottom: 1px solid var(--line);
        backdrop-filter: blur(18px);
        box-shadow: 0 1px 0 rgba(255,255,255,0.9) inset, 0 10px 26px rgba(47, 123, 255, 0.045);
      }

      h1, h2, h3, p { margin: 0; }
      h1 {
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        font-size: 22px;
        line-height: 1.15;
        letter-spacing: 0;
      }
      h1::before {
        content: "";
        width: 11px;
        height: 26px;
        border-radius: 4px;
        background: linear-gradient(180deg, var(--duck), var(--beak));
        box-shadow: var(--duck-shadow);
      }
      h2 { font-size: 15px; letter-spacing: 0; }
      h3 { font-size: 13px; letter-spacing: 0; }
      .sub { color: var(--muted); font-size: 12px; line-height: 1.55; margin-top: 5px; }

      .appBrand {
        min-width: 0;
      }
      .appBrand h1 {
        font-size: 20px;
      }
      .appNav {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 5px;
        border: 1px solid #dfeaf6;
        border-radius: 12px;
        background: linear-gradient(180deg, #ffffff, var(--blue-soft));
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.82);
      }
      .navTab {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 38px;
        padding: 9px 14px;
        border: 0;
        background: transparent;
        color: #43536a;
        box-shadow: none;
        white-space: nowrap;
        text-decoration: none;
      }
      .navTab.active {
        color: var(--blue-deep);
        background: #ffffff;
        box-shadow: 0 8px 20px rgba(47, 123, 255, 0.12);
      }
      .navMenu {
        position: relative;
        display: inline-flex;
        align-items: center;
      }
      .navMenuTrigger {
        cursor: pointer;
      }
      .navMenuTrigger::after {
        content: "";
        width: 7px;
        height: 7px;
        margin-left: 8px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: translateY(-2px) rotate(45deg);
        opacity: 0.64;
      }
      .navSubmenu {
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        z-index: 40;
        min-width: 176px;
        padding: 7px;
        border: 1px solid #d7e5f4;
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.98);
        box-shadow: 0 18px 36px rgba(47, 78, 118, 0.15);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-4px);
        transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s ease;
      }
      .navSubmenu::before {
        content: "";
        position: absolute;
        inset: -10px 0 auto;
        height: 10px;
      }
      .navMenu:hover .navSubmenu,
      .navMenu:focus-within .navSubmenu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
      }
      .navSubmenu a {
        display: flex;
        align-items: center;
        min-height: 36px;
        padding: 8px 10px;
        border-radius: 8px;
        color: #33445b;
        font-size: 13px;
        font-weight: 800;
        text-decoration: none;
        white-space: nowrap;
      }
      .navSubmenu a:hover,
      .navSubmenu a:focus-visible {
        color: var(--blue-deep);
        background: var(--blue-soft);
        outline: none;
      }
      .quotaBadge {
        display: inline-flex;
        align-items: center;
        min-height: 32px;
        padding: 6px 10px;
        border-radius: 10px;
        color: #8a4f00;
        background: linear-gradient(180deg, #fff5cf, #ffe89b);
        border: 1px solid rgba(245, 164, 0, 0.24);
        font-weight: 900;
      }
      .statusBox {
        min-width: 310px;
        display: grid;
        justify-items: end;
        gap: 8px;
        color: var(--muted);
        font-size: 12px;
      }
      #status {
        max-width: 520px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-weight: 800;
        color: #344054;
      }

      .topProgress {
        width: 270px;
        height: 7px;
        overflow: hidden;
        border-radius: 999px;
        background: #e8f0f8;
        box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.08);
      }
      .topProgress span {
        display: block;
        width: 0%;
        height: 100%;
        border-radius: inherit;
        background: linear-gradient(90deg, var(--duck), var(--beak), var(--blue));
        transition: width 0.4s ease;
      }

      .shell {
        display: grid;
        grid-template-columns: minmax(360px, 430px) minmax(0, 1fr);
        gap: 18px;
        width: min(1780px, 100%);
        margin: 0 auto;
        padding: 18px;
      }
      .appPage[hidden] {
        display: none !important;
      }
      .workspaceToolbar {
        grid-column: 1 / -1;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        margin-bottom: -6px;
      }
      .workspaceGuide {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: minmax(260px, 0.78fr) minmax(0, 1.22fr);
        gap: 14px;
        align-items: stretch;
        padding: 14px;
        border: 1px solid rgba(255, 200, 61, 0.28);
        border-radius: 8px;
        background:
          linear-gradient(135deg, rgba(255, 200, 61, 0.18), transparent 34%),
          linear-gradient(180deg, #ffffff, #fffaf0 52%, #f4faff 100%);
        box-shadow: var(--shadow-soft);
      }
      .workspaceGuide[hidden] {
        display: none !important;
      }
      #workspacePage.workspaceWorkbench {
        display: block;
        width: min(1840px, 100%);
      }
      .workspaceModeTabs {
        display: grid;
        grid-template-columns: minmax(260px, 1fr) minmax(360px, 640px) auto;
        gap: 16px;
        align-items: center;
        margin-bottom: 16px;
      }
      .workspaceTitleBlock {
        display: grid;
        gap: 5px;
      }
      .workspaceTitleBlock span {
        color: #9a5a00;
        font-size: 12px;
        font-weight: 900;
      }
      .workspaceTitleBlock h2 {
        color: #172033;
        font-size: 24px;
        line-height: 1.18;
      }
      .workspaceTabList {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0;
        overflow: hidden;
        border: 1px solid rgba(255, 138, 31, 0.28);
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.76);
        box-shadow: var(--shadow-soft);
      }
      .workspaceTabButton {
        min-height: 48px;
        border: 0;
        border-radius: 0;
        background: transparent;
        color: #667085;
        box-shadow: none;
        font-size: 14px;
        font-weight: 900;
      }
      .workspaceTabButton.active {
        color: var(--beak-deep);
        background: linear-gradient(180deg, #fffaf0, #ffffff);
        box-shadow: inset 0 0 0 2px rgba(255, 138, 31, 0.48), 0 8px 18px rgba(255, 138, 31, 0.12);
      }
      .workspaceHeaderActions {
        display: flex;
        justify-content: flex-end;
        align-items: center;
      }
      .workspacePane[hidden] {
        display: none !important;
      }
      .workspaceStaticLayout {
        display: grid;
        grid-template-columns: minmax(320px, 0.72fr) minmax(330px, 1fr) minmax(330px, 1fr);
        gap: 14px;
        align-items: stretch;
      }
      .workspaceStaticLeft,
      .workspaceStaticCenter,
      .workspaceStaticRight {
        display: grid;
        gap: 14px;
        align-self: stretch;
        min-width: 0;
      }
      .workspaceStaticLeft > .panel,
      .workspaceStaticCenter > .panel,
      .workspaceStaticRight > .panel {
        height: 100%;
        min-height: 0;
      }
      .workspaceMatrixResultPanel,
      .workspaceCutResultPanel,
      .staticSketchInputPanel {
        display: flex;
        flex-direction: column;
      }
      .workspaceMatrixResultPanel > .panelBody,
      .workspaceCutResultPanel > .panelBody,
      .staticSketchInputPanel > .panelBody {
        flex: 1;
      }
      .workspaceStaticInputs,
      .workspaceStaticResults,
      .workspaceGifInputs,
      .workspaceGifResults,
      .workspaceGifTools {
        display: grid;
        gap: 14px;
        min-width: 0;
      }
      .workspaceStaticResults {
        grid-template-columns: minmax(0, 1fr);
      }
      .workspaceStaticControls,
      .workspaceStaticMatrix,
      .workspaceStaticCrop {
        min-width: 0;
      }
      .staticInputPanel .panelBody {
        display: grid;
        gap: 10px;
      }
      .staticSketchInputPanel .panelHead {
        min-height: 42px;
      }
      .staticSketchInputPanel .panelBody {
        padding: 12px;
      }
      .staticSketchInputPanel .guidedGroup {
        border-radius: 8px;
        background: linear-gradient(180deg, #fffdf8, #ffffff);
      }
      .staticControlTop {
        display: grid;
        grid-template-columns: minmax(128px, 0.9fr) minmax(150px, 1.1fr);
        gap: 8px;
        align-items: start;
        padding: 0;
        border: 0;
        background: transparent;
      }
      .staticUploadCard,
      .staticFilterCard,
      .staticPromptPanel {
        min-width: 0;
        border: 1px solid rgba(255, 138, 31, 0.22);
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.88);
      }
      .staticUploadCard,
      .staticFilterCard {
        display: grid;
        align-content: start;
        gap: 7px;
        padding: 9px;
      }
      .staticFilterCard {
        overflow: visible;
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 138, 31, 0.34) transparent;
      }
      .staticUploadLabel {
        margin: 0;
        font-size: 11px;
      }
      .staticUploadLabel input[type="file"] {
        min-height: 32px;
        padding: 6px 7px;
        font-size: 11px;
      }
      .portraitUploadStage {
        min-height: 132px;
        margin: 0;
      }
      .staticUploadCard .portraitUploadStage {
        min-height: 132px;
        padding: 9px;
      }
      .staticUploadCard .portraitUploadStage .stageEmpty {
        min-height: 108px;
        padding: 10px;
      }
      .staticUploadCard .portraitUploadStage .stageEmpty span {
        padding: 4px 7px;
        font-size: 11px;
      }
      .staticUploadCard .portraitUploadStage .stageEmpty h3 {
        font-size: 12px;
      }
      .staticUploadCard .portraitUploadStage .stageEmpty p {
        font-size: 11px;
        line-height: 1.45;
      }
      .portraitUploadStage img,
      .portraitUploadStage video {
        max-height: 122px;
      }
      .staticUploadCard .portraitUploadStage img,
      .staticUploadCard .portraitUploadStage video {
        max-height: 122px;
        margin-top: 0;
      }
      .staticFilterGrid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 6px;
        margin: 0;
      }
      .staticFilterCard .staticFilterGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px 8px;
        margin-top: 0;
      }
      .staticFilterGrid label {
        margin: 0;
        gap: 3px;
        font-size: 11px;
        line-height: 1.15;
      }
      .staticFilterGrid select,
      .staticFilterGrid input {
        min-height: 30px;
        padding: 5px 7px;
        font-size: 11px;
      }
      .staticFilterCard .staticFilterGrid select,
      .staticFilterCard .staticFilterGrid input {
        min-height: 40px;
        padding: 5px 6px;
        font-size: 10.5px;
      }
      .staticFilterGrid #roleFieldGroup[hidden] {
        display: none;
      }
      .staticPersonRoleField {
        grid-column: auto;
        max-width: none;
        min-width: 0;
      }
      .staticPersonRoleField small {
        display: none;
      }
      .staticDirectionField {
        grid-column: 1 / -1;
        margin: 2px 0 0;
        padding-top: 7px;
        border-top: 1px solid rgba(255, 138, 31, 0.16);
      }
      .staticDirectionField input {
        min-height: 34px;
      }
      .staticPromptPanel {
        display: grid;
        gap: 8px;
        padding: 9px;
      }
      .staticAdvancedPanel {
        padding: 0;
        overflow: hidden;
      }
      .staticAdvancedHeader {
        display: flex;
        width: 100%;
        min-height: 46px;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        padding: 9px 10px;
        border: 0;
        border-radius: 0;
        background: linear-gradient(90deg, #fff8e8, #ffffff);
        box-shadow: none;
        text-align: left;
      }
      .staticAdvancedHeader span {
        display: grid;
        gap: 2px;
        min-width: 0;
      }
      .staticAdvancedHeader strong {
        color: #172033;
        font-size: 13px;
        line-height: 1.1;
      }
      .staticAdvancedHeader small {
        overflow: hidden;
        color: #8a4f00;
        font-size: 11px;
        font-weight: 800;
        line-height: 1.25;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .staticAdvancedHeader b {
        flex: 0 0 auto;
        color: #ff7600;
        font-size: 12px;
      }
      .staticAdvancedContent {
        display: grid;
        gap: 8px;
        padding: 9px;
        border-top: 1px solid rgba(255, 138, 31, 0.14);
      }
      .staticAdvancedContent[hidden] {
        display: none !important;
      }
      .staticAdvancedOptions {
        display: grid;
        gap: 6px;
      }
      .staticCheckRow {
        display: grid;
        grid-template-columns: 18px minmax(0, 1fr);
        gap: 7px;
        align-items: start;
        min-height: 34px;
        margin: 0;
        padding: 7px;
        border: 1px solid rgba(220, 233, 246, 0.94);
        border-radius: 8px;
        background: #ffffff;
      }
      .staticCheckRow input {
        width: 16px;
        height: 16px;
        min-height: 0;
        margin: 1px 0 0;
        padding: 0;
        accent-color: #ff8a1f;
      }
      .staticCheckRow span {
        display: grid;
        gap: 2px;
        min-width: 0;
      }
      .staticCheckRow strong {
        color: #172033;
        font-size: 11.5px;
        line-height: 1.15;
      }
      .staticCheckRow small {
        color: #667085;
        font-size: 10.5px;
        line-height: 1.3;
      }
      .staticPromptPanel .groupHead {
        margin-bottom: 0;
      }
      .staticPromptPanel .groupHead h3 {
        font-size: 12px;
      }
      .staticPromptPanel .groupHead p {
        display: none;
      }
      .staticPromptPanel label,
      .staticPromptPanel .fieldHeader label {
        margin-top: 0;
        font-size: 11px;
      }
      .staticPromptPanel input,
      .staticPromptPanel textarea {
        min-height: 30px;
        padding: 7px 8px;
        font-size: 11px;
      }
      .staticPromptPanel #finalPrompt {
        min-height: 74px;
        line-height: 1.45;
      }
      .workspaceMatrixResultBody {
        display: grid;
        grid-template-rows: minmax(360px, 1fr) auto;
        gap: 12px;
        min-height: 452px;
        position: relative;
      }
      .workspaceMatrixResultBody #matrixStage {
        min-height: 360px;
      }
      .staticMatrixStage {
        cursor: zoom-in;
      }
      .staticMatrixToolbar {
        position: absolute;
        top: 14px;
        right: 14px;
        z-index: 2;
        display: flex;
        gap: 8px;
        padding: 6px;
        border: 1px solid rgba(220, 233, 246, 0.94);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.86);
        backdrop-filter: blur(10px);
        box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
      }
      .staticMatrixToolbar button {
        min-height: 30px;
        padding: 6px 10px;
        border-radius: 999px;
        font-size: 12px;
      }
      .staticResultActions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
      }
      .staticResultActions button,
      .staticSelectionToolbar button {
        min-height: 38px;
      }
      .workspaceCutResultBody {
        display: grid;
        grid-template-rows: minmax(360px, 1fr) auto auto auto;
        gap: 10px;
        min-height: 452px;
      }
      .staticSelectionToolbar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
        align-items: center;
        padding: 8px 10px;
        border: 1px solid rgba(255, 138, 31, 0.2);
        border-radius: 8px;
        background: linear-gradient(90deg, #fff8e8, #ffffff);
      }
      .staticSelectionToolbar span {
        display: block;
        color: #172033;
        font-size: 13px;
        font-weight: 950;
      }
      .staticSelectionToolbar small {
        display: block;
        margin-top: 3px;
        color: #667085;
        font-size: 11px;
        line-height: 1.45;
      }
      .staticSelectionMiniActions {
        display: flex;
        gap: 8px;
      }
      .staticSelectionMiniActions button {
        min-width: 74px;
        min-height: 32px;
        padding: 6px 8px;
        font-size: 12px;
      }
      .staticSelectionStatus {
        min-width: 0;
      }
      .staticInlineSingleActions {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
      }
      .staticInlineSingleActions button {
        min-height: 34px;
        padding: 7px 8px;
        font-size: 12px;
      }
      .staticCropActions {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 10px;
        align-items: center;
      }
      .staticCropPrimaryActions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
      }
      .staticCropPrimaryActions button {
        min-height: 46px;
        font-size: 15px;
      }
      .staticHiddenFlow {
        display: none !important;
      }
      .staticConsistencyNotice {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 8px;
        align-items: center;
        padding: 6px 9px;
        border: 1px solid rgba(255, 190, 68, 0.38);
        border-radius: 8px;
        background: linear-gradient(90deg, rgba(255, 248, 228, 0.95), rgba(255, 255, 255, 0.95));
      }
      .staticConsistencyNotice strong {
        color: #8a4f00;
        font-size: 11px;
        white-space: nowrap;
      }
      .staticConsistencyNotice span {
        color: #667085;
        min-width: 0;
        overflow: hidden;
        font-size: 10.5px;
        line-height: 1.35;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .staticPromptPanel .tierActionRow {
        gap: 7px;
      }
      .staticPromptPanel .tierAction {
        grid-template-columns: minmax(0, 1fr) 96px;
        min-height: 38px;
      }
      .staticPromptPanel .tierAction > button,
      .staticPromptPanel .tierPicker {
        min-height: 38px;
      }
      .staticPromptPanel .tierAction > button {
        padding: 0 10px;
        font-size: 12px;
      }
      .staticPromptPanel .tierPicker {
        gap: 2px;
        padding: 0 22px 0 9px;
      }
      .staticPromptPanel .tierPicker::after {
        right: 9px;
        width: 6px;
        height: 6px;
      }
      .staticPromptPanel .tierPickerLabel {
        font-size: 11px;
      }
      .staticPromptPanel .tierPickerMeta {
        display: none;
      }
      .staticGeneratePanel {
        display: grid;
        gap: 8px;
        padding: 10px;
        border: 1px solid rgba(255, 138, 31, 0.28);
        border-radius: 8px;
        background: linear-gradient(180deg, #fff8e8, #ffffff);
      }
      .staticGenerateCopy {
        display: grid;
        gap: 3px;
      }
      .staticGenerateCopy strong {
        color: #172033;
        font-size: 13px;
      }
      .staticModeBadge {
        width: fit-content;
        padding: 3px 7px;
        border: 1px solid rgba(255, 138, 31, 0.24);
        border-radius: 999px;
        background: #ffffff;
        color: #8a4f00;
        font-size: 10.5px;
        font-style: normal;
        font-weight: 900;
        line-height: 1.2;
      }
      .staticModeBadge[data-mode="advanced"] {
        border-color: rgba(47, 123, 255, 0.24);
        color: #175ee8;
        background: #f5fbff;
      }
      .staticGenerateCopy span {
        color: #667085;
        font-size: 11px;
        line-height: 1.4;
      }
      .staticGenerateAction {
        grid-template-columns: minmax(0, 1fr) 96px;
        margin-top: 2px;
      }
      .staticGenerateAction #generateImage {
        min-height: 40px;
        font-size: 13px;
        background: linear-gradient(180deg, #ff9a2b, #ff7600);
        box-shadow: 0 16px 28px rgba(255, 118, 0, 0.22);
      }
      .staticGifEntryPanel {
        position: sticky;
        top: 92px;
        border-color: rgba(255, 138, 31, 0.22);
        background: linear-gradient(180deg, rgba(255, 251, 242, 0.98), rgba(255, 255, 255, 0.98));
      }
      .staticSelectionPanel {
        background: linear-gradient(180deg, rgba(255, 251, 242, 0.98), rgba(255, 255, 255, 0.98));
      }
      .staticGifEntryBody {
        display: grid;
        gap: 14px;
      }
      .staticGifPreview {
        min-height: 190px;
        display: grid;
        place-items: center;
        overflow: hidden;
        border: 1px dashed rgba(255, 138, 31, 0.32);
        border-radius: 8px;
        background:
          linear-gradient(45deg, rgba(255,255,255,0.82) 25%, transparent 25% 75%, rgba(255,255,255,0.82) 75%),
          linear-gradient(45deg, rgba(255,255,255,0.82) 25%, transparent 25% 75%, rgba(255,255,255,0.82) 75%),
          linear-gradient(180deg, #fff9ed, #f7fbff);
        background-size: 22px 22px, 22px 22px, auto;
        background-position: 0 0, 11px 11px, 0 0;
      }
      .staticGifPreview img {
        width: min(78%, 180px);
        max-height: 180px;
        object-fit: contain;
        filter: drop-shadow(0 14px 18px rgba(78, 61, 32, 0.14));
      }
      .staticSelectionPreview {
        min-height: 210px;
      }
      .staticSelectionSummary {
        display: grid;
        place-items: center;
        width: 132px;
        height: 132px;
        border-radius: 50%;
        color: #ffffff;
        background: linear-gradient(180deg, #ff9a2b, #ff7600);
        box-shadow: 0 16px 28px rgba(255, 118, 0, 0.22);
      }
      .staticSelectionSummary strong {
        font-size: 38px;
        line-height: 1;
      }
      .staticSelectionSummary span {
        font-size: 13px;
        font-weight: 900;
      }
      .staticGifEmpty {
        display: grid;
        gap: 5px;
        max-width: 210px;
        text-align: center;
      }
      .staticGifEmpty strong {
        color: #172033;
        font-size: 14px;
      }
      .staticGifEmpty span {
        color: #667085;
        font-size: 12px;
        line-height: 1.55;
      }
      .staticMotionTemplates {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
      }
      .staticMotionTemplates button {
        min-height: 36px;
        border: 1px solid rgba(255, 138, 31, 0.26);
        background: #ffffff;
        color: #8a4f00;
        box-shadow: none;
      }
      .staticSelectedActions,
      .staticBatchActions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
      }
      .staticSelectedActions button,
      .staticBatchActions button {
        min-height: 42px;
      }
      .staticGifMiniPreview {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 46px;
        gap: 10px;
        align-items: center;
        min-height: 58px;
        padding: 10px;
        border: 1px solid rgba(220, 233, 246, 0.95);
        border-radius: 8px;
        background: #ffffff;
      }
      .staticGifMiniPreview span {
        color: #667085;
        font-size: 12px;
        font-weight: 850;
      }
      .staticGifMiniPreview div {
        display: grid;
        place-items: center;
        width: 46px;
        height: 34px;
        border-radius: 999px;
        background: #686f7a;
        color: #ffffff;
        font-size: 12px;
        font-weight: 950;
      }
      .staticGoGifButton {
        width: 100%;
        min-height: 48px;
        font-size: 16px;
      }
      .staticGoGifButton:not(:disabled) {
        background: linear-gradient(180deg, #ff9a2b, #ff7600);
        color: #ffffff;
        box-shadow: 0 12px 24px rgba(255, 118, 0, 0.22);
      }
      .staticGoGifButton:disabled,
      .staticResultActions button:disabled,
      .staticMatrixToolbar button:disabled,
      .staticSelectedActions button:disabled,
      .staticBatchActions button:disabled,
      .staticInlineSingleActions button:disabled,
      .staticCropPrimaryActions button:disabled,
      .staticSelectionMiniActions button:disabled {
        cursor: not-allowed;
        color: #98a2b3;
        background: #f5f7fb;
        border-color: #e5edf6;
        box-shadow: none;
        opacity: 1;
      }
      .staticRedrawModal[hidden] {
        display: none !important;
      }
      .staticRedrawModal {
        position: fixed;
        inset: 0;
        z-index: 90;
        display: grid;
        place-items: center;
        padding: 22px;
      }
      .staticRedrawBackdrop {
        position: absolute;
        inset: 0;
        background:
          linear-gradient(120deg, rgba(255, 248, 223, 0.82), rgba(248, 250, 252, 0.88)),
          rgba(15, 23, 42, 0.34);
        backdrop-filter: blur(12px);
      }
      .staticRedrawWorkarea {
        position: relative;
        z-index: 1;
        display: grid;
        gap: 0;
        width: min(1320px, 96vw);
        max-height: 92vh;
        overflow: auto;
        border: 1px solid rgba(255, 255, 255, 0.72);
        border-radius: 20px;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.94));
        box-shadow: 0 24px 72px rgba(15, 23, 42, 0.14);
      }
      .staticRedrawHead {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        padding: 0 0 12px;
        background: transparent;
      }
      .staticRedrawHead h2 {
        margin: 0;
        color: #111827;
        font-size: 18px;
        letter-spacing: 0;
      }
      .staticRedrawHead p {
        margin: 4px 0 0;
        color: #64748b;
        font-size: 12px;
        font-weight: 800;
      }
      .staticRedrawClose {
        width: 42px;
        min-height: 42px;
        border-radius: 12px;
        font-size: 20px;
      }
      .staticRedrawGrid {
        display: grid;
        grid-template-columns: minmax(280px, 0.94fr) minmax(360px, 1fr) minmax(280px, 0.94fr);
        align-items: start;
        gap: 16px;
        padding: 0;
      }
      .staticRedrawPanel {
        display: grid;
        align-content: start;
        gap: 14px;
        min-height: 0;
        padding: 20px;
        border: 1px solid rgba(224, 231, 241, 0.96);
        border-radius: 16px;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.9));
        box-shadow:
          0 18px 44px rgba(15, 23, 42, 0.10),
          inset 0 1px 0 rgba(255, 255, 255, 0.92);
      }
      .staticRedrawGrid h3 {
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 0;
        color: #172033;
        font-size: 16px;
        font-weight: 950;
      }
      .staticRedrawPanelIcon {
        display: inline-grid;
        place-items: center;
        width: 22px;
        height: 22px;
        border-radius: 7px;
        color: #6b7280;
        background: #f3f4f6;
        font-size: 14px;
        line-height: 1;
      }
      .staticRedrawPanelIcon.accent {
        color: #ff7200;
        background: #fff3e6;
      }
      .staticRedrawDivider {
        height: 1px;
        margin: 2px 0 4px;
        background: linear-gradient(90deg, rgba(203, 213, 225, 0.9), transparent);
      }
      .staticRedrawLabel {
        margin: 2px 0 -4px;
        color: #1f2937;
        font-size: 14px;
        font-weight: 950;
      }
      .staticRedrawOriginalPanel,
      .staticRedrawResultPanel {
        grid-template-rows: auto minmax(300px, 388px) auto;
        align-content: center;
        min-height: 520px;
      }
      .staticRedrawResultPanel {
        grid-template-rows: auto minmax(300px, 388px) auto auto;
      }
      .staticRedrawStage {
        min-height: 0;
        width: 100%;
        aspect-ratio: 1 / 1;
        max-height: 388px;
        align-self: center;
        display: grid;
        place-items: center;
        overflow: hidden;
        border: 1px solid rgba(226, 232, 240, 0.96);
        border-radius: 12px;
        background:
          linear-gradient(45deg, #f4f4f4 25%, transparent 25% 75%, #f4f4f4 75%),
          linear-gradient(45deg, #f4f4f4 25%, transparent 25% 75%, #f4f4f4 75%),
          #ffffff;
        background-size: 24px 24px, 24px 24px, auto;
        background-position: 0 0, 12px 12px, 0 0;
      }
      .staticRedrawStage img {
        width: min(84%, 292px);
        max-height: 82%;
        object-fit: contain;
        filter: drop-shadow(0 12px 18px rgba(15, 23, 42, 0.12));
      }
      .staticRedrawPaintFrame {
        position: relative;
        display: grid;
        place-items: center;
        width: min(84%, 292px);
        max-height: 82%;
      }
      .staticRedrawPaintFrame img {
        width: 100%;
        max-height: 100%;
      }
      .staticRedrawMaskCanvas {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border-radius: 10px;
        pointer-events: none;
        touch-action: none;
        cursor: crosshair;
      }
      .staticRedrawStepNote {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 48px;
        padding: 12px 14px;
        border: 1px solid rgba(255, 183, 55, 0.20);
        border-radius: 12px;
        background: linear-gradient(180deg, rgba(255, 251, 242, 0.78), rgba(255, 255, 255, 0.82));
        color: #475569;
        font-size: 13px;
        font-weight: 800;
        line-height: 1.45;
      }
      .staticRedrawStepNote b {
        flex: 0 0 auto;
        color: #d26400;
        font-size: 13px;
        font-weight: 950;
        white-space: nowrap;
      }
      .staticRedrawSettingsPanel {
        align-content: start;
      }
      .staticRedrawOptions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
      }
      .staticRedrawMode,
      .staticRedrawIntensity label,
      .staticRedrawPreserve,
      .staticRedrawPromptField,
      .staticRedrawStrengthField {
        display: flex;
        align-items: center;
        gap: 12px;
        min-height: 58px;
        padding: 12px 14px;
        border: 1px solid rgba(220, 227, 238, 0.98);
        border-radius: 12px;
        background: linear-gradient(180deg, #ffffff, #fbfdff);
        box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04);
      }
      .staticRedrawIntensity {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        padding: 8px;
        border: 1px solid rgba(255, 183, 55, 0.24);
        border-radius: 10px;
        background: rgba(255, 248, 223, 0.62);
      }
      .staticRedrawIntensity label {
        justify-content: center;
        min-height: 46px;
        padding: 8px 10px;
        cursor: pointer;
      }
      .staticRedrawIntensity label:has(input:checked) {
        color: #9a4d00;
        border-color: rgba(255, 139, 18, 0.74);
        background: #fff3c4;
      }
      .staticRedrawMode {
        cursor: pointer;
        position: relative;
        min-height: 104px;
        align-content: center;
        justify-content: center;
        flex-direction: column;
        text-align: center;
      }
      .staticRedrawMode:has(input:checked) {
        border-color: #ff7a00;
        background:
          radial-gradient(circle at 50% 0%, rgba(255, 224, 169, 0.58), transparent 48%),
          linear-gradient(180deg, #fffaf0, #ffffff);
        box-shadow: 0 12px 26px rgba(255, 122, 0, 0.15);
      }
      .staticRedrawMode[data-redraw-mode-card="local"],
      .staticRedrawMode[data-redraw-mode-card="custom"] {
        grid-column: 1 / -1;
        min-height: 68px;
        justify-content: flex-start;
        flex-direction: row;
        text-align: left;
      }
      .staticRedrawMode input {
        position: absolute;
        left: 16px;
        top: 18px;
        width: 18px;
        height: 18px;
        accent-color: #ff7600;
      }
      .staticRedrawModeIcon {
        display: grid;
        place-items: center;
        width: 42px;
        height: 42px;
        margin-top: 6px;
        color: #818181;
        font-size: 30px;
        line-height: 1;
      }
      .staticRedrawMode:has(input:checked) .staticRedrawModeIcon {
        color: #ff7600;
      }
      .staticRedrawMode span,
      .staticRedrawPromptField,
      .staticRedrawStrengthField {
        display: grid;
        gap: 3px;
      }
      .staticRedrawMode strong,
      .staticRedrawPromptField span,
      .staticRedrawStrengthField span {
        color: #172033;
        font-size: 12px;
        font-weight: 950;
      }
      .staticRedrawMode small {
        color: #64748b;
        font-size: 13px;
        font-weight: 800;
        line-height: 1.25;
      }
      .staticRedrawPreserve input {
        width: 22px;
        height: 22px;
        accent-color: #2f80ed;
      }
      .staticRedrawShield {
        display: grid;
        place-items: center;
        width: 26px;
        height: 26px;
        color: #64748b;
        border-radius: 8px;
        background: #f1f5f9;
      }
      .staticRedrawPreserve span:last-child {
        display: grid;
        gap: 2px;
      }
      .staticRedrawPreserve strong {
        color: #172033;
        font-size: 14px;
        font-weight: 950;
      }
      .staticRedrawPreserve small {
        color: #64748b;
        font-size: 12px;
        font-weight: 800;
      }
      .staticRedrawMaskTools {
        grid-column: 1 / -1;
        display: grid;
        gap: 10px;
        padding: 12px;
        border: 1px solid rgba(255, 183, 55, 0.26);
        border-radius: 12px;
        background: linear-gradient(180deg, #fffaf0, #ffffff);
      }
      .staticRedrawMaskTools[hidden] {
        display: none;
      }
      .staticRedrawBrushHint {
        display: grid;
        gap: 3px;
        color: #64748b;
        font-size: 12px;
        font-weight: 800;
        line-height: 1.45;
      }
      .staticRedrawBrushHint strong {
        color: #172033;
        font-size: 13px;
        font-weight: 950;
      }
      .staticRedrawBrushTools {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
      }
      .staticRedrawBrushTools button {
        min-height: 36px;
        padding: 7px 9px;
      }
      .staticRedrawBrushTools button.active {
        color: #a54700;
        border-color: rgba(255, 122, 0, 0.58);
        background: #fff3c4;
      }
      .staticRedrawBrushSize {
        display: grid;
        gap: 8px;
        color: #172033;
        font-size: 12px;
        font-weight: 950;
      }
      .staticRedrawBrushSize span {
        display: flex;
        justify-content: space-between;
      }
      .staticRedrawBrushSize b {
        color: #d26400;
      }
      .staticRedrawBrushSize input {
        width: 100%;
        accent-color: #ff7600;
      }
      .staticRedrawPromptField,
      .staticRedrawGenerateRow,
      .staticRedrawGrid [data-static-redraw-generate] {
        grid-column: 1 / -1;
      }
      .staticRedrawGenerateRow {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 10px;
      }
      .staticRedrawGenerateRow span {
        min-height: 34px;
        display: inline-grid;
        place-items: center;
        padding: 6px 10px;
        border: 1px solid rgba(255, 183, 55, 0.30);
        border-radius: 999px;
        color: #a84c00;
        background: #fff7e6;
        font-size: 12px;
        font-weight: 950;
        white-space: nowrap;
      }
      .staticRedrawPromptField {
        align-items: stretch;
        padding: 12px;
      }
      .staticRedrawPromptField textarea {
        width: 100%;
        min-height: 86px;
        resize: vertical;
        border: 0;
        background: transparent;
        box-shadow: none;
        line-height: 1.6;
      }
      .staticRedrawPromptField > span,
      .staticRedrawStrengthField > span {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
      }
      .staticRedrawPromptField .textButton {
        min-height: 26px;
        padding: 3px 8px;
        color: #d26400;
        background: #fff7e6;
        border-color: rgba(255, 173, 48, 0.4);
        font-size: 12px;
      }
      #staticRedrawStrengthValue {
        color: #d26400;
        font-size: 12px;
      }
      .staticRedrawStrengthField input {
        width: 100%;
        accent-color: #2f80ed;
      }
      .staticRedrawDisabled {
        color: #98a2b3;
        background: #f5f7fb;
      }
      .staticRedrawGrid [data-static-redraw-generate] {
        min-height: 50px;
        border-color: #ff7a00;
        background: linear-gradient(180deg, #ff9b21, #ff7600);
        color: #ffffff;
        box-shadow: 0 14px 26px rgba(255, 118, 0, 0.24);
      }
      .staticRedrawGrid [data-static-redraw-generate]:hover {
        transform: translateY(-1px);
      }
      .staticRedrawAdvanced {
        grid-column: 1 / -1;
        display: grid;
        gap: 12px;
        border: 1px solid rgba(255, 183, 55, 0.24);
        border-radius: 12px;
        background: rgba(255, 251, 242, 0.74);
      }
      .staticRedrawAdvanced summary {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        min-height: 48px;
        padding: 11px 13px;
        cursor: pointer;
        list-style: none;
      }
      .staticRedrawAdvanced summary::-webkit-details-marker {
        display: none;
      }
      .staticRedrawAdvanced summary span {
        color: #172033;
        font-size: 13px;
        font-weight: 950;
      }
      .staticRedrawAdvanced summary small {
        color: #8a5a00;
        font-size: 12px;
        font-weight: 800;
        text-align: right;
      }
      .staticRedrawAdvanced[open] {
        padding-bottom: 12px;
      }
      .staticRedrawAdvanced[open] > :not(summary) {
        margin-left: 12px;
        margin-right: 12px;
      }
      .staticRedrawActions {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
        padding-top: 2px;
      }
      .staticRedrawActions [data-static-redraw-transparent]:not(:disabled) {
        color: #047857;
        border-color: rgba(20, 184, 166, 0.45);
        background: linear-gradient(180deg, #ecfdf5, #ffffff);
      }
      .staticRedrawActions button:disabled {
        cursor: not-allowed;
        color: #98a2b3;
        background: #f5f7fb;
        border-color: #e5edf6;
      }
      .staticRedrawEmptyCard {
        display: grid;
        justify-items: center;
        align-content: center;
        gap: 14px;
        width: min(84%, 300px);
        min-height: 190px;
        padding: 26px 22px;
        border: 1px solid rgba(226, 232, 240, 0.86);
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.88);
        box-shadow: 0 20px 46px rgba(15, 23, 42, 0.12);
        text-align: center;
      }
      .staticRedrawEmptyIcon {
        display: grid;
        place-items: center;
        width: 70px;
        height: 70px;
        border-radius: 50%;
        color: #b9cde7;
        background:
          radial-gradient(circle, rgba(255, 244, 222, 0.95), rgba(255, 255, 255, 0.4)),
          #ffffff;
        font-size: 40px;
      }
      .staticRedrawEmptyCard h3 {
        display: block;
        margin: 0;
        color: #111827;
        font-size: 18px;
        text-align: center;
      }
      .staticRedrawEmptyCard p {
        margin: 0;
        color: #64748b;
        font-size: 13px;
        font-weight: 800;
        line-height: 1.55;
      }
      .workspaceGifLayout {
        display: grid;
        grid-template-columns: minmax(320px, 0.9fr) minmax(420px, 1fr) minmax(320px, 0.95fr);
        gap: 16px;
        align-items: start;
      }
      .workspaceGifLeft,
      .workspaceGifCenter,
      .workspaceGifRight {
        display: flex;
        flex-direction: column;
        gap: 14px;
        min-width: 0;
      }
      .workspaceGifLeft > .panel,
      .workspaceGifCenter > .panel,
      .workspaceGifRight > .panel,
      .gifInputPanel,
      .gifPreviewPanel,
      .gifEditedResultPanel {
        display: flex;
        flex-direction: column;
      }
      .gifInputPanel .panelBody,
      .gifPreviewPanel .panelBody,
      .gifEditedResultPanel .panelBody {
        display: flex;
        flex-direction: column;
        gap: 12px;
      }
      .gifSourcePanel,
      .gifAdvancedPanel,
      .gifGeneratePanel {
        border: 1px solid rgba(255, 172, 56, 0.28);
        border-radius: 8px;
        background: linear-gradient(180deg, #fffdf7, #ffffff);
        box-shadow: 0 10px 24px rgba(255, 138, 31, 0.07);
      }
      .gifSourcePanel {
        display: grid;
        gap: 12px;
        padding: 12px;
      }
      .gifSourceCopy {
        display: grid;
        gap: 3px;
      }
      .gifSourceCopy strong,
      .gifGeneratePanel strong {
        color: #152033;
        font-size: 14px;
        font-weight: 950;
      }
      .gifSourceCopy small,
      .gifGeneratePanel small,
      .gifAdvancedPanel summary small {
        color: #667085;
        font-size: 12px;
        line-height: 1.5;
      }
      .gifSourceActions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
      }
      .gifUploadLabel {
        min-height: 42px;
        margin: 0;
        padding: 10px;
        border: 1px solid rgba(255, 138, 31, 0.24);
        border-radius: 8px;
        background: #ffffff;
      }
      .gifFirstFrameStage {
        min-height: 260px;
        max-height: 360px;
        margin-top: 0;
        align-content: center;
      }
      .gifInputPanel .gifFirstFrameStage img,
      .gifInputPanel .gifFirstFrameStage video {
        width: auto;
        max-width: 82%;
        max-height: 300px;
        margin: 8px auto 0;
      }
      .gifImportStaticButton {
        width: 100%;
        min-height: 42px;
        border-color: rgba(255, 138, 31, 0.24);
        background: #ffffff;
      }
      .gifAdvancedPanel {
        padding: 0;
      }
      .gifAdvancedPanel summary {
        min-height: 54px;
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        gap: 12px;
        padding: 12px;
        cursor: pointer;
        color: #172033;
        font-weight: 950;
      }
      .gifAdvancedPanel summary::marker {
        content: "";
      }
      .gifAdvancedTitle {
        white-space: nowrap;
      }
      .gifAdvancedToggle {
        min-width: 58px;
        min-height: 30px;
        display: inline-grid;
        place-items: center;
        padding: 6px 12px;
        border: 1px solid rgba(255, 138, 31, 0.32);
        border-radius: 8px;
        color: #ff7600;
        background: #fff8ed;
        font-size: 12px;
        font-weight: 950;
      }
      .gifAdvancedToggle [data-opened],
      .gifAdvancedPanel[open] .gifAdvancedToggle [data-closed] {
        display: none;
      }
      .gifAdvancedPanel[open] .gifAdvancedToggle [data-opened] {
        display: inline;
      }
      .gifAdvancedBody {
        display: grid;
        gap: 12px;
        padding: 0 12px 12px;
      }
      .gifPromptField textarea {
        min-height: 88px;
      }
      .gifMotionPromptTools,
      .gifCompactParameterGroup {
        padding: 10px;
        border: 1px solid #eef2f7;
        border-radius: 8px;
        background: #ffffff;
      }
      .gifMotionPromptTools {
        display: grid;
        gap: 8px;
      }
      .gifGeneratePanel {
        padding: 12px;
        display: grid;
        gap: 10px;
      }
      .gifGenerateAction {
        width: 100%;
      }
      .gifGenerateAction #generateGif {
        min-height: 48px;
        font-size: 16px;
        border-radius: 8px;
        background: linear-gradient(180deg, #ff9a2b, #ff7600);
        box-shadow: 0 14px 26px rgba(255, 118, 0, 0.22);
      }
      .gifPreviewPanel .panelHead h2,
      .gifEditedResultPanel .panelHead h2 {
        color: #172033;
      }
      .workspaceGifPreviewBody {
        min-height: 0;
      }
      .workspaceGifPreviewBody.previewGrid {
        grid-template-columns: 1fr;
      }
      .gifResultStack {
        display: flex;
        flex-direction: column;
      }
      .gifPreviewPanel #loadGeneratedGif {
        display: none;
      }
      .gifMainPreviewStage {
        min-height: 300px;
        max-height: 360px;
        align-content: center;
        background:
          linear-gradient(180deg, rgba(255, 250, 240, 0.72), rgba(255, 255, 255, 0.96)),
          #ffffff;
      }
      .gifPreviewPanel .gifMainPreviewStage img,
      .gifPreviewPanel .gifMainPreviewStage video {
        width: auto;
        max-width: 86%;
        max-height: 300px;
        margin: 8px auto 0;
      }
      .gifWaitingCard {
        width: 100%;
        min-height: 260px;
        display: grid;
        grid-template-columns: 168px 1fr;
        align-items: center;
        gap: 18px;
        padding: 20px;
        border: 1px solid rgba(255, 172, 56, 0.24);
        border-radius: 10px;
        background:
          linear-gradient(180deg, rgba(255, 248, 236, 0.72), rgba(255, 255, 255, 0.96)),
          #ffffff;
      }
      .gifWaitingVisual {
        position: relative;
        min-height: 164px;
        display: grid;
        place-items: center;
        border: 1px dashed rgba(255, 138, 31, 0.28);
        border-radius: 10px;
        background:
          linear-gradient(45deg, #eef6ff 25%, transparent 25%),
          linear-gradient(-45deg, #eef6ff 25%, transparent 25%),
          linear-gradient(45deg, transparent 75%, #eef6ff 75%),
          linear-gradient(-45deg, transparent 75%, #eef6ff 75%),
          #ffffff;
        background-position: 0 0, 0 8px, 8px -8px, -8px 0;
        background-size: 16px 16px;
        overflow: hidden;
      }
      .gifWaitingVisual img {
        width: min(112px, 72%);
        height: auto;
        object-fit: contain;
      }
      .gifWaitingVisual span {
        position: absolute;
        top: 10px;
        right: 10px;
        padding: 5px 8px;
        border-radius: 999px;
        color: #ffffff;
        background: #5f6368;
        font-size: 12px;
        font-weight: 950;
      }
      .gifWaitingContent {
        display: grid;
        gap: 10px;
        min-width: 0;
      }
      .gifWaitingBadge {
        width: fit-content;
        padding: 6px 9px;
        border-radius: 8px;
        color: #ff7600;
        background: #fff3df;
        font-size: 12px;
        font-weight: 950;
      }
      .gifWaitingContent h3 {
        color: #172033;
        font-size: 18px;
      }
      .gifWaitingContent p {
        max-width: 520px;
        color: #667085;
        font-size: 13px;
        line-height: 1.6;
      }
      .gifWaitingProgress {
        height: 10px;
        overflow: hidden;
        border-radius: 999px;
        background: #edf2f7;
        box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.08);
      }
      .gifWaitingProgress span {
        display: block;
        width: 3%;
        height: 100%;
        border-radius: inherit;
        background: linear-gradient(90deg, #ffb02e, #ff7600, #2f7bff);
        transition: width 0.4s ease;
      }
      .gifWaitingFacts {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
      }
      .gifWaitingFacts span {
        min-height: 50px;
        padding: 9px 10px;
        border: 1px solid #edf2f7;
        border-radius: 8px;
        color: #334155;
        background: #ffffff;
        font-size: 12px;
        font-weight: 850;
        line-height: 1.45;
      }
      .workspaceGifPreviewBody .gifVideoStage {
        display: none;
      }
      .gifResultActions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
      }
      .gifResultActions button {
        min-height: 44px;
      }
      .gifFramePreviewGrid {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 10px;
      }
      .gifFramePlaceholder,
      .gifFramePreviewTile {
        position: relative;
        min-height: 94px;
        aspect-ratio: 1;
        display: grid;
        place-items: center;
        overflow: hidden;
        border: 1px solid rgba(220, 233, 246, 0.95);
        border-radius: 8px;
        color: #98a2b3;
        background: linear-gradient(180deg, #fffaf0, #f8fbff);
        box-shadow: none;
      }
      .gifFramePlaceholder span,
      .gifFramePreviewTile span {
        position: absolute;
        left: 7px;
        bottom: 5px;
        color: #667085;
        font-size: 11px;
        font-weight: 950;
      }
      .gifFramePreviewTile img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
      .gifFramePreviewTile.active {
        border-color: rgba(255, 118, 0, 0.85);
        box-shadow: 0 0 0 3px rgba(255, 118, 0, 0.14);
      }
      .gifEditedStageMount {
        min-height: 300px;
        display: flex;
      }
      .gifEditedResultStage {
        width: 100%;
        min-height: 300px;
        max-height: 360px;
        align-content: center;
        background:
          linear-gradient(180deg, rgba(255, 250, 240, 0.78), rgba(255, 255, 255, 0.98)),
          #ffffff;
      }
      .gifEditedResultPanel .gifEditedResultStage img {
        width: auto;
        max-width: 86%;
        max-height: 300px;
        margin: 8px auto 0;
      }
      .gifEditedResultPanel [data-gif-action="export-edited"] {
        min-height: 44px;
      }
      .gifEditDialog[hidden],
      .isHiddenFlow {
        display: none !important;
      }
      .gifEditDialog {
        position: fixed;
        inset: 0;
        z-index: 65;
        display: grid;
        place-items: center;
        padding: 22px;
      }
      .gifEditBackdrop {
        position: absolute;
        inset: 0;
        background: rgba(18, 24, 38, 0.42);
        backdrop-filter: blur(7px);
      }
      .gifEditWorkarea {
        position: relative;
        width: min(1080px, 96vw);
        max-height: min(880px, 92vh);
        overflow: auto;
        border: 1px solid rgba(255, 172, 56, 0.3);
        border-radius: 10px;
        background: #fffdf8;
        box-shadow: 0 30px 80px rgba(18, 24, 38, 0.24);
      }
      .gifEditHead {
        position: sticky;
        top: 0;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 16px 18px;
        border-bottom: 1px solid #f1e4cf;
        background: rgba(255, 253, 248, 0.96);
        backdrop-filter: blur(8px);
      }
      .gifEditHead h2 {
        margin: 0;
        color: #172033;
        font-size: 20px;
      }
      .gifEditHead p {
        margin: 4px 0 0;
        color: #667085;
        font-size: 13px;
      }
      .gifEditModalGrid {
        padding: 18px;
      }
      .workspaceGifEditorPanel .editorShell {
        padding-bottom: 0;
        max-height: none;
        overflow: visible;
      }
      .workspaceGifEditorPanel .editorScrollWrap {
        overflow: visible;
      }
      .workspaceGifEditorPanel .editorScrollWrap .editor {
        min-width: 0;
        grid-template-columns: minmax(280px, 0.95fr) minmax(320px, 1.05fr);
        gap: 16px;
      }
      .workspaceGifEditorPanel .canvasWrap {
        min-height: 260px;
      }
      .workspaceGifEditorPanel canvas {
        width: min(320px, 100%);
        height: min(320px, 100%);
      }
      .workspaceGifEditorPanel .frames {
        max-width: 100%;
        padding-top: 8px;
      }
      .workspaceGifEditorPanel .frameBtn {
        flex-basis: 64px;
      }
      .workspaceGifEditorPanel .toolGrid,
      .workspaceGifEditorPanel .compactGrid,
      .workspaceGifEditorPanel .editorActions,
      .workspaceGifEditorPanel .editorResultActions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .workspaceGifExportPanel .platformExportGrid {
        grid-template-columns: 1fr;
      }
      .workspaceGifExportPanel .stage {
        min-height: 160px;
      }
      .gifResultActions button:disabled,
      .gifEditedResultPanel button:disabled {
        cursor: not-allowed;
        color: #98a2b3;
        background: #f5f7fb;
        border-color: #e5edf6;
        box-shadow: none;
        opacity: 1;
      }
      .workspaceDebugDrawer {
        margin-top: 16px;
        border: 1px solid rgba(226, 232, 240, 0.95);
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.78);
        box-shadow: var(--shadow-soft);
      }
      .workspaceDebugDrawer summary {
        min-height: 42px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 0 14px;
        color: #64748b;
        font-size: 13px;
        font-weight: 900;
        cursor: pointer;
      }
      .workspaceDebugDrawer summary small {
        color: #94a3b8;
        font-size: 12px;
        font-weight: 700;
      }
      .workspaceLogPanel {
        padding: 0 14px 14px;
      }
      .workspaceLogPanel .panel {
        box-shadow: none;
      }
      .workspaceLogPanel .panelBody {
        padding: 12px;
      }
      .workspaceLogPanel .panelHead {
        display: none;
      }
      .workspaceInternalPanels {
        display: none !important;
      }
      .workflowBoard {
        grid-column: 1 / -1;
        display: grid;
        gap: 16px;
      }
      .workflowModule {
        display: grid;
        gap: 10px;
      }
      .workflowModuleHead {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 38px;
        padding: 0 2px;
      }
      .workflowModuleHead h2 {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        color: #17365f;
        font-size: 16px;
        letter-spacing: 0;
      }
      .workflowModuleHead h2::before {
        content: "";
        width: 7px;
        height: 20px;
        border-radius: 999px;
        background: linear-gradient(180deg, var(--blue), var(--green));
      }
      .workflowModuleBody {
        display: grid;
        grid-template-columns: minmax(360px, 430px) minmax(0, 1fr);
        gap: 14px;
        align-items: stretch;
      }
      .workflowModuleControls,
      .workflowModuleResults,
      .workflowNestedStack {
        display: grid;
        gap: 14px;
        align-content: stretch;
      }
      .workflowModuleResults > .panel {
        height: 100%;
        min-height: 100%;
      }
      .workflowResultPanel {
        display: grid;
        grid-template-rows: auto minmax(0, 1fr);
      }
      .workflowResultBody {
        display: grid;
        grid-template-rows: auto auto minmax(360px, 1fr) auto;
        gap: 12px;
        min-height: 100%;
      }
      .workflowPreviewGrid {
        grid-template-columns: minmax(240px, 0.82fr) minmax(320px, 0.92fr) minmax(340px, 1.16fr);
        align-items: stretch;
      }
      .workflowPreviewGrid,
      .cutResultBody,
      .motionResultGrid {
        min-height: 100%;
      }
      .workflowPreviewGrid .stage,
      .motionResultGrid .stage,
      .cutResultBody .stage {
        align-content: stretch;
        min-height: 360px;
      }
      .workflowResultBody .stageEmpty {
        min-height: 100%;
      }
      .workflowGenerate #matrixStage {
        min-height: 430px;
      }
      .workflowGenerate .generationPromptBridge {
        position: relative;
        display: grid;
        align-content: stretch;
        min-height: 430px;
        margin-top: 0;
        padding: 16px;
        border: 1px solid rgba(18, 163, 127, 0.32);
        border-radius: 8px;
        background:
          linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(239, 250, 248, 0.9)),
          #ffffff;
      }
      .workflowGenerate .generationPromptBridge::before {
        content: "";
        position: absolute;
        inset: 12px auto 12px 0;
        width: 4px;
        border-radius: 999px;
        background: linear-gradient(180deg, #12a37f, #2dd4bf);
      }
      .workflowGenerate .generationPromptBridge .promptField {
        display: grid;
        grid-template-rows: auto minmax(0, 1fr);
        align-self: stretch;
        gap: 10px;
        min-height: 100%;
        margin-top: 0;
      }
      .workflowGenerate .generationPromptBridge #finalPrompt {
        height: 100%;
        min-height: 0;
      }
      .workflowCut #stickers {
        display: grid;
        align-content: start;
        min-height: 360px;
      }
      .workflowCut .compactCutBody {
        grid-template-rows: minmax(360px, auto) auto;
        align-content: start;
      }
      .workflowMotion .workflowResultBody {
        grid-template-rows: auto auto minmax(0, auto);
        align-content: start;
      }
      .workflowMotion .resultStack {
        min-height: 360px;
        grid-template-rows: minmax(0, 1fr) auto;
        align-content: stretch;
      }
      .workflowMotion .resultStack .stage {
        min-height: 0;
      }
      .workflowMotion .stageAction {
        align-self: end;
      }
      .moduleConceptBanner {
        position: relative;
        height: clamp(154px, 12vw, 196px);
        min-height: 154px;
        overflow: hidden;
        border: 1px solid rgba(191, 219, 254, 0.86);
        border-radius: 8px;
        background:
          linear-gradient(135deg, rgba(239, 246, 255, 0.96), rgba(255, 251, 235, 0.78)),
          #f8fbff;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84);
      }
      .moduleConceptBanner::before {
        content: "操作示例";
        position: absolute;
        z-index: 2;
        top: 12px;
        right: 12px;
        padding: 5px 9px;
        border: 1px solid rgba(47, 123, 255, 0.18);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.84);
        color: var(--blue-deep);
        font-size: 12px;
        font-weight: 900;
        backdrop-filter: blur(8px);
      }
      .concept-generate::before {
        display: none;
      }
      .concept-generate img {
        object-fit: contain;
        object-position: center;
      }
      .moduleConceptBanner img {
        display: block;
        width: 100%;
        height: 100%;
        min-height: 154px;
        object-fit: cover;
        opacity: 0.82;
        filter: saturate(0.82) brightness(1.04);
      }
      .moduleConceptCaption {
        position: absolute;
        left: 16px;
        bottom: 12px;
        max-width: min(430px, calc(100% - 32px));
        display: grid;
        gap: 3px;
        padding: 10px 12px;
        border: 1px solid rgba(191, 219, 254, 0.62);
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.9);
        box-shadow: 0 10px 22px rgba(23, 54, 95, 0.09);
        backdrop-filter: blur(8px);
      }
      .moduleConceptCaption strong {
        color: var(--blue-deep);
        font-size: 12px;
      }
      .moduleConceptCaption span {
        color: #0f172a;
        font-size: 14px;
        font-weight: 900;
        line-height: 1.32;
      }
      .moduleConceptCaption p {
        color: #64748b;
        font-size: 12px;
        line-height: 1.45;
      }
      .concept-generate .moduleConceptCaption {
        left: 14px;
        bottom: 12px;
        max-width: min(310px, calc(100% - 28px));
        padding: 8px 10px;
        background: rgba(255, 255, 255, 0.72);
        box-shadow: 0 6px 18px rgba(23, 54, 95, 0.06);
      }
      .concept-generate .moduleConceptCaption strong,
      .concept-generate .moduleConceptCaption p {
        display: none;
      }
      .concept-generate .moduleConceptCaption span {
        font-size: 12px;
        line-height: 1.25;
      }
      .workflowMotion .moduleConceptBanner,
      .workflowMotion .moduleConceptBanner img {
        min-height: 154px;
      }
      .workflowResultDivider {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 9px 12px;
        border: 1px solid rgba(226, 232, 240, 0.92);
        border-radius: 8px;
        background:
          linear-gradient(90deg, rgba(255, 255, 255, 0.98), rgba(239, 246, 255, 0.82)),
          #ffffff;
      }
      .workflowResultDivider strong {
        position: relative;
        padding-left: 12px;
        color: #0f172a;
        font-size: 14px;
        font-weight: 900;
      }
      .workflowResultDivider strong::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        width: 4px;
        height: 16px;
        border-radius: 999px;
        background: linear-gradient(180deg, #12a37f, #2f7bff);
        transform: translateY(-50%);
      }
      .workflowResultDivider span {
        color: #64748b;
        font-size: 12px;
        line-height: 1.45;
        text-align: right;
      }
      .moduleExampleStrip {
        display: grid;
        grid-template-columns: 170px minmax(0, 1fr);
        gap: 12px;
        align-items: center;
        padding: 12px;
        border: 1px solid rgba(191, 219, 254, 0.82);
        border-radius: 8px;
        background:
          linear-gradient(135deg, rgba(239, 246, 255, 0.96), rgba(255, 251, 235, 0.82)),
          #ffffff;
      }
      .moduleExampleTitle {
        display: grid;
        gap: 4px;
      }
      .moduleExampleTitle strong {
        color: #17365f;
        font-size: 13px;
      }
      .moduleExampleTitle span {
        color: #64748b;
        font-size: 12px;
        line-height: 1.45;
      }
      .exampleFlow {
        display: grid;
        grid-template-columns: repeat(5, auto);
        gap: 9px;
        align-items: stretch;
        justify-content: end;
      }
      .example-cut .exampleFlow {
        grid-template-columns: auto auto auto;
      }
      .exampleNode {
        min-width: 128px;
        display: grid;
        grid-template-columns: 46px minmax(0, 1fr);
        gap: 9px;
        align-items: center;
        padding: 8px;
        border: 1px solid rgba(226, 232, 240, 0.92);
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.86);
      }
      .exampleNode b,
      .moduleGuideCard strong {
        display: block;
        color: #0f172a;
        font-size: 12px;
        line-height: 1.35;
      }
      .exampleNode span,
      .moduleGuideCard span {
        display: block;
        margin-top: 3px;
        color: #64748b;
        font-size: 11px;
        line-height: 1.42;
      }
      .exampleArrow {
        display: grid;
        place-items: center;
        color: #2f7bff;
        font-size: 15px;
        font-weight: 900;
      }
      .exampleArt {
        width: 46px;
        height: 46px;
        display: grid;
        place-items: center;
        border-radius: 8px;
        overflow: hidden;
        background: #f8fbff;
        border: 1px solid rgba(191, 219, 254, 0.88);
      }
      .exampleArt-portrait {
        position: relative;
        background: linear-gradient(180deg, #dbeafe, #fff7ed);
      }
      .exampleArt-portrait i,
      .exampleArt-frame i {
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: #ffc83d;
        box-shadow: 0 15px 0 5px rgba(255, 122, 26, 0.5);
      }
      .exampleArt-portrait em,
      .exampleArt-frame em {
        position: absolute;
        inset: auto 8px 7px;
        height: 12px;
        border-radius: 999px 999px 6px 6px;
        background: rgba(255, 255, 255, 0.72);
      }
      .exampleArt-prompt {
        align-content: center;
        gap: 5px;
        padding: 8px;
      }
      .exampleArt-prompt i {
        width: 100%;
        height: 5px;
        border-radius: 999px;
        background: #93c5fd;
      }
      .exampleArt-prompt i:nth-child(2) { width: 76%; background: #fdba74; }
      .exampleArt-prompt i:nth-child(3) { width: 58%; background: #86efac; }
      .exampleArt-matrix {
        grid-template-columns: repeat(2, 1fr);
        gap: 4px;
        padding: 6px;
      }
      .exampleArt-matrix i,
      .exampleArt-stickers i,
      .exampleArt-gif i {
        width: 100%;
        height: 100%;
        min-height: 12px;
        border-radius: 6px;
        background: linear-gradient(135deg, #ffec99, #a7f3d0);
      }
      .exampleArt-transparent {
        position: relative;
        background-color: #fffefd;
        background-image:
          linear-gradient(45deg, #eef5fc 25%, transparent 25%),
          linear-gradient(-45deg, #eef5fc 25%, transparent 25%),
          linear-gradient(45deg, transparent 75%, #eef5fc 75%),
          linear-gradient(-45deg, transparent 75%, #eef5fc 75%);
        background-size: 12px 12px;
      }
      .exampleArt-transparent i {
        width: 24px;
        height: 26px;
        border-radius: 50% 50% 44% 44%;
        background: #ffc83d;
      }
      .exampleArt-transparent em {
        position: absolute;
        inset: auto 11px 9px;
        height: 4px;
        border-radius: 999px;
        background: rgba(21, 166, 134, 0.42);
      }
      .exampleArt-stickers,
      .exampleArt-gif {
        grid-template-columns: repeat(3, 1fr);
        gap: 4px;
        padding: 7px;
      }
      .exampleArt-frame {
        position: relative;
        background: #fff7ed;
      }
      .exampleArt-video {
        position: relative;
        background: linear-gradient(135deg, #dbeafe, #e0f2fe);
      }
      .exampleArt-video i {
        width: 26px;
        height: 20px;
        border-radius: 6px;
        background: #2f7bff;
      }
      .exampleArt-video span {
        position: absolute;
        width: 0;
        height: 0;
        border-top: 6px solid transparent;
        border-bottom: 6px solid transparent;
        border-left: 9px solid #ffffff;
      }
      .moduleGuideGrid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
        align-content: end;
        min-height: 96px;
      }
      .moduleGuideCard {
        display: grid;
        align-content: start;
        padding: 12px;
        border: 1px solid rgba(226, 232, 240, 0.95);
        border-radius: 8px;
        background:
          linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 251, 255, 0.88));
      }
      .workflowStatusPanel .tabs {
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }
      .workflowFullPanel {
        width: 100%;
      }
      .workflowUtilityGrid {
        display: grid;
        grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
        gap: 14px;
      }
      .cutResultBody {
        display: grid;
        grid-template-columns: minmax(260px, 0.82fr) minmax(0, 1.18fr);
        gap: 12px;
        align-items: stretch;
      }
      .cutResultBody #mattedStage {
        min-height: 330px;
      }
      .cutResultBody #stickers {
        min-height: 330px;
      }
      .motionResultGrid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
        align-items: stretch;
        min-height: clamp(350px, 34vh, 430px);
      }
      .motionResultGrid > .stage,
      .motionResultGrid > .resultStack {
        min-height: inherit;
      }
      .motionResultGrid > .resultStack > .stage {
        min-height: 0;
      }
      .motionEditorLayout {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: minmax(250px, auto) minmax(360px, auto) auto;
        gap: 12px;
        align-items: stretch;
      }
      .guideIntro {
        position: relative;
        min-height: 132px;
        display: grid;
        align-content: center;
        gap: 7px;
        padding: 12px 148px 12px 14px;
        overflow: hidden;
        border: 1px solid rgba(255, 200, 61, 0.34);
        border-radius: 8px;
        background: rgba(255,255,255,0.76);
      }
      .guideIntro h2 {
        font-size: 20px;
        line-height: 1.25;
      }
      .guideIntro p {
        color: var(--muted);
        font-size: 13px;
        line-height: 1.65;
      }
      .guideDuck {
        position: absolute;
        right: -10px;
        bottom: -54px;
        width: 154px;
        pointer-events: none;
        filter: drop-shadow(0 14px 18px rgba(180, 111, 12, 0.18));
      }
      .guideNext {
        display: inline-flex;
        align-items: center;
        width: fit-content;
        min-height: 30px;
        margin-top: 2px;
        padding: 6px 10px;
        border-radius: 8px;
        color: #8a4f00;
        background: linear-gradient(180deg, #fff5cf, #ffe89b);
        border: 1px solid rgba(245, 164, 0, 0.18);
        font-size: 12px;
        font-weight: 900;
      }
      .guideSteps {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 9px;
      }
      .guideStep {
        min-height: 132px;
        display: grid;
        align-content: start;
        gap: 7px;
        padding: 12px;
        border: 1px solid #e2edf8;
        border-radius: 8px;
        background: rgba(255,255,255,0.86);
        box-shadow: var(--shadow-soft);
      }
      .guideStep b {
        display: grid;
        place-items: center;
        width: 28px;
        height: 28px;
        border-radius: 8px;
        color: var(--blue-deep);
        background: var(--blue-soft);
        font-size: 13px;
      }
      .guideStep strong {
        color: var(--ink);
        font-size: 13px;
        line-height: 1.3;
      }
      .guideStep span {
        color: var(--muted);
        font-size: 12px;
        line-height: 1.45;
      }
      .guideStep.done {
        border-color: rgba(18, 163, 127, 0.28);
        background: #effaf8;
      }
      .guideStep.done b {
        color: #ffffff;
        background: var(--green);
      }
      .guideStep.current {
        border-color: rgba(255, 200, 61, 0.7);
        background: linear-gradient(180deg, #fff8df, #ffffff);
        box-shadow: var(--duck-shadow);
      }
      .guideStep.current b {
        color: #62320d;
        background: var(--duck);
      }
      .appPage[hidden] { display: none; }
      .pageShell {
        width: min(1280px, 100%);
        margin: 0 auto;
        padding: 20px;
      }
      #merchPage.pageShell {
        width: min(1680px, 100%);
      }
      .pageHero {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 16px;
        margin-bottom: 16px;
      }
      .pageHero h2 {
        font-size: 28px;
        line-height: 1.15;
      }
      .projectToolbar {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
      }
      .docLayout {
        display: grid;
        grid-template-columns: 240px minmax(0, 1fr) 180px;
        gap: 18px;
      }
      .docAside, .docToc {
        position: sticky;
        top: 94px;
        align-self: start;
      }
      .docMenu {
        display: grid;
        gap: 6px;
      }
      .docMenu a {
        padding: 9px 10px;
        border-radius: 8px;
        color: #334155;
        text-decoration: none;
        font-size: 13px;
        font-weight: 800;
      }
      .docMenu a:hover {
        color: var(--blue-deep);
        background: var(--blue-soft);
      }
      .docArticle {
        display: grid;
        gap: 14px;
      }
      .docArticle .panelBody {
        line-height: 1.8;
        color: #475569;
      }
      .docHeroBlock {
        display: grid;
        gap: 18px;
      }
      .docHeroBlock h2 {
        max-width: 760px;
        font-size: 30px;
        line-height: 1.18;
      }
      .docLead {
        max-width: 820px;
        color: #475569;
        font-size: 14px;
      }
      .docSearchPanel {
        display: grid;
        gap: 10px;
        padding: 14px;
        border: 1px solid rgba(47, 123, 255, 0.18);
        border-radius: 8px;
        background:
          linear-gradient(135deg, rgba(239, 246, 255, 0.92), rgba(255, 251, 235, 0.86)),
          #ffffff;
      }
      .docSearchPanel label {
        margin: 0;
        color: var(--ink);
        font-size: 13px;
        font-weight: 950;
      }
      .docSearchBox {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 10px;
        align-items: center;
      }
      .docSearchBox input {
        margin: 0;
        min-height: 44px;
        border-color: rgba(47, 123, 255, 0.28);
        background: #ffffff;
      }
      .docHotLinks {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }
      .docHotLinks a {
        min-height: 30px;
        display: inline-flex;
        align-items: center;
        padding: 6px 10px;
        border: 1px solid rgba(47, 123, 255, 0.18);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.82);
        color: var(--blue-deep);
        text-decoration: none;
        font-size: 12px;
        font-weight: 900;
        transition: border-color 0.18s ease, background 0.18s ease;
      }
      .docHotLinks a:hover {
        border-color: rgba(47, 123, 255, 0.38);
        background: var(--blue-soft);
      }
      .docSearchEmpty {
        margin: 0;
        padding: 12px 14px;
        border: 1px dashed rgba(47, 123, 255, 0.32);
        border-radius: 8px;
        background: #fbfdff;
        color: var(--muted);
        font-size: 13px;
      }
      .docStats {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
      }
      .docStat {
        min-height: 88px;
        padding: 13px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: linear-gradient(180deg, #ffffff, #fffaf0);
      }
      .docStat strong {
        display: block;
        color: var(--ink);
        font-size: 20px;
        line-height: 1.2;
      }
      .docStat span {
        display: block;
        margin-top: 6px;
        color: var(--muted);
        font-size: 12px;
        line-height: 1.45;
      }
      .docFlowMap {
        display: grid;
        grid-template-columns: repeat(7, minmax(92px, 1fr));
        gap: 8px;
        margin-top: 14px;
      }
      .docFlowNode {
        position: relative;
        min-height: 106px;
        padding: 12px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: #ffffff;
      }
      .docFlowNode::after {
        content: "";
        position: absolute;
        top: 50%;
        right: -8px;
        width: 8px;
        height: 2px;
        background: #b7c8db;
      }
      .docFlowNode:last-child::after { display: none; }
      .docFlowNode b {
        display: inline-grid;
        place-items: center;
        width: 24px;
        height: 24px;
        margin-bottom: 8px;
        border-radius: 8px;
        color: #fff;
        background: linear-gradient(180deg, var(--duck), var(--beak));
        font-size: 12px;
      }
      .docFlowNode strong {
        display: block;
        color: var(--ink);
        font-size: 13px;
        line-height: 1.35;
      }
      .docFlowNode span {
        display: block;
        margin-top: 5px;
        color: var(--muted);
        font-size: 12px;
        line-height: 1.45;
      }
      .docSectionLead {
        margin: 4px 0 12px;
        color: #64748b;
      }
      .docSteps {
        display: grid;
        gap: 10px;
        counter-reset: docstep;
      }
      .docStep {
        display: grid;
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 12px;
        padding: 13px 0;
        border-top: 1px solid #e2e8f0;
      }
      .docStep:first-child { border-top: 0; }
      .docStep::before {
        counter-increment: docstep;
        content: counter(docstep);
        display: grid;
        place-items: center;
        width: 34px;
        height: 34px;
        border-radius: 8px;
        color: var(--blue-deep);
        background: var(--blue-soft);
        font-weight: 900;
      }
      .docStep h3 {
        margin-top: 0;
        font-size: 15px;
      }
      .docStep p {
        color: var(--muted);
        font-size: 13px;
      }
      .docGrid2, .docGrid3 {
        display: grid;
        gap: 12px;
        margin-top: 10px;
      }
      .docGrid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .docGrid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .docInfo {
        min-height: 120px;
        padding: 14px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: #fffefd;
      }
      .docInfo h3 {
        margin-top: 0;
        font-size: 14px;
      }
      .docInfo p, .docInfo li {
        color: #536173;
        font-size: 12px;
        line-height: 1.65;
      }
      .docMiniTable {
        width: 100%;
        margin-top: 10px;
        border-collapse: collapse;
        font-size: 12px;
      }
      .docMiniTable th,
      .docMiniTable td {
        padding: 9px 10px;
        border: 1px solid #dfe9f3;
        text-align: left;
        vertical-align: top;
      }
      .docMiniTable th {
        color: #0f172a;
        background: var(--blue-soft);
      }
      .docCallout {
        margin-top: 12px;
        padding: 12px 14px;
        border-left: 4px solid var(--green);
        border-radius: 8px;
        background: #effaf8;
        color: #315e59;
      }
      .docWarning {
        border-left-color: var(--beak);
        background: #fff7ed;
        color: #7c2d12;
      }
      .docChecklist {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin-top: 10px;
      }
      .docChecklist span {
        padding: 10px 12px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: #ffffff;
        color: #334155;
        font-size: 12px;
        line-height: 1.5;
      }
      .docArticle h2 {
        font-size: 22px;
        color: #111827;
        margin-bottom: 6px;
      }
      .docArticle h3 {
        font-size: 15px;
        color: #111827;
        margin: 12px 0 6px;
      }
      .docArticle ul, .docArticle ol {
        margin: 8px 0 0;
        padding-left: 20px;
      }
      .pricingHeader {
        display: grid;
        grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
        align-items: stretch;
        gap: 16px;
        margin-bottom: 18px;
        padding: 20px;
        border: 1px solid rgba(189, 214, 242, 0.88);
        border-radius: 12px;
        background:
          linear-gradient(100deg, rgba(255, 200, 61, 0.14), transparent 38%),
          linear-gradient(180deg, #ffffff, #f7fbff);
        box-shadow: 0 18px 34px rgba(15, 23, 42, 0.08);
      }
      .pricingHeader h2 {
        margin: 0;
        font-size: 26px;
      }
      .pricingLead {
        display: grid;
        gap: 9px;
        align-content: center;
      }
      .pricingKicker {
        width: fit-content;
        padding: 5px 9px;
        border-radius: 999px;
        background: #fff3c4;
        color: #805000;
        font-size: 12px;
        font-weight: 950;
      }
      .usageStrip {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
      }
      .usagePill {
        display: grid;
        gap: 4px;
        min-height: 78px;
        padding: 13px;
        border: 1px solid rgba(255, 200, 61, 0.38);
        border-radius: 10px;
        background: linear-gradient(180deg, #fff7d6, #ffffff);
        color: #805000;
        box-shadow: 0 10px 20px rgba(128, 80, 0, 0.08);
      }
      .usagePill strong {
        display: block;
        color: #5f3900;
        font-size: 22px;
        line-height: 1.1;
      }
      .usagePill span {
        color: #64748b;
        font-size: 12px;
        font-weight: 850;
        line-height: 1.35;
      }
      .creditReservedPill {
        border-color: rgba(47, 123, 255, 0.28);
        background: linear-gradient(180deg, #eef6ff, #ffffff);
        color: #173d76;
      }
      .creditReservedPill strong {
        color: #1d4ed8;
      }
      .pricingGrid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 16px;
      }
      .pendingRechargeCard {
        display: grid;
        grid-template-columns: minmax(220px, 0.76fr) minmax(280px, 1fr) minmax(260px, 0.9fr);
        gap: 14px;
        align-items: stretch;
        margin-top: 16px;
        padding: 16px;
        border: 1px solid rgba(18, 163, 127, 0.32);
        border-radius: 12px;
        background:
          linear-gradient(120deg, rgba(240, 253, 250, 0.96), rgba(255, 248, 223, 0.9)),
          #ffffff;
        box-shadow: 0 16px 34px rgba(15, 23, 42, 0.08);
      }
      .pendingRechargeCard[hidden] {
        display: none;
      }
      .pendingRechargeMain,
      .pendingRechargeCode,
      .pendingRechargeSteps {
        display: grid;
        gap: 7px;
        align-content: center;
        min-height: 110px;
        padding: 13px;
        border: 1px solid rgba(18, 163, 127, 0.16);
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.82);
      }
      .pendingRechargeLabel {
        width: fit-content;
        padding: 5px 9px;
        border-radius: 999px;
        background: #dcfce7;
        color: #166534;
        font-size: 12px;
        font-weight: 950;
      }
      .pendingRechargeMain h2 {
        margin: 0;
        color: #14532d;
        font-size: 34px;
        line-height: 1;
      }
      .pendingRechargeMain p,
      .pendingRechargeCode span {
        margin: 0;
        color: #475569;
        font-size: 13px;
        font-weight: 800;
      }
      .pendingRechargeCode strong {
        color: #b91c1c;
        font-size: 18px;
        line-height: 1.25;
        overflow-wrap: anywhere;
      }
      .pendingRechargeCode button {
        width: fit-content;
        min-height: 34px;
        padding: 7px 10px;
      }
      .pendingRechargeSteps span {
        position: relative;
        padding-left: 18px;
        color: var(--muted);
        font-size: 13px;
        font-weight: 850;
      }
      .pendingRechargeSteps span::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0.55em;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #cbd5e1;
      }
      .pendingRechargeSteps span.active {
        color: #0f766e;
      }
      .pendingRechargeSteps span.active::before {
        background: var(--green);
      }
      .pricingCard {
        position: relative;
        min-height: 360px;
        display: grid;
        align-content: start;
        gap: 14px;
        padding: 24px;
        border: 1px solid var(--line);
        border-radius: 12px;
        background:
          linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 252, 255, 0.95));
        box-shadow: var(--shadow-soft);
        overflow: hidden;
      }
      .pricingCard::before {
        content: "";
        position: absolute;
        inset: 0 0 auto;
        height: 5px;
        background: linear-gradient(90deg, var(--blue), #58c7ad);
      }
      .pricingCard h2 {
        margin: 0;
        font-size: 20px;
      }
      .planTag {
        width: fit-content;
        min-height: 24px;
        padding: 5px 9px;
        border-radius: 999px;
        background: var(--blue-soft);
        color: var(--blue-deep);
        font-size: 12px;
        font-weight: 950;
      }
      .pricingCard.recommended {
        border-color: rgba(255, 200, 61, 0.55);
        background: linear-gradient(180deg, #fff8df, #ffffff);
      }
      .pricingCard.recommended::before {
        background: linear-gradient(90deg, var(--duck), var(--beak));
      }
      .pricingCard.max {
        color: #fffaf0;
        border-color: #5f3900;
        background: linear-gradient(145deg, #704400, #182033);
      }
      .pricingCard.max::before {
        background: linear-gradient(90deg, #ffe179, #ffb23d);
      }
      .pricingCard.max .sub,
      .pricingCard.max .planFeatures span {
        color: rgba(255, 250, 240, 0.78);
      }
      .pricingCard.max .planTag {
        background: rgba(255, 225, 121, 0.16);
        color: #ffe179;
      }
      .costCard {
        display: grid;
        gap: 7px;
        min-height: 88px;
        padding: 14px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: linear-gradient(180deg, #ffffff, #fffdf7);
      }
      .costCard span {
        color: var(--beak-deep);
        font-weight: 900;
      }
      .priceLine {
        display: flex;
        align-items: flex-end;
        gap: 4px;
        font-size: 50px;
        font-weight: 900;
        color: var(--ink);
      }
      .pricingCard.max .priceLine {
        color: #fff7d6;
      }
      .priceLine small {
        font-size: 18px;
        margin-bottom: 8px;
      }
      .planCredit {
        display: grid;
        gap: 4px;
        padding: 13px 0;
        border-top: 1px solid rgba(220, 233, 246, 0.9);
        border-bottom: 1px solid rgba(220, 233, 246, 0.9);
      }
      .pricingCard.max .planCredit {
        border-color: rgba(255, 255, 255, 0.28);
      }
      .planCredit strong {
        color: inherit;
        font-size: 24px;
        line-height: 1.1;
      }
      .planCredit span {
        color: #64748b;
        font-size: 12px;
        font-weight: 850;
      }
      .pricingCard.max .planCredit span {
        color: rgba(255, 250, 240, 0.72);
      }
      .planFeatures {
        display: grid;
        gap: 10px;
        padding-top: 12px;
      }
      .planFeatures span {
        color: inherit;
        opacity: 0.86;
        font-size: 13px;
        line-height: 1.55;
      }
      .manualRechargeLayout {
        display: grid;
        grid-template-columns: minmax(320px, 0.92fr) minmax(480px, 1.08fr);
        gap: 18px;
        align-items: start;
      }
      .manualRechargeIntro {
        display: grid;
        gap: 12px;
      }
      .manualRechargeLead {
        padding: 14px;
        border: 1px solid rgba(47, 123, 255, 0.18);
        border-radius: 8px;
        background: linear-gradient(180deg, #ffffff, var(--blue-soft));
      }
      .manualRechargeLead strong {
        display: block;
        color: var(--ink);
        font-size: 16px;
        line-height: 1.35;
      }
      .manualRechargeLead span {
        display: block;
        margin-top: 6px;
        color: var(--muted);
        font-size: 13px;
        line-height: 1.6;
      }
      .manualRechargeSteps {
        display: grid;
        gap: 10px;
      }
      .manualRechargeStep {
        display: grid;
        grid-template-columns: 34px minmax(0, 1fr);
        gap: 10px;
        align-items: start;
        padding: 12px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: #ffffff;
        box-shadow: var(--shadow-soft);
      }
      .manualRechargeStep strong {
        display: block;
        color: var(--beak-deep);
        margin-bottom: 3px;
      }
      .manualRechargeStep p {
        margin: 0;
        color: var(--muted);
        font-size: 13px;
        line-height: 1.55;
      }
      .paymentHint {
        padding: 13px 14px;
        border: 1px solid rgba(18, 163, 127, 0.24);
        border-radius: 8px;
        background: #f0fdfa;
        color: #22524d;
        font-size: 13px;
        line-height: 1.65;
      }
      .paymentHint b,
      .rechargeOrderNotice strong {
        color: #b91c1c;
        font-weight: 900;
      }
      .payQrGrid {
        position: relative;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
      }
      .payQrLockedNotice {
        display: none;
      }
      .manualRechargeLayout.paymentLocked .payQrGrid {
        pointer-events: none;
      }
      .manualRechargeLayout.paymentLocked .payQrCard {
        opacity: 0.42;
        filter: grayscale(0.3);
      }
      .manualRechargeLayout.paymentLocked .payQrLockedNotice {
        position: absolute;
        z-index: 2;
        inset: 50% 18px auto;
        transform: translateY(-50%);
        display: block;
        padding: 13px 14px;
        border: 1px solid rgba(47, 123, 255, 0.22);
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.94);
        color: #17365f;
        font-size: 13px;
        font-weight: 850;
        line-height: 1.55;
        text-align: center;
        box-shadow: 0 16px 34px rgba(15, 23, 42, 0.14);
      }
      .payQrCard {
        --pay-accent: var(--blue);
        display: grid;
        gap: 10px;
        align-content: start;
        padding: 12px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: linear-gradient(180deg, #ffffff, #fffdf7);
        box-shadow: var(--shadow-soft);
      }
      .payQrCard.wechat { --pay-accent: #16a34a; }
      .payQrCard.alipay { --pay-accent: var(--blue); }
      .payQrTitle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        min-height: 32px;
      }
      .payQrCard h3 {
        margin: 0;
        color: var(--ink);
        font-size: 15px;
      }
      .payQrBadge {
        padding: 5px 8px;
        border-radius: 999px;
        color: #ffffff;
        background: var(--pay-accent);
        font-size: 12px;
        font-weight: 900;
        white-space: nowrap;
      }
      .payQrFrame {
        padding: 10px;
        border: 1px solid color-mix(in srgb, var(--pay-accent) 18%, #d7e1ec);
        border-radius: 8px;
        background: #ffffff;
      }
      .payQrCard img {
        width: 100%;
        height: 330px;
        object-fit: contain;
        display: block;
        border-radius: 6px;
        background: #ffffff;
      }
      .payQrCard p {
        margin: 0;
        color: var(--muted);
        font-size: 12px;
        line-height: 1.45;
      }
      .payQrFoot {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        color: #64748b;
        font-size: 12px;
      }
      .payQrFoot strong {
        color: var(--pay-accent);
      }
      .rechargeOrderNotice {
        margin-top: 10px;
        padding: 10px;
        border: 1px solid rgba(190, 63, 108, 0.24);
        border-radius: 8px;
        background: #fff7fb;
        color: #5f2940;
        font-size: 13px;
        line-height: 1.55;
      }

      .stack { display: grid; gap: 14px; align-content: start; }
      aside.stack {
        align-self: start;
      }
      .panel {
        background: var(--paper);
        border: 1px solid var(--line);
        border-radius: 8px;
        box-shadow: var(--shadow);
        overflow: hidden;
      }
      .panelHead {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        min-height: 48px;
        padding: 12px 15px;
        border-bottom: 1px solid var(--line);
        background:
          linear-gradient(90deg, rgba(255, 200, 61, 0.08), transparent 38%),
          linear-gradient(180deg, #ffffff, #fffdf7);
      }
      .panelHead h2 {
        display: inline-flex;
        align-items: center;
        gap: 9px;
      }
      .panelHead h2::before {
        content: "";
        width: 7px;
        height: 18px;
        border-radius: 3px;
        background: linear-gradient(180deg, var(--duck), var(--beak));
      }
      .panelBody { padding: 15px; }
      .guidedGroup {
        --group-accent: var(--duck-deep);
        --group-soft: rgba(255, 248, 223, 0.76);
        position: relative;
        display: grid;
        gap: 10px;
        padding: 13px 13px 13px 15px;
        margin-top: 12px;
        border: 1px solid color-mix(in srgb, var(--group-accent) 28%, #dfe9f3);
        border-radius: 8px;
        background:
          linear-gradient(90deg, color-mix(in srgb, var(--group-accent) 15%, transparent), transparent 42%),
          linear-gradient(180deg, var(--group-soft), #ffffff 82%);
        box-shadow: 0 10px 22px rgba(15, 23, 42, 0.045);
      }
      .guidedGroup::before {
        content: "";
        position: absolute;
        inset: 10px auto 10px 0;
        width: 4px;
        border-radius: 0 999px 999px 0;
        background: var(--group-accent);
      }
      .panelBody > .guidedGroup:first-child { margin-top: 0; }
      .guidedGroup.mutedLine {
        padding-top: 12px;
      }
      .guidedGroup:nth-of-type(1),
      .guidedGroup.guide-role {
        --group-accent: var(--duck-deep);
        --group-soft: #fff8df;
      }
      .guidedGroup:nth-of-type(2),
      .guidedGroup.guide-lock {
        --group-accent: var(--blue);
        --group-soft: var(--blue-soft);
      }
      .guidedGroup:nth-of-type(3),
      .guidedGroup.guide-prompt {
        --group-accent: var(--green);
        --group-soft: #effaf8;
      }
      .guidedGroup:nth-of-type(4),
      .guidedGroup.guide-cut {
        --group-accent: var(--beak);
        --group-soft: #fff7ed;
      }
      .guidedGroup:nth-of-type(5),
      .guidedGroup.guide-motion {
        --group-accent: var(--rose);
        --group-soft: #fff1f7;
      }
      .groupHead {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 10px;
      }
      .groupHead h3 {
        display: inline-flex;
        align-items: center;
        width: fit-content;
        min-height: 28px;
        padding: 5px 9px;
        border-radius: 8px;
        color: color-mix(in srgb, var(--group-accent) 70%, #111827);
        background: color-mix(in srgb, var(--group-accent) 12%, #ffffff);
        margin: 0;
        font-size: 14px;
        line-height: 1.35;
      }
      .groupHead p {
        max-width: 330px;
        color: var(--muted);
        font-size: 12px;
        line-height: 1.55;
      }
      .guidedGroup label:first-of-type { margin-top: 0; }

      .tabs {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
      }
      .step {
        min-height: 78px;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: linear-gradient(180deg, #ffffff, #fffdf7);
        box-shadow: var(--shadow-soft);
      }
      .num {
        width: 32px;
        height: 32px;
        display: grid;
        place-items: center;
        flex: 0 0 auto;
        border-radius: 8px;
        color: var(--blue-deep);
        background: var(--blue-soft);
        font-weight: 900;
      }
      .step.done {
        border-color: rgba(18, 163, 127, 0.32);
        background: linear-gradient(180deg, #ffffff, #f0fdfa);
      }
      .step.done .num { color: #ffffff; background: var(--green); }
      .step.current {
        border-color: rgba(255, 200, 61, 0.62);
        background: linear-gradient(180deg, #fff8df, #ffffff);
      }
      .step.current .num {
        color: #62320d;
        background: var(--duck);
      }

      label {
        display: grid;
        gap: 6px;
        margin-top: 12px;
        color: #263445;
        font-size: 12px;
        font-weight: 800;
      }
      label[hidden] { display: none; }
      label small {
        color: var(--muted);
        font-size: 11px;
        font-weight: 600;
        line-height: 1.45;
      }
      input, select, textarea {
        width: 100%;
        border: 1px solid var(--line-strong);
        border-radius: 8px;
        padding: 10px 11px;
        background: #fffefd;
        color: var(--ink);
        outline: none;
        font: inherit;
        font-size: 13px;
        font-weight: 600;
        transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
      }
      textarea { min-height: 118px; resize: vertical; line-height: 1.55; font-weight: 500; }
      .promptField {
        display: grid;
        gap: 6px;
        margin-top: 12px;
      }
      .fieldHeader {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        color: #263445;
        font-size: 12px;
        font-weight: 800;
      }
      .fieldHeader label {
        display: block;
        margin: 0;
      }
      .fieldCopyButton {
        min-height: 28px;
        padding: 5px 10px;
        border-radius: 7px;
        font-size: 12px;
        line-height: 1;
      }
      input[type="file"] {
        padding: 9px;
        color: var(--muted);
        background: #ffffff;
      }
      input:focus, select:focus, textarea:focus {
        border-color: var(--blue);
        background: #ffffff;
        box-shadow: 0 0 0 3px rgba(47, 123, 255, 0.14);
      }
      .customChoice {
        margin-top: 8px;
        font-weight: 600;
      }
      .customChoice[hidden] { display: none; }

      .row, .row3, .actions, .previewGrid, .editor, .toolGrid, .compactGrid {
        display: grid;
        gap: 10px;
      }
      .row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .row3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .subjectSettingsGrid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
        gap: 12px 14px;
        margin-top: 12px;
      }
      .subjectSettingsGrid label {
        margin-top: 0;
      }
      #roleFieldGroup {
        grid-column: 1 / -1;
        max-width: calc((100% - 14px) / 2);
      }
      .subjectSettingsGrid select {
        min-height: 56px;
      }
      .actions { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 14px; }
      .previewGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .platformExportGrid {
        grid-template-columns: minmax(320px, 0.95fr) repeat(2, minmax(0, 1fr));
      }
      .resultStack {
        display: grid;
        gap: 10px;
        align-content: start;
      }
      .stageAction {
        width: 100%;
        min-height: 42px;
      }
      .editor {
        grid-template-columns: minmax(360px, 460px) minmax(380px, 620px) minmax(260px, 1fr);
        align-items: start;
      }
      .editorShell {
        display: grid;
        gap: 9px;
        padding-bottom: 12px;
      }
      .editorConceptBanner {
        margin: 15px 15px 0;
        min-height: clamp(220px, 16vw, 290px);
      }
      .editorConceptBanner img {
        min-height: clamp(220px, 16vw, 290px);
      }
      .editorScrollWrap {
        overflow-x: auto;
        padding: 0;
        scrollbar-gutter: stable;
        overscroll-behavior-x: contain;
        scrollbar-color: #8fb1d8 #e8f1fb;
        scrollbar-width: thin;
      }
      .editorScrollWrap::-webkit-scrollbar { height: 12px; }
      .editorScrollWrap::-webkit-scrollbar-track {
        background: #e8f1fb;
        border-radius: 999px;
      }
      .editorScrollWrap::-webkit-scrollbar-thumb {
        border: 3px solid #e8f1fb;
        border-radius: 999px;
        background: #7fa3ce;
      }
      .editorScrollWrap .editor {
        min-width: 1140px;
      }
      .editorDragRail {
        position: relative;
        height: 28px;
        margin: 0 15px;
        border: 1px solid #cfe0f3;
        border-radius: 999px;
        background: linear-gradient(180deg, #f8fbff, #eaf3ff);
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.9);
        cursor: grab;
        user-select: none;
        touch-action: none;
      }
      .editorDragRail:active { cursor: grabbing; }
      .editorDragThumb {
        position: absolute;
        top: 4px;
        left: 4px;
        width: 34%;
        height: 18px;
        min-width: 86px;
        border-radius: 999px;
        background: linear-gradient(90deg, #2563eb, #0f766e);
        box-shadow: 0 6px 14px rgba(37, 99, 235, 0.22);
      }
      .editorDragThumb::before {
        content: "";
        position: absolute;
        inset: 5px 12px;
        border-top: 2px solid rgba(255,255,255,0.72);
        border-bottom: 2px solid rgba(255,255,255,0.72);
      }
      .editorDragRail span {
        position: absolute;
        inset: 0;
        display: grid;
        place-items: center;
        color: #315a87;
        font-size: 12px;
        font-weight: 900;
        pointer-events: none;
      }
      .workflowMotion .embeddedEditorPanel {
        min-width: 0;
        height: auto;
        min-height: 0;
        border-color: rgba(191, 219, 254, 0.9);
        background: linear-gradient(180deg, #ffffff, #f8fbff);
      }
      .workflowMotion .embeddedEditorPanel .panelHead {
        min-height: 42px;
      }
      .workflowMotion .embeddedEditorPanel .editorConceptBanner {
        display: none;
      }
      .workflowMotion .embeddedEditorPanel .editorShell { padding-bottom: 10px; }
      .workflowMotion .embeddedEditorPanel .editorScrollWrap { overflow-x: auto; }
      .workflowMotion .embeddedEditorPanel .editorScrollWrap .editor {
        min-width: 0;
        grid-template-columns: minmax(260px, 0.88fr) minmax(360px, 1.18fr) minmax(280px, 0.94fr);
        gap: 12px;
        padding: 12px;
        align-items: stretch;
      }
      .workflowMotion .embeddedEditorPanel .canvasWrap {
        min-height: 470px;
      }
      .workflowMotion .embeddedEditorPanel canvas {
        width: min(360px, 100%);
        height: min(360px, 100%);
      }
      .workflowMotion .embeddedEditorPanel .frames {
        max-width: 100%;
      }
      .workflowMotion .embeddedEditorPanel .toolSection {
        padding: 9px;
      }
      .workflowMotion .embeddedEditorPanel .compactGrid {
        grid-template-columns: repeat(3, minmax(84px, 1fr));
      }
      .workflowMotion .embeddedEditorPanel .editorResult {
        grid-column: auto;
        grid-template-columns: 1fr;
        grid-template-rows: minmax(0, 1fr) auto;
        align-items: stretch;
      }
      .workflowMotion .embeddedEditorPanel .editorExport {
        align-self: end;
      }
      .workflowMotion .embeddedEditorPanel .editorResultActions {
        align-self: end;
      }
      .workflowMotion .embeddedEditorPanel .editorResultStage {
        min-height: 470px;
      }
      .workflowMotion .embeddedEditorPanel .editorResultStage img {
        max-height: 430px;
      }
      .workflowMotion .embeddedEditorPanel .editorControls {
        display: grid;
        grid-template-rows: auto repeat(5, minmax(0, auto)) auto;
        align-content: stretch;
        gap: 8px;
        max-width: none;
        height: 100%;
      }
      .workflowMotion .embeddedEditorPanel .editorActions {
        gap: 8px;
      }
      .workflowMotion .embeddedEditorPanel .editorActions button,
      .workflowMotion .embeddedEditorPanel .editorExport {
        min-height: 36px;
        padding: 8px 10px;
        font-size: 12px;
      }
      .workflowMotion .embeddedEditorPanel .toolSection {
        display: grid;
        gap: 7px;
      }
      .workflowMotion .embeddedEditorPanel .toolSection h3 {
        margin-bottom: 4px;
        font-size: 12px;
      }
      .workflowMotion .embeddedEditorPanel label {
        gap: 4px;
        margin-top: 7px;
        font-size: 11px;
      }
      .workflowMotion .embeddedEditorPanel input,
      .workflowMotion .embeddedEditorPanel select {
        min-height: 36px;
        padding: 8px 9px;
        font-size: 12px;
      }
      .workflowMotion .embeddedEditorPanel .toolGrid,
      .workflowMotion .embeddedEditorPanel .compactGrid {
        gap: 8px;
      }
      .workflowMotion .embeddedPlatformPanel {
        min-width: 0;
        height: auto;
        min-height: 0;
        border-color: rgba(191, 219, 254, 0.9);
        background: linear-gradient(180deg, #ffffff, #fffdf7);
      }
      .workflowMotion .embeddedPlatformPanel .panelHead {
        min-height: 42px;
      }
      .workflowMotion .embeddedPlatformPanel .platformExportGrid {
        grid-template-columns: minmax(320px, 0.95fr) repeat(2, minmax(240px, 1fr));
        align-items: stretch;
        padding: 12px;
      }
      .workflowMotion .embeddedPlatformPanel .stage {
        min-height: 220px;
      }
      .workflowMotion .embeddedPlatformPanel .row {
        gap: 8px;
      }
      .workflowMotion .embeddedPlatformPanel .tierAction.full {
        margin-top: 10px;
      }
      .editorControls {
        display: grid;
        gap: 12px;
        max-width: 820px;
      }
      .toolSection {
        border: 1px solid var(--line);
        border-radius: 8px;
        padding: 12px;
        background: #fbfdff;
      }
      .toolSection h3 {
        margin: 0 0 10px;
        font-size: 13px;
        color: var(--muted);
      }
      .toolSection label { margin-top: 0; }
      .toolGrid { grid-template-columns: minmax(180px, 1.35fr) minmax(110px, 0.65fr); }
      .compactGrid { grid-template-columns: repeat(3, minmax(100px, 1fr)); }
      .firstFrameTools {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        margin-top: 12px;
      }
      .motionPromptTools {
        display: grid;
        gap: 10px;
        margin-top: 12px;
      }
      .parameterGroup {
        display: grid;
        gap: 10px;
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid #e7eef8;
      }
      .parameterGroupHead {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 10px;
      }
      .parameterGroupHead strong {
        color: #18283d;
        font-size: 13px;
        font-weight: 800;
      }
      .parameterGroupHead span,
      .fieldHint {
        color: var(--muted);
        font-size: 12px;
        font-weight: 650;
        line-height: 1.45;
      }
      .fieldHint {
        display: block;
        margin-top: 5px;
      }
      input.paramFixed {
        color: #526273;
        background: #f5f8fc;
      }
      .optionCard {
        border: 1px solid #dfeaf6;
        border-radius: 8px;
        padding: 12px;
        background: linear-gradient(180deg, #ffffff, var(--blue-soft));
      }
      .checkRow {
        display: grid;
        grid-template-columns: 22px minmax(0, 1fr);
        align-items: start;
        gap: 10px;
        margin: 0;
        color: #1f2f43;
      }
      .checkRow input {
        width: 18px;
        height: 18px;
        margin: 1px 0 0;
        accent-color: var(--blue);
      }
      .checkRow span {
        display: grid;
        gap: 4px;
        line-height: 1.35;
      }
      .checkRow small {
        color: var(--muted);
        font-size: 12px;
        font-weight: 600;
        line-height: 1.45;
      }
      .editorActions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
      }
      .editorActions button, .editorExport { width: 100%; }
      .editorResult {
        display: grid;
        gap: 10px;
        min-width: 0;
      }
      .editorResultActions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
      }
      .editorResultActions .wide {
        grid-column: 1 / -1;
      }
      .editorResultStage {
        min-height: 360px;
      }
      .editorResultStage img {
        max-height: 330px;
      }
      input[type="color"] {
        min-height: 40px;
        padding: 4px;
      }

      button {
        min-height: 40px;
        border: 1px solid transparent;
        border-radius: 8px;
        padding: 10px 12px;
        background: #182033;
        color: #fff;
        font: inherit;
        font-size: 13px;
        font-weight: 900;
        cursor: pointer;
        line-height: 1.15;
        box-shadow: 0 8px 16px rgba(15, 23, 42, 0.12);
        transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease, background 0.16s ease;
      }
      button:hover:not(:disabled) { filter: brightness(1.04); transform: translateY(-1px); box-shadow: 0 11px 22px rgba(15, 23, 42, 0.16); }
      button:active:not(:disabled) { transform: translateY(0); box-shadow: 0 6px 12px rgba(15, 23, 42, 0.12); }
      button:disabled { opacity: 0.52; cursor: not-allowed; }
      button.apiCall {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
      }
      button.apiCall::before {
        content: "";
        width: 24px;
        height: 24px;
        flex: 0 0 auto;
        border-radius: 50%;
        background: transparent url("/static/tai-chi-api-mark-ui.svg") center / contain no-repeat;
        filter: drop-shadow(0 1px 1px rgba(15, 23, 42, 0.14));
      }
      .primary { background: linear-gradient(180deg, #3f89ff, var(--blue)); }
      .green { background: var(--green); }
      .orange { background: linear-gradient(180deg, #ff9f3d, var(--beak)); }
      .rose { background: var(--rose); }
      .violet { background: var(--violet); }
      .gold { background: linear-gradient(180deg, #ffe179, var(--duck)); color: #5f3900; }
      .ghost {
        background: #fffefd;
        color: var(--ink);
        border: 1px solid var(--line);
        box-shadow: none;
      }
      .downloadLink {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 40px;
        padding: 10px 12px;
        border-radius: 8px;
        background: var(--green);
        color: #fff;
        font-size: 13px;
        font-weight: 900;
        text-decoration: none;
      }
      .mediaMeta {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        width: fit-content;
        max-width: 100%;
        margin-top: 8px;
        padding: 6px 9px;
        border: 1px solid #dbeafe;
        border-radius: 999px;
        background: rgba(248, 251, 255, 0.92);
        color: var(--muted);
        font-size: 12px;
        font-weight: 800;
        line-height: 1.45;
      }
      .mediaMeta::before {
        content: "";
        width: 7px;
        height: 7px;
        flex: 0 0 auto;
        border-radius: 999px;
        background: #94a3b8;
      }
      .mediaMeta.ok {
        border-color: rgba(15, 118, 110, 0.24);
        background: #f0fdfa;
        color: var(--green);
      }
      .mediaMeta.ok::before { background: var(--green); }
      .mediaMeta.warn {
        border-color: rgba(180, 83, 9, 0.25);
        background: #fff7ed;
        color: #b45309;
      }
      .mediaMeta.warn::before { background: #f59e0b; }
      .stageImageButton + .mediaMeta,
      .stage video + .mediaMeta {
        align-self: flex-start;
      }
      .miniDownload {
        display: block;
        margin-top: 6px;
        color: var(--blue);
        font-size: 12px;
        font-weight: 900;
        text-decoration: none;
      }
      .taskCard {
        display: grid;
        gap: 10px;
        margin-top: 12px;
        padding: 12px;
        border: 1px solid #cfe0f2;
        border-radius: 8px;
        background: rgba(255,255,255,0.86);
      }
      .taskBar {
        height: 9px;
        border-radius: 999px;
        background: #dbe7f3;
        overflow: hidden;
      }
      .taskBar span {
        display: block;
        width: 0%;
        height: 100%;
        background: linear-gradient(90deg, var(--blue), var(--green));
        transition: width 0.3s ease;
      }
      .taskFacts {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
      }
      .taskFacts span {
        padding: 8px;
        border-radius: 8px;
        background: #f7fafc;
        color: var(--muted);
        font-size: 12px;
        font-weight: 800;
      }
      .taskInlineLoader {
        display: grid;
        justify-items: center;
        gap: 6px;
        margin: 2px 0;
      }
      .taskInlineLoader .runTransition {
        width: min(116px, 44%);
        min-width: 78px;
      }
      .taskInlineLoader .loaderTrack {
        width: min(180px, 70%);
      }

      .badge {
        display: inline-flex;
        align-items: center;
        min-height: 26px;
        padding: 5px 9px;
        border: 1px solid #e5eef8;
        border-radius: 8px;
        background: linear-gradient(180deg, #ffffff, #fff5cf);
        color: #805000;
        font-size: 12px;
        font-weight: 800;
        white-space: nowrap;
      }

      .stage, .canvasWrap, .sticker, .frameBtn {
        background-color: #fffefd;
        background-image:
          linear-gradient(45deg, #eef5fc 25%, transparent 25%),
          linear-gradient(-45deg, #eef5fc 25%, transparent 25%),
          linear-gradient(45deg, transparent 75%, #eef5fc 75%),
          linear-gradient(-45deg, transparent 75%, #eef5fc 75%);
        background-size: 20px 20px;
        background-position: 0 0, 0 10px, 10px -10px, -10px 0;
      }
      .stage {
        display: grid;
        align-content: start;
        position: relative;
        min-height: 286px;
        border: 1px dashed #b9d0e8;
        border-radius: 8px;
        padding: 13px;
        overflow: hidden;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
      }
      .resultFocusPulse {
        border-color: var(--blue);
        box-shadow:
          inset 0 1px 0 rgba(255,255,255,0.8),
          0 0 0 4px rgba(47, 123, 255, 0.16),
          0 14px 34px rgba(47, 123, 255, 0.12);
        animation: resultPulse 1.45s ease-out;
      }
      @keyframes resultPulse {
        0% { transform: translateY(-1px); }
        55% { transform: translateY(0); }
        100% { transform: translateY(0); }
      }
      .stageEmpty {
        display: grid;
        gap: 7px;
        align-content: center;
        min-height: 232px;
        padding: 16px;
        border-radius: 8px;
        background: rgba(255,255,255,0.78);
      }
      .stageEmpty h3 {
        color: var(--ink);
        font-size: 14px;
      }
      .stageEmpty p {
        color: var(--muted);
        font-size: 12px;
        line-height: 1.55;
      }
      .stageEmpty span {
        width: fit-content;
        padding: 5px 8px;
        border-radius: 8px;
        color: var(--blue-deep);
        background: var(--blue-soft);
        font-size: 12px;
        font-weight: 900;
      }
      .stage img, .stage video {
        display: block;
        width: 100%;
        max-height: 520px;
        object-fit: contain;
        margin-top: 10px;
        border-radius: 8px;
      }
      .stageImageButton {
        display: grid;
        gap: 6px;
        width: 100%;
        margin: 0;
        padding: 0;
        border: 0;
        background: transparent;
        color: var(--blue);
        cursor: zoom-in;
        box-shadow: none;
        text-align: left;
      }
      .stageImageButton img {
        margin-top: 10px;
      }
      .stageImageButton span {
        width: fit-content;
        padding: 4px 8px;
        border: 1px solid rgba(47, 123, 255, 0.2);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.88);
        color: var(--blue);
        font-size: 12px;
        font-weight: 900;
      }
      .transparentPreviewStage {
        background-color: #fffefd;
        background-image:
          linear-gradient(45deg, rgba(47, 123, 255, 0.12) 25%, transparent 25%),
          linear-gradient(-45deg, rgba(47, 123, 255, 0.12) 25%, transparent 25%),
          linear-gradient(45deg, transparent 75%, rgba(47, 123, 255, 0.12) 75%),
          linear-gradient(-45deg, transparent 75%, rgba(47, 123, 255, 0.12) 75%);
        background-size: 18px 18px;
        background-position: 0 0, 0 9px, 9px -9px, -9px 0;
      }
      .transparentPreviewBadge {
        width: fit-content;
        margin-top: 6px;
        padding: 5px 9px;
        border: 1px solid rgba(18, 163, 127, 0.22);
        border-radius: 999px;
        background: rgba(236, 253, 245, 0.92);
        color: #08745f;
        font-size: 12px;
        font-weight: 900;
      }
      .transparentPreviewStage .stageImageButton {
        margin-top: 10px;
        padding: 14px;
        border: 1px dashed rgba(47, 123, 255, 0.32);
        border-radius: 8px;
        background-color: rgba(255, 255, 255, 0.2);
        background-image:
          linear-gradient(45deg, rgba(47, 123, 255, 0.12) 25%, transparent 25%),
          linear-gradient(-45deg, rgba(47, 123, 255, 0.12) 25%, transparent 25%),
          linear-gradient(45deg, transparent 75%, rgba(47, 123, 255, 0.12) 75%),
          linear-gradient(-45deg, transparent 75%, rgba(47, 123, 255, 0.12) 75%);
        background-size: 18px 18px;
        background-position: 0 0, 0 9px, 9px -9px, -9px 0;
      }
      .transparentPreviewStage .stageImageButton img {
        margin-top: 0;
        background: transparent;
        filter: drop-shadow(0 6px 16px rgba(17, 42, 76, 0.14));
      }
      .stage .loader {
        position: absolute;
        inset: 0;
        display: grid;
        place-items: center;
        padding: 18px;
        text-align: center;
        background: rgba(255, 255, 255, 0.86);
        backdrop-filter: blur(8px);
      }
      .stickers {
        position: relative;
        min-height: 128px;
      }
      .stickersEmpty {
        grid-column: 1 / -1;
        display: grid;
        gap: 7px;
        min-height: 116px;
        align-content: center;
        padding: 16px;
        border: 1px dashed #b9d0e8;
        border-radius: 8px;
        background:
          linear-gradient(135deg, rgba(255, 200, 61, 0.09), transparent 42%),
          #fffefd;
      }
      .stickersEmpty strong {
        color: var(--ink);
        font-size: 14px;
      }
      .stickersEmpty span {
        color: var(--muted);
        font-size: 12px;
        line-height: 1.55;
      }
      .stickers .loader {
        position: absolute;
        inset: 0;
        z-index: 2;
        display: grid;
        place-items: center;
        padding: 18px;
        text-align: center;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.88);
        backdrop-filter: blur(8px);
      }
      .loaderCard {
        display: grid;
        justify-items: center;
        gap: 8px;
      }
      .runTransition {
        width: min(148px, 44%);
        min-width: 96px;
        aspect-ratio: 1;
        object-fit: contain;
        filter: drop-shadow(0 12px 16px rgba(15, 23, 42, 0.14));
      }
      .loaderTrack {
        width: min(220px, 72%);
        height: 6px;
        overflow: hidden;
        border-radius: 999px;
        background: #dbe7f3;
      }
      .loaderTrack::before {
        content: "";
        display: block;
        width: 42%;
        height: 100%;
        border-radius: inherit;
        background: linear-gradient(90deg, var(--blue), var(--green));
        animation: loaderRun 1.15s ease-in-out infinite;
      }
      .spinner {
        width: 44px;
        height: 44px;
        margin: 0 auto 12px;
        border-radius: 50%;
        border: 4px solid #dfe7ef;
        border-top-color: var(--blue);
        animation: spin 0.9s linear infinite;
      }
      @keyframes spin { to { transform: rotate(360deg); } }
      @keyframes loaderRun {
        0% { transform: translateX(-110%); }
        100% { transform: translateX(250%); }
      }

      .stickers {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(126px, 1fr));
        gap: 12px;
        max-height: 510px;
        overflow: auto;
        padding-right: 3px;
      }
      .sticker {
        position: relative;
        border: 2px solid transparent;
        border-radius: 8px;
        padding: 8px;
        color: var(--ink);
        cursor: pointer;
        box-shadow: none;
      }
      .sticker.active { border-color: var(--green); background-color: #f0fdfa; }
      .sticker img { width: 100%; aspect-ratio: 1; object-fit: contain; display: block; }
      .stickerCard {
        display: grid;
        gap: 4px;
      }
      .stickerCard.active {
        border-radius: 8px;
      }
      .staticStickerCheck {
        position: absolute;
        top: 7px;
        left: 7px;
        z-index: 1;
        display: grid;
        place-items: center;
        width: 22px;
        height: 22px;
        border: 1px solid rgba(172, 196, 222, 0.95);
        border-radius: 6px;
        color: #ffffff;
        background: rgba(255, 255, 255, 0.88);
        font-size: 13px;
        font-weight: 950;
      }
      .sticker.active .staticStickerCheck {
        border-color: transparent;
        background: linear-gradient(180deg, #ff9a2b, #ff7600);
      }
      .stickerViewButton {
        width: 100%;
        min-height: 30px;
        padding: 6px 8px;
        font-size: 12px;
      }
      .viewerOpen {
        overflow: hidden;
      }
      .imageViewer[hidden] {
        display: none;
      }
      .imageViewer {
        position: fixed;
        inset: 0;
        z-index: 80;
        display: grid;
        place-items: center;
        padding: 22px;
      }
      .imageViewerBackdrop {
        position: absolute;
        inset: 0;
        background: rgba(15, 23, 42, 0.72);
        backdrop-filter: blur(7px);
      }
      .imageViewerPanel {
        position: relative;
        z-index: 1;
        display: grid;
        grid-template-rows: auto minmax(0, 1fr);
        width: min(1120px, 96vw);
        max-height: 92vh;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.28);
        border-radius: 8px;
        background: #fffefd;
        box-shadow: 0 30px 80px rgba(15, 23, 42, 0.36);
      }
      .imageViewerHead {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 12px 14px;
        border-bottom: 1px solid var(--line);
      }
      .imageViewerHead h2 {
        margin: 0;
        font-size: 16px;
      }
      .imageViewerActions {
        display: flex;
        align-items: center;
        gap: 8px;
      }
      .imageViewerActions .miniDownload {
        margin-top: 0;
      }
      .imageViewerCanvas {
        display: grid;
        place-items: center;
        min-height: 280px;
        overflow: auto;
        padding: 18px;
        background-color: #fffefd;
        background-image:
          linear-gradient(45deg, #eef5fc 25%, transparent 25%),
          linear-gradient(-45deg, #eef5fc 25%, transparent 25%),
          linear-gradient(45deg, transparent 75%, #eef5fc 75%),
          linear-gradient(-45deg, transparent 75%, #eef5fc 75%);
        background-size: 20px 20px;
        background-position: 0 0, 0 10px, 10px -10px, -10px 0;
      }
      .imageViewerCanvas img {
        display: block;
        max-width: min(100%, 1024px);
        max-height: 78vh;
        object-fit: contain;
        border-radius: 8px;
      }

      .canvasWrap {
        display: grid;
        place-items: center;
        min-height: 448px;
        border: 1px dashed #b7c7d8;
        border-radius: 8px;
      }
      .canvasWrap.dark { background: #182235; }
      canvas {
        width: min(390px, 92vw);
        height: min(390px, 92vw);
        max-width: 100%;
        border: 1px solid rgba(42, 57, 80, 0.16);
        border-radius: 8px;
        cursor: grab;
      }
      canvas:active { cursor: grabbing; }
      .frames {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        padding: 10px 2px 2px;
      }
      .frameBtn {
        flex: 0 0 82px;
        border: 1px solid var(--line);
        color: var(--muted);
        padding: 6px;
      }
      .frameBtn.active {
        border-color: var(--rose);
        box-shadow: 0 0 0 3px rgba(180, 59, 104, 0.14);
      }
      .frameBtn img {
        width: 100%;
        aspect-ratio: 1;
        object-fit: contain;
        display: block;
      }

      .historyList {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
        gap: 12px;
        max-height: 560px;
        overflow-y: auto;
      }
      .historyItem {
        border: 1px solid var(--line);
        border-radius: 8px;
        padding: 11px;
        background: #fff;
        box-shadow: var(--shadow-soft);
      }
      .historyItem img, .historyItem video {
        width: 100%;
        max-height: 160px;
        object-fit: contain;
        margin-top: 8px;
        border-radius: 8px;
        background: #f4f7fb;
      }
      .miniActions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 10px;
      }
      .miniActions button { min-height: 32px; padding: 8px 9px; font-size: 12px; }
      .adminHero {
        align-items: center;
        padding: 18px 0 8px;
      }
      .adminHero h2 {
        font-size: 32px;
        line-height: 1.15;
      }
      .adminHeroMeta {
        display: grid;
        justify-items: end;
        gap: 8px;
      }
      .adminHeroActions {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 10px;
      }
      .adminRefreshNote {
        color: var(--muted);
        font-size: 12px;
        font-weight: 800;
      }
      .adminOverview {
        display: grid;
        gap: 14px;
      }
      .opsGrid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
      }
      .opsMetricGroup {
        display: grid;
        gap: 10px;
        align-content: start;
        padding: 12px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background:
          linear-gradient(135deg, rgba(255, 200, 61, 0.08), transparent 52%),
          #fffefd;
      }
      .opsMetricGroup h3 {
        color: var(--ink);
        font-size: 14px;
      }
      .opsMetricGroup p {
        color: var(--muted);
        font-size: 12px;
        line-height: 1.55;
      }
      .metricGrid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
      }
      .metricCard {
        border: 1px solid var(--line);
        border-radius: 8px;
        padding: 10px;
        background: linear-gradient(180deg, #ffffff, var(--blue-soft));
      }
      .metricCard strong {
        display: block;
        font-size: 22px;
        line-height: 1.1;
      }
      .metricCard span {
        display: block;
        color: var(--muted);
        font-size: 12px;
        margin-top: 4px;
      }
      .metricCard.attention {
        border-color: rgba(255, 138, 31, 0.35);
        background: linear-gradient(180deg, #fff7ed, #ffffff);
      }
      .metricCard.money {
        border-color: rgba(255, 200, 61, 0.35);
        background: linear-gradient(180deg, #fff8df, #ffffff);
      }
      .adminPendingGrid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
      }
      .pendingCard {
        display: grid;
        gap: 9px;
        min-height: 116px;
        padding: 14px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: #ffffff;
        box-shadow: var(--shadow-soft);
      }
      .pendingCard strong {
        color: var(--ink);
        font-size: 15px;
      }
      .pendingCard p {
        color: var(--muted);
        font-size: 12px;
        line-height: 1.55;
      }
      .pendingCard button {
        width: fit-content;
        min-height: 32px;
        padding: 7px 10px;
        font-size: 12px;
      }
      .pendingCard.warn {
        border-color: rgba(255, 138, 31, 0.38);
        background: linear-gradient(180deg, #fff7ed, #ffffff);
      }
      .pendingCard.danger {
        border-color: rgba(217, 75, 122, 0.34);
        background: linear-gradient(180deg, #fff1f7, #ffffff);
      }
      .pendingCard.ok {
        border-color: rgba(18, 163, 127, 0.24);
        background: linear-gradient(180deg, #effaf8, #ffffff);
      }
      .strategyShell {
        display: grid;
        gap: 14px;
      }
      .tierChooser {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 12px;
        margin-top: 12px;
        padding: 12px;
        border: 1px solid #dbe8f5;
        border-radius: 8px;
        background: #fbfdff;
      }
      .tierChooserInfo {
        display: grid;
        gap: 3px;
        min-width: 0;
      }
      .tierChooserInfo strong {
        color: var(--ink);
        font-size: 13px;
      }
      .tierChooserInfo span {
        color: var(--muted);
        font-size: 12px;
        line-height: 1.45;
      }
      .tierSwitch {
        display: inline-grid;
        grid-template-columns: repeat(2, minmax(76px, 1fr));
        gap: 4px;
        padding: 4px;
        border: 1px solid #d8e5f3;
        border-radius: 8px;
        background: #ffffff;
      }
      .tierSwitch button {
        min-height: 36px;
        padding: 8px 12px;
        border-color: transparent;
        background: transparent;
        color: #475569;
        font-size: 12px;
        font-weight: 950;
        box-shadow: none;
      }
      .tierSwitch button.active {
        border-color: #0f766e;
        background: #ecfdf5;
        color: #0f766e;
      }
      .tierSwitch button[data-tier-value="pro"].active {
        border-color: #b7791f;
        background: #fff7d6;
        color: #8a5200;
      }
      .tierActionRow {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
      }
      .tierAction {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 136px;
        align-items: stretch;
        width: 100%;
        min-height: 62px;
        border: 1px solid rgba(141, 190, 250, 0.72);
        border-radius: 8px;
        background: linear-gradient(180deg, #ffffff, #f6fbff);
        box-shadow: 0 12px 24px rgba(15, 23, 42, 0.075);
        overflow: hidden;
      }
      .tierAction.full {
        margin-top: 14px;
      }
      .firstFrameTools .tierAction.full {
        margin-top: 0;
      }
      .tierAction > button {
        width: 100%;
        min-height: 62px;
        padding: 0 16px;
        border-radius: 0;
        border: 0;
        box-shadow: none;
        white-space: nowrap;
      }
      .tierAction > button.ghost {
        background: linear-gradient(180deg, #536179, #334155);
        color: #ffffff;
      }
      .tierPicker {
        position: relative;
        display: grid;
        align-content: center;
        gap: 4px;
        min-width: 0;
        min-height: 62px;
        padding: 0 32px 0 15px;
        border-left: 1px solid rgba(141, 190, 250, 0.72);
        background:
          linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 252, 255, 0.96));
        color: #0f766e;
        cursor: pointer;
      }
      .tierPicker::after {
        content: "";
        position: absolute;
        right: 15px;
        top: 50%;
        width: 8px;
        height: 8px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: translateY(-70%) rotate(45deg);
        opacity: 0.86;
        pointer-events: none;
      }
      .tierPickerLabel {
        min-width: 0;
        font-size: 13px;
        font-weight: 950;
        line-height: 1;
      }
      .tierPickerMeta {
        min-width: 0;
        overflow: hidden;
        color: #64748b;
        font-size: 10.5px;
        font-weight: 850;
        line-height: 1;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .tierActionSelect {
        position: absolute;
        inset: 0;
        z-index: 2;
        width: 100%;
        height: 100%;
        min-height: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        opacity: 0;
        cursor: pointer;
      }
      .tierActionSelect:disabled {
        cursor: default;
      }
      .tierPicker.isPro {
        background: #fff8df;
        color: #8a5200;
      }
      .tierPicker.isPro .tierPickerMeta {
        color: #9a6b13;
      }
      .tierPicker.isFixed {
        background: #f8fafc;
        color: #475569;
        cursor: default;
      }
      .tierPicker.isFixed::after {
        opacity: 0.28;
      }
      .tierPicker:focus-within {
        outline: 2px solid rgba(30, 144, 255, 0.28);
        outline-offset: -2px;
      }
      .motionPromptTools .tierAction {
        min-width: 260px;
      }
      .strategySummary {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
      }
      .strategyMetric {
        padding: 12px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: linear-gradient(180deg, #ffffff, #f7fbff);
      }
      .strategyMetric strong {
        display: block;
        font-size: 20px;
        color: var(--ink);
      }
      .strategyMetric span {
        display: block;
        margin-top: 4px;
        color: var(--muted);
        font-size: 12px;
      }
      .strategyToolbar {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 12px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: #fffefd;
      }
      .strategyToolbar label {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin: 0;
        color: var(--muted);
        font-size: 12px;
        font-weight: 900;
      }
      .strategyToolbar input {
        width: 88px;
      }
      .strategyModelSwitches {
        display: grid;
        gap: 10px;
        padding: 12px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: #ffffff;
      }
      .strategyModelSwitches > strong {
        color: var(--ink);
        font-size: 13px;
      }
      .strategyModelSwitches > div {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
      }
      .strategyModelSwitch {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 10px;
        border: 1px solid #dbeafe;
        border-radius: 8px;
        background: #f8fbff;
        color: #1e293b;
        font-size: 12px;
        font-weight: 900;
      }
      .strategyModelSwitch input {
        width: auto;
      }
      .strategyModelSwitch small {
        color: var(--muted);
        font-size: 11px;
      }
      .strategyTableWrap {
        overflow-x: auto;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: #ffffff;
      }
      .strategyTable {
        width: 100%;
        min-width: 1180px;
        border-collapse: collapse;
      }
      .strategyTable th,
      .strategyTable td {
        padding: 12px;
        border-bottom: 1px solid #e5eef8;
        text-align: left;
        vertical-align: top;
      }
      .strategyTable th {
        color: #475569;
        background: #f8fafc;
        font-size: 12px;
        white-space: nowrap;
      }
      .strategyTable tr:last-child td {
        border-bottom: 0;
      }
      .strategyName strong {
        display: block;
        color: var(--ink);
        font-size: 14px;
      }
      .strategyName span {
        display: block;
        margin-top: 4px;
        color: var(--muted);
        font-size: 12px;
      }
      .tierCell {
        display: grid;
        gap: 8px;
        min-width: 260px;
      }
      .tierCellHeader {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
      }
      .tierLabel {
        display: inline-flex;
        align-items: center;
        width: fit-content;
        min-height: 24px;
        padding: 4px 8px;
        border-radius: 999px;
        background: #e0f2fe;
        color: #075985;
        font-size: 12px;
        font-weight: 900;
      }
      .tierLabel.pro {
        background: #fff1c2;
        color: #7c4a03;
      }
      .tierCell select,
      .tierCell input {
        width: 100%;
        min-height: 38px;
        padding: 8px 10px;
        font-size: 13px;
      }
      .tierNumbers {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
      }
      .tierNumbers span {
        display: grid;
        gap: 2px;
        padding: 7px 8px;
        border: 1px solid #e6eef7;
        border-radius: 8px;
        background: #fbfdff;
        color: #64748b;
        font-size: 11px;
        line-height: 1.25;
      }
      .tierNumbers b {
        color: var(--ink);
        font-size: 12px;
      }
      .strategyStatus {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 24px;
        padding: 4px 8px;
        border-radius: 999px;
        background: #ecfdf5;
        color: #047857;
        font-size: 12px;
        font-weight: 900;
        white-space: nowrap;
      }
      .strategyStatus.above_target {
        background: #eff6ff;
        color: #1d4ed8;
      }
      .strategyStatus.loss_risk {
        background: #fff1f2;
        color: #be123c;
      }
      .strategyStatus.unknown {
        background: #f1f5f9;
        color: #475569;
      }
      .adminTaskList.historyList {
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
        max-height: 520px;
      }
      .adminTaskCard {
        min-height: 174px;
      }
      .adminTaskCard h3 {
        line-height: 1.45;
      }
      .adminEmptyState {
        grid-column: 1 / -1;
        display: grid;
        gap: 8px;
        min-height: 118px;
        align-content: center;
        padding: 18px;
        border: 1px dashed #b9d0e8;
        border-radius: 8px;
        background:
          linear-gradient(135deg, rgba(255, 200, 61, 0.1), transparent 44%),
          #fffefd;
      }
      .adminEmptyState strong {
        color: var(--ink);
        font-size: 15px;
      }
      .adminEmptyState span {
        color: var(--muted);
        font-size: 12px;
        line-height: 1.55;
      }
      .adminUserLayout {
        display: grid;
        grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
        gap: 16px;
        align-items: start;
      }
      .adminOpsPanel {
        display: grid;
        gap: 12px;
      }
      .adminMiniPanel {
        display: grid;
        gap: 10px;
        padding: 13px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: linear-gradient(180deg, #ffffff, #fffdf7);
      }
      .adminMiniPanel h3 {
        font-size: 14px;
        color: var(--ink);
      }
      .adminMiniPanel p {
        color: var(--muted);
        font-size: 12px;
        line-height: 1.55;
      }
      .adminRegistrationPanel {
        border-color: rgba(245, 158, 11, .34);
        background:
          linear-gradient(135deg, rgba(255, 251, 235, .92), rgba(255, 255, 255, .96)),
          var(--panel);
      }
      .adminRegistrationStatus {
        display: grid;
        gap: 4px;
        min-height: 58px;
        padding: 12px;
        border: 1px solid rgba(34, 197, 94, .24);
        border-radius: 8px;
        background: rgba(240, 253, 244, .78);
        color: #14532d;
      }
      .adminRegistrationStatus.paused {
        border-color: rgba(245, 158, 11, .34);
        background: rgba(255, 247, 237, .88);
        color: #7c2d12;
      }
      .adminRegistrationStatus strong {
        font-size: 14px;
      }
      .adminRegistrationStatus span {
        font-size: 12px;
        line-height: 1.45;
      }
      .adminCreditAdjustPanel {
        background: linear-gradient(180deg, #ffffff, #f6fffb);
      }
      .adminCreditLookupResult {
        min-height: 42px;
        padding: 10px;
        border: 1px solid #dbeafe;
        border-radius: 8px;
        background: #f8fbff;
        color: var(--muted);
        font-size: 12px;
        font-weight: 800;
        line-height: 1.5;
      }
      .adminCreditLookupResult.ok {
        border-color: rgba(15, 118, 110, 0.24);
        background: #f0fdfa;
        color: var(--green);
      }
      .adminCreditLookupResult.warn {
        border-color: rgba(180, 83, 9, 0.28);
        background: #fff7ed;
        color: #b45309;
      }
      .adminCreditActions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
      }
      .adminDirectory {
        min-width: 0;
      }
      .adminUserToolbar {
        display: grid;
        grid-template-columns: minmax(220px, 1fr) 160px auto;
        gap: 10px;
        align-items: end;
        margin-bottom: 12px;
      }
      .adminUserToolbar label {
        margin-top: 0;
      }
      .adminUserList.historyList {
        grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
        max-height: 660px;
      }
      .adminUserCard {
        display: grid;
        align-content: start;
        min-height: 286px;
      }
      .adminUserHead {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 10px;
      }
      .adminUserHead h3 {
        font-size: 16px;
        line-height: 1.3;
      }
      .adminUserRole {
        color: var(--muted);
        font-size: 12px;
        font-weight: 800;
      }
      .adminUserStats {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin-top: 10px;
      }
      .adminUserStats span {
        display: grid;
        gap: 3px;
        padding: 8px;
        border-radius: 8px;
        background: var(--blue-soft);
        color: var(--muted);
        font-size: 12px;
        line-height: 1.35;
      }
      .adminUserStats b {
        color: var(--ink);
        font-size: 15px;
      }
      .adminUserMeta {
        margin-top: 10px;
        color: var(--muted);
        font-size: 12px;
        line-height: 1.6;
      }
      .adminLedgerPreview {
        max-height: 72px;
        overflow: auto;
        margin-top: 8px;
        padding: 8px;
        border-radius: 8px;
        background: #fffdf7;
        color: var(--muted);
        font-size: 12px;
        line-height: 1.55;
      }
      .projectBulkBar {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        align-items: center;
      }
      .projectBulkBar input {
        min-width: 210px;
        flex: 1 1 220px;
      }
      .projectSelectRow {
        display: flex;
        align-items: center;
        gap: 8px;
        color: var(--muted);
        font-size: 12px;
        margin-bottom: 6px;
      }
      .projectSelectRow input { width: auto; }
      .taskStatusPill {
        display: inline-flex;
        align-items: center;
        min-height: 24px;
        padding: 3px 8px;
        border-radius: 999px;
        background: #eaf2ff;
        color: var(--blue-deep);
        font-size: 12px;
        font-weight: 800;
      }
      .taskStatusPill.failed {
        background: #fff1f2;
        color: var(--rose);
      }
      .taskStatusPill.completed {
        background: #ecfdf5;
        color: var(--green);
      }

      .log {
        max-height: 260px;
        overflow: auto;
        white-space: pre-wrap;
        padding: 12px;
        border-radius: 8px;
        background: #0f172a;
        color: #dbeafe;
        font-family: Consolas, monospace;
        font-size: 12px;
        line-height: 1.55;
      }

      .mutedLine {
        border-top: 1px solid var(--line);
        margin-top: 14px;
        padding-top: 14px;
      }
      body.authChecking .appOnly,
      body.authChecking .loginScreen { display: none; }
      body.authLocked .appOnly { display: none; }
      body:not(.authLocked):not(.authChecking) .loginScreen { display: none; }
      body:not(.isAdmin) .adminOnly { display: none; }
      body:not(.isAdmin) .accountMenu .adminOnly { display: none; }
      .loginScreen {
        min-height: 100vh;
        padding: 24px;
        overflow-x: hidden;
        background:
          linear-gradient(135deg, rgba(255, 200, 61, 0.14) 0 12%, transparent 12% 100%),
          linear-gradient(180deg, #fffaf0 0%, var(--blue-soft) 52%, #ffffff 100%);
      }
      .loginLanding {
        position: relative;
        min-height: calc(100vh - 48px);
        display: grid;
        grid-template-rows: auto 1fr;
        gap: 18px;
        width: min(1180px, 100%);
        margin: 0 auto;
      }
      .loginNav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
        min-height: 52px;
      }
      .loginBrand {
        position: relative;
        z-index: 2;
        display: flex;
        align-items: center;
        gap: 12px;
        min-width: 0;
      }
      .brandMark {
        width: 42px;
        height: 42px;
        display: grid;
        place-items: center;
        overflow: hidden;
        border: 1px solid rgba(255, 203, 72, 0.72);
        border-radius: 14px;
        color: #62320d;
        background: linear-gradient(135deg, #fff5c4, #ffffff);
        font-weight: 900;
        box-shadow: var(--duck-shadow);
      }
      .brandMark img {
        width: 120%;
        height: 120%;
        object-fit: cover;
        object-position: 50% 28%;
        transform: translateY(5%);
      }
      .loginBrand strong {
        display: block;
        font-size: 15px;
      }
      .loginBrand span {
        display: block;
        color: var(--muted);
        font-size: 12px;
        margin-top: 2px;
        white-space: nowrap;
      }
      .loginNavActions {
        position: relative;
        z-index: 2;
        display: flex;
        align-items: center;
        gap: 10px;
      }
      .duckPeek {
        position: absolute;
        z-index: 1;
        top: 68px;
        left: -10px;
        width: clamp(150px, 18vw, 230px);
        height: auto;
        pointer-events: none;
        filter: drop-shadow(0 20px 30px rgba(180, 111, 12, 0.18));
        transform: rotate(-3deg);
      }
      .loginOpenButton {
        min-height: 40px;
        padding: 9px 18px;
      }
      .loginSecondaryButton {
        min-height: 40px;
        padding: 9px 18px;
        color: #91400f;
        border-color: rgba(255, 200, 61, 0.42);
        background: #fff8df;
        box-shadow: none;
      }
      .loginHero {
        display: grid;
        grid-template-columns: minmax(430px, 1fr) minmax(360px, 0.78fr);
        gap: 38px;
        align-items: center;
        min-height: calc(100vh - 128px);
        padding-top: clamp(36px, 8vh, 96px);
      }
      .heroCopy {
        display: grid;
        gap: 16px;
        align-content: center;
      }
      .heroKicker {
        width: fit-content;
        padding: 7px 10px;
        border: 1px solid rgba(255, 200, 61, 0.26);
        border-radius: 8px;
        background: rgba(255,248,223,0.82);
        color: #92400e;
        font-size: 12px;
        font-weight: 900;
      }
      .heroCopy h1 {
        display: block;
        max-width: none;
        font-size: 48px;
        line-height: 1.04;
        letter-spacing: 0;
        white-space: nowrap;
      }
      .heroCopy h1::before { display: none; }
      .heroCopy p {
        max-width: 650px;
        color: var(--muted);
        font-size: 16px;
        line-height: 1.8;
      }
      .heroActions {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
      }
      .heroActions button {
        min-height: 44px;
        padding: 11px 16px;
      }
      .heroStats {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
        max-width: 660px;
      }
      .heroStat, .featureTile, .workflowStep {
        border: 1px solid rgba(220, 233, 246, 0.9);
        border-radius: 8px;
        background: rgba(255,255,255,0.82);
        box-shadow: var(--shadow-soft);
      }
      .heroStat {
        padding: 13px;
      }
      .heroStat strong {
        display: block;
        font-size: 19px;
        line-height: 1.2;
      }
      .heroStat span {
        display: block;
        margin-top: 5px;
        color: var(--muted);
        font-size: 12px;
        line-height: 1.45;
      }
      .landingBlocks {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        max-width: 660px;
      }
      .featureTile, .workflowStep {
        padding: 14px;
      }
      .featureTile h3, .workflowStep h3 {
        font-size: 13px;
        margin-bottom: 7px;
      }
      .featureTile p, .workflowStep p {
        color: var(--muted);
        font-size: 12px;
        line-height: 1.55;
      }
      .heroPreview {
        position: relative;
        justify-self: center;
        width: min(460px, 100%);
        min-height: 0;
        border: 0;
        border-radius: 8px;
        background: transparent;
      }
      .heroShowcaseImage {
        display: block;
        width: 100%;
        height: min(78vh, 760px);
        min-height: 560px;
        object-fit: contain;
        border-radius: 8px;
        filter: drop-shadow(0 28px 45px rgba(15, 23, 42, 0.13));
      }
      .loginScreen {
        padding: 22px;
        background:
          linear-gradient(180deg, rgba(255, 248, 226, 0.9) 0%, rgba(255, 255, 255, 0.92) 34%, #f7fbff 66%, #fffdf7 100%),
          radial-gradient(circle at 14% 5%, rgba(255, 200, 61, 0.24), transparent 28%),
          radial-gradient(circle at 86% 12%, rgba(47, 123, 255, 0.14), transparent 30%);
      }
      .loginLanding {
        width: min(1240px, 100%);
        gap: 0;
        min-width: 0;
      }
      .loginNav {
        position: sticky;
        top: 14px;
        z-index: 8;
        min-height: 62px;
        padding: 10px 12px 10px 14px;
        border: 1px solid rgba(255, 217, 128, 0.64);
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.82);
        backdrop-filter: blur(18px);
        box-shadow: 0 16px 38px rgba(164, 108, 20, 0.08);
      }
      .brandMark {
        border-radius: 12px;
      }
      .loginOpenButton,
      .heroPrimaryCta {
        min-height: 44px;
        padding: 11px 20px;
        border-radius: 999px;
        background: linear-gradient(135deg, #ffb000, #ff7a1a);
        box-shadow: 0 14px 28px rgba(245, 130, 24, 0.22);
      }
      .loginSecondaryButton {
        border-radius: 999px;
      }
      .loginHero {
        grid-template-columns: minmax(430px, 0.82fr) minmax(520px, 1.18fr);
        gap: 38px;
        min-height: auto;
        padding: clamp(58px, 8vh, 86px) 6px 44px;
      }
      .heroCopy {
        gap: 18px;
        min-width: 0;
      }
      .heroKicker {
        border-color: rgba(255, 177, 24, 0.24);
        border-radius: 999px;
        background: rgba(255, 246, 216, 0.92);
        color: #9a4b00;
      }
      .heroCopy h1 {
        max-width: 650px;
        font-size: clamp(42px, 4.5vw, 58px);
        line-height: 1.04;
        white-space: normal;
        overflow-wrap: anywhere;
      }
      .heroCopy h1 strong,
      .heroCopy h1 em {
        color: var(--beak);
        font-style: normal;
      }
      .heroLine {
        display: block;
      }
      .heroCopy p {
        max-width: 620px;
        font-size: 16px;
        color: #526173;
      }
      .heroActions {
        gap: 12px;
        margin-top: 2px;
      }
      .heroActions button {
        min-height: 48px;
        padding: 12px 20px;
      }
      .heroPills {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        max-width: 620px;
      }
      .heroPills span {
        display: inline-flex;
        align-items: center;
        min-height: 34px;
        padding: 8px 12px;
        border: 1px solid rgba(219, 234, 254, 0.95);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.86);
        color: #38506d;
        font-size: 12px;
        font-weight: 900;
        box-shadow: 0 8px 18px rgba(79, 103, 135, 0.06);
      }
      .heroPreview {
        width: 100%;
        align-self: center;
        min-width: 0;
      }
      .heroShowcaseImage {
        width: 100%;
        height: auto;
        min-height: 0;
        aspect-ratio: 16 / 9;
        object-fit: cover;
        object-position: center;
        border: 1px solid rgba(255, 217, 128, 0.62);
        border-radius: 22px;
        box-shadow: 0 28px 70px rgba(112, 79, 26, 0.14);
        filter: none;
      }
      .landingSection {
        margin-top: 26px;
        padding: clamp(28px, 4vw, 46px);
        border: 1px solid rgba(222, 234, 247, 0.88);
        border-radius: 24px;
        background: rgba(255, 255, 255, 0.78);
        box-shadow: 0 22px 58px rgba(79, 103, 135, 0.07);
      }
      .sectionIntro {
        display: grid;
        justify-items: center;
        gap: 9px;
        max-width: 760px;
        margin: 0 auto 24px;
        text-align: center;
      }
      .sectionIntro.compact {
        margin-bottom: 20px;
      }
      .sectionIntro span {
        color: #e87809;
        font-size: 12px;
        font-weight: 900;
      }
      .sectionIntro h2,
      .landingCtaPanel h2 {
        font-size: clamp(24px, 3vw, 36px);
        line-height: 1.18;
      }
      .compareSection {
        position: relative;
        overflow: hidden;
        background:
          linear-gradient(135deg, rgba(255, 251, 239, 0.96), rgba(255, 255, 255, 0.9) 48%, rgba(255, 244, 205, 0.76));
      }
      .compareSection::after {
        content: "";
        position: absolute;
        right: clamp(20px, 5vw, 64px);
        top: 22px;
        width: 92px;
        height: 92px;
        border: 2px dashed rgba(255, 176, 0, 0.28);
        border-radius: 999px;
        pointer-events: none;
      }
      .compareBoard {
        position: relative;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.06fr);
        gap: 18px;
        align-items: center;
        min-width: 0;
      }
      .comparePanel {
        position: relative;
        min-width: 0;
        min-height: 292px;
        padding: clamp(20px, 3vw, 30px);
        border: 1px solid rgba(220, 233, 246, 0.94);
        border-radius: 22px;
        background: rgba(255, 255, 255, 0.86);
        box-shadow: 0 18px 44px rgba(79, 103, 135, 0.07);
      }
      .compareMuted {
        color: #6b7280;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(247, 249, 252, 0.86));
      }
      .compareDuck {
        border-color: rgba(255, 188, 46, 0.72);
        background:
          linear-gradient(180deg, #fff8df, #ffffff 58%),
          radial-gradient(circle at 88% 0%, rgba(255, 176, 0, 0.18), transparent 32%);
        box-shadow: 0 22px 56px rgba(245, 164, 0, 0.13);
      }
      .compareHeader {
        display: grid;
        gap: 8px;
        margin-bottom: 18px;
      }
      .compareHeader span {
        color: #e87809;
        font-size: 13px;
        font-weight: 900;
      }
      .compareMuted .compareHeader span {
        color: #8a96a8;
      }
      .compareHeader strong {
        font-size: clamp(22px, 2.6vw, 32px);
        line-height: 1.15;
        color: #162033;
      }
      .compareList {
        display: grid;
        gap: 12px;
        list-style: none;
        margin: 0;
        padding: 0;
      }
      .compareList li {
        display: grid;
        grid-template-columns: 28px minmax(0, 1fr);
        align-items: start;
        gap: 10px;
        min-width: 0;
        min-height: 36px;
        color: #4b5c73;
        font-size: 14px;
        line-height: 1.55;
      }
      .compareList span {
        min-width: 0;
        overflow-wrap: anywhere;
      }
      .compareList b {
        width: 28px;
        height: 28px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        color: #ffffff;
        background: #aab4c2;
        font-size: 15px;
        font-weight: 900;
      }
      .compareDuck .compareList b {
        color: #7a3c00;
        background: linear-gradient(180deg, var(--duck), #ff9f1a);
      }
      .compareVs {
        width: 62px;
        height: 62px;
        display: grid;
        place-items: center;
        border: 6px solid #fff6d4;
        border-radius: 50%;
        color: #7a3c00;
        background: linear-gradient(135deg, var(--duck), #ff8a1f);
        font-weight: 900;
        box-shadow: 0 18px 30px rgba(245, 164, 0, 0.18);
      }
      .compareCrown {
        position: absolute;
        right: 18px;
        top: 16px;
        width: 40px;
        height: 34px;
        display: grid;
        place-items: center;
        border-radius: 12px 12px 8px 8px;
        color: #814100;
        background: linear-gradient(180deg, #ffe071, #ffad1f);
        font-size: 12px;
        font-weight: 900;
        transform: rotate(8deg);
        box-shadow: 0 10px 20px rgba(245, 164, 0, 0.2);
      }
      .useCaseGrid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
      }
      .useCaseCard {
        display: grid;
        gap: 14px;
        padding: 12px 12px 18px;
        border: 1px solid rgba(220, 233, 246, 0.98);
        border-radius: 20px;
        background: linear-gradient(180deg, #ffffff, #fbfdff);
        box-shadow: 0 14px 34px rgba(79, 103, 135, 0.075);
      }
      .useCaseCard.pet { background: linear-gradient(180deg, #ffffff, #fbfff6); }
      .useCaseCard.ip { background: linear-gradient(180deg, #ffffff, #fbfaff); }
      .useCaseCard img {
        width: 100%;
        aspect-ratio: 1;
        object-fit: cover;
        border-radius: 14px;
        border: 1px solid rgba(255, 219, 145, 0.64);
      }
      .useCaseCard div {
        padding: 0 4px;
      }
      .useCaseCard h3 {
        font-size: 18px;
        margin-bottom: 7px;
      }
      .useCaseCard p {
        color: var(--muted);
        font-size: 13px;
        line-height: 1.68;
      }
      .workflowShowcase {
        overflow: hidden;
        background:
          linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(246, 251, 255, 0.9)),
          repeating-linear-gradient(90deg, rgba(47, 123, 255, 0.08) 0 1px, transparent 1px 72px);
      }
      .sectionIntro p {
        max-width: 720px;
        color: var(--muted);
        font-size: 14px;
        line-height: 1.7;
      }
      .workflowRail {
        display: grid;
        grid-template-columns: repeat(7, minmax(0, 1fr));
        gap: 10px;
      }
      .workflowNode {
        position: relative;
        display: grid;
        align-content: start;
        gap: 8px;
        min-height: 166px;
        padding: 16px 14px;
        border: 1px solid rgba(220, 233, 246, 0.95);
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.88);
        box-shadow: 0 14px 34px rgba(79, 103, 135, 0.06);
      }
      .workflowNode::after {
        content: "";
        position: absolute;
        right: -9px;
        top: 50%;
        width: 16px;
        height: 2px;
        background: rgba(255, 138, 31, 0.58);
      }
      .workflowNode:last-child::after {
        display: none;
      }
      .workflowNode b {
        width: 34px;
        height: 34px;
        display: grid;
        place-items: center;
        border-radius: 12px;
        color: #7a3c00;
        background: linear-gradient(135deg, var(--duck), #ff9d2d);
        box-shadow: var(--duck-shadow);
      }
      .workflowNode strong {
        font-size: 15px;
        line-height: 1.32;
      }
      .workflowNode span {
        color: var(--muted);
        font-size: 12px;
        line-height: 1.55;
      }
      .loginFeatureDeck {
        background:
          linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(248, 252, 255, 0.88)),
          radial-gradient(circle at 12% 16%, rgba(18, 163, 127, 0.12), transparent 24%);
      }
      .featureDeckGrid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
      }
      .featureShowcaseCard {
        display: grid;
        grid-template-columns: minmax(220px, 0.98fr) minmax(0, 1fr);
        gap: 16px;
        align-items: center;
        min-width: 0;
        padding: 14px;
        border: 1px solid rgba(220, 233, 246, 0.96);
        border-radius: 22px;
        background: rgba(255, 255, 255, 0.9);
        box-shadow: 0 18px 44px rgba(79, 103, 135, 0.075);
      }
      .featureShowcaseCard.wide {
        grid-column: 1 / -1;
        grid-template-columns: minmax(320px, 0.62fr) minmax(0, 1fr);
      }
      .featureShowcaseCard img {
        width: 100%;
        aspect-ratio: 16 / 10;
        object-fit: cover;
        border: 1px solid rgba(255, 217, 128, 0.62);
        border-radius: 16px;
        background: #fffdf7;
      }
      .featureShowcaseCard div {
        display: grid;
        gap: 8px;
        min-width: 0;
      }
      .featureShowcaseCard h3 {
        font-size: 18px;
        line-height: 1.32;
      }
      .featureShowcaseCard p {
        color: var(--muted);
        font-size: 13px;
        line-height: 1.68;
      }
      .audienceSection {
        background:
          linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(255, 252, 242, 0.88)),
          repeating-linear-gradient(90deg, rgba(255, 207, 84, 0.18) 0 10px, transparent 10px 24px);
      }
      .audienceGrid {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 12px;
      }
      .audienceCard {
        display: grid;
        justify-items: center;
        align-content: start;
        gap: 10px;
        min-width: 0;
        min-height: 224px;
        padding: 18px 14px;
        border: 1px solid rgba(255, 218, 139, 0.78);
        border-radius: 18px;
        background: linear-gradient(180deg, #ffffff, #fffdf7);
        box-shadow: 0 14px 32px rgba(146, 92, 12, 0.07);
        text-align: center;
      }
      .audienceIcon {
        width: 64px;
        height: 64px;
        display: grid;
        place-items: center;
        border: 2px solid rgba(255, 255, 255, 0.9);
        border-radius: 20px 20px 22px 22px;
        color: #7a3c00;
        background:
          radial-gradient(circle at 36% 36%, #fff6bc 0 16%, transparent 17%),
          linear-gradient(180deg, var(--duck), #ffad1f);
        font-size: 17px;
        font-weight: 900;
        box-shadow: 0 14px 26px rgba(245, 164, 0, 0.18);
      }
      .audienceCard h3 {
        font-size: 16px;
        line-height: 1.28;
      }
      .audienceCard p {
        color: var(--muted);
        font-size: 12px;
        line-height: 1.62;
        overflow-wrap: anywhere;
      }
      .capabilityGrid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
      }
      .capabilityItem {
        display: grid;
        grid-template-columns: 42px minmax(0, 1fr);
        grid-template-areas:
          "icon title"
          "icon copy";
        column-gap: 12px;
        row-gap: 4px;
        min-height: 118px;
        padding: 18px;
        border: 1px solid rgba(220, 233, 246, 0.96);
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.82);
      }
      .capabilityItem b {
        grid-area: icon;
        width: 42px;
        height: 42px;
        display: grid;
        place-items: center;
        border-radius: 14px;
        color: #ffffff;
        background: linear-gradient(135deg, var(--blue), var(--beak));
        font-size: 13px;
        box-shadow: 0 12px 24px rgba(47, 123, 255, 0.16);
      }
      .capabilityItem strong {
        grid-area: title;
        font-size: 16px;
        line-height: 1.35;
      }
      .capabilityItem p {
        grid-area: copy;
        color: var(--muted);
        font-size: 12px;
        line-height: 1.55;
      }
      .resultSection {
        margin-bottom: 24px;
        background:
          linear-gradient(135deg, rgba(255, 244, 207, 0.8), rgba(255, 255, 255, 0.9) 42%, rgba(234, 245, 255, 0.82));
      }
      .resultFlow {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
        gap: 12px;
        align-items: stretch;
      }
      .flowStep {
        display: grid;
        align-content: start;
        gap: 8px;
        min-height: 132px;
        padding: 18px;
        border: 1px solid rgba(220, 233, 246, 0.92);
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.86);
      }
      .flowStep b {
        width: 34px;
        height: 34px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        color: #ffffff;
        background: linear-gradient(135deg, #ffb000, #ff7a1a);
        font-size: 16px;
      }
      .flowStep strong {
        font-size: 17px;
      }
      .flowStep span {
        color: var(--muted);
        font-size: 12px;
        line-height: 1.55;
      }
      .flowArrow {
        display: grid;
        place-items: center;
        color: #f59e0b;
        font-size: 28px;
        font-weight: 900;
      }
      .landingCtaPanel {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 18px;
        margin-top: 18px;
        padding: 22px;
        border-radius: 20px;
        color: #ffffff;
        background:
          linear-gradient(135deg, rgba(18, 56, 118, 0.96), rgba(21, 94, 180, 0.94)),
          radial-gradient(circle at 88% 20%, rgba(255, 200, 61, 0.34), transparent 28%);
        box-shadow: 0 22px 54px rgba(23, 94, 232, 0.16);
      }
      .landingCtaPanel p {
        margin-top: 8px;
        color: rgba(255, 255, 255, 0.78);
      }
      .landingCtaPanel button {
        white-space: nowrap;
      }
      .loginDialog[hidden] { display: none; }
      .loginDialog {
        position: fixed;
        inset: 0;
        z-index: 80;
        display: grid;
        place-items: start end;
        padding: 82px 28px 28px;
      }
      .loginBackdrop {
        position: absolute;
        inset: 0;
        background: rgba(15, 23, 42, 0.32);
        backdrop-filter: blur(6px);
      }
      .loginCard {
        position: relative;
        z-index: 1;
        width: min(420px, 100%);
        border: 1px solid var(--line);
        border-radius: 8px;
        padding: 22px;
        background: #fff;
        box-shadow: 0 22px 70px rgba(15, 23, 42, 0.22);
      }
      .loginCard h2 { font-size: 20px; margin-bottom: 6px; }
      .dialogClose {
        position: absolute;
        top: 12px;
        right: 12px;
        width: 32px;
        height: 32px;
        min-height: 32px;
        padding: 0;
        border-radius: 8px;
      }
      .authModeSwitch {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin: 14px 0 4px;
        padding: 5px;
        border: 1px solid var(--line);
        border-radius: 10px;
        background: var(--blue-soft);
      }
      .authModeSwitch button {
        min-height: 34px;
        color: #43536a;
        background: transparent;
        box-shadow: none;
      }
      .authModeSwitch button.active {
        color: var(--blue-deep);
        background: #ffffff;
        box-shadow: 0 8px 20px rgba(47, 123, 255, 0.12);
      }
      .registerFields[hidden] { display: none; }
      .termsConsent {
        display: grid;
        grid-template-columns: 18px minmax(0, 1fr);
        align-items: start;
        gap: 9px;
        margin-top: 12px;
        padding: 11px 12px;
        border: 1px solid #dbeafe;
        border-radius: 8px;
        background: #f8fbff;
        color: #475569;
        font-size: 12px;
        font-weight: 700;
        line-height: 1.6;
      }
      .termsConsent input {
        width: 16px;
        height: 16px;
        margin: 3px 0 0;
        padding: 0;
      }
      .termsConsent label {
        display: inline;
        margin: 0;
        color: inherit;
        font: inherit;
        font-weight: inherit;
      }
      .termsLink {
        border: 0;
        padding: 0;
        min-height: 0;
        color: var(--blue-deep);
        background: transparent;
        box-shadow: none;
        font-size: inherit;
        font-weight: 900;
        line-height: inherit;
      }
      .authHintLine {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        margin-top: 12px;
        color: var(--muted);
        font-size: 12px;
      }
      .authTextButton {
        border: 0;
        min-height: 0;
        padding: 0;
        color: var(--blue-deep);
        background: transparent;
        box-shadow: none;
        font-size: 12px;
        font-weight: 900;
      }
      .legalDialog[hidden] { display: none; }
      .legalDialog {
        position: fixed;
        inset: 0;
        z-index: 100;
        display: grid;
        place-items: center;
        padding: 22px;
      }
      .legalPanel {
        position: relative;
        z-index: 1;
        width: min(760px, 100%);
        max-height: min(78vh, 760px);
        display: grid;
        grid-template-rows: auto minmax(0, 1fr) auto;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: #ffffff;
        box-shadow: 0 24px 80px rgba(15, 23, 42, 0.24);
      }
      .legalHead,
      .legalFoot {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 14px 16px;
        border-bottom: 1px solid var(--line);
      }
      .legalFoot {
        justify-content: flex-end;
        border-top: 1px solid var(--line);
        border-bottom: 0;
      }
      .legalBody {
        overflow: auto;
        padding: 16px;
        color: #475569;
        font-size: 13px;
        line-height: 1.75;
      }
      .legalBody h3 {
        margin: 14px 0 6px;
        color: #0f172a;
        font-size: 15px;
      }
      .legalBody p,
      .legalBody li {
        margin: 0 0 8px;
      }
      .authRules {
        display: grid;
        gap: 4px;
        margin-top: 8px;
        color: #64748b;
        font-size: 12px;
        line-height: 1.5;
      }
      .userBar {
        display: flex;
        align-items: center;
        gap: 10px;
        justify-content: flex-end;
      }
      .accountMenuWrap {
        position: relative;
        display: inline-flex;
      }
      .accountMenuButton {
        min-height: 34px;
        cursor: pointer;
      }
      .accountMenu {
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        z-index: 30;
        min-width: 148px;
        padding: 6px;
        border: 1px solid #dfeaf6;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.98);
        box-shadow: 0 16px 36px rgba(42, 63, 95, 0.14);
        opacity: 0;
        transform: translateY(-4px);
        pointer-events: none;
        transition: opacity 0.16s ease, transform 0.16s ease;
      }
      .accountMenuWrap:hover .accountMenu,
      .accountMenuWrap:focus-within .accountMenu,
      .accountMenuWrap.open .accountMenu {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
      }
      .accountMenu button {
        width: 100%;
        min-height: 34px;
        justify-content: flex-start;
        border: 0;
        border-radius: 6px;
        background: transparent;
        box-shadow: none;
        color: #344054;
        font-weight: 850;
      }
      .accountMenu button:hover {
        background: var(--blue-soft);
        color: var(--blue-deep);
      }
      .dataHero {
        border-bottom: 1px solid rgba(223, 234, 246, 0.9);
      }
      .dataMetricGrid,
      .analyticsGrid,
      .analyticsTables {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 12px;
      }
      .analyticsGrid,
      .analyticsTables {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .dataMetricCard,
      .analyticsPanel {
        border: 1px solid var(--line);
        border-radius: 8px;
        background: #ffffff;
        box-shadow: var(--shadow-soft);
      }
      .dataMetricCard {
        display: grid;
        gap: 7px;
        padding: 14px;
        background:
          linear-gradient(135deg, rgba(47, 123, 255, 0.08), transparent 58%),
          #ffffff;
      }
      .dataMetricCard span,
      .dataMetricCard small {
        color: var(--muted);
        font-size: 12px;
        font-weight: 800;
      }
      .dataMetricCard strong {
        color: var(--ink);
        font-size: 26px;
        line-height: 1.05;
      }
      .dataMetricCard.risk {
        border-color: rgba(217, 75, 122, 0.32);
        background: linear-gradient(180deg, #fff1f7, #ffffff);
      }
      .analyticsPanel {
        min-width: 0;
        padding: 14px;
        overflow: hidden;
      }
      .analyticsPanel h3 {
        margin-bottom: 12px;
        color: var(--ink);
        font-size: 15px;
      }
      .chartList {
        display: grid;
        gap: 10px;
      }
      .chartRow {
        display: grid;
        grid-template-columns: minmax(72px, 0.8fr) minmax(90px, 2fr) minmax(48px, auto);
        align-items: center;
        gap: 9px;
        color: #516176;
        font-size: 12px;
        font-weight: 800;
      }
      .chartTrack {
        height: 10px;
        overflow: hidden;
        border-radius: 999px;
        background: #eef4fb;
      }
      .chartBar {
        display: block;
        height: 100%;
        border-radius: inherit;
        background: linear-gradient(90deg, #2f7bff, #23b89a);
      }
      .analyticsTable {
        width: 100%;
        border-collapse: collapse;
        font-size: 12px;
      }
      .analyticsTable th,
      .analyticsTable td {
        padding: 9px 8px;
        border-bottom: 1px solid #edf2f7;
        text-align: left;
        vertical-align: top;
      }
      .analyticsTable th {
        color: #64748b;
        font-weight: 900;
        background: #f8fbff;
      }
      .analyticsTable td {
        color: #344054;
        font-weight: 760;
      }
      .workspaceClearButton {
        min-height: 32px;
        padding: 7px 10px;
        border-color: #fecaca;
        background: #fff7f7;
        color: #b91c1c;
        box-shadow: none;
        white-space: nowrap;
      }

      .merchWorkbench {
        display: grid;
        grid-template-columns: minmax(270px, 0.62fr) minmax(min(100%, 600px), 1.58fr) minmax(300px, 0.8fr);
        gap: 16px;
        align-items: start;
      }
      .merchControlPanel,
      .merchResultPanel {
        position: sticky;
        top: 94px;
      }
      .merchForm,
      .merchResultBody,
      .merchAiPanel,
      .merchCheckList,
      .merchPipeline {
        display: grid;
        gap: 12px;
      }
      .merchBasketTabs {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
      }
      .merchBasketTabs button {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        min-height: 36px;
        padding: 8px 10px;
        border-color: rgba(220, 233, 246, 0.94);
        background: #ffffff;
        color: #344054;
        box-shadow: var(--shadow-soft);
      }
      .merchBasketTabs button b {
        min-width: 24px;
        padding: 3px 7px;
        border-radius: 999px;
        background: #e8fff3;
        color: var(--green);
        text-align: center;
        font-size: 12px;
      }
      .merchBasketTabs button.active {
        color: var(--blue-deep);
        background: linear-gradient(180deg, #ffffff, #f8fbff);
        border-color: rgba(47, 123, 255, 0.28);
        box-shadow: 0 0 0 3px rgba(47, 123, 255, 0.08);
      }
      .merchHiddenSelect {
        display: none;
      }
      .merchSourceList {
        display: grid;
        gap: 10px;
        max-height: 520px;
        overflow: auto;
      }
      .merchAssetCard {
        display: grid;
        grid-template-columns: 72px minmax(0, 1fr);
        gap: 10px;
        padding: 9px;
        border: 1px solid rgba(220, 233, 246, 0.94);
        border-radius: 8px;
        background: #ffffff;
        box-shadow: var(--shadow-soft);
      }
      .merchAssetCard.active {
        border-color: rgba(47, 123, 255, 0.44);
        box-shadow: 0 0 0 3px rgba(47, 123, 255, 0.08);
      }
      .merchAssetPreview {
        overflow: hidden;
        width: 72px;
        height: 72px;
        padding: 0;
        border-radius: 8px;
        background: #f8fbff;
      }
      .merchAssetPreview img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
      .merchAssetMeta {
        display: grid;
        gap: 5px;
        min-width: 0;
      }
      .merchAssetMeta strong {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 13px;
      }
      .merchAssetActions {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
      }
      .merchQualityPill {
        justify-self: start;
        padding: 4px 7px;
        border-radius: 999px;
        background: #effaf8;
        color: var(--green);
        font-size: 12px;
        font-style: normal;
        font-weight: 900;
      }
      .merchSelectedQuality,
      .merchProductNotice,
      .merchTip,
      .merchEmptyBasket {
        padding: 10px;
        border: 1px solid rgba(220, 233, 246, 0.94);
        border-radius: 8px;
        background: #f8fbff;
        color: var(--muted);
        font-size: 12px;
        line-height: 1.5;
      }
      .merchPreviewPanel {
        min-height: 100%;
      }
      .merchPreviewBoard {
        display: grid;
        grid-template-columns: 1fr;
        gap: 14px;
        align-items: stretch;
      }
      .merchSourcePreview,
      .merchPhysicalMockup,
      .merchAiPreviewResult {
        min-height: 280px;
        display: grid;
        place-items: center;
        overflow: hidden;
        border: 1px solid rgba(220, 233, 246, 0.94);
        border-radius: 8px;
        background:
          linear-gradient(135deg, rgba(255, 245, 207, 0.72), rgba(234, 245, 255, 0.84)),
          #ffffff;
      }
      .merchSourcePreview img,
      .merchPhysicalMockup img,
      .merchAiPreviewResult img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
      }
      .merchPreviewImageButton {
        width: 100%;
        height: 100%;
        min-height: 0;
        display: grid;
        place-items: center;
        padding: 0;
        border: 0;
        border-radius: 8px;
        background: transparent;
        box-shadow: none;
        color: inherit;
        cursor: zoom-in;
        overflow: visible;
      }
      .merchPreviewImageButton:hover:not(:disabled),
      .merchPreviewImageButton:active:not(:disabled) {
        transform: none;
        filter: none;
        box-shadow: none;
      }
      .merchConceptCard {
        position: relative;
        overflow: hidden;
        display: grid;
        gap: 12px;
        align-content: start;
        padding: 16px;
        border: 1px solid rgba(245, 179, 38, 0.28);
        border-radius: 8px;
        background:
          linear-gradient(135deg, rgba(255, 250, 238, 0.94), rgba(248, 252, 255, 0.98) 58%, #ffffff);
        box-shadow: 0 16px 34px rgba(16, 24, 40, 0.055);
      }
      .merchConceptCard::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 4px;
        height: 100%;
        background: linear-gradient(180deg, #ffc426, #17b26a);
      }
      .merchConceptCard > span:first-child {
        width: max-content;
        padding: 5px 9px;
        border: 1px solid rgba(245, 179, 38, 0.26);
        border-radius: 999px;
        background: #fff7df;
        color: #8a4f00;
        font-size: 12px;
        font-weight: 950;
      }
      .merchConceptCard h3 {
        margin: 0;
        color: #182230;
        font-size: 18px;
        font-weight: 950;
        line-height: 1.18;
      }
      .merchConceptCard p {
        margin: 0;
        color: #526071;
        font-size: 13px;
        font-weight: 720;
        line-height: 1.55;
      }
      .merchKitBoard {
        width: 100%;
        display: grid;
        gap: 12px;
      }
      .merchKitHeader {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding-bottom: 10px;
        border-bottom: 1px solid rgba(220, 233, 246, 0.94);
      }
      .merchKitHeader span {
        width: max-content;
        padding: 5px 9px;
        border-radius: 999px;
        background: #fff2c6;
        color: #8a4f00;
        font-size: 12px;
        font-weight: 950;
      }
      .merchKitHeader strong {
        min-width: 0;
        overflow: hidden;
        text-align: right;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: #182230;
        font-size: 15px;
        font-weight: 950;
      }
      .merchKitStudio {
        display: grid;
        grid-template-columns: minmax(116px, 0.5fr) minmax(260px, 1.24fr) minmax(132px, 0.58fr);
        gap: 16px;
        align-items: stretch;
        padding: 14px;
        border: 1px solid rgba(220, 233, 246, 0.94);
        border-radius: 8px;
        background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(248, 251, 255, 0.96));
      }
      .merchMockupStack {
        min-height: 0;
        min-width: 0;
        display: grid;
        grid-template-rows: repeat(2, minmax(0, 1fr));
        gap: 12px;
      }
      .merchMainSubject,
      .merchHeroProduct {
        min-height: 0;
        display: grid;
        place-items: center;
      }
      .merchHeroProduct {
        position: relative;
        min-height: 360px;
        border: 1px solid rgba(220, 233, 246, 0.98);
        border-radius: 8px;
        background:
          linear-gradient(45deg, #f4f7fb 25%, transparent 25% 75%, #f4f7fb 75%),
          linear-gradient(45deg, #f4f7fb 25%, transparent 25% 75%, #f4f7fb 75%),
          linear-gradient(180deg, #ffffff, #f7fbff);
        background-size: 24px 24px, 24px 24px, auto;
        background-position: 0 0, 12px 12px, 0 0;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 18px 42px rgba(15, 23, 42, 0.08);
      }
      .merchHeroProduct::after {
        content: "";
        position: absolute;
        left: 18%;
        right: 18%;
        bottom: 44px;
        height: 18px;
        border-radius: 999px;
        background: rgba(15, 23, 42, 0.12);
        filter: blur(12px);
        pointer-events: none;
      }
      .merchHeroProduct .merchPreviewImageButton img {
        max-width: 88%;
        max-height: 84%;
        object-fit: contain;
        filter:
          drop-shadow(0 4px 0 rgba(255,255,255,0.96))
          drop-shadow(0 18px 22px rgba(15, 23, 42, 0.2));
      }
      .merchPhysicalMockup {
        position: relative;
        min-height: 0;
        padding: 10px;
        display: grid;
        grid-template-rows: minmax(0, 1fr) auto auto auto;
        gap: 5px;
        transform-style: preserve-3d;
        background: linear-gradient(180deg, #ffffff, #f8fbff);
        box-shadow:
          0 14px 26px rgba(15, 23, 42, 0.08),
          inset 0 1px 0 rgba(255,255,255,0.95);
      }
      .merchPhysicalMockup.selected {
        border-color: rgba(23, 178, 106, 0.42);
        box-shadow:
          0 16px 30px rgba(23, 178, 106, 0.11),
          inset 0 1px 0 rgba(255,255,255,0.95);
      }
      .merchPhysicalMockup.muted {
        opacity: 0.62;
      }
      .merchPhysicalMockup.unavailable {
        opacity: 0.54;
        filter: grayscale(0.25);
      }
      .merchMockupVisual {
        min-height: 0;
        display: grid;
        place-items: center;
        overflow: hidden;
      }
      .merchMockupCard strong,
      .merchMockupCard span {
        display: block;
        min-width: 0;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .merchMockupCard strong {
        color: #182230;
        font-size: 13px;
        font-weight: 950;
      }
      .merchMockupCard span {
        color: #667085;
        font-size: 11px;
      }
      .merchMockupCta {
        width: max-content;
        justify-self: center;
        margin-top: 2px;
        padding: 3px 7px;
        border-radius: 999px;
        background: rgba(255, 242, 198, 0.9);
        color: #8a4f00;
        font-size: 10px;
        font-style: normal;
        font-weight: 950;
        line-height: 1.2;
      }
      .merchPhysicalMockup.unavailable .merchMockupCta {
        display: none;
      }
      .merchBadgeShape,
      .merchKeychainShape,
      .merchMagnetShape {
        position: relative;
        display: grid;
        place-items: center;
        width: min(112px, 82%);
        aspect-ratio: 1;
      }
      .merchBadgeShape {
        border-radius: 999px;
        border: 1px solid rgba(208, 213, 221, 0.86);
        background:
          radial-gradient(circle at 33% 22%, rgba(255,255,255,0.95), rgba(255,255,255,0) 30%),
          radial-gradient(circle at 50% 55%, #ffffff, #f2f4f7 72%);
        box-shadow:
          inset -8px -10px 18px rgba(15, 23, 42, 0.08),
          inset 5px 6px 12px rgba(255,255,255,0.95),
          0 14px 24px rgba(15, 23, 42, 0.16);
      }
      .merchKeychainRing {
        width: 44px;
        height: 44px;
        margin-bottom: -16px;
        border: 6px solid #c7cdd7;
        border-radius: 999px;
        box-shadow: inset 0 2px 4px rgba(15,23,42,0.16), 0 7px 12px rgba(15,23,42,0.14);
      }
      .merchKeychainShape {
        width: min(94px, 76%);
        border: 3px solid rgba(226, 232, 240, 0.95);
        border-radius: 22px;
        background:
          linear-gradient(140deg, rgba(255,255,255,0.88), rgba(255,255,255,0.48) 35%, rgba(221, 232, 246, 0.7)),
          #ffffff;
        box-shadow: 0 16px 25px rgba(15, 23, 42, 0.18);
      }
      .merchMagnetShape {
        border: 1px solid rgba(191, 233, 210, 0.95);
        border-radius: 24px;
        background: linear-gradient(145deg, #ffffff, #eefaf3);
        box-shadow:
          inset -6px -8px 14px rgba(15, 23, 42, 0.06),
          0 15px 24px rgba(15, 23, 42, 0.14);
      }
      .merchBadgeShape img,
      .merchKeychainShape img,
      .merchMagnetShape img {
        width: 78%;
        height: 78%;
        object-fit: contain;
        filter: drop-shadow(0 8px 10px rgba(15, 23, 42, 0.16));
      }
      .merchStickerSheet {
        width: min(126px, 90%);
        aspect-ratio: 1.28;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, minmax(0, 1fr));
        gap: 4px;
        padding: 8px;
        border: 1px solid rgba(208, 213, 221, 0.95);
        border-radius: 7px;
        background: #fffdf8;
        transform: perspective(360px) rotateX(4deg) rotateZ(-1deg);
        box-shadow:
          0 2px 0 #eef2f6,
          0 4px 0 #dfe7ef,
          0 16px 24px rgba(15, 23, 42, 0.14);
      }
      .merchStickerSheet img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        background: #ffffff;
      }
      .merchStickerSheet.matrixSheet {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
      }
      .merchKitHint {
        margin: 0;
        padding: 10px 12px;
        border: 1px solid rgba(255, 196, 38, 0.22);
        border-radius: 8px;
        background: linear-gradient(135deg, rgba(255, 248, 230, 0.86), rgba(248, 251, 255, 0.96));
        color: #5a4a32;
        font-size: 12px;
        font-weight: 760;
        line-height: 1.55;
      }
      .merchSpecList {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
      }
      .merchSpecList > div {
        position: relative;
        min-width: 0;
        display: grid;
        grid-template-columns: 34px minmax(0, 1fr);
        align-items: center;
        gap: 9px;
        padding: 10px;
        border: 1px solid rgba(220, 233, 246, 0.94);
        border-radius: 8px;
        background:
          linear-gradient(145deg, #ffffff, #f6fbff);
        box-shadow: 0 10px 20px rgba(16, 24, 40, 0.045);
      }
      .merchSpecList > div::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: linear-gradient(135deg, rgba(255, 196, 38, 0.12), rgba(23, 178, 106, 0.08));
        opacity: 0;
        pointer-events: none;
      }
      .merchSpecList b {
        width: 34px;
        height: 34px;
        display: grid;
        place-items: center;
        border-radius: 8px;
        background: #fff2c6;
        color: #9a5a00;
        font-size: 14px;
        font-weight: 950;
      }
      .merchSpecList > div > span {
        min-width: 0;
        display: grid;
        gap: 2px;
        padding: 0;
        border: 0;
        background: transparent;
      }
      .merchSpecList strong {
        min-width: 0;
        overflow: hidden;
        color: #182230;
        font-size: 13px;
        font-weight: 950;
        line-height: 1.25;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .merchSpecList > div > span > span {
        color: #667085;
        font-size: 11px;
        line-height: 1.35;
      }
      .merchPipeline span {
        padding: 8px 10px;
        border: 1px solid rgba(220, 233, 246, 0.94);
        border-radius: 8px;
        background: #f8fbff;
        color: #43536a;
        font-size: 12px;
        font-weight: 850;
      }
      .merchSkuGrid,
      .merchAiActions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
      }
      .merchSkuGrid .merchSkuOption {
        position: relative;
        display: grid;
        grid-template-columns: 34px minmax(0, 1fr) 22px;
        align-items: center;
        column-gap: 10px;
        min-height: 62px;
        padding: 10px;
        border: 1px solid rgba(220, 233, 246, 0.94);
        border-radius: 8px;
        background:
          linear-gradient(145deg, #ffffff, #f8fbff);
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.95);
        cursor: pointer;
        transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease, background .16s ease;
      }
      .merchSkuGrid .merchSkuOption::before {
        content: attr(data-sku-icon);
        grid-column: 1;
        grid-row: 1;
        width: 34px;
        height: 34px;
        display: grid;
        place-items: center;
        border-radius: 8px;
        background: #fff2c6;
        color: #9a5a00;
        font-size: 14px;
        font-weight: 950;
      }
      .merchSkuGrid .merchSkuOption:hover {
        transform: translateY(-1px);
        border-color: rgba(47, 123, 255, 0.28);
        box-shadow: 0 12px 24px rgba(16, 24, 40, 0.08);
      }
      .merchSkuGrid .merchSkuOption:has(input:checked) {
        border-color: rgba(23, 178, 106, 0.48);
        background:
          linear-gradient(145deg, rgba(240, 253, 244, 0.96), #ffffff);
        box-shadow: 0 12px 26px rgba(23, 178, 106, 0.11);
      }
      .merchSkuGrid .merchSkuOption:has(input:disabled) {
        cursor: not-allowed;
        filter: grayscale(0.12);
      }
      .merchSkuGrid .merchSkuOption input {
        position: absolute;
        width: 1px;
        height: 1px;
        opacity: 0;
        pointer-events: none;
      }
      .merchSkuCopy {
        grid-column: 2;
        grid-row: 1;
        min-width: 0;
        display: grid;
        gap: 3px;
      }
      .merchSkuCopy strong {
        min-width: 0;
        overflow: hidden;
        color: #182230;
        font-size: 13px;
        font-weight: 950;
        line-height: 1.18;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .merchSkuCopy em {
        color: #667085;
        font-size: 11px;
        font-style: normal;
        font-weight: 780;
        line-height: 1.35;
        white-space: normal;
      }
      .merchSkuCheck {
        grid-column: 3;
        grid-row: 1;
        width: 18px;
        height: 18px;
        justify-self: end;
        display: grid;
        place-items: center;
        border: 1px solid rgba(208, 213, 221, 0.95);
        border-radius: 999px;
        background: #ffffff;
      }
      .merchSkuCheck::after {
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 999px;
        background: transparent;
      }
      .merchSkuOption:has(input:checked) .merchSkuCheck {
        border-color: #17b26a;
        background: #17b26a;
      }
      .merchSkuOption:has(input:checked) .merchSkuCheck::after {
        width: 7px;
        height: 4px;
        border-right: 2px solid #ffffff;
        border-bottom: 2px solid #ffffff;
        border-radius: 0;
        transform: translateY(-1px) rotate(45deg);
      }
      .merchProductUnavailable {
        opacity: 0.48;
      }
      .merchAiPanel {
        padding: 12px;
        border: 1px solid rgba(47, 123, 255, 0.18);
        border-radius: 8px;
        background: linear-gradient(180deg, #ffffff, #f8fbff);
      }
      .merchAiHead {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
      }
      .merchZipResult {
        display: grid;
        gap: 8px;
      }
      .merch3dDialog[hidden] {
        display: none;
      }
      .merch3dDialog {
        position: fixed;
        inset: 0;
        z-index: 80;
        display: grid;
        place-items: center;
        padding: 20px;
      }
      .merch3dBackdrop {
        position: absolute;
        inset: 0;
        background: rgba(15, 23, 42, 0.52);
        backdrop-filter: blur(8px);
      }
      .merch3dPanel {
        position: relative;
        z-index: 1;
        width: min(1180px, calc(100vw - 32px));
        max-height: calc(100vh - 32px);
        display: grid;
        grid-template-rows: auto auto minmax(0, 1fr);
        overflow: hidden;
        border-radius: 12px;
        background: #ffffff;
        box-shadow: 0 28px 80px rgba(15, 23, 42, 0.28);
      }
      .merch3dHead,
      .merch3dActions,
      .merch3dProductTabs {
        display: flex;
        align-items: center;
        gap: 10px;
      }
      .merch3dHead {
        justify-content: space-between;
        padding: 14px 16px;
        border-bottom: 1px solid var(--line);
      }
      .merch3dActions .dialogClose {
        position: static;
      }
      .merch3dProductTabs {
        flex-wrap: wrap;
        padding: 10px 16px;
        border-bottom: 1px solid var(--line);
      }
      .merch3dProductTabs button.active {
        color: var(--blue-deep);
        border-color: rgba(47, 123, 255, 0.28);
        background: #f8fbff;
      }
      .merch3dBody {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 300px;
        min-height: 560px;
        overflow: hidden;
      }
      .merch3dStage {
        position: relative;
        min-height: 560px;
        background: radial-gradient(circle at 50% 20%, #ffffff, #eaf5ff 74%);
      }
      .merch3dCanvas,
      .merch3dFallback {
        width: 100%;
        height: 100%;
        min-height: 560px;
        display: block;
      }
      .merch3dCanvas[hidden],
      .merch3dFallback[hidden] {
        display: none !important;
      }
      .merch3dFallback {
        position: relative;
        display: grid;
        place-items: center;
        overflow: hidden;
        perspective: 980px;
        background:
          radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.96), rgba(226, 241, 255, 0.72) 62%, rgba(207, 226, 244, 0.68)),
          linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(232, 243, 255, 0.8));
      }
      .merch3dFallback[hidden] {
        display: none;
      }
      .merch3dFallbackNotice {
        position: absolute;
        left: 16px;
        top: 16px;
        z-index: 3;
        padding: 7px 10px;
        border: 1px solid rgba(191, 211, 238, 0.9);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.86);
        color: var(--muted);
        font-size: 12px;
        font-weight: 850;
        box-shadow: 0 8px 24px rgba(58, 84, 132, 0.08);
      }
      .merch3dFallbackObject {
        position: relative;
        width: min(42vw, 360px);
        min-width: 220px;
        aspect-ratio: 1;
        transform-style: preserve-3d;
        transition: transform 0.08s linear;
        filter: drop-shadow(0 34px 34px rgba(37, 59, 94, 0.22));
      }
      .merch3dFallbackFace,
      .merch3dFallbackBack,
      .merch3dFallbackEdge {
        position: absolute;
        inset: 8%;
        border-radius: 26px;
        transform-style: preserve-3d;
      }
      .merch3dFallbackFace {
        z-index: 2;
        display: grid;
        place-items: center;
        overflow: hidden;
        border: 1px solid rgba(20, 43, 78, 0.16);
        background:
          linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(243, 248, 255, 0.88)),
          repeating-conic-gradient(#eef6ff 0% 25%, #ffffff 0% 50%) 50% / 24px 24px;
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.9),
          0 22px 38px rgba(65, 91, 132, 0.2);
        transform: translateZ(24px);
      }
      .merch3dFallbackFace img {
        max-width: 82%;
        max-height: 82%;
        object-fit: contain;
      }
      .merch3dFallbackText {
        display: grid;
        place-items: center;
        width: 78%;
        min-height: 120px;
        padding: 18px;
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.86);
        color: var(--muted);
        font-size: 14px;
        font-weight: 900;
        text-align: center;
      }
      .merch3dFallbackBack {
        background: linear-gradient(135deg, #cfe2f6, #f6fbff 52%, #b8cde7);
        box-shadow: inset -16px 0 28px rgba(41, 67, 108, 0.16);
        transform: translateZ(-20px);
      }
      .merch3dFallbackEdge {
        border: 16px solid rgba(132, 163, 201, 0.34);
        box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.62);
        transform: translateZ(2px) scale(1.04);
      }
      .merch3dFallback-badge .merch3dFallbackFace,
      .merch3dFallback-badge .merch3dFallbackBack,
      .merch3dFallback-badge .merch3dFallbackEdge {
        border-radius: 50%;
      }
      .merch3dFallback-sticker_sheet .merch3dFallbackFace,
      .merch3dFallback-sticker_sheet .merch3dFallbackBack,
      .merch3dFallback-sticker_sheet .merch3dFallbackEdge {
        aspect-ratio: 0.72 / 1;
        inset: 4% 16%;
        border-radius: 18px;
      }
      .merch3dFallback-keychain .merch3dFallbackRing {
        position: absolute;
        left: 50%;
        top: 0;
        z-index: 4;
        width: 56px;
        height: 56px;
        border: 10px solid #d4b46c;
        border-radius: 50%;
        transform: translate3d(-50%, -16px, 34px);
        box-shadow: inset 0 2px 6px rgba(255, 255, 255, 0.8), 0 10px 18px rgba(83, 62, 25, 0.18);
      }
      .merch3dFallback-fridge_magnet .merch3dFallbackFace,
      .merch3dFallback-fridge_magnet .merch3dFallbackBack,
      .merch3dFallback-fridge_magnet .merch3dFallbackEdge {
        border-radius: 34px;
      }
      .merch3dCssScene {
        position: absolute;
        inset: 46px 28px 30px;
        display: grid;
        grid-template-rows: minmax(300px, 1fr) auto;
        place-items: center;
        gap: 18px;
        pointer-events: none;
      }
      .merch3dCssScene .merch3dFallbackObject {
        pointer-events: auto;
      }
      .merch3dFallbackObject {
        width: clamp(238px, 34vw, 390px);
        min-width: 0;
        transform-style: preserve-3d;
        will-change: transform;
      }
      .merch3dFallbackShadow {
        position: absolute;
        left: 12%;
        right: 10%;
        bottom: 4%;
        height: 21%;
        border-radius: 999px;
        background: radial-gradient(ellipse at center, rgba(31, 55, 88, 0.24), rgba(31, 55, 88, 0) 72%);
        filter: blur(8px);
        transform: translate3d(18px, 46px, -48px) rotateX(72deg);
      }
      .merch3dFallbackFace,
      .merch3dFallbackBack,
      .merch3dFallbackEdge {
        inset: 10%;
        border-radius: 32px;
        backface-visibility: hidden;
      }
      .merch3dFallbackFace {
        z-index: 4;
        transform: translateZ(34px);
        border: 1px solid rgba(91, 126, 166, 0.24);
        background:
          linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(243, 249, 255, 0.9)),
          repeating-conic-gradient(#edf6ff 0% 25%, #ffffff 0% 50%) 50% / 24px 24px;
      }
      .merch3dFallbackFace > img {
        position: relative;
        z-index: 2;
        max-width: 76%;
        max-height: 76%;
        filter: drop-shadow(0 8px 10px rgba(20, 38, 62, 0.16));
      }
      .merch3dFallbackGloss {
        position: absolute;
        inset: 0;
        z-index: 3;
        pointer-events: none;
        background:
          linear-gradient(118deg, rgba(255, 255, 255, 0.72) 0 18%, rgba(255, 255, 255, 0) 20% 58%, rgba(255, 255, 255, 0.42) 64%, rgba(255, 255, 255, 0) 74%),
          radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.76), rgba(255, 255, 255, 0) 28%);
        mix-blend-mode: screen;
      }
      .merch3dFallbackBack {
        z-index: 1;
        background:
          linear-gradient(145deg, #bed3ea, #f9fcff 45%, #93aac7),
          radial-gradient(circle at 35% 20%, rgba(255,255,255,0.8), rgba(255,255,255,0));
        box-shadow: inset -22px -12px 34px rgba(53, 78, 113, 0.22);
        transform: translate3d(14px, 13px, -24px);
      }
      .merch3dFallbackEdge {
        z-index: 3;
        border: 18px solid rgba(158, 186, 218, 0.38);
        box-shadow:
          inset 0 0 0 2px rgba(255, 255, 255, 0.72),
          0 14px 28px rgba(62, 91, 132, 0.16);
        transform: translateZ(4px) scale(1.035);
      }
      .merch3dFallbackCaption {
        display: grid;
        gap: 6px;
        justify-items: center;
        padding: 10px 16px;
        border: 1px solid rgba(190, 211, 237, 0.86);
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.82);
        color: var(--blue-deep);
        box-shadow: 0 16px 32px rgba(48, 78, 120, 0.1);
        pointer-events: auto;
      }
      .merch3dFallbackCaption strong {
        font-size: 16px;
        font-weight: 950;
      }
      .merch3dFallbackCaption span {
        color: var(--muted);
        font-size: 12px;
        font-weight: 850;
        text-align: center;
      }
      .merch3dFallbackStickerGrid {
        position: relative;
        z-index: 2;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        width: 76%;
        height: 82%;
        padding: 10px;
      }
      .merch3dFallbackStickerGrid span {
        display: grid;
        place-items: center;
        min-width: 0;
        min-height: 0;
        border-radius: 14px;
        background: #ffffff;
        border: 1px dashed rgba(133, 168, 206, 0.42);
        box-shadow: 0 7px 13px rgba(42, 69, 108, 0.08);
        overflow: hidden;
      }
      .merch3dFallbackStickerGrid img {
        max-width: 82%;
        max-height: 82%;
        object-fit: contain;
        filter: drop-shadow(0 4px 6px rgba(20, 38, 62, 0.12));
      }
      .merch3dFallbackPin {
        position: absolute;
        left: 50%;
        top: 16%;
        z-index: 1;
        width: 84px;
        height: 14px;
        border-radius: 999px;
        background: linear-gradient(90deg, #6b7280, #f8fafc 48%, #4b5563);
        box-shadow: 0 3px 7px rgba(31, 41, 55, 0.18);
        transform: translateX(-50%) translateZ(-2px);
        opacity: 0.38;
      }
      .merch3dFallback-badge {
        width: clamp(248px, 32vw, 372px);
      }
      .merch3dFallback-badge .merch3dFallbackFace,
      .merch3dFallback-badge .merch3dFallbackBack,
      .merch3dFallback-badge .merch3dFallbackEdge {
        inset: 8%;
        border-radius: 50%;
      }
      .merch3dFallback-badge .merch3dFallbackEdge {
        border-width: 20px;
      }
      .merch3dFallback-sticker_sheet {
        width: clamp(218px, 27vw, 318px);
        aspect-ratio: 0.72 / 1;
      }
      .merch3dFallback-sticker_sheet .merch3dFallbackFace,
      .merch3dFallback-sticker_sheet .merch3dFallbackBack,
      .merch3dFallback-sticker_sheet .merch3dFallbackEdge {
        inset: 3% 9%;
        border-radius: 22px;
      }
      .merch3dFallback-sticker_sheet .merch3dFallbackEdge {
        border-width: 13px;
      }
      .merch3dFallback-keychain {
        width: clamp(238px, 31vw, 360px);
      }
      .merch3dFallback-keychain .merch3dFallbackFace,
      .merch3dFallback-keychain .merch3dFallbackBack,
      .merch3dFallback-keychain .merch3dFallbackEdge {
        inset: 19% 14% 8%;
        border-radius: 38% 46% 42% 44% / 42% 36% 48% 40%;
      }
      .merch3dFallback-keychain .merch3dFallbackFace {
        background:
          linear-gradient(140deg, rgba(255,255,255,0.82), rgba(236,248,255,0.48)),
          rgba(255, 255, 255, 0.55);
        box-shadow:
          inset 0 0 28px rgba(255, 255, 255, 0.72),
          inset 0 -18px 34px rgba(138, 191, 232, 0.18),
          0 18px 34px rgba(47, 74, 116, 0.2);
      }
      .merch3dFallback-keychain .merch3dFallbackEdge {
        border-color: rgba(161, 221, 255, 0.44);
      }
      .merch3dFallback-keychain .merch3dFallbackRing {
        z-index: 7;
        width: 64px;
        height: 64px;
        border-width: 9px;
        transform: translate3d(-50%, -13px, 52px);
      }
      .merch3dFallbackHole {
        position: absolute;
        left: 50%;
        top: 18%;
        z-index: 8;
        width: 26px;
        height: 26px;
        border-radius: 50%;
        background: radial-gradient(circle at 42% 42%, rgba(232, 246, 255, 0.42), rgba(141, 196, 229, 0.7));
        box-shadow:
          inset 0 0 0 6px rgba(255, 255, 255, 0.74),
          0 4px 9px rgba(36, 66, 102, 0.16);
        transform: translate3d(-50%, 0, 54px);
      }
      .merch3dFallback-fridge_magnet {
        width: clamp(240px, 34vw, 380px);
        aspect-ratio: 1.06 / 1;
      }
      .merch3dFallback-fridge_magnet .merch3dFallbackFace,
      .merch3dFallback-fridge_magnet .merch3dFallbackBack,
      .merch3dFallback-fridge_magnet .merch3dFallbackEdge {
        inset: 11%;
        border-radius: 40px;
      }
      .merch3dFallback-fridge_magnet .merch3dFallbackBack {
        background:
          radial-gradient(circle at 50% 50%, rgba(71, 85, 105, 0.46) 0 42%, rgba(255,255,255,0) 43%),
          linear-gradient(145deg, #b8c5d6, #f7fbff 52%, #7b8da4);
      }
      .merch3dFallback {
        background:
          radial-gradient(circle at 50% 20%, rgba(255, 255, 255, 0.98), rgba(255, 246, 226, 0.86) 34%, rgba(244, 229, 207, 0.72) 70%),
          linear-gradient(180deg, #fffdf7 0%, #fff7e9 58%, #f4e7d5 100%);
      }
      .merch3dFallback::before {
        content: "";
        position: absolute;
        left: 8%;
        right: 8%;
        bottom: 8%;
        height: 22%;
        border-radius: 50%;
        background:
          radial-gradient(ellipse at center, rgba(126, 93, 50, 0.17), rgba(126, 93, 50, 0) 66%);
        filter: blur(16px);
      }
      .merch3dFallback::after {
        content: "";
        position: absolute;
        left: 12%;
        right: 12%;
        bottom: 18%;
        height: 1px;
        background: linear-gradient(90deg, rgba(205, 180, 142, 0), rgba(205, 180, 142, 0.58), rgba(205, 180, 142, 0));
        opacity: 0.7;
      }
      .merch3dFallbackNotice {
        border-color: rgba(230, 194, 136, 0.7);
        background: rgba(255, 252, 246, 0.8);
        color: #8a5a17;
        backdrop-filter: blur(12px);
      }
      .merch3dCssScene {
        inset: 38px 30px 28px;
        grid-template-rows: minmax(350px, 1fr) auto;
        gap: 20px;
      }
      .merch3dStudioGlow {
        position: absolute;
        left: 50%;
        top: 47%;
        z-index: 0;
        width: min(72vw, 620px);
        height: min(56vw, 470px);
        border-radius: 50%;
        background:
          radial-gradient(circle at 50% 44%, rgba(255,255,255,0.98), rgba(255,250,240,0.58) 31%, rgba(226, 178, 99, 0.14) 62%, rgba(226, 178, 99, 0) 72%);
        transform: translate(-50%, -50%);
        filter: blur(3px);
      }
      .merch3dFallbackObject {
        z-index: 1;
        width: clamp(270px, 35vw, 420px);
        filter:
          drop-shadow(0 42px 42px rgba(89, 62, 28, 0.18))
          drop-shadow(0 12px 13px rgba(89, 62, 28, 0.1));
        cursor: grab;
      }
      .merch3dFallbackObject:active {
        cursor: grabbing;
      }
      .merch3dFallbackObject::before {
        content: "";
        position: absolute;
        inset: 14% 10% 7%;
        border-radius: inherit;
        background: radial-gradient(ellipse at center, rgba(76, 49, 22, 0.18), rgba(76, 49, 22, 0) 68%);
        transform: translate3d(20px, 56px, -70px) rotateX(74deg);
        filter: blur(10px);
      }
      .merch3dFallbackLayer,
      .merch3dBadgeRim,
      .merch3dBadgePinBack,
      .merch3dBadgePinNeedle,
      .merch3dStickerPeel,
      .merch3dStickerKissCut,
      .merch3dAcrylicSparkle,
      .merch3dMagnetBack,
      .merch3dMagnetStripe {
        position: absolute;
        pointer-events: none;
      }
      .merch3dFallbackLayer {
        inset: 10%;
        border-radius: 32px;
        background: linear-gradient(140deg, rgba(255,255,255,0.84), rgba(235, 217, 188, 0.62));
        box-shadow: inset -18px -20px 34px rgba(107, 77, 38, 0.12);
        transform-style: preserve-3d;
      }
      .merch3dFallbackLayer.layerOne {
        z-index: 1;
        transform: translate3d(19px, 18px, -40px);
      }
      .merch3dFallbackLayer.layerTwo {
        z-index: 2;
        transform: translate3d(11px, 10px, -18px);
        opacity: 0.82;
      }
      .merch3dFallbackBack {
        transform: translate3d(24px, 22px, -54px);
        background:
          linear-gradient(145deg, #d6bc8e, #fffdf8 44%, #b28e58),
          radial-gradient(circle at 28% 20%, rgba(255,255,255,0.85), rgba(255,255,255,0));
      }
      .merch3dFallbackEdge {
        border-width: 22px;
        border-color: rgba(218, 190, 144, 0.44);
        background: rgba(255, 244, 222, 0.36);
        box-shadow:
          inset 0 0 0 2px rgba(255,255,255,0.78),
          inset -12px -10px 20px rgba(124, 86, 38, 0.1),
          0 18px 36px rgba(99, 69, 31, 0.14);
        transform: translateZ(8px) scale(1.04);
      }
      .merch3dFallbackFace {
        transform: translateZ(44px);
        border-color: rgba(195, 158, 103, 0.2);
        background:
          linear-gradient(145deg, rgba(255,255,255,0.98), rgba(255, 250, 240, 0.92)),
          repeating-conic-gradient(#fff1d7 0% 25%, #ffffff 0% 50%) 50% / 22px 22px;
        box-shadow:
          inset 0 1px 0 rgba(255,255,255,0.96),
          inset 0 -18px 26px rgba(184, 145, 84, 0.12),
          0 28px 48px rgba(96, 65, 27, 0.18);
      }
      .merch3dFallbackCutLine {
        position: absolute;
        inset: 9%;
        z-index: 2;
        border: 1px solid rgba(194, 160, 107, 0.36);
        border-radius: inherit;
        box-shadow: 0 0 0 8px rgba(255,255,255,0.34);
      }
      .merch3dFallbackFace > img {
        max-width: 70%;
        max-height: 70%;
        transform: translateZ(8px);
        filter:
          drop-shadow(0 10px 12px rgba(80, 52, 19, 0.16))
          drop-shadow(0 2px 2px rgba(255, 255, 255, 0.5));
      }
      .merch3dFallbackGloss {
        background:
          linear-gradient(116deg, rgba(255,255,255,0.9) 0 14%, rgba(255,255,255,0) 16% 48%, rgba(255,255,255,0.52) 58%, rgba(255,255,255,0) 70%),
          radial-gradient(circle at 24% 14%, rgba(255,255,255,0.88), rgba(255,255,255,0) 30%),
          linear-gradient(18deg, rgba(218, 171, 86, 0.08), rgba(255,255,255,0) 44%);
      }
      .merch3dFallbackShadow {
        left: 4%;
        right: 2%;
        bottom: -4%;
        height: 26%;
        background:
          radial-gradient(ellipse at center, rgba(75, 47, 18, 0.22), rgba(75, 47, 18, 0.04) 54%, rgba(75, 47, 18, 0) 75%);
        filter: blur(12px);
        transform: translate3d(26px, 64px, -90px) rotateX(74deg);
      }
      .merch3dFallbackCaption {
        min-width: min(420px, 82%);
        padding: 12px 18px;
        border-color: rgba(226, 194, 142, 0.74);
        background: rgba(255, 252, 246, 0.82);
        backdrop-filter: blur(14px);
        box-shadow:
          0 18px 36px rgba(93, 63, 29, 0.1),
          inset 0 1px 0 rgba(255,255,255,0.86);
      }
      .merch3dProductPlaque {
        z-index: 2;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-height: 42px;
        margin-top: -8px;
        padding: 9px 18px 9px 11px;
        border: 1px solid rgba(234, 195, 130, 0.68);
        border-radius: 999px;
        background: rgba(255, 252, 246, 0.9);
        color: #8a5a17;
        font-size: 17px;
        font-weight: 950;
        box-shadow:
          0 16px 28px rgba(104, 72, 32, 0.1),
          inset 0 1px 0 rgba(255,255,255,0.86);
        pointer-events: auto;
      }
      .merch3dProductPlaque b {
        display: grid;
        place-items: center;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        color: #ffffff;
        background: linear-gradient(180deg, #ffb33d, #f28a00);
        box-shadow: 0 8px 14px rgba(244, 138, 0, 0.22);
      }
      .merch3dFallback-badge {
        width: clamp(284px, 34vw, 420px);
      }
      .merch3dFallback-badge .merch3dFallbackLayer,
      .merch3dFallback-badge .merch3dFallbackFace,
      .merch3dFallback-badge .merch3dFallbackBack,
      .merch3dFallback-badge .merch3dFallbackEdge,
      .merch3dFallback-badge .merch3dFallbackCutLine {
        border-radius: 50%;
      }
      .merch3dFallback-badge .merch3dFallbackFace {
        background:
          radial-gradient(circle at 32% 22%, rgba(255,255,255,0.96), rgba(255,255,255,0) 22%),
          linear-gradient(145deg, #fffef9, #fff2c8 58%, #edd7a5);
      }
      .merch3dBadgeRim {
        inset: 6.4%;
        z-index: 5;
        border-radius: 50%;
        border: 16px solid rgba(249, 230, 176, 0.88);
        box-shadow:
          inset 0 0 0 2px rgba(255,255,255,0.86),
          inset 14px 9px 18px rgba(255,255,255,0.68),
          inset -16px -18px 26px rgba(132, 97, 39, 0.16);
        transform: translateZ(50px);
      }
      .merch3dBadgePinBack {
        left: 27%;
        right: 27%;
        top: 20%;
        height: 16px;
        z-index: 1;
        border-radius: 999px;
        background: linear-gradient(90deg, #64748b, #f8fafc 48%, #475569);
        box-shadow: 0 4px 10px rgba(30, 41, 59, 0.2);
        transform: translateZ(-6px);
        opacity: 0.5;
      }
      .merch3dBadgePinNeedle {
        left: 42%;
        right: 20%;
        top: 25%;
        height: 3px;
        z-index: 1;
        border-radius: 999px;
        background: #94a3b8;
        transform: rotate(-10deg) translateZ(-2px);
        opacity: 0.52;
      }
      .merch3dFallback-sticker_sheet {
        width: clamp(248px, 28vw, 350px);
      }
      .merch3dFallback-sticker_sheet .merch3dFallbackLayer,
      .merch3dFallback-sticker_sheet .merch3dFallbackFace,
      .merch3dFallback-sticker_sheet .merch3dFallbackBack,
      .merch3dFallback-sticker_sheet .merch3dFallbackEdge {
        inset: 2% 8%;
        border-radius: 24px;
      }
      .merch3dFallback-sticker_sheet .merch3dFallbackCutLine {
        inset: 5%;
        border-radius: 19px;
        border-style: dashed;
      }
      .merch3dFallback-sticker_sheet .merch3dFallbackFace {
        background:
          linear-gradient(145deg, rgba(255,255,255,0.98), rgba(255, 251, 241, 0.96)),
          linear-gradient(90deg, rgba(246, 220, 174, 0.32), rgba(255,255,255,0) 34% 66%, rgba(246, 220, 174, 0.22));
      }
      .merch3dStickerHeader {
        position: relative;
        z-index: 4;
        align-self: stretch;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        width: 80%;
        min-height: 48px;
        margin: 10px 0 -2px;
        padding: 8px 12px;
        border-radius: 12px 12px 7px 7px;
        background: linear-gradient(90deg, #ffd867, #ffbf3a);
        color: #7a4b00;
        box-shadow: 0 8px 16px rgba(181, 117, 19, 0.14);
      }
      .merch3dStickerHeader strong {
        font-size: 15px;
        line-height: 1;
      }
      .merch3dStickerHeader span {
        font-size: 10px;
        font-weight: 900;
        opacity: 0.7;
      }
      .merch3dFallbackStickerGrid {
        width: 76%;
        height: 66%;
        gap: 12px;
        transform: translateZ(10px);
      }
      .merch3dFallbackStickerGrid span {
        border-style: solid;
        border-color: rgba(232, 210, 172, 0.84);
        background:
          radial-gradient(circle at 35% 24%, #ffffff, #fffdf8 60%, #fff2d8);
      }
      .merch3dStickerPeel {
        right: 10%;
        bottom: 3%;
        z-index: 7;
        width: 70px;
        height: 70px;
        border-radius: 0 0 22px 0;
        background:
          linear-gradient(135deg, rgba(255,255,255,0) 0 48%, #ffffff 49% 58%, #c7d8ec 59% 100%);
        filter: drop-shadow(-8px -8px 10px rgba(74, 103, 140, 0.12));
        transform: translateZ(58px);
        opacity: 0.9;
      }
      .merch3dStickerKissCut {
        z-index: 6;
        width: 34%;
        height: 20%;
        border: 1px dashed rgba(112, 146, 187, 0.4);
        border-radius: 16px;
        transform: translateZ(56px);
      }
      .merch3dStickerKissCut.cutOne { left: 18%; top: 19%; }
      .merch3dStickerKissCut.cutTwo { right: 18%; top: 45%; }
      .merch3dStickerKissCut.cutThree { left: 20%; bottom: 16%; }
      .merch3dFallback-keychain {
        width: clamp(286px, 34vw, 420px);
      }
      .merch3dFallback-keychain .merch3dFallbackLayer,
      .merch3dFallback-keychain .merch3dFallbackFace,
      .merch3dFallback-keychain .merch3dFallbackBack,
      .merch3dFallback-keychain .merch3dFallbackEdge,
      .merch3dFallback-keychain .merch3dFallbackCutLine {
        inset: 18% 13% 8%;
        border-radius: 42% 48% 44% 46% / 44% 38% 50% 42%;
      }
      .merch3dFallback-keychain .merch3dFallbackFace {
        border-color: rgba(220, 231, 235, 0.74);
        background:
          linear-gradient(132deg, rgba(255,255,255,0.74), rgba(244, 251, 255, 0.24) 38%, rgba(255,255,255,0.6)),
          radial-gradient(circle at 72% 26%, rgba(198, 238, 255, 0.34), rgba(198, 238, 255, 0) 32%);
        box-shadow:
          inset 0 0 34px rgba(255,255,255,0.8),
          inset -22px -26px 42px rgba(105, 187, 230, 0.2),
          0 28px 48px rgba(41, 89, 132, 0.2);
      }
      .merch3dFallback-keychain .merch3dFallbackEdge {
        border-color: rgba(194, 229, 247, 0.56);
      }
      .merch3dKeychainChain {
        position: absolute;
        left: 50%;
        top: -1%;
        z-index: 8;
        display: grid;
        gap: 2px;
        transform: translate3d(-50%, 34px, 69px);
        pointer-events: none;
      }
      .merch3dKeychainChain i {
        display: block;
        width: 18px;
        height: 28px;
        border: 5px solid #b7aa94;
        border-radius: 999px;
        background: rgba(255,255,255,0.12);
        box-shadow:
          inset 0 2px 4px rgba(255,255,255,0.8),
          inset -2px -3px 5px rgba(92, 79, 57, 0.18);
      }
      .merch3dFallback-keychain .merch3dFallbackRing {
        top: -6%;
        width: 74px;
        height: 74px;
        border-color: #d7b76a;
        background: radial-gradient(circle at 35% 28%, rgba(255,255,255,0.45), rgba(255,255,255,0));
        box-shadow:
          inset 0 3px 6px rgba(255,255,255,0.8),
          inset -4px -6px 10px rgba(98, 73, 26, 0.16),
          0 16px 24px rgba(77, 57, 21, 0.18);
        transform: translate3d(-50%, -20px, 76px);
      }
      .merch3dFallbackHole {
        top: 18%;
        transform: translate3d(-50%, 0, 72px);
      }
      .merch3dAcrylicSparkle {
        z-index: 7;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: rgba(255,255,255,0.9);
        box-shadow: 0 0 18px rgba(255,255,255,0.8);
        transform: translateZ(70px);
      }
      .merch3dAcrylicSparkle.sparkleOne { left: 26%; top: 30%; }
      .merch3dAcrylicSparkle.sparkleTwo { right: 24%; top: 48%; width: 7px; height: 7px; opacity: 0.78; }
      .merch3dAcrylicSparkle.sparkleThree { left: 34%; bottom: 18%; width: 6px; height: 6px; opacity: 0.7; }
      .merch3dFallback-fridge_magnet {
        width: clamp(286px, 35vw, 426px);
      }
      .merch3dFallback-fridge_magnet .merch3dFallbackLayer,
      .merch3dFallback-fridge_magnet .merch3dFallbackFace,
      .merch3dFallback-fridge_magnet .merch3dFallbackBack,
      .merch3dFallback-fridge_magnet .merch3dFallbackEdge,
      .merch3dFallback-fridge_magnet .merch3dFallbackCutLine {
        inset: 10%;
        border-radius: 42px;
      }
      .merch3dFallback-fridge_magnet .merch3dFallbackBack {
        transform: translate3d(26px, 23px, -58px);
        background:
          radial-gradient(circle at 50% 52%, rgba(62, 75, 92, 0.52) 0 40%, rgba(255,255,255,0) 41%),
          linear-gradient(145deg, #b2aaa0, #fffaf0 54%, #7f766b);
      }
      .merch3dMagnetBack {
        inset: 22%;
        z-index: 0;
        border-radius: 50%;
        background:
          radial-gradient(circle at 50% 48%, #4b5563, #1f2937 70%);
        box-shadow:
          inset 0 0 0 10px rgba(255,255,255,0.18),
          0 8px 16px rgba(31,41,55,0.2);
        transform: translate3d(27px, 24px, -64px);
      }
      .merch3dMagnetStripe {
        left: 23%;
        right: 23%;
        z-index: 6;
        height: 10px;
        border-radius: 999px;
        background: rgba(175, 195, 218, 0.34);
        transform: translateZ(56px);
      }
      .merch3dMagnetStripe.stripeOne { top: 20%; }
      .merch3dMagnetStripe.stripeTwo { bottom: 18%; }

      .merch3dProductArtwork {
        user-select: none;
        -webkit-user-drag: none;
      }
      .merch3dFallback-badge .merch3dProductArtwork {
        max-width: 88%;
        max-height: 88%;
        filter:
          drop-shadow(0 12px 12px rgba(93, 58, 18, 0.16))
          drop-shadow(0 2px 0 rgba(255,255,255,0.48));
      }
      .merch3dFallback-badge .merch3dFallbackGloss {
        background:
          radial-gradient(ellipse at 24% 16%, rgba(255,255,255,0.78), rgba(255,255,255,0) 30%),
          linear-gradient(128deg, rgba(255,255,255,0.72) 0 18%, rgba(255,255,255,0) 21% 70%, rgba(255,255,255,0.28) 76%, rgba(255,255,255,0));
      }
      .merch3dFallback-sticker_sheet .merch3dFallbackObject::before {
        inset: 11% 16% 7%;
      }
      .merch3dFallback-sticker_sheet .merch3dFallbackFace {
        align-content: start;
        justify-items: center;
        overflow: visible;
        box-shadow:
          0 30px 48px rgba(91, 68, 38, 0.22),
          inset 0 1px 0 rgba(255,255,255,0.94);
      }
      .merch3dStickerHeader img {
        width: 42px;
        height: 42px;
        object-fit: contain;
        justify-self: end;
        align-self: center;
        margin-left: 8px;
        filter:
          drop-shadow(0 5px 7px rgba(101, 63, 10, 0.18))
          drop-shadow(0 0 0 #ffffff);
      }
      .merch3dFallbackStickerGrid span {
        position: relative;
        overflow: visible;
        border: 0;
        background: transparent;
        box-shadow: none;
      }
      .merch3dFallbackStickerGrid span::before {
        content: "";
        position: absolute;
        inset: 6%;
        border-radius: 20px;
        background: #ffffff;
        box-shadow:
          0 9px 14px rgba(91, 68, 38, 0.15),
          0 0 0 2px rgba(255,255,255,0.96);
      }
      .merch3dFallbackStickerGrid span img {
        position: relative;
        z-index: 1;
        max-width: 95%;
        max-height: 95%;
        filter:
          drop-shadow(0 7px 8px rgba(91, 68, 38, 0.13))
          drop-shadow(7px 0 0 #ffffff)
          drop-shadow(-7px 0 0 #ffffff)
          drop-shadow(0 7px 0 #ffffff)
          drop-shadow(0 -7px 0 #ffffff);
      }
      .merch3dFallbackStickerGrid .tile1 { transform: rotate(-3deg); }
      .merch3dFallbackStickerGrid .tile2 { transform: rotate(4deg) translateY(3px); }
      .merch3dFallbackStickerGrid .tile3 { transform: rotate(2deg) translateY(-2px); }
      .merch3dFallbackStickerGrid .tile4 { transform: rotate(-4deg) translateY(4px); }
      .merch3dFallbackStickerGrid .tile5 { transform: rotate(-2deg); }
      .merch3dFallbackStickerGrid .tile6 { transform: rotate(3deg) translateY(2px); }

      .merch3dAcrylicContour {
        z-index: 4;
        inset: 15% 10% 5%;
        border-radius: 43% 49% 45% 47% / 45% 39% 51% 43%;
        transform-style: preserve-3d;
      }
      .merch3dAcrylicContour.outer {
        border: 18px solid rgba(227, 249, 255, 0.62);
        box-shadow:
          inset 0 0 0 2px rgba(255,255,255,0.82),
          inset 16px 12px 24px rgba(255,255,255,0.42),
          inset -18px -22px 34px rgba(86, 167, 210, 0.18),
          0 22px 36px rgba(41, 89, 132, 0.17);
        transform: translateZ(52px);
      }
      .merch3dAcrylicContour.inner {
        inset: 22% 17% 12%;
        border: 1px solid rgba(156, 214, 242, 0.42);
        box-shadow: 0 0 0 7px rgba(255,255,255,0.28);
        transform: translateZ(62px);
      }
      .merch3dFallback-keychain .merch3dAcrylicContour {
        display: none;
      }
      .merch3dFallback-keychain .merch3dFallbackFace {
        overflow: visible;
        background:
          linear-gradient(132deg, rgba(255,255,255,0.56), rgba(234, 250, 255, 0.18) 42%, rgba(255,255,255,0.42)),
          radial-gradient(circle at 72% 22%, rgba(198, 238, 255, 0.28), rgba(198, 238, 255, 0) 32%);
      }
      .merch3dFallback-keychain .merch3dProductArtwork {
        z-index: 5;
        max-width: 84%;
        max-height: 84%;
        transform: translateZ(18px);
        filter:
          drop-shadow(11px 0 0 #ffffff)
          drop-shadow(-11px 0 0 #ffffff)
          drop-shadow(0 11px 0 #ffffff)
          drop-shadow(0 -11px 0 #ffffff)
          drop-shadow(0 12px 13px rgba(50, 79, 110, 0.16));
      }
      .merch3dFallback-keychain .merch3dFallbackCutLine {
        inset: 12%;
        border-color: rgba(173, 230, 255, 0.5);
        box-shadow: 0 0 0 10px rgba(255,255,255,0.18);
      }
      .merch3dFallback-sticker_sheet .merch3dFallbackCutLine {
        display: none;
      }
      .merch3dFallback-sticker_sheet .merch3dStickerKissCut {
        display: none;
      }
      .merch3dFallback-keychain .merch3dFallbackGloss {
        border-radius: inherit;
        background:
          linear-gradient(118deg, rgba(255,255,255,0.82) 0 13%, rgba(255,255,255,0) 17% 51%, rgba(255,255,255,0.54) 59%, rgba(255,255,255,0) 71%),
          radial-gradient(circle at 22% 16%, rgba(255,255,255,0.92), rgba(255,255,255,0) 24%),
          radial-gradient(circle at 82% 58%, rgba(207,244,255,0.36), rgba(207,244,255,0) 28%);
      }
      .merch3dFallback-fridge_magnet .merch3dFallbackFace {
        background:
          linear-gradient(145deg, rgba(255,255,255,0.96), rgba(255,242,202,0.88)),
          radial-gradient(circle at 34% 24%, rgba(255,255,255,0.7), rgba(255,255,255,0));
      }
      .merch3dFallback-fridge_magnet .merch3dProductArtwork {
        max-width: 96%;
        max-height: 96%;
        transform: translateZ(10px);
      }
      .merch3dFallback-fridge_magnet .merch3dFallbackBack {
        border-radius: 36px;
        transform: translate3d(42px, -12px, -58px) rotateZ(1.5deg);
      }
      .merch3dFallback-fridge_magnet .merch3dMagnetBack {
        inset: 7%;
        border-radius: 36px;
        background:
          linear-gradient(145deg, #34312c, #1f1d1a 58%, #45413b);
        transform: translate3d(46px, -16px, -66px) rotateZ(1.5deg);
      }
      .merch3dHint {
        position: absolute;
        left: 14px;
        bottom: 14px;
        padding: 6px 9px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.82);
        color: var(--muted);
        font-size: 12px;
        font-weight: 850;
      }
      .merch3dSide {
        display: grid;
        align-content: start;
        gap: 12px;
        padding: 14px;
        border-left: 1px solid var(--line);
        background: #fbfdff;
        overflow: auto;
      }
      .merch3dAiReference,
      .merch3dProductInfo {
        display: grid;
        gap: 8px;
        padding: 10px;
        border: 1px solid rgba(220, 233, 246, 0.94);
        border-radius: 8px;
        background: #ffffff;
      }
      .merch3dAiReference img {
        width: 100%;
        aspect-ratio: 1 / 1;
        object-fit: contain;
        border-radius: 8px;
        background: #f8fbff;
      }

      @media (max-width: 1180px) {
        header { grid-template-columns: 1fr; align-items: stretch; }
        .appNav { overflow-x: auto; justify-content: flex-start; }
        .shell, .workspaceGuide, .workspaceModeTabs, .workspaceStaticLayout, .workspaceGifLayout, .previewGrid, .editor, .toolGrid, .compactGrid, .editorActions, .docLayout, .pricingGrid, .manualRechargeLayout, .pendingRechargeCard, .docStats, .docFlowMap, .docGrid2, .docGrid3, .docChecklist, .opsGrid, .adminPendingGrid, .adminUserLayout, .dataMetricGrid, .analyticsGrid, .analyticsTables, .merchWorkbench, .merchPreviewBoard { grid-template-columns: 1fr; }
        .workspaceHeaderActions {
          justify-content: flex-start;
        }
        .staticGifEntryPanel {
          position: static;
        }
        .infoFilterPanel,
        .infoSideColumn,
        .merchControlPanel,
        .merchResultPanel {
          position: static;
        }
        .merchSourcePreview {
          height: auto;
          min-height: 620px;
        }
        .merchKitStudio {
          grid-template-columns: minmax(118px, 0.5fr) minmax(240px, 1fr) minmax(132px, 0.58fr);
        }
        .merchAiActions {
          grid-template-columns: 1fr;
        }
        .merch3dBody {
          grid-template-columns: 1fr;
        }
        .merch3dSide {
          border-left: 0;
          border-top: 1px solid rgba(220, 233, 246, 0.95);
        }
        .workflowModuleBody,
        .workflowPreviewGrid,
        .workflowUtilityGrid,
        .cutResultBody,
        .workflowMotion .previewGrid,
        .motionEditorLayout,
        .motionResultGrid,
        .moduleConceptBanner,
        .moduleGuideGrid {
          grid-template-columns: 1fr;
        }
        .moduleConceptBanner,
        .moduleConceptBanner img {
          height: 176px;
          min-height: 176px;
        }
        .workflowResultDivider {
          align-items: flex-start;
          flex-direction: column;
        }
        .workflowResultDivider span {
          text-align: left;
        }
        .exampleFlow,
        .example-cut .exampleFlow {
          grid-template-columns: 1fr;
        }
        .motionResultGrid {
          min-height: auto;
        }
        .motionResultGrid > .stage,
        .motionResultGrid > .resultStack {
          min-height: 240px;
        }
        .motionResultGrid > .resultStack > .stage {
          min-height: 0;
        }
        .workflowMotion .embeddedEditorPanel .editorScrollWrap {
          overflow-x: auto;
        }
        .workflowMotion .embeddedEditorPanel .editorScrollWrap .editor {
          min-width: 1040px;
        }
        .workflowMotion .embeddedPlatformPanel .platformExportGrid {
          grid-template-columns: 1fr;
        }
        .staticControlTop,
        .staticCropActions {
          grid-template-columns: 1fr;
        }
        .staticRedrawGrid {
          grid-template-columns: 1fr;
        }
        .staticRedrawOptions {
          grid-template-columns: 1fr;
        }
        .exampleArrow {
          min-height: 16px;
          transform: rotate(90deg);
        }
        .workflowStatusPanel .tabs {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        .pricingHeader { grid-template-columns: 1fr; }
        .tierChooser { grid-template-columns: 1fr; }
        .tierSwitch { width: 100%; }
        .tierActionRow { grid-template-columns: 1fr; }
        .tierAction { grid-template-columns: minmax(0, 1fr) 124px; }
        .adminHeroMeta { justify-items: start; }
        .guideSteps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
        .editorScrollWrap .editor { grid-template-columns: minmax(360px, 460px) minmax(380px, 620px) minmax(260px, 1fr); }
        .docFlowNode::after { display: none; }
        .statusBox { justify-items: start; }
        .tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .loginHero { grid-template-columns: 1fr; gap: 22px; min-height: 0; padding-top: 76px; }
        .heroPreview { width: 100%; min-height: 0; }
        .heroShowcaseImage { height: auto; min-height: 0; }
        .compareBoard {
          grid-template-columns: 1fr;
        }
        .compareVs {
          justify-self: center;
          width: 52px;
          height: 52px;
        }
        .audienceGrid {
          grid-template-columns: repeat(3, minmax(0, 1fr));
        }
        .useCaseGrid, .capabilityGrid, .workflowRail, .featureDeckGrid { grid-template-columns: 1fr; }
        .workflowNode::after { display: none; }
        .featureShowcaseCard,
        .featureShowcaseCard.wide {
          grid-template-columns: minmax(220px, 0.5fr) minmax(0, 1fr);
          grid-column: auto;
        }
        .useCaseCard {
          grid-template-columns: minmax(160px, 0.46fr) minmax(0, 1fr);
          align-items: center;
        }
        .resultFlow {
          grid-template-columns: 1fr;
        }
        .flowArrow {
          min-height: 20px;
          transform: rotate(90deg);
        }
        .docAside, .docToc { position: static; }
      }
      @media (max-width: 680px) {
        html, body { overflow-x: hidden; }
        header { display: grid; padding: 12px; }
        h1 { font-size: 19px; }
        .shell { padding: 10px; gap: 12px; }
        .workspaceModeTabs {
          gap: 10px;
          margin-bottom: 12px;
        }
        .workspaceTitleBlock h2 {
          font-size: 23px;
          max-width: 100%;
        }
        .workspaceTabList {
          width: 100%;
        }
        .workspaceTabButton {
          min-height: 44px;
          padding: 8px 10px;
          font-size: 13px;
          white-space: normal;
        }
        .merchSourcePreview {
          min-height: 760px;
        }
        .merchKitStudio {
          grid-template-columns: 1fr;
          grid-auto-rows: auto;
        }
        .merchMockupStack {
          grid-template-columns: repeat(2, minmax(0, 1fr));
          grid-template-rows: none;
        }
        .merchHeroProduct {
          min-height: 360px;
        }
        .merchConceptCard,
        .merchSpecList {
          grid-template-columns: 1fr;
        }
        .merch3dDialog {
          padding: 10px;
        }
        .merch3dPanel {
          width: calc(100vw - 20px);
          max-height: calc(100vh - 20px);
        }
        .merch3dHead {
          align-items: flex-start;
          flex-direction: column;
        }
        .merch3dActions {
          width: 100%;
          flex-wrap: wrap;
        }
        .merch3dStage,
        .merch3dCanvas,
        .merch3dFallback {
          min-height: 420px;
        }
        .merchSpecList {
          grid-column: auto;
          grid-row: auto;
        }
        .portraitUploadStage,
        .workspaceCutResultBody {
          min-height: 240px;
        }
        .staticUploadCard .portraitUploadStage {
          min-height: 176px;
        }
        .staticUploadCard .portraitUploadStage .stageEmpty {
          min-height: 152px;
        }
        .workspaceMatrixResultBody,
        .workspaceMatrixResultBody #matrixStage {
          min-height: 360px;
        }
        .staticResultActions,
        .staticSelectionToolbar,
        .staticSelectedActions,
        .staticBatchActions,
        .staticInlineSingleActions,
        .staticCropPrimaryActions,
        .staticRedrawActions,
        .gifResultActions {
          grid-template-columns: 1fr;
        }
        .staticSelectionMiniActions,
        .staticMatrixToolbar {
          position: static;
          display: grid;
          grid-template-columns: 1fr 1fr;
        }
        .gifFramePreviewGrid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        .gifMainPreviewStage {
          min-height: 280px;
        }
        .gifMainPreviewStage img,
        .gifMainPreviewStage video {
          max-height: 260px;
        }
        .gifWaitingCard,
        .gifWaitingFacts {
          grid-template-columns: 1fr;
        }
        .gifWaitingVisual {
          min-height: 132px;
        }
        .row, .row3, .actions, .tabs, .payQrGrid, .docSearchBox, .guideSteps, .metricGrid, .adminUserToolbar, .subjectSettingsGrid, .merchSkuGrid, .merchSourceList { grid-template-columns: 1fr; }
        .docHotLinks a { width: 100%; justify-content: center; }
        .pendingRechargeMain,
        .pendingRechargeCode,
        .pendingRechargeSteps {
          min-height: 0;
        }
        #roleFieldGroup { max-width: none; }
        .usageStrip { grid-template-columns: 1fr; }
        .topProgress { width: 100%; }
        .statusBox { min-width: 0; width: 100%; }
        .panelBody { padding: 12px; }
        .stage { min-height: 220px; }
        .guideIntro { padding-right: 112px; }
        .guideDuck { width: 124px; bottom: -40px; }
        .loginScreen { width: 100%; padding: 16px 22px; overflow-x: hidden; }
        .loginLanding { width: 100%; max-width: calc(100vw - 44px); min-height: calc(100vh - 32px); overflow: hidden; }
        .loginBrand span { display: none; }
        .loginNav { width: 100%; max-width: 100%; top: 10px; align-items: center; gap: 8px; border-radius: 16px; }
        .loginBrand { gap: 8px; }
        .brandMark { width: 34px; height: 34px; font-size: 13px; border-radius: 12px; }
        .loginBrand strong { font-size: 14px; }
        .loginNavActions { display: none; }
        .loginNavActions .loginOpenButton,
        #openRegisterDialog { display: none; }
        .duckPeek { top: 66px; left: -12px; width: 132px; opacity: 0.92; }
        .loginHero { width: 100%; max-width: 100%; padding-top: 42px; padding-bottom: 22px; }
        .loginOpenButton, .loginSecondaryButton { min-height: 38px; padding: 8px 11px; font-size: 12px; }
        .heroCopy, .heroPreview { width: 100%; max-width: 100%; min-width: 0; overflow-x: clip; }
        .heroCopy h1 { width: 100%; max-width: 100%; font-size: 30px; line-height: 1.16; white-space: normal; overflow-wrap: anywhere; }
        .heroLine { white-space: normal; }
        .heroCopy p { width: 100%; max-width: min(100%, 330px); overflow-wrap: anywhere; word-break: break-all; line-break: anywhere; }
        .heroCopy p { font-size: 14px; }
        .heroStats, .landingBlocks { grid-template-columns: 1fr; }
        .heroPreview { min-height: 0; justify-self: stretch; overflow: hidden; }
        .heroShowcaseImage {
          width: 100%;
          max-width: min(100%, 330px);
          height: auto;
          border-radius: 16px;
          object-fit: contain;
          background: #fffdf7;
        }
        .heroPills {
          display: grid;
          grid-template-columns: 1fr;
          width: 100%;
          max-width: min(100%, 330px);
        }
        .heroPills span {
          justify-content: center;
          min-height: 30px;
          padding: 7px 10px;
        }
        .landingSection { width: 100%; max-width: 100%; margin-top: 16px; padding: 20px 14px; border-radius: 18px; }
        .compareSection,
        .audienceSection,
        .useCaseSection,
        .workflowShowcase,
        .loginFeatureDeck,
        .capabilitySection,
        .resultSection { overflow: hidden; }
        .sectionIntro { justify-items: start; text-align: left; margin-bottom: 16px; }
        .sectionIntro h2, .landingCtaPanel h2 { font-size: 24px; overflow-wrap: anywhere; }
        .compareSection::after { display: none; }
        .comparePanel {
          min-height: 0;
          padding: 18px;
          border-radius: 16px;
        }
        .compareHeader strong {
          font-size: 22px;
          padding-right: 44px;
        }
        .compareList li {
          grid-template-columns: 26px minmax(0, 1fr);
          gap: 9px;
          font-size: 13px;
        }
        .compareList b {
          width: 26px;
          height: 26px;
          font-size: 13px;
        }
        .compareVs {
          width: 46px;
          height: 46px;
          border-width: 4px;
          font-size: 13px;
        }
        .audienceGrid {
          grid-template-columns: 1fr;
        }
        .audienceCard {
          grid-template-columns: 56px minmax(0, 1fr);
          justify-items: start;
          align-items: center;
          min-height: 0;
          text-align: left;
        }
        .audienceIcon {
          grid-row: span 2;
          width: 54px;
          height: 54px;
          border-radius: 16px;
        }
        .workflowRail { gap: 8px; }
        .workflowNode {
          min-height: 0;
          grid-template-columns: 40px minmax(0, 1fr);
          grid-template-areas:
            "num title"
            "num copy";
          padding: 14px;
        }
        .workflowNode b { grid-area: num; }
        .workflowNode strong { grid-area: title; }
        .workflowNode span { grid-area: copy; }
        .featureShowcaseCard,
        .featureShowcaseCard.wide {
          grid-template-columns: 1fr;
          padding: 12px;
          border-radius: 16px;
        }
        .featureShowcaseCard h3 { font-size: 16px; }
        .useCaseCard { grid-template-columns: 1fr; border-radius: 16px; }
        .useCaseCard h3 { font-size: 16px; }
        .capabilityItem {
          min-height: 0;
          padding: 14px;
          border-radius: 14px;
        }
        .landingCtaPanel {
          grid-template-columns: 1fr;
          padding: 18px;
          border-radius: 16px;
        }
        .landingCtaPanel button { width: 100%; }
        .loginDialog { place-items: end stretch; padding: 16px; }
        .loginCard { width: 100%; }
      }