/* ───────── AI 图片 v2 布局（参考 TopView 面板风格） ───────── */
    /* 注意：不做 max-width，左右整屏铺开；
       左侧 panel 固定 420px，右侧结果画廊吃掉全部剩余宽度一直到屏幕右缘。 */
    .aie-view { padding: 20px 24px 40px; }
    .aie-root {
      display: grid;
      grid-template-columns: 420px minmax(0, 1fr);
      gap: 24px;
      align-items: start;
      width: 100%;
    }
    @media (max-width: 960px) {
      .aie-root { grid-template-columns: 1fr; }
    }

    .aie-panel {
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 18px 22px 22px;
      position: sticky;
      top: 16px;
    }
    @media (max-width: 960px) { .aie-panel { position: static; } }

    .aie-panel-head {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 14px;
    }
    .aie-panel-head h2 {
      margin: 0;
      font-size: 18px;
      font-weight: 600;
      letter-spacing: 0.2px;
    }
    .aie-spacer { flex: 1; }
    .aie-icon-btn {
      width: 30px; height: 30px;
      border-radius: 8px;
      background: transparent;
      border: 1px solid var(--border);
      color: var(--fg-dim);
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: background 0.15s, color 0.15s, border-color 0.15s;
    }
    .aie-icon-btn:hover {
      background: var(--bg-soft);
      color: var(--fg);
      border-color: var(--border-strong);
    }
    .aie-icon-btn .ico { width: 14px; height: 14px; }

    .aie-tab-row {
      display: flex;
      gap: 4px;
      margin-bottom: 18px;
      border-bottom: 1px solid var(--border);
    }
    .aie-tab {
      background: transparent;
      border: 0;
      cursor: pointer;
      padding: 8px 14px;
      font-size: 13.5px;
      color: var(--fg-dim);
      border-bottom: 2px solid transparent;
      margin-bottom: -1px;
      transition: color 0.15s, border-color 0.15s;
    }
    .aie-tab:hover:not(:disabled) { color: var(--fg); }
    .aie-tab.active {
      color: var(--fg);
      border-bottom-color: var(--accent);
      font-weight: 600;
    }
    .aie-tab:disabled {
      opacity: 0.45;
      cursor: not-allowed;
    }

    .aie-field { margin-bottom: 16px; }
    .aie-field-label {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 12.5px;
      color: var(--fg-dim);
      margin-bottom: 8px;
      font-weight: 500;
    }
    .aie-label-hint {
      color: var(--fg-muted);
      font-size: 11.5px;
      font-weight: 400;
    }
    .aie-label-action {
      margin-left: auto;
      cursor: pointer;
      background: transparent;
      border: 0;
      color: var(--fg-muted);
      padding: 2px 6px;
      border-radius: 6px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .aie-label-action:hover { background: var(--bg-soft); color: var(--fg); }
    .aie-label-action .ico { width: 13px; height: 13px; }

    .aie-select {
      width: 100%;
      padding: 10px 12px;
      background: var(--bg-soft);
      border: 1px solid var(--border);
      border-radius: 10px;
      color: var(--fg);
      font-size: 13.5px;
      outline: none;
      font-family: inherit;
      box-sizing: border-box;
      transition: border-color 0.15s;
    }
    .aie-select:hover, .aie-select:focus { border-color: var(--border-strong); }

    /* 上传区：Import 大方块 + 已上传缩略 */
    .aie-upload-zone {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .aie-upload-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
      gap: 8px;
    }
    .aie-upload-grid:empty { display: none; }
    /* 本地上传 + 素材库 两个按钮横排 */
    .aie-upload-actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }
    .aie-thumb {
      position: relative;
      aspect-ratio: 1 / 1;
      border: 1px solid var(--border);
      border-radius: 10px;
      overflow: hidden;
      background: var(--bg-soft);
      min-width: 0;
    }
    .aie-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      background: var(--panel-alt);
    }
    .aie-thumb-idx {
      position: absolute;
      top: 6px;
      left: 6px;
      background: rgba(0, 0, 0, 0.55);
      color: #fff;
      font-size: 10.5px;
      padding: 1px 6px;
      border-radius: 999px;
      letter-spacing: 0.3px;
      z-index: 2;
    }
    .aie-thumb-del {
      position: absolute;
      top: 6px;
      right: 6px;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: rgba(0, 0, 0, 0.55);
      color: #fff;
      border: 0;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      line-height: 1;
      z-index: 2;
    }
    .aie-thumb-del:hover { background: rgba(239, 68, 68, 0.85); }
    .aie-thumb-name {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      padding: 3px 6px;
      background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.68) 100%);
      color: #fff;
      font-size: 10.5px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      z-index: 2;
    }
    .aie-thumb-broken::before {
      content: "预览失败";
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--fg-muted);
      font-size: 12px;
      background: color-mix(in srgb, var(--panel-alt) 90%, #000 10%);
      z-index: 1;
    }
    .aie-thumb-broken img { opacity: 0; }
    .aie-upload-box {
      width: 110px;
      height: 110px;
      background: var(--bg-soft);
      border: 1.5px dashed var(--border-strong);
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 4px;
      color: var(--fg-muted);
      cursor: pointer;
      transition: border-color 0.15s, background 0.15s, color 0.15s;
    }
    .aie-upload-box:hover {
      border-color: var(--accent);
      color: var(--fg);
      background: var(--panel-alt);
    }
    .aie-upload-icon { width: 22px; height: 22px; transform: rotate(180deg); }
    .aie-upload-text { font-size: 12px; letter-spacing: 0.3px; }

    .aie-textarea {
      width: 100%;
      min-height: 140px;
      padding: 12px 14px;
      background: var(--bg-soft);
      border: 1px solid var(--border);
      border-radius: 10px;
      color: var(--fg);
      font-size: 13.5px;
      resize: vertical;
      outline: none;
      font-family: inherit;
      line-height: 1.55;
      box-sizing: border-box;
      transition: border-color 0.15s;
    }
    .aie-textarea:focus { border-color: var(--border-strong); }

    /* 宽高比 / 分辨率：key-value 布局 */
    .aie-kv {
      display: grid;
      grid-template-columns: 72px 1fr;
      align-items: center;
      gap: 12px;
      margin-bottom: 14px;
    }
    .aie-kv-label {
      color: var(--fg-dim);
      font-size: 13px;
      font-weight: 500;
    }

    /* 统一样式的下拉控件：用于宽高比 / 分辨率 */
    .aie-pop {
      position: relative;
      display: block;
      width: 100%;
      min-width: 0;
      justify-self: stretch;
    }
    .aie-pop-trigger {
      width: 100%;
      min-height: 42px;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 14px;
      border: 1px solid var(--border);
      border-radius: 10px;
      background: var(--bg-soft);
      color: var(--fg);
      cursor: pointer;
      text-align: left;
      font-family: inherit;
      font-size: 13.5px;
      box-sizing: border-box;
      transition: border-color 0.15s, background 0.15s;
    }
    .aie-pop-trigger:hover,
    .aie-pop.is-open .aie-pop-trigger {
      border-color: var(--border-strong);
      background: color-mix(in srgb, var(--bg-soft) 88%, var(--panel) 12%);
    }
    .aie-pop-value {
      flex: 1;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-weight: 500;
    }
    .aie-pop-caret {
      width: 14px;
      height: 14px;
      color: var(--fg-muted);
      flex: 0 0 auto;
      transition: transform 0.18s ease;
    }
    .aie-pop.is-open .aie-pop-caret {
      transform: rotate(180deg);
    }
    /* 触发器里的小矩形比例预览（仅 aspect 有）。
       实际比例由子元素 .aie-pop-preview-shape 的 inline style 负责（JS 计算好 px），
       这样每个比例的矩形真的长得不一样。 */
    .aie-pop-preview {
      width: 20px;
      height: 20px;
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: var(--fg-muted);
    }
    .aie-pop-preview-shape {
      display: block;
      border: 1.5px solid currentColor;
      border-radius: 3px;
      box-sizing: border-box;
    }
    /* 展开的弹层菜单 */
    .aie-pop-menu {
      position: absolute;
      top: calc(100% + 6px);
      left: 0;
      right: 0;
      z-index: 30;
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: 12px;
      box-shadow: 0 12px 36px rgba(0, 0, 0, 0.24);
      padding: 6px;
      max-height: 360px;
      overflow: auto;
    }
    .aie-pop-menu[hidden] { display: none; }
    .aie-pop-option {
      width: 100%;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 12px;
      border: 0;
      background: transparent;
      color: var(--fg);
      cursor: pointer;
      border-radius: 8px;
      text-align: left;
      font-family: inherit;
      font-size: 13.5px;
      box-sizing: border-box;
    }
    .aie-pop-option:hover {
      background: color-mix(in srgb, var(--bg-soft) 82%, var(--panel) 18%);
    }
    .aie-pop-option.is-active {
      background: color-mix(in srgb, var(--accent) 14%, transparent);
      color: var(--fg);
    }
    .aie-pop-option-value {
      flex: 1;
      min-width: 0;
      font-weight: 500;
    }
    .aie-chipgroup {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }
    .aie-chip {
      padding: 6px 14px;
      font-size: 12.5px;
      background: var(--bg-soft);
      border: 1px solid var(--border);
      border-radius: 999px;
      cursor: pointer;
      color: var(--fg-dim);
      transition: all 0.15s;
      font-family: inherit;
    }
    .aie-chip.active {
      background: var(--accent);
      color: var(--bg);
      border-color: var(--accent);
      font-weight: 600;
    }
    .aie-chip:hover:not(.active) {
      color: var(--fg);
      border-color: var(--border-strong);
    }

    /* 图片数量滑块 */
    .aie-size-preview { margin-left: auto; font-variant-numeric: tabular-nums; }
    .aie-range {
      width: 100%;
      accent-color: var(--accent);
      cursor: pointer;
    }
    .aie-range-ticks {
      display: flex;
      justify-content: space-between;
      font-size: 11px;
      color: var(--fg-muted);
      padding: 2px 4px 0;
    }

    .aie-submit {
      width: 100%;
      padding: 12px;
      background: var(--ink);
      color: var(--bg);
      border: 0;
      border-radius: 10px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      margin-top: 6px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: filter 0.15s, transform 0.1s;
    }
    .aie-submit:hover:not(:disabled) { filter: brightness(1.08); }
    .aie-submit:active:not(:disabled) { transform: translateY(1px); }
    .aie-submit:disabled { opacity: 0.5; cursor: not-allowed; }
    .aie-submit .ico { width: 14px; height: 14px; }
    .aie-submit-hint {
      margin-top: 8px;
      font-size: 11.5px;
      color: var(--fg-muted);
      text-align: center;
    }

    /* 右侧结果画布 */
    .aie-canvas {
      display: flex;
      flex-direction: column;
      gap: 12px;
      min-height: 420px;
    }
    .aie-canvas-head {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 2px 4px 10px;
      border-bottom: 1px solid var(--border);
    }
    .aie-canvas-head h3 {
      margin: 0;
      font-size: 15px;
      font-weight: 600;
    }
    .aie-canvas-meta { font-size: 11.5px; color: var(--fg-muted); }
    /* 结果按时间分组；每组内按 DOM 顺序横向排列：从左到右，再换到下一行 */
    .aie-jobs {
      display: flex !important;
      flex-direction: column;
      gap: 16px !important;
      padding: 0 !important;
    }
    .aie-jobs .skills-empty {
      text-align: center;
      padding: 60px 16px;
      color: var(--fg-muted);
      font-size: 13px;
    }
    .aie-result-group {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .aie-result-group-time {
      font-size: var(--fs-11);
      color: var(--fg-dim);
      font-weight: var(--fw-semibold);
      letter-spacing: var(--ls-uppercase);
      text-transform: uppercase;
      padding: 4px 2px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }
    .aie-result-group-time::before {
      content: "";
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--brand-deep, #7a6cff);
      opacity: 0.55;
    }
    .aie-result-group-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      gap: 8px;
      align-items: start;
    }
    .aie-tile {
      break-inside: avoid;
      -webkit-column-break-inside: avoid;
      page-break-inside: avoid;
      margin: 0;
      position: relative;
      border-radius: 10px;
      overflow: hidden;
      background: var(--panel-alt);
    }
    .aie-tile-media {
      display: block;
      line-height: 0;
      width: 100%;
      padding: 0;
      border: 0;
      background: transparent;
      cursor: zoom-in;
      appearance: none;
      -webkit-appearance: none;
    }
    .aie-tile-media:focus-visible {
      outline: 2px solid var(--accent, #6aa3ff);
      outline-offset: 2px;
    }
    .aie-tile-media img {
      width: 100%;
      height: auto;
      display: block;
      background: #111;
      transition: transform 0.25s ease;
    }
    .aie-tile-broken {
      min-height: 180px;
      background: linear-gradient(180deg, rgba(48, 48, 58, 0.18), rgba(28, 28, 34, 0.28));
    }
    .aie-tile-broken .aie-tile-media {
      position: relative;
      min-height: 180px;
      display: block;
    }
    .aie-tile-broken .aie-tile-media::after {
      content: "图片加载失败";
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(255, 255, 255, 0.82);
      font-size: 12px;
      letter-spacing: 0.2px;
      background: linear-gradient(180deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.36));
    }
    .aie-tile-broken .aie-tile-media img { opacity: 0; }
    .aie-tile:hover .aie-tile-media img {
      transform: scale(1.015);
    }
    .aie-tile-index {
      position: absolute;
      top: 10px;
      left: 14px;
      font-size: 28px;
      font-weight: 700;
      color: #fff;
      text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
      letter-spacing: 0.5px;
      z-index: 2;
      pointer-events: none;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }
    .aie-tile-meta {
      position: absolute;
      top: 8px;
      right: 8px;
      display: flex;
      gap: 4px;
      z-index: 2;
      opacity: 0;
      transition: opacity 0.18s;
      pointer-events: none;
    }
    .aie-tile:hover .aie-tile-meta,
    .aie-tile-failed .aie-tile-meta,
    .aie-tile-pending .aie-tile-meta {
      opacity: 1;
    }
    .aie-tile-meta-chip {
      font-size: 10.5px;
      padding: 2px 7px;
      border-radius: 999px;
      background: rgba(0, 0, 0, 0.55);
      color: #fff;
      backdrop-filter: blur(4px);
      white-space: nowrap;
    }
    .aie-tile-actions {
      position: absolute;
      left: 8px;
      right: 8px;
      bottom: 8px;
      display: flex;
      gap: 6px;
      justify-content: center;
      opacity: 0;
      transform: translateY(4px);
      transition: opacity 0.18s, transform 0.18s;
      pointer-events: none;
      z-index: 3;
    }
    .aie-tile:hover .aie-tile-actions,
    .aie-tile-failed .aie-tile-actions,
    .aie-tile-pending .aie-tile-actions {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }
    .aie-tile-btn {
      padding: 5px 12px;
      font-size: 11.5px;
      background: rgba(0, 0, 0, 0.65);
      color: #fff;
      border: 0;
      border-radius: 999px;
      cursor: pointer;
      backdrop-filter: blur(6px);
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-family: inherit;
      line-height: 1.2;
      transition: background 0.15s;
    }
    .aie-tile-btn,
    a.aie-tile-btn { text-decoration: none; }
    .aie-tile-btn:hover { background: rgba(0, 0, 0, 0.85); }
    .aie-tile-btn-danger:hover { background: rgba(220, 38, 38, 0.88); }
    .aie-tile-btn .ico { width: 11px; height: 11px; }

    /* 失败 / 处理中卡片 */
    .aie-tile-failed,
    .aie-tile-pending {
      aspect-ratio: 3 / 4;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px 16px;
    }
    .aie-tile-failed {
      background: linear-gradient(180deg, rgba(120, 20, 20, 0.22), rgba(60, 10, 10, 0.28));
    }
    .aie-tile-pending {
      background: linear-gradient(180deg, rgba(40, 40, 60, 0.22), rgba(20, 20, 30, 0.28));
    }
    .aie-tile-fail-body {
      text-align: center;
    }
    .aie-tile-fail-icon {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      border: 1.5px solid currentColor;
      font-size: 16px;
      font-weight: 700;
      line-height: 25px;
      margin: 0 auto 10px;
      color: rgba(255, 130, 130, 0.9);
    }
    .aie-tile-pending .aie-tile-fail-icon {
      color: rgba(200, 200, 220, 0.8);
      border-style: dashed;
      animation: aieSpin 1.6s linear infinite;
    }
    @keyframes aieSpin { to { transform: rotate(360deg); } }
    .aie-tile-fail-text {
      font-size: 11.5px;
      line-height: 1.45;
      color: rgba(255, 150, 150, 0.88);
      max-width: 200px;
      margin: 0 auto;
      word-break: break-word;
    }
    .aie-tile-pending .aie-tile-fail-text { color: rgba(200, 200, 220, 0.75); }

    /* OSS 本地上传控件 */
    .ims-upload-row {
      display: flex;
      align-items: center;
      gap: 8px;
      margin: 4px 0 6px;
      font-size: var(--fs-12);
      flex-wrap: wrap;
    }
    .ims-upload-btn {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 5px 11px;
      border-radius: 7px;
      background: var(--panel);
      border: 1px dashed var(--border);
      color: var(--fg-muted);
      cursor: pointer;
      font-size: var(--fs-12);
      transition: background 0.15s, border-color 0.15s, color 0.15s;
    }
    .ims-upload-btn:hover:not(:disabled) {
      background: color-mix(in srgb, var(--accent) 10%, var(--panel));
      border-color: var(--accent);
      color: var(--fg);
    }
    .ims-upload-btn:disabled { cursor: not-allowed; opacity: 0.6; }
    .ims-upload-hint {
      color: var(--fg-muted);
      font-size: var(--fs-12);
    }
    .ims-upload-progress {
      flex: 1;
      min-width: 120px;
      display: none;
      align-items: center;
      gap: 8px;
      color: var(--fg-muted);
      font-size: var(--fs-12);
    }
    .ims-upload-progress.show { display: flex; }
    .ims-upload-bar {
      flex: 1;
      height: 6px;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 4px;
      overflow: hidden;
    }
    .ims-upload-bar-fill {
      height: 100%;
      width: 0%;
      background: linear-gradient(90deg, #8b5cf6, #6366f1);
      transition: width 0.15s ease;
    }
    .ims-upload-progress.err .ims-upload-bar-fill {
      background: #ef4444;
    }