/* editor */
  .editor { display: none; }
  .editor.open { display: block; }
  #view-templates.template-editor-open .tpl-layout { display: none; }
  .view.hidden { display: none; }
  .editor-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: stretch; }
  .form-card { background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.042)); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow); }
  .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .form-field { display: grid; gap: 6px; }
  .form-field.full { grid-column: 1 / -1; }
  .form-field label { font-size: 12px; font-weight: 640; color: var(--muted); letter-spacing: .02em; }
  .form-field input, .form-field select, .form-field textarea { width: 100%; }
  .form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border); }
  .upload-zone { min-height: 120px; border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); display: grid; place-items: center; color: var(--muted); font-size: 13px; text-align: center; padding: 20px; background: rgba(255,255,255,.025); transition: .15s; }
  .upload-zone:hover { border-color: var(--accent); background: color-mix(in oklch, var(--accent) 6%, transparent); }
  .test-card { background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.042)); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; height: 100%; box-shadow: var(--shadow); }
  .test-card h3 { font-size: 14px; font-weight: 650; margin-bottom: 4px; }
  .test-card > p { font-size: 12px; color: var(--muted); margin-bottom: 14px; }
  .test-preview { aspect-ratio: 1; border-radius: 14px; border: 1px solid var(--border); background: rgba(255,255,255,.035); display: grid; place-items: center; color: var(--muted); font-size: 13px; }
  .back-link { margin-bottom: 18px; }



      .tpl-unsaved-navigation-backdrop { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; padding: 20px; background: rgba(0,0,0,.46); }
      .tpl-unsaved-navigation-dialog { width: min(460px,calc(100vw - 40px)); border: 1px solid var(--border); border-radius: 18px; padding: 20px; display: grid; gap: 12px; background: var(--surface); box-shadow: var(--shadow); }

      .tpl-feedback-backdrop { position: fixed; inset: 0; z-index: 10020; display: grid; place-items: center; padding: 20px; background: rgba(0,0,0,.46); }
      .tpl-feedback-dialog { width: min(440px,calc(100vw - 40px)); border: 1px solid var(--border); border-radius: 18px; padding: 20px; display: grid; gap: 12px; background: var(--surface); box-shadow: var(--shadow); }
      .tpl-feedback-title { color: var(--fg); font-size: 16px; font-weight: 650; }
      .tpl-feedback-message { color: var(--muted); font-size: 13px; line-height: 1.65; overflow-wrap: anywhere; }
      .tpl-feedback-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
      .tpl-feedback-toast { position: fixed; left: 50%; top: 50%; z-index: 10030; transform: translate(-50%,-50%); max-width: min(420px,calc(100vw - 40px)); border: 1px solid var(--border); border-radius: 14px; padding: 14px 20px; background: var(--surface); color: var(--fg); box-shadow: var(--shadow); font-size: 14px; text-align: center; overflow-wrap: anywhere; }
      .tpl-feedback-busy { position: fixed; inset: 0; z-index: 10040; display: grid; place-items: center; padding: 20px; background: rgba(0,0,0,.42); }
      .tpl-feedback-busy-card { display: grid; justify-items: center; gap: 14px; min-width: 180px; padding: 22px 28px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); }
      .tpl-feedback-spinner { width: 30px; height: 30px; border: 3px solid color-mix(in oklch, var(--muted) 30%, transparent); border-top-color: var(--accent); border-radius: 50%; animation: tpl-feedback-spin .8s linear infinite; }
      .tpl-feedback-busy-text { color: var(--fg); font-size: 14px; font-weight: 600; }
      @keyframes tpl-feedback-spin { to { transform: rotate(360deg); } }


      #template-editor .tpl-editor-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px 22px;
        align-items: start;
      }
      #template-editor .tpl-editor-grid > .form-field {
        min-width: 0;
      }
      #template-editor .tpl-test-output-controls {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 10px;
        width: 100%;
        margin-bottom: 10px;
      }
      #template-editor .tpl-control-field > input,
      #template-editor .tpl-control-field > select,
      #template-editor .tpl-ratio-control {
        height: 38px;
        min-height: 38px;
        border-radius: 14px;
        padding: 0 14px;
        font-size: 14px;
        line-height: 38px;
      }
      #template-editor .tpl-control-field select {
        line-height: normal;
      }
      #template-editor .tpl-cost-row {
        display: flex;
        gap: 12px;
        min-width: 0;
      }
      #template-editor .tpl-cost-capsule {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 6px;
      }
      #template-editor .tpl-cost-capsule > input {
        width: 100%;
        box-sizing: border-box;
        height: 38px;
        min-height: 38px;
        border-radius: 14px;
        padding: 0 14px;
        font-size: 14px;
        line-height: 38px;
      }
      /* 积分输入框：去掉浏览器自带的上下增减箭头，手动输入即可 */
      #template-editor .tpl-cost-capsule > input[type="number"]::-webkit-inner-spin-button,
      #template-editor .tpl-cost-capsule > input[type="number"]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
      }
      #template-editor .tpl-cost-capsule > input[type="number"] {
        -moz-appearance: textfield;
        appearance: textfield;
      }
      #tpl-category-trigger {
        width: 100%;
        height: 38px;
        min-height: 38px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 14px;
        border: 1px solid var(--border);
        border-radius: 14px;
        background: rgba(255,255,255,.055);
        color: var(--text);
        font: inherit;
        font-size: 14px;
        text-align: left;
        cursor: pointer;
      }
      #template-editor .tpl-ratio-control {
        display: flex;
        align-items: center;
        gap: 8px;
        border: 1px solid var(--border);
        background: rgba(255,255,255,.055);
        overflow: hidden;
      }
      #template-editor .tpl-ratio-option {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        height: 24px;
        padding: 0 6px;
        border-radius: 999px;
        color: var(--text);
        white-space: nowrap;
        font-size: 12px;
      }
      #template-editor .tpl-ratio-option input {
        width: auto;
        margin: 0;
      }
      #template-editor .tpl-editor-section {
        grid-column: 1 / -1;
        padding-top: 8px;
      }
      #template-editor .tpl-section-title {
        display: flex;
        align-items: center;
        gap: 12px;
        margin: 8px 0 14px;
        color: var(--text);
        font-size: 14px;
        font-weight: 680;
      }
      #template-editor .tpl-section-title::after {
        content: "";
        flex: 1;
        height: 1px;
        background: var(--border);
      }
      #template-editor .tpl-section-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px 22px;
        align-items: start;
      }
      #template-editor .tpl-process-toggle {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: var(--muted);
        font-size: 12px;
        font-weight: 500;
      }
      #template-editor .tpl-process-toggle input {
        width: auto;
        margin: 0;
      }
      #template-editor .tpl-process-collapse {
        display: grid;
        grid-template-rows: 0fr;
        opacity: 0;
      }
      #template-editor .tpl-process-collapse.is-animated {
        transition: grid-template-rows .28s ease, opacity .2s ease;
      }
      #template-editor .tpl-process-collapse.is-expanded {
        grid-template-rows: 1fr;
        opacity: 1;
      }
      #template-editor .tpl-process-collapse-inner {
        min-height: 0;
        overflow: hidden;
      }
      #template-editor .tpl-process-collapse.is-disabled {
        pointer-events: none;
      }
      @media (prefers-reduced-motion: reduce) {
        #template-editor .tpl-process-collapse.is-animated {
          transition: none;
        }
      }
      #template-editor .tpl-info-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 480px;
        gap: 18px;
        align-items: start;
      }
      #template-editor .tpl-info-assets {
        display: grid;
        grid-template-columns: repeat(2, 225px);
        gap: 12px;
        align-items: start;
      }
      #template-editor .tpl-info-fields {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 18px 22px;
      }
      #template-editor .tpl-info-row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px;
        align-items: start;
      }
      #template-editor .tpl-info-row .tpl-info-row-item {
        min-width: 0;
      }
      #template-editor .tpl-info-row .tpl-control-field > input,
      #template-editor .tpl-info-row .tpl-control-field > div {
        width: 100%;
        box-sizing: border-box;
      }
      #template-editor .tpl-info-asset {
        justify-self: start;
      }
      #template-editor .tpl-thumb-asset {
        width: 338px;
      }
      #template-editor .tpl-thumb-asset #tpl-thumb-panel {
        width: 338px;
      }
      #template-editor .thumb-grid-cells {
         width: 119px;
         height: 119px;
         aspect-ratio: 1 / 1;
       }
       #template-editor .thumb-grid-cells.thumb-grid-cells-wide {
         width: 338px;
         height: auto;
         aspect-ratio: 4 / 1;
       }
       #template-editor .style-card-sample-wide {
         aspect-ratio: 4 / 1;
       }
       #template-editor .tpl-image-controls {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px 22px;
      }
      #template-editor .tpl-image-effect-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
        align-items: stretch;
      }
      #template-editor .tpl-effect-panel {
        min-width: 0;
        display: flex;
        flex-direction: column;
      }
      #template-editor .tpl-effect-heading {
        font-size: 12px;
        font-weight: 600;
        color: var(--muted);
        letter-spacing: .02em;
        margin: 0 0 8px;
      }
      #template-editor .tpl-effect-card {
        min-width: 0;
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        gap: 12px;
      }
      #template-editor .tpl-effect-controls {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
      }
      #template-editor .tpl-effect-setting-card {
        min-width: 0;
        min-height: 38px;
        display: flex;
        align-items: center;
        gap: 12px;
        border: 1px solid var(--border);
        border-radius: 14px;
        background: rgba(255,255,255,.055);
        padding: 0 14px;
      }
      #template-editor .tpl-effect-setting-label {
        flex: 0 0 auto;
        font-size: 12px;
        font-weight: 600;
        color: var(--muted);
        letter-spacing: .02em;
        white-space: nowrap;
      }
      #template-editor .tpl-effect-setting-control {
        flex: 1 1 auto;
        min-width: 0;
      }
      #template-editor .tpl-effect-setting-control select {
        width: 100%;
        min-height: 36px;
        border: 0;
        border-radius: 0;
        background-color: transparent;
        box-shadow: none;
        padding: 0 28px 0 0;
      }
      #template-editor .tpl-effect-setting-control select:focus {
        border-color: transparent;
        box-shadow: none;
      }
      #template-editor .preview-wrapper {
        position: relative;
        width: 100%;
      }
      #template-editor .preview-wrapper .test-preview {
        aspect-ratio: 1 / 1;
        width: 100%;
        flex: none;
      }
      #template-editor .preview-wrapper .tpl-effect-controls {
        position: static;
        background: rgba(0, 0, 0, .55);
        backdrop-filter: blur(6px);
        border-radius: 0 0 14px 14px;
        padding: 6px 8px;
        margin: 0;
      }
      #template-editor .tpl-image-test-loading {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: 100%;
        height: 100%;
        min-height: 140px;
        color: var(--muted);
        font-size: 13px;
      }
      #template-editor .tpl-image-test-loading .tpl-feedback-spinner {
        width: 26px;
        height: 26px;
      }
      #template-editor .tpl-image-test-content {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        min-height: 0;
        overflow: hidden;
      }
      #template-editor .tpl-generation-progress {
        width: 100%;
        height: 100%;
        min-height: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 24px;
        text-align: center;
        box-sizing: border-box;
        overflow-x: hidden;
        overflow-y: auto;
      }
      #template-editor .tpl-generation-elapsed {
        color: var(--fg);
        font-family: var(--font-mono);
        font-size: 20px;
        font-weight: 700;
        line-height: 1;
        letter-spacing: 0;
        font-variant-numeric: tabular-nums;
      }
      #template-editor .tpl-generation-current {
        flex: 0 1 auto;
        width: 100%;
        max-height: 50%;
        overflow-y: auto;
        overflow-wrap: anywhere;
        word-break: break-word;
        white-space: pre-wrap;
        color: var(--accent);
        font-size: 13px;
        font-weight: 650;
        line-height: 1.4;
        letter-spacing: 0;
      }
      #template-editor .tpl-generation-steps {
        width: min(300px, 100%);
        display: grid;
        gap: 7px;
      }
      #template-editor .tpl-generation-step {
        display: grid;
        grid-template-columns: 8px minmax(0, 1fr) auto;
        align-items: center;
        gap: 8px;
        color: var(--subtle);
        font-size: 12px;
        line-height: 1.35;
        letter-spacing: 0;
        text-align: left;
      }
      #template-editor .tpl-generation-step-dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--subtle);
      }
      #template-editor .tpl-generation-step.is-completed,
      #template-editor .tpl-generation-step.is-running {
        color: var(--fg);
      }
      #template-editor .tpl-generation-step.is-completed .tpl-generation-step-dot,
      #template-editor .tpl-generation-step.is-running .tpl-generation-step-dot {
        background: var(--accent);
      }
      #template-editor .tpl-generation-step.is-running .tpl-generation-step-dot {
        box-shadow: 0 0 0 4px color-mix(in oklch, var(--accent) 20%, transparent);
      }
      #template-editor .tpl-generation-step.is-failed,
      #template-editor .tpl-generation-step.is-failed .tpl-generation-step-status {
        color: var(--danger);
      }
      #template-editor .tpl-generation-step.is-failed .tpl-generation-step-dot {
        background: var(--danger);
      }
      #template-editor .tpl-generation-step-status {
        color: var(--accent);
        white-space: nowrap;
      }
      #template-editor .tpl-generation-diagnostic {
        flex: 0 0 auto;
        width: 100%;
        padding: 8px 10px;
        border-bottom: 1px solid var(--border);
        color: var(--muted);
        font-size: 11px;
        line-height: 1.6;
        letter-spacing: 0;
        text-align: left;
        box-sizing: border-box;
      }
      #template-editor .tpl-image-test-grid {
        display: grid;
        flex: 1 1 auto;
        grid-auto-rows: minmax(0, 1fr);
        gap: 0;
        width: 100%;
        min-height: 0;
        overflow: hidden;
        padding: 0;
        box-sizing: border-box;
      }
      #template-editor #tpl-postprocess-result .tpl-image-test-grid {
        gap: 4px;
        background: var(--border);
      }
      #template-editor .tpl-image-test-item {
        position: relative;
        min-width: 0;
        min-height: 0;
        display: grid;
        place-items: center;
        width: 100%;
        height: 100%;
        overflow: hidden;
        border: 0;
        border-radius: 0;
        background: transparent;
      }
      #template-editor .tpl-image-test-item img {
        position: absolute;
        inset: 0;
        display: block;
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
      }
      #template-editor .tpl-image-test-item.tpl-selectable {
        cursor: pointer;
      }
      #template-editor .tpl-image-test-item.is-selected {
        box-shadow: inset 0 0 0 3px var(--accent);
        z-index: 1;
      }
      #template-editor .tpl-image-test-item .tpl-select-badge {
        display: none;
      }
      #template-editor .tpl-image-test-item.is-selected .tpl-select-badge {
        display: flex;
        position: absolute;
        top: 4px;
        right: 4px;
        width: 18px;
        height: 18px;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: var(--accent);
        color: #fff;
        font-size: 11px;
        line-height: 1;
      }
      #template-editor .tpl-image-test-item.is-selected .tpl-select-badge::after {
        content: '\2713';
        font-weight: 700;
      }
      #template-editor .tpl-video-controls {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 18px 22px;
      }
      #template-editor .tpl-section-grid > .form-field,
      #template-editor .tpl-section-grid > .tpl-control-field {
        min-width: 0;
      }
      #template-editor .tpl-three-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
      }
      #template-editor .tpl-three-grid > *,
      #template-editor #tpl-reference-list > *,
      #template-editor .tpl-video-assets-row > * {
        min-width: 0;
      }
      #template-editor .tpl-upload-card,
      #template-editor .tpl-test-upload-card {
        width: 100%;
        min-width: 0;
        max-width: 100%;
      }
      #template-editor .tpl-upload-preview,
      #template-editor [data-test-upload-preview] {
        display: grid;
        place-items: center;
        width: 100%;
        height: 100%;
        min-width: 0;
        overflow: hidden;
      }
      #template-editor .tpl-upload-preview img,
      #template-editor [data-test-upload-preview] img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      #template-editor .tpl-upload-file-name,
      #template-editor .tpl-upload-empty-text {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding: 0 10px;
      }
      #template-editor .tpl-desc-thumb-row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px;
        align-items: stretch;
      }
      #template-editor .tpl-desc-thumb-row > .form-field {
        min-width: 0;
        display: flex;
        flex-direction: column;
      }
      #template-editor .tpl-prompt-test-row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px;
        align-items: stretch;
      }
      #template-editor .tpl-prompt-test-row > .form-field {
        min-width: 0;
        display: flex;
        flex-direction: column;
      }
      #template-editor #tpl-edit-prompt,
      #template-editor #tpl-video-test-result {
        width: 100%;
        aspect-ratio: 1 / 1;
        height: auto;
        min-height: 0;
      }
      #template-editor #tpl-test-result,
      #template-editor #tpl-postprocess-result {
        display: grid;
        place-items: center;
        width: 100%;
        min-height: 0;
        height: 100%;
        flex: 1 1 auto;
        aspect-ratio: auto;
        border: 0;
        border-radius: 0;
        background: transparent;
        color: var(--muted);
        font-size: 13px;
      }
      #template-editor .tpl-generate-image-card,
      #template-editor .tpl-postprocess-card {
        height: 100%;
      }
      #template-editor .tpl-generate-image-card .preview-wrapper,
      #template-editor .tpl-postprocess-card .preview-wrapper {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        min-height: 0;
        overflow: hidden;
        border: 1px solid var(--border);
        border-radius: 14px;
        background: rgba(255,255,255,.035);
      }
      #template-editor .tpl-generate-image-card .test-preview,
      #template-editor .tpl-postprocess-card .test-preview {
        border: 0;
        border-radius: 0;
        background: transparent;
      }
      #template-editor .tpl-generate-image-card #tpl-test-result,
      #template-editor .tpl-postprocess-card #tpl-postprocess-result {
        width: 100%;
        height: auto;
        flex: none;
        aspect-ratio: 1 / 1;
      }
      #template-editor .tpl-postprocess-card .tpl-effect-controls {
        display: flex;
        align-items: stretch;
        flex-wrap: nowrap;
        overflow: visible;
        grid-template-columns: none;
        border-top: 1px solid var(--border);
        border-radius: 0;
        background: transparent;
        backdrop-filter: none;
        padding: 8px 10px;
        gap: 8px;
      }
      #template-editor .tpl-postprocess-card .tpl-effect-setting-item {
        flex: 1 1 0;
        min-width: 0;
        min-height: 36px;
        display: flex;
        align-items: center;
        gap: 12px;
        border: 0;
        border-radius: 0;
        background: transparent;
        padding: 0;
      }
      #template-editor .tpl-postprocess-card .tpl-effect-setting-control {
        min-width: 0;
      }
      #template-editor .tpl-postprocess-card .tpl-effect-setting-control select {
        max-width: 100%;
      }
      #template-editor .tpl-postprocess-card .tpl-effect-setting-control .btn {
        width: 100%;
        padding: 4px 8px;
        font-size: 12px;
        white-space: nowrap;
      }
      #template-editor .tpl-video-emotion-refs-head {
        font-size: 12px;
        color: var(--muted);
        margin: 10px 0 8px;
      }
      #template-editor .tpl-emotion-prompt-preview {
        margin-top: 6px;
        color: var(--muted);
        font-size: 12px;
        line-height: 1.6;
        white-space: pre-wrap;
        word-break: break-all;
      }
      #template-editor #tpl-video-emotion-refs {
        grid-column: 1 / -1;
        min-width: 0;
      }
      #template-editor .is-emotion-hidden {
        display: none !important;
      }
      #template-editor .tpl-video-emotion-refs-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
        gap: 8px;
      }
      #template-editor .tpl-video-emotion-ref {
        position: relative;
        display: block;
        border: 1px solid var(--border);
        border-radius: 10px;
        overflow: hidden;
        cursor: pointer;
        aspect-ratio: 1 / 1;
        background: rgba(255, 255, 255, .03);
      }
      #template-editor .tpl-video-emotion-ref img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      #template-editor .tpl-video-emotion-ref > span {
        position: absolute;
        left: 4px;
        top: 4px;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: rgba(0, 0, 0, .45);
        color: #fff;
        font-size: 11px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      #template-editor .tpl-video-emotion-ref.is-selected {
        box-shadow: 0 0 0 2px #fff, inset 0 0 0 3px var(--accent);
      }
      #template-editor .tpl-video-emotion-ref.is-selected::after {
        content: '\2713';
        position: absolute;
        top: 4px;
        right: 4px;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: var(--accent);
        color: #fff;
        font-size: 12px;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 2;
      }
      @media (max-width: 760px) {
        #template-editor .tpl-info-grid,
        #template-editor .tpl-info-fields,
        #template-editor .tpl-info-row {
          grid-template-columns: minmax(0, 1fr);
        }
        #template-editor .tpl-info-grid {
          align-items: start;
        }
        #tpl-category-trigger {
          height: auto;
          padding: 8px 14px;
          line-height: 20px;
        }
        #tpl-category-trigger > span:first-child {
          min-width: 0;
          overflow-wrap: anywhere;
        }
        #template-editor .tpl-postprocess-card .tpl-effect-controls {
          grid-template-columns: 1fr;
          gap: 8px;
        }
        #template-editor .tpl-postprocess-card .tpl-effect-setting-item + .tpl-effect-setting-item {
          padding-top: 8px;
          border-top: 1px solid var(--border);
        }
      }
      #template-editor #tpl-test-button {
        width: 100%;
        justify-content: center;
      }
      #template-editor #tpl-postprocess-button {
        width: 100%;
        justify-content: center;
      }
      #template-editor #tpl-merge-sample-button {
        width: 100%;
        justify-content: center;
      }
      #template-editor #tpl-video-merge-sample-button {
        width: 100%;
        justify-content: center;
      }
      #template-editor .tpl-segment-box {
        border: 1px solid var(--border);
        border-radius: 14px;
        background: rgba(255,255,255,.025);
        padding: 12px;
      }
      #template-editor .tpl-segment-row {
        display: grid;
        grid-template-columns: 70px minmax(0, 1fr) minmax(0, 1fr);
        gap: 10px;
        align-items: center;
        margin-top: 10px;
        color: var(--muted);
        font-size: 12px;
      }
      #template-editor .tpl-segment-row label {
        display: grid;
        grid-template-columns: 38px minmax(0, 1fr);
        gap: 6px;
        align-items: center;
        color: var(--muted);
      }
      #template-editor .tpl-video-assets-row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
      }
      #template-editor .tpl-prompt-editor {
        display: grid;
        gap: 8px;
      }
      #template-editor .tpl-prompt-section-label {
        font-size: 12px;
        font-weight: 640;
        color: var(--muted);
        letter-spacing: .02em;
      }
      #template-editor .tpl-prompt-media-box {
        border: 1px solid var(--border);
        border-radius: 18px;
        padding: 18px 20px 20px;
        background: rgba(255,255,255,.025);
        display: grid;
        gap: 14px;
      }
      #template-editor .tpl-prompt-media-row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
        align-items: start;
      }
      #template-editor .tpl-prompt-media-strip {
        display: grid;
        gap: 8px;
        align-content: start;
      }
      #template-editor .tpl-prompt-settings-row,
      #template-editor .tpl-video-settings-row {
        display: grid;
        gap: 12px;
        min-width: 0;
      }
      #template-editor .tpl-prompt-settings-row {
        grid-template-columns: repeat(4, minmax(0, 220px));
      }
      #template-editor .tpl-video-settings-row {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 8px;
      }
      #template-editor .tpl-prompt-settings-mount {
        display: contents;
      }
      #template-editor .tpl-prompt-setting-card {
        min-height: 48px;
        border: 1px solid var(--border);
        border-radius: 14px;
        background: rgba(255,255,255,.035);
        padding: 6px 12px;
        display: grid;
        gap: 2px;
        min-width: 0;
      }
      #template-editor .tpl-prompt-settings-row label,
      #template-editor .tpl-video-settings-row label {
        font-size: 12px;
        color: var(--muted);
      }
      #template-editor .tpl-prompt-channel-control {
        min-width: 0;
      }
      #template-editor .tpl-prompt-settings-row select,
      #template-editor .tpl-video-settings-row select {
        width: 100%;
        min-height: 28px;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        padding: 0 24px 0 0;
      }
      #template-editor .tpl-prompt-content-box {
        min-width: 0;
      }
      #template-editor #tpl-edit-prompt {
        aspect-ratio: auto;
        height: auto;
        min-height: 64px;
        border: 0;
        border-radius: 0;
        padding: 0;
        background: transparent;
        box-shadow: none;
        resize: vertical;
        overflow: auto;
      }
      #template-editor #tpl-edit-prompt:focus {
        border-color: transparent;
        box-shadow: none;
      }
      #template-editor .tpl-prompt-thumb-row {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
      }
      #template-editor .tpl-prompt-thumb {
        width: 96px;
        height: 96px;
        border: 1px dashed var(--border);
        border-radius: 14px;
        background: rgba(255,255,255,.035);
        color: var(--muted);
        display: grid;
        place-items: center;
        position: relative;
        overflow: hidden;
        cursor: pointer;
        text-align: center;
        padding: 8px;
      }
      #template-editor .tpl-prompt-add-inline {
        min-height: 96px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: var(--muted);
      }
      #template-editor .tpl-prompt-add-button {
        width: 30px;
        height: 30px;
        border: 1px solid var(--border);
        border-radius: 999px;
        background: rgba(255,255,255,.055);
        color: var(--muted);
        display: inline-grid;
        place-items: center;
        font-size: 18px;
        line-height: 1;
        cursor: pointer;
      }
      #template-editor .tpl-prompt-add-button:hover {
        border-color: var(--accent);
        color: var(--fg);
        background: color-mix(in oklch, var(--accent) 8%, transparent);
      }
      #template-editor .tpl-prompt-add-text {
        font-size: 13px;
        color: var(--muted);
        white-space: nowrap;
      }
      #template-editor .tpl-prompt-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      #template-editor .tpl-prompt-thumb-token {
        position: absolute;
        left: 6px;
        bottom: 6px;
        padding: 2px 6px;
        border-radius: 999px;
        background: rgba(0,0,0,.58);
        color: #fff;
        font-size: 10px;
      }
      #template-editor .tpl-prompt-thumb-delete {
        display: none;
        position: absolute;
        right: 6px;
        top: 6px;
        width: 20px;
        height: 20px;
        border-radius: 999px;
        background: rgba(0,0,0,.68);
        color: #fff;
        line-height: 20px;
        text-align: center;
      }
      #template-editor .tpl-prompt-thumb:hover .tpl-prompt-thumb-delete {
        display: block;
      }
      #template-editor .tpl-upload-card:hover .tpl-prompt-thumb-delete {
        display: block;
      }
      .style-edit-overlay .tpl-prompt-thumb-delete,
      .tpl-sample-reference-upload-card .tpl-prompt-thumb-delete,
      .style-card-sample .style-card-sample-delete {
        display: none;
        position: absolute;
        right: 6px;
        top: 6px;
        z-index: 4;
        width: 20px;
        height: 20px;
        border: 0;
        border-radius: 999px;
        background: rgba(0,0,0,.68);
        color: #fff;
        line-height: 20px;
        text-align: center;
        cursor: pointer;
        padding: 0;
      }
      .style-edit-overlay .tpl-upload-card,
      .tpl-sample-reference-upload-card,
      .style-card-sample { position: relative; }
      .tpl-prompt-thumb-image {
        display: block;
        width: 100%;
        height: 100%;
        border: 0;
        padding: 0;
        background: transparent;
        color: inherit;
        cursor: pointer;
      }
      .style-edit-overlay .tpl-upload-card:hover .tpl-prompt-thumb-delete,
      .tpl-sample-reference-upload-card:hover .tpl-prompt-thumb-delete,
      .style-card-sample:hover .style-card-sample-delete { display: block; }
      .style-edit-overlay .tpl-prompt-thumb-delete:hover,
      .tpl-sample-reference-upload-card .tpl-prompt-thumb-delete:hover,
      .style-card-sample .style-card-sample-delete:hover { background: rgba(220,60,60,.9); }
      #template-editor .tpl-prompt-user-modal-backdrop {
        position: fixed;
        inset: 0;
        z-index: 9999;
        display: grid;
        place-items: start center;
        padding: 8vh 20px 20px;
        background: rgba(0,0,0,.38);
      }
      #template-editor .tpl-prompt-user-modal {
        width: min(460px, calc(100vw - 40px));
        max-height: calc(100vh - 64px);
        overflow: auto;
        border: 1px solid var(--border);
        border-radius: 18px;
        padding: 16px;
        background: var(--surface);
        box-shadow: var(--shadow);
      }
      #template-editor .tpl-prompt-user-preview-card {
        height: min(42vh, 360px);
        min-height: 180px;
      }
      #template-editor .tpl-prompt-user-modal-actions {
        position: sticky;
        bottom: -16px;
        margin: 4px -16px -16px;
        padding: 12px 16px 16px;
        background: var(--surface);
      }
      .emotion-library-backdrop {
        position: fixed;
        inset: 0;
        z-index: 10000;
        display: grid;
        place-items: center;
        padding: 20px;
        background: rgba(0,0,0,.45);
      }
      .emotion-prompt-editor-modal {
        width: min(760px, calc(100vw - 40px));
      }

      .emotion-prompt-editor-modal textarea {
        width: 100%;
        min-height: 360px;
        box-sizing: border-box;
        resize: vertical;
        font-family: var(--font-mono);
        line-height: 1.55;
      }

      .emotion-library-modal {
        width: min(560px, calc(100vw - 40px));
        max-height: calc(100vh - 80px);
        overflow: auto;
        border: 1px solid var(--border);
        border-radius: 18px;
        padding: 16px;
        background: var(--surface);
        box-shadow: var(--shadow);
        display: flex;
        flex-direction: column;
        gap: 14px;
      }
      .emotion-library-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
      }
      .emotion-library-body {
        display: flex;
        flex-direction: column;
        gap: 12px;
      }
      .emotion-library-body textarea {
        border-radius: 10px;
        padding: 8px;
      }
      .emotion-library-actions {
        display: flex;
        justify-content: flex-end;
      }
      #template-editor .tpl-video-prompt-box {
        border: 1px solid var(--border);
        border-radius: 18px;
        padding: 18px 20px 20px;
        background: rgba(255,255,255,.025);
        display: grid;
        gap: 14px;
      }
      #template-editor .tpl-video-media-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 6px;
        align-items: start;
      }
      #template-editor #tpl-video-reference-strip {
        min-width: 0;
      }
      #template-editor #tpl-video-source-entry {
        display: flex;
        align-items: center;
      }
      #template-editor .tpl-video-source-entry-inline {
        position: relative;
      }
      #template-editor .tpl-video-source-entry-inline.is-open {
        z-index: 60;
      }
      #template-editor .tpl-video-source-popover {
        position: absolute;
        z-index: 60;
        top: calc(50% + 25px);
        left: 0;
        display: grid;
        gap: 3px;
        width: 210px;
        padding: 6px;
        border: 1px solid var(--border-strong);
        border-radius: 8px;
        background: var(--surface);
        box-shadow: 0 14px 36px rgba(0,0,0,.38);
      }
      #template-editor .tpl-video-source-popover button {
        min-height: 36px;
        padding: 0 10px;
        border-radius: 6px;
        color: var(--fg);
        font-size: 13px;
        text-align: left;
        white-space: nowrap;
      }
      #template-editor .tpl-video-source-popover button:hover {
        background: rgba(255,255,255,.07);
      }
      #template-editor .tpl-video-source-popover button:disabled {
        color: var(--subtle);
        cursor: not-allowed;
        opacity: .6;
      }
      #template-editor .tpl-video-source-popover button:disabled:hover {
        background: transparent;
      }
      #template-editor .tpl-video-source-panel {
        display: grid;
      }
      #template-editor .tpl-video-source-preview-stage {
        position: absolute;
        inset: 0;
        display: grid;
        place-items: center;
        pointer-events: auto;
        padding: 16px;
        box-sizing: border-box;
      }
      #template-editor .tpl-video-prompt-content {
        width: 100%;
        min-height: 64px;
        height: auto;
        border: 0;
        border-radius: 0;
        padding: 0;
        background: transparent;
        box-shadow: none;
        resize: vertical;
        overflow: auto;
      }
      #template-editor .tpl-video-prompt-content:focus {
        border-color: transparent;
        box-shadow: none;
      }
      #template-editor .tpl-video-source-modal-backdrop,
      #template-editor .tpl-video-segment-modal-backdrop {
        position: fixed;
        inset: 0;
        z-index: 9999;
        display: grid;
        place-items: start center;
        padding: 8vh 20px 20px;
        background: rgba(0,0,0,.38);
      }
      #template-editor .tpl-video-source-modal,
      #template-editor .tpl-video-segment-modal {
        width: min(520px, calc(100vw - 40px));
        max-height: calc(100vh - 64px);
        overflow: auto;
        border: 1px solid var(--border);
        border-radius: 18px;
        padding: 16px;
        background: var(--surface);
        box-shadow: var(--shadow);
      }
      #template-editor #tpl-video-source-box {
        min-height: 132px;
        color: var(--muted);
      }
      #template-editor .tpl-video-source-error {
        margin-top: 10px;
        color: var(--danger);
        font-size: 12px;
      }
      #template-editor .tpl-video-segment-modal {
        padding: 16px;
      }
      #template-editor .tpl-video-segment-modal-list {
        display: grid;
        gap: 10px;
      }
      #template-editor .tpl-segment-row {
        display: grid;
        grid-template-columns: 80px 1fr 1fr;
        gap: 10px;
        align-items: center;
      }
      #template-editor .tpl-video-modal-actions {
        display: flex;
        justify-content: flex-end;
        margin-top: 14px;
      }
      #template-editor #tpl-video-segment-error {
        margin-top: 10px;
        color: var(--danger);
        font-size: 12px;
      }
      #template-editor .tpl-generate-video-card {
        height: 100%;
      }
      #template-editor .tpl-video-postprocess-card {
        height: 100%;
      }
      #template-editor .tpl-generate-video-card .preview-wrapper,
      #template-editor .tpl-video-postprocess-card .preview-wrapper {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        min-height: 0;
        overflow: hidden;
        border: 1px solid var(--border);
        border-radius: 14px;
        background: rgba(255,255,255,.035);
      }
      #template-editor .tpl-generate-video-card #tpl-video-test-result {
        flex: 1 1 auto;
        display: grid;
        place-items: center;
        width: 100%;
        height: 100%;
        min-height: 0;
        aspect-ratio: auto;
        border: 0;
        border-radius: 0;
        background: transparent;
      }
      #template-editor .tpl-video-postprocess-card #tpl-video-postprocess-result {
        border: 0;
        border-radius: 0;
        background: transparent;
      }
      #template-editor .tpl-video-settings-row .tpl-prompt-setting-card:has(#tpl-video-animation-prompts) {
        display: none !important;
      }
      #template-editor .tpl-video-postprocess-card .tpl-effect-controls {
        display: flex;
        align-items: stretch;
        flex-wrap: nowrap;
        overflow: visible;
        grid-template-columns: none;
        border-top: 1px solid var(--border);
        border-radius: 0;
        background: transparent;
        backdrop-filter: none;
        padding: 8px 10px;
        gap: 8px;
      }
      #template-editor .tpl-video-postprocess-card .tpl-effect-setting-item:has(#tpl-video-split-mode) {
        display: none !important;
      }
      #template-editor .tpl-video-postprocess-card .tpl-effect-setting-item {
        flex: 1 1 0;
        min-width: 0;
        min-height: 36px;
        display: flex;
        align-items: center;
        gap: 8px;
        border: 0;
        border-radius: 0;
        background: transparent;
        padding: 0;
      }
      #template-editor .tpl-video-postprocess-card .tpl-effect-setting-control .btn {
        width: 100%;
        padding: 4px 8px;
        font-size: 12px;
        white-space: nowrap;
      }
      #template-editor .tpl-generate-video-card > .btn,
      #template-editor .tpl-video-postprocess-card > .btn {
        flex: 0 0 auto;
      }
      #template-editor .tpl-video-test-output {
        display: grid;
        gap: 12px;
      }
      #template-editor .tpl-video-test-output #tpl-video-test-result {
        width: 100%;
        min-height: 0;
        aspect-ratio: 1 / 1;
      }
      #template-editor #tpl-video-test-result,
      #template-editor #tpl-video-postprocess-result {
        overflow: hidden;
      }
      #template-editor .tpl-media-result-content {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        min-width: 0;
        min-height: 0;
        overflow: hidden;
      }
      #template-editor .tpl-media-result-stage {
        position: relative;
        flex: 1 1 auto;
        display: grid;
        place-items: center;
        width: 100%;
        min-width: 0;
        min-height: 0;
        overflow: hidden;
        padding: 8px;
      }
      #template-editor .tpl-result-media {
        position: absolute;
        inset: 8px;
        display: block;
        width: calc(100% - 16px);
        height: calc(100% - 16px);
        max-width: none;
        max-height: none;
        object-fit: contain;
        background: transparent;
      }
      #template-editor .tpl-video-gif-grid {
        display: grid;
        width: 100%;
        height: 100%;
        min-width: 0;
        min-height: 0;
        grid-auto-rows: minmax(0, 1fr);
        gap: 8px;
      }
      #template-editor .tpl-video-gif-item {
        display: grid;
        grid-template-rows: minmax(0, 1fr) auto;
        min-width: 0;
        min-height: 0;
        overflow: hidden;
        gap: 4px;
        color: var(--muted);
        font-size: 11px;
        text-align: center;
      }
      #template-editor .tpl-video-gif-item .tpl-result-media {
        position: static;
        inset: auto;
        width: 100%;
        height: 100%;
        min-width: 0;
        min-height: 0;
        object-fit: contain;
        background: transparent;
      }
      #template-editor .tpl-video-gif-item.tpl-selectable {
        position: relative;
        cursor: pointer;
      }
      #template-editor .tpl-video-gif-item.is-selected {
        box-shadow: inset 0 0 0 3px var(--accent);
        z-index: 1;
      }
      #template-editor .tpl-video-gif-item .tpl-select-badge {
        display: none;
      }
      #template-editor .tpl-video-gif-item.is-selected .tpl-select-badge {
        display: flex;
        position: absolute;
        top: 4px;
        right: 4px;
        width: 18px;
        height: 18px;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: var(--accent);
        color: #fff;
        font-size: 11px;
        line-height: 1;
      }
      #template-editor .tpl-video-gif-item.is-selected .tpl-select-badge::after {
        content: '\2713';
        font-weight: 700;
      }
      @media (max-width: 760px) {
        #template-editor .tpl-video-media-row,
        #template-editor .tpl-prompt-settings-row,
        #template-editor .tpl-video-settings-row {
          grid-template-columns: 1fr;
        }
        #template-editor #tpl-video-reference-strip {
          grid-template-columns: 1fr;
        }
      }
      #template-editor .tpl-user-upload-panel {
        display: grid;
        gap: 12px;
      }
      #template-editor .tpl-user-upload-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
      }
      #template-editor input#tpl-edit-description {
        height: 38px;
        min-height: 38px;
      }
      #template-editor .tpl-thumb-asset #tpl-thumb-panel {
        width: 338px !important;
      }

      .emotion-cat-card {
        margin-bottom: 10px;
        padding-bottom: 12px;
        border-bottom: 1px solid var(--border);
        transition: transform .2s ease;
      }

      .emotion-cat-card:last-child {
        border-bottom: 0;
        padding-bottom: 0;
      }

      .emotion-cat-head {
        display: flex;
        align-items: center;
        gap: 8px;
        position: relative;
        margin-bottom: 6px;
      }

      .emotion-cat-sort-handle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        flex: 0 0 auto;
        padding: 0;
        border: 0;
        background: transparent;
        color: var(--muted);
        font-size: 12px;
        font-weight: 800;
        letter-spacing: -2px;
        line-height: 1;
        cursor: grab;
        touch-action: none;
        user-select: none;
      }

      .emotion-cat-sort-placeholder {
        opacity: 0.35;
      }

      .emotion-cat-sort-ghost {
        position: fixed;
        z-index: 13000;
        margin: 0;
        pointer-events: none;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 12px;
        box-shadow: 0 18px 52px rgba(0, 0, 0, 0.35);
        opacity: 0.96;
      }

      body.emotion-cat-sorting {
        cursor: grabbing;
      }

      .emotion-cat-menu-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        flex: 0 0 auto;
        padding: 0;
        border: 0;
        border-radius: 7px;
        background: transparent;
        color: inherit;
        font-size: 16px;
        line-height: 1;
        cursor: pointer;
      }

      .emotion-cat-menu-wrap {
        position: relative;
        display: inline-flex;
        flex: 0 0 auto;
      }

      .emotion-cat-name {
        font-size: 13px;
        font-weight: 600;
        color: var(--accent);
        line-height: 1.3;
      }

      .emotion-cat-name-input {
        color: var(--accent);
      }

      .emotion-cat-name-input {
        width: auto;
        min-width: 96px;
        max-width: 220px;
        padding: 2px 6px;
        border: 1px solid var(--border);
        border-radius: 6px;
        background: var(--surface);
        color: var(--text);
        font: inherit;
        font-size: 13px;
      }

      .emotion-cat-menu {
        position: absolute;
        right: 0;
        top: calc(100% + 4px);
        z-index: 1200;
        min-width: 100px;
        padding: 4px;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 8px;
        box-shadow: var(--shadow);
        display: none;
        flex-direction: column;
      }

      .emotion-cat-menu:not([hidden]) {
        display: flex;
        flex-direction: column;
      }

      .emotion-cat-menu button {
        border: 0;
        background: transparent;
        color: var(--text);
        padding: 7px 10px;
        text-align: left;
        border-radius: 6px;
        cursor: pointer;
        font: inherit;
        font-size: 13px;
      }

      .emotion-cat-menu button:hover {
        background: rgba(40, 163, 131, 0.12);
      }

      .emotion-cat-menu [data-emotion-category-delete] {
        color: #d9534f;
      }

      .emotion-cat-textarea {
        min-height: 96px;
        width: 100%;
        box-sizing: border-box;
        font: inherit;
        font-size: 13px;
        line-height: 1.5;
        resize: vertical;
      }

      .emotion-cat-textarea::placeholder {
        color: var(--muted);
      }

      .emotion-cat-add-row {
        display: flex;
        gap: 8px;
        margin-top: 12px;
      }

      .emotion-cat-add-input {
        flex: 1;
        font: inherit;
        font-size: 13px;
      }

      .emotion-cat-add-input::placeholder {
        color: var(--muted);
      }

      .emotion-cat-save-row {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-top: 12px;
      }

      .emotion-cat-hint {
        color: var(--muted);
        font-size: 12px;
      }

      .emotion-cat-items {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }

      .emotion-cat-item {
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 4px 6px;
        background: transparent;
        border: 1px solid var(--border);
        border-radius: 8px;
        font-size: 13px;
        user-select: none;
        transition: transform .2s ease;
      }

      .emotion-cat-add-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        flex: 0 0 auto;
        padding: 0;
        border: 1px solid var(--border);
        border-radius: 8px;
        background: transparent;
        color: var(--muted);
        font-size: 14px;
        line-height: 1;
        cursor: pointer;
      }

      .emotion-cat-add-btn:hover {
        border-color: var(--border-strong);
        color: var(--text);
      }

      .emotion-cat-item-placeholder {
        opacity: 0.3;
      }

      .emotion-cat-item-ghost {
        position: fixed;
        z-index: 13000;
        margin: 0;
        pointer-events: none;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 8px;
        box-shadow: 0 18px 52px rgba(0, 0, 0, 0.35);
        opacity: 0.96;
      }

      .emotion-cat-item-drag {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 18px;
        height: 18px;
        padding: 0;
        border: 0;
        background: transparent;
        color: var(--muted);
        font-size: 12px;
        line-height: 1;
        cursor: grab;
        touch-action: none;
      }

      .emotion-cat-item-name {
        max-width: 180px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .emotion-cat-item-name.style-item-off {
        color: var(--muted);
        opacity: 0.65;
      }

      .emotion-cat-item-menu-wrap {
        position: relative;
        display: inline-flex;
        flex: 0 0 auto;
      }

      .emotion-cat-item-menu-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
        padding: 0;
        border: 0;
        border-radius: 6px;
        background: transparent;
        color: var(--muted);
        font-size: 15px;
        line-height: 1;
        cursor: pointer;
      }

      .emotion-cat-item-menu {
        position: absolute;
        right: 0;
        top: calc(100% + 4px);
        z-index: 1200;
        min-width: 100px;
        padding: 4px;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 8px;
        box-shadow: var(--shadow);
        display: none;
        flex-direction: column;
      }

      .emotion-cat-item-menu:not([hidden]) {
        display: flex;
        flex-direction: column;
      }

      .emotion-cat-menu.emotion-cat-item-menu-up,
      .emotion-cat-item-menu.emotion-cat-item-menu-up {
        top: auto;
        bottom: calc(100% + 4px);
      }

      .emotion-cat-menu.emotion-cat-item-menu-left,
      .emotion-cat-item-menu.emotion-cat-item-menu-left {
        right: auto;
        left: 0;
      }

      .emotion-cat-item-menu button {
        border: 0;
        background: transparent;
        color: var(--text);
        padding: 7px 10px;
        text-align: left;
        border-radius: 6px;
        cursor: pointer;
        font: inherit;
        font-size: 13px;
      }

      .emotion-cat-item-menu button:hover {
        background: rgba(40, 163, 131, 0.12);
      }

      .emotion-cat-item-menu [data-emotion-item-delete] {
        color: #d9534f;
      }

      .emotion-cat-portal-menu {
        position: fixed;
        z-index: 12000;
        min-width: 100px;
        padding: 4px;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 8px;
        box-shadow: var(--shadow);
        display: flex;
        flex-direction: column;
      }

      .emotion-cat-portal-menu button {
        border: 0;
        background: transparent;
        color: var(--text);
        padding: 7px 10px;
        text-align: left;
        border-radius: 6px;
        cursor: pointer;
        font: inherit;
        font-size: 13px;
      }

      .emotion-cat-portal-menu button:hover {
        background: rgba(40, 163, 131, 0.12);
      }

      .emotion-cat-portal-menu .emotion-cat-portal-danger {
        color: #d9534f;
      }

      .emotion-edit-overlay {
        position: fixed;
        inset: 0;
        z-index: 12000;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(0, 0, 0, 0.45);
      }

      .emotion-edit-dialog {
        width: min(480px, calc(100vw - 40px));
        padding: 18px;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 14px;
        box-shadow: var(--shadow);
      }

      .emotion-edit-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        font-size: 15px;
        font-weight: 600;
        margin-bottom: 12px;
      }

      .emotion-edit-close {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        padding: 0;
        border: 0;
        border-radius: 999px;
        background: transparent;
        color: var(--muted);
        font-size: 16px;
        line-height: 1;
        cursor: pointer;
      }

      .emotion-edit-close:hover {
        background: rgba(0, 0, 0, 0.06);
        color: var(--text);
      }

      .style-edit-overlay {
        z-index: 12500;
      }

      .style-edit-dialog {
        width: min(940px, calc(100vw - 32px));
        max-height: calc(100vh - 48px);
        display: flex;
        flex-direction: column;
        padding: 18px;
        overflow: hidden;
      }

      .style-edit-dialog-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        margin-bottom: 10px;
      }

      .style-edit-dialog-title {
        font-size: 15px;
        font-weight: 600;
      }

      .style-edit-dialog-close {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        padding: 0;
        border: 0;
        border-radius: 999px;
        background: transparent;
        color: var(--muted);
        font-size: 16px;
        line-height: 1;
        cursor: pointer;
      }

      .style-edit-dialog-close:hover {
        background: rgba(0, 0, 0, 0.06);
        color: var(--text);
      }

      .style-edit-dialog-body {
        min-height: 0;
        overflow: auto;
      }

      .emotion-edit-field {
        display: block;
        margin-bottom: 10px;
        font-size: 13px;
      }

      .emotion-edit-field input,
      .emotion-edit-field textarea {
        display: block;
        width: 100%;
        box-sizing: border-box;
        margin-top: 4px;
        font: inherit;
        font-size: 13px;
        line-height: 1.5;
      }

      .emotion-edit-field textarea {
        resize: vertical;
      }

      .emotion-edit-actions {
        display: flex;
        justify-content: flex-end;
        gap: 8px;
        margin-top: 14px;
      }

      .emotion-test-selector-head {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
        font-size: 12px;
        color: var(--muted);
        margin: 10px 0 8px;
      }

      .emotion-test-style-row {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
        margin-bottom: 8px;
        font-size: 12px;
        color: var(--muted);
      }

      .emotion-test-style-label {
        flex: 0 0 auto;
      }

      .emotion-test-style-select {
        min-width: 0;
        max-width: 220px;
        font: inherit;
        font-size: 13px;
      }

      .emotion-test-selector-count {
        color: var(--text);
        font-weight: 600;
      }

      .emotion-test-selector-body {
        max-height: 240px;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding-right: 4px;
      }

      .emotion-test-group-name {
        font-size: 12px;
        font-weight: 600;
        color: var(--muted);
        margin-bottom: 6px;
      }

      .emotion-test-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
      }

      .emotion-test-chip {
        border: 1px solid var(--border);
        border-radius: 8px;
        background: transparent;
        color: var(--text);
        font: inherit;
        font-size: 12px;
        padding: 5px 10px;
        cursor: pointer;
      }

      .emotion-test-chip.is-selected {
        border-color: #28a383;
        color: #28a383;
        font-weight: 700;
      }

      #template-editor .tpl-prompt-collapse {
        margin-top: 8px;
      }

      #template-editor .tpl-prompt-collapse-toggle {
        display: flex;
        align-items: center;
        gap: 6px;
        width: 100%;
        padding: 4px 0;
        border: 0;
        background: transparent;
        color: var(--muted);
        font: inherit;
        font-size: 12px;
        text-align: left;
        cursor: pointer;
      }

      #template-editor .tpl-prompt-collapse-toggle:hover {
        color: var(--text);
      }

      #template-editor .tpl-prompt-collapse-body {
        padding: 4px 0 8px;
        white-space: pre-wrap;
        word-break: break-word;
      }

      #template-editor .tpl-emotion-test-line {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px;
        min-width: 0;
      }

      #template-editor .tpl-emotion-test-trigger {
        flex: 0 0 auto;
        min-height: 30px;
        padding: 0 14px;
        border: 1px solid var(--border);
        border-radius: 6px;
        background: rgba(255,255,255,.055);
        color: var(--text);
        font: inherit;
        font-size: 13px;
        cursor: pointer;
        white-space: nowrap;
      }

      #template-editor .tpl-emotion-test-trigger:hover {
        border-color: var(--accent);
        color: var(--fg);
        background: color-mix(in oklch, var(--accent) 8%, transparent);
      }

      #template-editor .tpl-emotion-test-line-text {
        flex: 1 1 auto;
        min-width: 0;
        font-size: 13px;
        color: #28a383;
        font-weight: 600;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      #template-editor .tpl-emotion-test-line {
        margin: 2px 0 12px;
      }

      #template-editor .tpl-emotion-test-line[hidden],
      #template-editor .tpl-prompt-collapse[hidden] {
        display: none !important;
      }

      .emotion-edit-overlay .emotion-test-dialog {
        width: min(640px, calc(100vw - 40px));
      }

      /* 模板分类下拉：与「系列模板/独立模板」下拉一致的简洁样式 */
      .tpl-category-select {
        width: 100%;
        height: 38px;
        min-height: 38px;
        padding: 0 14px;
        border: 1px solid var(--border);
        border-radius: 14px;
        background: rgba(255,255,255,.055);
        color: var(--text);
        font: inherit;
        font-size: 14px;
        cursor: pointer;
      }
      .tpl-category-select:hover {
        border-color: var(--border-strong);
      }

      .emotion-test-selected-list {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 6px;
        margin-bottom: 10px;
        padding: 8px 10px;
        border: 1px solid var(--border);
        border-radius: 8px;
        background: rgba(255,255,255,.035);
      }

      .emotion-test-selected-title {
        font-size: 12px;
        color: var(--muted);
        margin-right: 2px;
      }

      .emotion-test-selected-pill {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 2px 4px 2px 8px;
        border-radius: 6px;
        background: rgba(40,163,131,.1);
        border: 1px solid rgba(40,163,131,.35);
        color: #28a383;
        font-size: 12px;
        font-weight: 600;
      }

      .emotion-test-pill-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 16px;
        height: 16px;
        padding: 0;
        border: 0;
        border-radius: 4px;
        background: transparent;
        color: #28a383;
        font-size: 13px;
        line-height: 1;
        cursor: pointer;
      }

      .emotion-test-pill-close:hover {
        background: rgba(217,83,79,.15);
        color: #d9534f;
      }

      .emotion-edit-overlay .emotion-test-dialog-body .emotion-test-selector-body {
        max-height: 340px;
      }

      .emotion-test-error {
        margin: 8px 0 10px;
        padding: 10px 12px;
        border: 1px solid rgba(217,83,79,.45);
        border-radius: 8px;
        background: rgba(217,83,79,.12);
        color: #ffaaa6;
        font-size: 13px;
        line-height: 1.5;
        white-space: pre-wrap;
      }

      .emotion-test-custom-grid input.has-error {
        border-color: #d9534f;
        box-shadow: 0 0 0 2px rgba(217,83,79,.16);
      }

      .emotion-test-custom-grid input.has-warning {
        border-color: #d6a637;
        box-shadow: 0 0 0 2px rgba(214,166,55,.16);
      }

      .emotion-test-dialog-body .emotion-test-selector-head {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
        font-size: 12px;
        color: var(--muted);
        margin: 4px 0 8px;
      }

      .thumb-grid-editor {
        width: 100%;
      }

      .thumb-grid-head {
        display: flex;
        align-items: center;
        gap: 4px;
        margin-bottom: 4px;
      }

      .thumb-grid-title {
        font-size: 12px;
        font-weight: 600;
        color: var(--text);
        white-space: nowrap;
      }

      .thumb-grid-mode {
        margin-left: 6px;
        font-weight: 600;
      }

      .thumb-grid-head select {
        height: 24px;
        min-height: 24px;
        font-size: 12px;
        padding: 0 16px 0 4px;
        border: 0;
        border-radius: 0;
        background-color: transparent;
        box-shadow: none;
        color: var(--text);
        outline: none;
        cursor: pointer;
        min-width: 0;
        flex: 0 1 auto;
      }

      .thumb-grid-counter {
        font-size: 11px;
        color: var(--muted);
        white-space: nowrap;
      }

      .thumb-grid-cells {
        display: grid;
        width: 315px;
        gap: 0;
        overflow: hidden;
        border: 1px solid var(--border-strong);
        border-radius: 14px;
        background: transparent;
      }

      .style-samples-grid {
        width: 100%;
      }

      .thumb-grid-cell {
        position: relative;
        min-width: 0;
        min-height: 0;
        height: 100%;
        aspect-ratio: auto;
        border: 0;
        border-radius: 0;
        overflow: hidden;
        background: transparent;
        user-select: none;
      }

      .thumb-grid-cell.is-empty {
        display: flex;
        align-items: center;
        justify-content: center;
        border-style: dashed;
        background: transparent;
      }

      .thumb-grid-slot {
        font-size: 14px;
        color: var(--muted);
      }

      .thumb-grid-cell img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
      }

      .thumb-grid-cell.is-broken img {
        opacity: 0.25;
      }

      .thumb-grid-cell.is-dragging {
        opacity: 0.45;
      }

      .thumb-grid-drag {
        position: absolute;
        top: 1px;
        left: 1px;
        z-index: 2;
        width: 14px;
        height: 14px;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.45);
        color: #fff;
        font-size: 9px;
        cursor: grab;
        display: none;
      }

      .thumb-grid-remove {
        position: absolute;
        top: 1px;
        right: 1px;
        z-index: 2;
        width: 14px;
        height: 14px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.55);
        color: #fff;
        font-size: 9px;
        line-height: 1;
        cursor: pointer;
        align-items: center;
        justify-content: center;
        display: none;
      }

      .thumb-grid-cell:hover .thumb-grid-drag,
      .thumb-grid-cell:hover .thumb-grid-remove {
        display: inline-flex;
      }
.tpl-emotion-mode-options {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-left: 12px;
  color: var(--muted);
  font-size: 12px;
}

.tpl-emotion-mode-options label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 400;
}

.emotion-test-mode-choice {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 0 12px;
  border-bottom: 1px solid var(--border);
}

.emotion-test-mode-choice label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.emotion-test-custom-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 12px 0;
}

.emotion-test-custom-grid label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--muted);
  font-size: 12px;
}

.emotion-test-custom-grid input {
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
}

.emotion-test-dialog-actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}