/*
 * Studio v3 — 工具升级第一期（三种生成方式），配 js/studio-v3.js。
 * 新元素都是 .tu-* 类，只有 js/studio-v3.js 会生成；改到 v2 已有元素的规则全部挂在
 * html.studio-v3-ready 下 —— v3 脚本没跑起来时这些规则不生效，页面就是原来的 v2。
 * 尺寸体系（founder 10-22）：字号 11/12/13/14、图标 14/16/20、圆角 10/14/999。
 */

/* ---------- 改到 v2 已有元素的地方 ---------- */
/* 裁剪 / 旋转挪进大图预览（缩略图下只留「换图」） */
html.studio-v3-ready .v2-card .v2-local-only { display: none !important; }
/* AI 点子、线稿提示只在首帧动画里出现（founder 10-22） */
html.studio-v3-ready .v2-vcard:not([data-tu-mode="first"]) .v2-ideas,
html.studio-v3-ready .v2-vcard:not([data-tu-mode="first"]) .v2-lineart { display: none !important; }
html.studio-v3-ready .v2-vcard[data-tu-mode="reference"] .v2-slot-count { display: none; }
html.studio-v3-ready #custom-prompt[hidden] { display: none !important; }
/* 设置胶囊下拉菜单统一米黄（founder 10-22：纯白和白卡片区分度太小） */
html.studio-v3-ready .v2-pop { background: #FFF8E8; border: 1px solid #D9CFBE; box-shadow: 0 16px 40px rgba(28, 24, 20, .24), 0 2px 6px rgba(28, 24, 20, .08); }
html.studio-v3-ready .v2-pop .v2-opt:hover { background: #F3E8CF; }
html.studio-v3-ready .v2-pop .v2-opt.on { background: #CFEEE4; }
/* 手机「设置」汇总条：浅绿底 + 绿边 + 绿色标题和箭头（founder 10-22：白底不够显眼） */
@media (max-width: 767px) {
    html.studio-v3-ready .v2-vcard .v2-sumpill { background: #EAF6F1; border-color: #9FD3C5; }
    html.studio-v3-ready .v2-vcard .v2-sumpill .v2-sp-k,
    html.studio-v3-ready .v2-vcard .v2-sumpill > svg { color: #0F7B66; }
    html.studio-v3-ready .v2-vcard .v2-sumpill .v2-sp-v { color: #2F5D53; }
    html.studio-v3-ready .v2-vcard .tu-panel-slot,
    html.studio-v3-ready .v2-vcard .tu-modeseg { grid-column: 1 / -1; }
}
/* 三种方式（10-23 起首帧动画也一样）：左边缩略图列隐藏、内容占满整行（founder 10-22：和面板里的起点 / 图1 重复）。
   换图 / 裁剪 / 旋转 / 原画·上色后 改在点图片格子打开的大图下面（js/studio-v3.js zoomMain） */
html.studio-v3-ready .v2-vcard[data-tu-mode] .v2-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
/* 各自的开始界面（founder 10-22 解开耦合）：不用 v2 那个大上传框，没有图时直接显示自己的空格子 + 输入框 + 设置
   （首帧动画 10-23 起也是：founder「首帧的上传体验最差了，同步跟其它一样」） */
html.studio-v3-ready .v2-vcard[data-tu-mode] .v2-empty { display: none !important; }
html.studio-v3-ready .v2-vcard[data-tu-mode]:not(.has-src) :is(.v2-bar .v2-pills, .v2-sumpill) { opacity: 1; pointer-events: auto; }
html.studio-v3-ready .v2-vcard[data-tu-mode] :is(.v2-thumb, .v2-thumb-btn, .v2-srcctl, .v2-mzoom) { display: none !important; }
html.studio-v3-ready .v2-vcard[data-tu-mode] .tu-fr { flex-basis: 150px; }
html.studio-v3-ready .v2-vcard[data-tu-mode] .tu-ref { width: 96px; }
html.studio-v3-ready .v2-vcard[data-tu-mode] .tu-ref :is(.tu-im, .tu-slot) { width: 96px; height: 96px; }
html.studio-v3-ready .v2-vcard[data-tu-mode] .tu-name { max-width: 96px; }
@media (max-width: 767px) {
    html.studio-v3-ready .v2-vcard[data-tu-mode] .v2-mtitle { grid-column: 1 / -1; grid-row: auto; padding-top: 0; }
    html.studio-v3-ready .v2-vcard[data-tu-mode] .tu-fr { flex-basis: 108px; }
    /* 4 格一行：360px 宽的手机上面板里只剩约 274px → 64 × 4 + 5 × 3 = 271 */
    html.studio-v3-ready .v2-vcard[data-tu-mode] .tu-ref { width: 64px; }
    html.studio-v3-ready .v2-vcard[data-tu-mode] .tu-ref :is(.tu-im, .tu-slot) { width: 64px; height: 64px; }
    html.studio-v3-ready .v2-vcard[data-tu-mode] .tu-name { max-width: 64px; }
}
/* 起点 / 图1 大图下面那排按钮里的「原画 | 上色后」 */
html.studio-v3-ready .v2-stage-tools .tu-vchip { display: inline-flex; padding: 3px; gap: 3px; border: 1px solid #D9CFBE; border-radius: 999px; background: #FFF8E8; }
html.studio-v3-ready .v2-stage-tools .tu-vchip button { min-height: 34px; padding: 0 12px; border: 0; background: none; }
html.studio-v3-ready .v2-stage-tools .tu-vchip button.on { background: #fff; color: #0F7B66; box-shadow: 0 1px 3px rgba(28, 24, 20, .14); }
html.studio-v3-ready .v2-stage-tools { flex-wrap: wrap; }
/* 方式还没准备好：生成按钮变灰但仍可点（点了弹原因气泡） */
html.studio-v3-ready .v2-go .btn-generate.tu-gen-off:not(:disabled),
html.studio-v3-ready .v2-mbar-btn.tu-gen-off:not(:disabled) { background: #B9B2A6; color: #fff; box-shadow: none; }
/* 大图预览下面的「裁剪」「旋转」（v2 stageTools + 参考图预览共用） */
html.studio-v3-ready .v2-stage-tools { display: flex; justify-content: center; gap: 10px; margin-top: 12px; }
html.studio-v3-ready .v2-stage-tools button { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 16px; border: 1px solid #D9CFBE; border-radius: 999px; background: #FFF8E8; color: #3A352D; font-weight: 600; font-size: 13px; line-height: 1; font-family: inherit; cursor: pointer; }
html.studio-v3-ready .v2-stage-tools button:hover { border-color: #0F7B66; color: #0F7B66; }

/* ---------- 三段切换（卡片顶部）：比页面最上方的「上色 / 动起来」低一级 ---------- */
.tu-modeseg { display: flex; gap: 4px; padding: 4px; margin: 0 0 16px; background: #F3EEE3; border-radius: 14px; }
.tu-modeseg button { position: relative; flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 4px 8px; border: 0; border-radius: 10px; background: none; color: #5C544B; font-weight: 600; font-size: 14px; line-height: 1.2; font-family: inherit; cursor: pointer; }
.tu-modeseg button svg { flex: none; }
.tu-modeseg button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.tu-modeseg button:hover { color: #1C1814; background: rgba(255, 255, 255, .55); }
.tu-modeseg button.on { background: #fff; color: #0F7B66; box-shadow: 0 1px 3px rgba(28, 24, 20, .14); }
.tu-beta { font-size: 11px; font-weight: 700; color: #8A5A00; background: #FCE9C4; border-radius: 999px; padding: 1px 6px; font-style: normal; line-height: 1.4; }
.tu-modeseg .tu-beta { flex: none; padding: 0 5px; }
@media (max-width: 767px) {
    .tu-modeseg { margin-bottom: 12px; }
    .tu-modeseg button { flex-direction: column; gap: 2px; min-height: 48px; font-size: 12px; padding: 4px 2px; }
    .tu-modeseg button span { max-width: 100%; }
    .tu-modeseg .tu-beta { position: absolute; top: 2px; right: 4px; font-size: 11px; }
}

/* ---------- 面板 ---------- */
.tu-panel-slot:empty { display: none; }
.tu-panel { position: relative; margin: 0 0 12px; border: 1px solid #EADFC6; background: #FFFBF1; border-radius: 14px; padding: 12px 14px; color: #2B2B2B; }
.tu-ph { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: nowrap; }
.tu-ph h4 { margin: 0; display: flex; align-items: center; gap: 6px; min-width: 0; flex: 0 1 auto; font-size: 14px; font-weight: 700; color: #1D1D1D; }
.tu-ph h4 svg { color: #0F7B66; flex: none; }
.tu-ph h4 > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.tu-ph .tu-beta, .tu-ph .tu-help { flex: none; }
.tu-help { position: relative; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid #C9B98F; background: #fff; color: #5C544B; font-weight: 700; font-size: 12px; line-height: 1; font-family: inherit; cursor: pointer; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.tu-help::before { content: ''; position: absolute; inset: -10px; }
.tu-help:hover, .tu-help.on { border-color: #0F7B66; color: #0F7B66; background: #F2FAF7; }
.tu-hpop { position: absolute; left: 10px; right: 10px; top: 44px; z-index: 45; max-width: 420px; background: #fff; border: 1px solid #E6DCC6; border-radius: 14px; box-shadow: 0 14px 34px rgba(28, 24, 20, .18); padding: 12px 14px; font-size: 13px; line-height: 1.6; color: #3A352D; text-align: left; }
.tu-hpop > b { display: block; font-size: 14px; color: #1D1D1D; margin-bottom: 4px; }
.tu-hpop ul { margin: 0; padding-left: 18px; }
.tu-hpop li { margin: 3px 0; }
.tu-hpop li b { color: #0F7B66; }
.tu-hpop-ok { display: block; margin: 8px 0 0 auto; border: 0; border-radius: 999px; background: #0F7B66; color: #fff; font-weight: 700; font-size: 13px; line-height: 1; font-family: inherit; min-height: 36px; padding: 0 18px; cursor: pointer; }
.tu-hi { display: inline-flex; vertical-align: -3px; color: #0F7B66; margin: 0 1px; }
.tu-hi-roleMain { color: #8A5A00; }
.tu-hi-roleBg { color: #2D6FA3; }

.tu-im { position: relative; display: block; padding: 0; width: 78px; height: 96px; border-radius: 10px; background: #fff center/cover no-repeat; border: 1px solid #E6DCC6; }
.tu-im.btn { cursor: zoom-in; }
.tu-slot { width: 78px; height: 96px; border-radius: 10px; border: 1.5px dashed #C9B98F; background: #FFF8E8; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: #7A5A1A; font-weight: 600; font-size: 11px; line-height: 1.3; font-family: inherit; text-align: center; cursor: pointer; }
.tu-slot span { font-size: 20px; line-height: 1; }
.tu-slot:hover { background: #FFF2D6; }
.tu-rm { position: absolute; top: -8px; right: -8px; z-index: 2; width: 24px; height: 24px; border-radius: 50%; border: 0; background: #333; color: #fff; padding: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 1px 4px rgba(0, 0, 0, .25); }
.tu-rm::before { content: ''; position: absolute; inset: -10px; }
.tu-err { outline: 2px solid #D64545; outline-offset: 1px; }
.tu-warnic { position: absolute; top: 5px; left: 5px; width: 16px; height: 16px; border-radius: 50%; background: #C47800; color: #fff; font-weight: 800; font-size: 11px; line-height: 16px; font-family: inherit; text-align: center; }
.tu-warnic.e { background: #D64545; }
.tu-msg { margin-top: 10px; border-radius: 10px; padding: 8px 10px; font-size: 12px; line-height: 1.5; }
.tu-msg.e { background: #FDECEC; color: #9B2C2C; }
.tu-msg.w { background: #FFF1D6; color: #7A4B00; }
.tu-msg.i { background: #E9F5F1; color: #0B5E4E; }
.tu-msg button.lk { color: inherit; font: inherit; font-weight: 700; text-decoration: underline; background: none; border: 0; padding: 0; cursor: pointer; }
.tu-sub { margin-top: 6px; font-size: 11px; color: #5C544B; }

/* —— 首尾帧：起点 · 生成动画 · 终点 始终一行（窄屏 / 英文也不折行） */
.tu-fl { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; }
.tu-fr { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 0 1 104px; min-width: 0; font-size: 11px; color: #5C544B; text-align: center; }
.tu-fl .tu-im, .tu-fl .tu-slot { width: 100%; height: auto; aspect-ratio: var(--ar, 104 / 128); }
.tu-endw { position: relative; width: 100%; }
/* 图拖到格子上：要接收的那一格亮起来（三种方式一样） */
.tu-dropon > .tu-slot, .tu-dropon > .tu-im, .tu-slot.tu-dropon, .tu-dropon .tu-im { outline: 3px dashed #0F7B66; outline-offset: 2px; background-color: #F2FAF7; }
.tu-flowcol { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 20px; flex: 0 0 84px; width: 84px; }
.tu-flow { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; color: #0F7B66; }
.tu-flow:not(.on) { opacity: .5; }
.tu-flow-ic { width: 34px; height: 34px; border-radius: 50%; background: #E3F3EE; border: 1px solid #BFE3D7; display: flex; align-items: center; justify-content: center; }
.tu-flow-ic svg { display: block; }
.tu-flow.on .tu-flow-ic { background: #0F7B66; border-color: #0F7B66; color: #fff; box-shadow: 0 0 0 4px rgba(15, 123, 102, .12); }
/* 连接线：三个由浅到深的圆点 + 箭头，静态（founder 10-22：流动效果会让人以为已经在生成） */
.tu-flow-track { position: relative; width: 66px; height: 8px; }
.tu-flow-track::after { content: ''; position: absolute; right: 6px; top: 0; border-left: 8px solid #0F7B66; border-top: 4px solid transparent; border-bottom: 4px solid transparent; }
.tu-flow-track i { position: absolute; top: 1px; left: 0; width: 6px; height: 6px; border-radius: 50%; background: #0F7B66; }
.tu-flow-track i:nth-child(1) { transform: translateX(10px); opacity: .35; }
.tu-flow-track i:nth-child(2) { transform: translateX(24px); opacity: .6; }
.tu-flow-track i:nth-child(3) { transform: translateX(38px); opacity: 1; }
.tu-swap { position: relative; width: 36px; height: 36px; padding: 0; border-radius: 50%; border: 1px solid #D9CCAE; background: #fff; color: #0B5E4E; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.tu-swap::before { content: ''; position: absolute; inset: -5px; }
.tu-swap:hover { border-color: #0F7B66; background: #F2FAF7; }
@media (max-width: 767px) {
    .tu-panel { padding: 12px 10px; }
    .tu-fl { gap: 8px; }
    .tu-fr { flex-basis: 96px; }
    .tu-flowcol { flex-basis: 70px; width: 70px; }
    .tu-flow-track { width: 52px; }
    .tu-flow-track i:nth-child(1) { transform: translateX(4px); }
    .tu-flow-track i:nth-child(2) { transform: translateX(15px); }
    .tu-flow-track i:nth-child(3) { transform: translateX(26px); }
    .tu-flow-track::after { right: 4px; }
}

/* —— 参考素材格 */
.tu-refs { display: flex; gap: 8px; flex-wrap: wrap; }
.tu-ref { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 78px; }
.tu-ref .tu-im, .tu-ref .tu-slot { width: 78px; height: 78px; }
.tu-addref span { font-size: 28px; font-weight: 300; }
.tu-no { position: absolute; top: 4px; left: 4px; z-index: 1; background: rgba(15, 123, 102, .92); color: #fff; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 0 6px; line-height: 16px; }
.tu-ref .tu-warnic { top: auto; bottom: 5px; }
.tu-name { display: inline-flex; align-items: center; gap: 3px; max-width: 78px; border: 0; background: none; padding: 0; font-weight: 700; font-size: 12px; line-height: 1.3; font-family: inherit; color: #222; cursor: pointer; white-space: nowrap; }
.tu-name span { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tu-name em { display: inline-flex; color: #5C544B; font-style: normal; }
.tu-rename { display: flex; gap: 2px; }
.tu-rename input { width: 52px; box-sizing: border-box; font-weight: 600; font-size: 12px; line-height: 1.3; font-family: inherit; border: 1.5px solid #0F7B66; border-radius: 10px; padding: 2px 4px; outline: 3px solid rgba(15, 123, 102, .15); }
.tu-rename button { width: 22px; padding: 0; border: 0; border-radius: 10px; background: #0F7B66; color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.tu-role { width: 34px; height: 26px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #D9CCAE; border-radius: 999px; background: #fff; cursor: pointer; }
.tu-role.r-main { background: #FFF4D6; border-color: #F2D58A; color: #8A5A00; }
.tu-role.r-side { background: #E3F3EE; border-color: #BFE3D7; color: #0F7B66; }
.tu-role.r-bg { background: #E6F1FB; border-color: #BBD6EE; color: #2D6FA3; }
.tu-role.open { outline: 2px solid #0F7B66; outline-offset: 1px; }
.tu-rolepop { position: absolute; top: calc(100% + 2px); left: 50%; transform: translateX(-50%); z-index: 55; display: flex; flex-direction: column; gap: 2px; min-width: 108px; padding: 5px; background: #FFF8E8; border: 1px solid #D9CFBE; border-radius: 14px; box-shadow: 0 12px 28px rgba(28, 24, 20, .22); }
.tu-rolepop.l { left: 0; transform: none; }
.tu-rolepop.r { left: auto; right: 0; transform: none; }
.tu-rolepop button { display: flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 10px; border: 0; border-radius: 10px; background: none; font-weight: 600; font-size: 13px; line-height: 1; font-family: inherit; color: #3A352D; cursor: pointer; white-space: nowrap; text-align: left; }
.tu-rolepop button:hover { background: #F3E8CF; }
.tu-rolepop button.on { background: #CFEEE4; }
.tu-rolepop button.r-main svg { color: #8A5A00; }
.tu-rolepop button.r-side svg { color: #0F7B66; }
.tu-rolepop button.r-bg svg { color: #2D6FA3; }
@media (max-width: 767px) {
    .tu-refs { gap: 5px; }
    .tu-ref { width: 62px; }
    .tu-ref .tu-im, .tu-ref .tu-slot { width: 62px; height: 62px; }
    .tu-name { max-width: 64px; }
    .tu-rename input { width: 38px; }
}

/* —— @ 提及输入框：和普通输入框同一套尺寸，切换方式时不跳；@ 按钮在框右下角 */
.tu-rich-w { position: relative; }
.tu-rich { position: relative; min-height: 118px; box-sizing: border-box; border: 2px solid #D9CFBE; border-radius: 14px; background: #fff; padding: 13px 15px 46px; font-size: 16px; line-height: 1.6; font-family: inherit; color: #1C1814; outline: none; white-space: pre-wrap; word-break: break-word; text-align: left; }
.tu-rich:focus { border-color: #0F7B66; box-shadow: 0 0 0 3px rgba(15, 123, 102, .12); }
.tu-rich.is-empty::before { content: attr(data-ph); position: absolute; left: 15px; top: 13px; right: 15px; color: #B5AA98; pointer-events: none; }
.tu-chip { display: inline-flex; align-items: center; gap: 4px; margin: 0 2px; padding: 0 8px 0 2px; border: 1px solid #BFE3D7; border-radius: 999px; background: #E3F3EE; color: #0B5E4E; font-size: 14px; font-weight: 600; line-height: 22px; vertical-align: middle; user-select: none; white-space: nowrap; }
.tu-chip i { width: 20px; height: 20px; border-radius: 50%; background: #fff center/cover; display: inline-block; border: 1px solid #CFE7DF; }
.tu-chip.bad { background: #FDECEC; color: #9B2C2C; border-color: #F2B8B8; text-decoration: line-through; }
.tu-rich-count { position: absolute; left: 15px; bottom: 14px; z-index: 2; font-size: 12px; color: #9A8E83; pointer-events: none; }
.tu-rich-count.full { color: #C47800; font-weight: 700; }
.tu-atbtn { position: absolute; right: 9px; bottom: 9px; z-index: 2; width: 34px; height: 34px; padding: 0; border-radius: 50%; border: 1px solid #BFE3D7; background: #F2FAF7; color: #0F7B66; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.tu-atbtn::before { content: ''; position: absolute; inset: -5px; }
.tu-atbtn:hover { background: #0F7B66; color: #fff; border-color: #0F7B66; }
.tu-mpk { position: absolute; z-index: 60; width: 250px; background: #FFF8E8; border: 1px solid #D9CFBE; border-radius: 14px; box-shadow: 0 10px 28px rgba(0, 0, 0, .14); padding: 6px; font-size: 13px; line-height: 1.3; }
.tu-pk-h { font-size: 11px; color: #5C544B; padding: 4px 8px; }
.tu-pk { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: none; border-radius: 10px; padding: 6px 8px; cursor: pointer; text-align: left; font-family: inherit; }
.tu-pk.on, .tu-pk:hover { background: #F2FAF7; }
.tu-pk i { width: 34px; height: 34px; border-radius: 10px; background: #fff center/cover; border: 1px solid #E6DCC6; flex: none; }
.tu-pk span { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.tu-pk small { display: inline-flex; align-items: center; gap: 3px; color: #5C544B; font-size: 11px; }
.tu-pk small.r-main svg { color: #8A5A00; }
.tu-pk small.r-side svg { color: #0F7B66; }
.tu-pk small.r-bg svg { color: #2D6FA3; }
.tu-pk em { font-style: normal; color: #6B6055; font-size: 11px; white-space: nowrap; }
.tu-pk-none { padding: 8px; color: #5C544B; font-size: 12px; }
.tu-pk-f { font-size: 11px; color: #6B6055; padding: 4px 8px 2px; border-top: 1px solid #F0EBE0; margin-top: 4px; }
@media (hover: none) { .tu-pk-f { display: none; } }
@media (max-width: 767px) { .tu-rich { min-height: 96px; } .tu-mpk { width: 230px; } }

/* ---------- 选图弹层：桌面居中、手机底部抽屉 ---------- */
.tu-picker-overlay { position: fixed; inset: 0; z-index: 2700; background: rgba(28, 24, 20, .4); display: flex; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box; }
.tu-picker-overlay[hidden] { display: none; }
.tu-picker-box { box-sizing: border-box; width: min(420px, 100%); max-height: 86vh; overflow: hidden; display: flex; flex-direction: column; padding: 16px 16px 18px; background: #fff; border-radius: 14px; box-shadow: 0 18px 52px rgba(28, 24, 20, .24); }
/* 弹层限高：标题 / 上传 / 标签 / 管理固定，只有素材网格（.tu-lib-scroll）滚动；其他内容放不下时整块滚 */
.tu-picker-body { flex: 0 1 auto; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; }
.tu-picker-body > .tu-opts { flex: 0 1 auto; min-height: 0; }
.tu-opts > .tu-pk-pane { flex: 0 1 auto; min-height: 96px; display: flex; flex-direction: column; }
.tu-picker-box:focus { outline: none; }
.tu-picker-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.tu-picker-h b { font-size: 14px; }
.tu-picker-x { width: 34px; height: 34px; border-radius: 50%; border: 0; background: #F3F1EC; cursor: pointer; display: grid; place-items: center; color: #1C1814; flex: none; }
.tu-opts { display: flex; flex-direction: column; gap: 8px; }
.tu-endquick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tu-opt { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 46px; padding: 10px 12px; border: 1px solid #E6DCC6; border-radius: 10px; background: #fff; color: #222; font-weight: 600; font-size: 14px; line-height: 1.25; font-family: inherit; text-align: left; cursor: pointer; }
.tu-opt svg { flex: none; color: #0F7B66; }
.tu-opt:hover { border-color: #0F7B66; }
.tu-opt-lite { color: #0B5E4E; background: #F7FBF9; }
.tu-opt-2 { justify-content: flex-start; font-size: 13px; color: #5C544B; background: #FCFAF5; border-style: dashed; }
.tu-opt-2 svg { color: #9A7B2F; }
.tu-opt small { margin-left: auto; color: #0F7B66; font-size: 12px; font-weight: 600; white-space: nowrap; }
.tu-optsep { height: 1px; background: #EADFC6; margin: 4px 0 0; }
.tu-pk-sec { font-size: 12px; font-weight: 700; color: #5C544B; margin: 8px 0 0; }
.tu-pk-empty { font-size: 12px; color: #5C544B; padding: 4px 0; }
.tu-pk-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.tu-pk-it { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 3px; border: 1px solid #E6DCC6; border-radius: 10px; background: #fff; cursor: pointer; font-size: 11px; line-height: 1.3; font-family: inherit; color: #444; }
.tu-pk-it:hover { border-color: #0F7B66; }
.tu-pk-it i { display: block; width: 100%; aspect-ratio: 1; border-radius: 10px; background: #fff center/cover; }
.tu-pk-it.tu-more { justify-content: center; gap: 4px; color: #0F7B66; font-weight: 600; background: #F7FBF9; }
/* 「我的素材 | 我的作品」标签 + 管理（多选删除） */
.tu-pk-tabs { display: flex; gap: 4px; padding: 3px; margin-top: 4px; background: #F3F1EC; border-radius: 10px; }
.tu-pk-tabs button { flex: 1 1 0; min-width: 0; min-height: 36px; padding: 6px 8px; border: 0; border-radius: 8px; background: none; color: #5C544B; font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1.2; cursor: pointer; }
.tu-pk-tabs button[aria-selected="true"] { background: #fff; color: #1C1814; box-shadow: 0 1px 3px rgba(28, 24, 20, .14); }
.tu-pk-pane { min-height: 92px; }
.tu-lib-scroll { flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 0 -4px; padding: 0 4px 2px; }
.tu-lib-more { display: flex; justify-content: center; padding: 10px 0 2px; }
.tu-lib-more:empty { display: none; }
.tu-lib-spin { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #E6DCC6; border-top-color: #0F7B66; animation: tuSpin .8s linear infinite; }
@keyframes tuSpin { to { transform: rotate(360deg); } }
.tu-lib-h { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-bottom: 6px; }
.tu-lib-h .tu-lk:first-child:not(:last-child) { margin-right: auto; }
.tu-lk { padding: 4px 2px; border: 0; background: none; color: #0F7B66; font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.tu-lk-b { color: #1C1814; font-weight: 700; }
.tu-lib-it { position: relative; }
.tu-lib-it i { overflow: hidden; background: #F7F4EE; }
.tu-lib-it img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tu-lib-nm { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #3A322B; font-weight: 600; }
.tu-lib-role { position: absolute; top: 7px; left: 7px; width: 20px; height: 20px; border-radius: 50%; background: rgba(255, 255, 255, .94); box-shadow: 0 1px 2px rgba(28, 24, 20, .2); display: grid; place-items: center; }
.tu-lib-role.r-main svg { color: #8A5A00; }
.tu-lib-role.r-side svg { color: #0F7B66; }
.tu-lib-role.r-bg svg { color: #2D6FA3; }
.tu-lib-ck { position: absolute; top: 7px; right: 7px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #fff; background: rgba(28, 24, 20, .3); box-shadow: 0 1px 2px rgba(28, 24, 20, .25); display: grid; place-items: center; color: transparent; box-sizing: border-box; }
.tu-lib-it.sel { border-color: #0F7B66; box-shadow: inset 0 0 0 2px #0F7B66; }
.tu-lib-it.sel .tu-lib-ck { background: #0F7B66; color: #fff; }
.tu-lib-it.sel img { opacity: .82; }
.tu-lib-bar { flex: none; margin-top: 8px; padding-top: 8px; border-top: 1px solid #F0EBE0; background: #fff; }
.tu-lib-del { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 44px; border: 0; border-radius: 10px; background: #D9534F; color: #fff; font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.tu-lib-del:disabled { background: #EBDDD9; cursor: default; }
.tu-sk { cursor: default; }
.tu-sk i { background: #F3F1EC; animation: tuSk 1.1s ease-in-out infinite alternate; }
@keyframes tuSk { to { background: #E9E4DA; } }
@media (prefers-reduced-motion: reduce) { .tu-sk i, .tu-lib-spin { animation: none; } }
@media (max-width: 767px) {
    .tu-picker-overlay { align-items: flex-end; padding: 0; }
    .tu-picker-box { width: 100%; border-radius: 14px 14px 0 0; max-height: 84vh; padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
    .tu-picker-box::before { content: ''; display: block; width: 40px; height: 4px; border-radius: 999px; background: #DDD3BF; margin: -4px auto 12px; }
    .tu-pk-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- 大图预览里的裁剪（终点按起点比例 / 参考图） ---------- */
.tu-zoom img { display: block; max-width: 100%; max-height: 64vh; margin: 0 auto; border-radius: 14px; }
.tu-zoom { background: #fff; border-radius: 14px; padding: 14px; text-align: center; }
.tu-zoom.busy { opacity: .6; pointer-events: none; }
/* 裁剪框（所有图片格子共用；和上色页一样：拖四个角改大小，拖框内移动） */
.tu-cw { position: relative; display: inline-block; max-width: 100%; overflow: hidden; border-radius: 14px; touch-action: none; user-select: none; -webkit-user-select: none; }
.tu-cw img { border-radius: 0; pointer-events: none; }
.tu-cbox { position: absolute; box-sizing: border-box; border: 2px solid #fff; box-shadow: 0 0 0 9999px rgba(28, 24, 20, .5); cursor: move; touch-action: none; }
.tu-cbox i { position: absolute; width: 22px; height: 22px; box-sizing: border-box; background: #fff; border: 2px solid #0F7B66; border-radius: 50%; }
.tu-cbox i::before { content: ''; position: absolute; inset: -10px; }
.tu-cbox i[data-h="nw"] { left: -2px; top: -2px; cursor: nwse-resize; }
.tu-cbox i[data-h="ne"] { right: -2px; top: -2px; cursor: nesw-resize; }
.tu-cbox i[data-h="sw"] { left: -2px; bottom: -2px; cursor: nesw-resize; }
.tu-cbox i[data-h="se"] { right: -2px; bottom: -2px; cursor: nwse-resize; }
html.studio-v3-ready .v2-stage-tools .tu-cok { background: #0F7B66; border-color: #0F7B66; color: #fff; }
html.studio-v3-ready .v2-stage-tools .tu-cok:hover { color: #fff; background: #0B6555; }

/* ---------- 灰色生成按钮的原因气泡（贴在按钮上方，带指向按钮的小三角） ---------- */
.tu-genhint { position: fixed; z-index: 100006; max-width: min(320px, calc(100vw - 24px)); padding: 9px 13px; border-radius: 10px; background: #2B2622; color: #fff; font-size: 13px; font-weight: 600; line-height: 1.45; box-shadow: 0 10px 26px rgba(28, 24, 20, .28); pointer-events: none; animation: tuHintIn .16s ease-out; }
.tu-genhint::after { content: ''; position: absolute; top: 100%; left: var(--ax, 50%); transform: translateX(-50%); border: 7px solid transparent; border-top-color: #2B2622; }
@keyframes tuHintIn { from { transform: translateY(4px); } to { transform: none; } }

/* ---------- 制作中等待动画（founder 10-22：首尾帧 = B 擦变，参考素材 = A 飞进同一个画框） ---------- */
.status-card-preview-wrap.tu-proc-wrap { width: fit-content; max-width: 100%; }
.tu-proc { position: relative; max-width: 100%; aspect-ratio: var(--ar, 4 / 3); overflow: hidden; border-radius: 12px; background: radial-gradient(120% 90% at 50% 40%, #FFFFFF 0%, #F4FBF9 55%, #E9F6F3 100%); }
.tu-proc-ref { --ar: 4 / 3; }
.tu-pchip { position: absolute; z-index: 6; display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; background: rgba(255, 255, 255, .94); color: #0B5E4E; font-size: 12px; font-weight: 700; line-height: 1.3; white-space: nowrap; box-shadow: 0 1px 4px rgba(0, 0, 0, .15); }
.tu-spark { position: absolute; z-index: 7; width: 10px; height: 10px; opacity: 0; pointer-events: none; }
.tu-spark::before, .tu-spark::after { content: ''; position: absolute; left: 50%; top: 50%; background: #FFD45C; border-radius: 2px; transform: translate(-50%, -50%); }
.tu-spark::before { width: 2px; height: 10px; } .tu-spark::after { width: 10px; height: 2px; }
/* 首尾帧 B */
.tu-proc-fl .tu-pl { position: absolute; inset: 0; background: center / cover no-repeat; }
.tu-proc-fl .tu-pl-e { clip-path: inset(0 0 0 100%); }
.tu-proc-fl .tu-seam { position: absolute; top: 0; bottom: 0; width: 3px; margin-left: -1.5px; left: 100%; z-index: 5; opacity: 0; background: linear-gradient(180deg, transparent, #fff 15%, #4ECDC4 50%, #fff 85%, transparent); box-shadow: 0 0 14px 4px rgba(78, 205, 196, .7); }
.tu-proc-fl .tu-pchip.s { left: 10px; top: 10px; } .tu-proc-fl .tu-pchip.e { right: 10px; top: 10px; }
.tu-proc-fl.gen .tu-pl-e { animation: tuWipe 6s ease-in-out infinite; }
.tu-proc-fl.gen .tu-seam { animation: tuSeam 6s ease-in-out infinite; }
@keyframes tuWipe { 0%, 8% { clip-path: inset(0 0 0 100%); } 42%, 58% { clip-path: inset(0 0 0 0); } 92%, 100% { clip-path: inset(0 0 0 100%); } }
@keyframes tuSeam { 0%, 8% { left: 100%; opacity: 0; } 12%, 40% { opacity: 1; } 42%, 58% { left: 0%; opacity: 0; } 62%, 88% { opacity: 1; } 92%, 100% { left: 100%; opacity: 0; } }
.tu-proc-fl.gen .tu-pchip.s { animation: tuLblS 6s ease-in-out infinite; } .tu-proc-fl.gen .tu-pchip.e { animation: tuLblE 6s ease-in-out infinite; }
@keyframes tuLblS { 0%, 25%, 75%, 100% { background: #0F7B66; color: #fff; } 35%, 65% { background: rgba(255, 255, 255, .94); color: #0B5E4E; } }
@keyframes tuLblE { 0%, 25%, 75%, 100% { background: rgba(255, 255, 255, .94); color: #0B5E4E; } 35%, 65% { background: #0F7B66; color: #fff; } }
.tu-proc-fl .tu-pmini { position: absolute; right: 10px; bottom: 10px; z-index: 6; width: 24%; aspect-ratio: var(--ar, 4 / 3); border-radius: 10px; border: 3px solid #fff; background: #fff center / cover; box-shadow: 0 4px 12px rgba(0, 0, 0, .18); }
.tu-proc-fl .tu-pmini .tu-pchip { left: 50%; bottom: -12px; transform: translateX(-50%); }
.tu-proc-fl .s1 { left: 50%; top: 20%; } .tu-proc-fl .s2 { left: 30%; top: 70%; } .tu-proc-fl .s3 { left: 72%; top: 45%; }
.tu-proc-fl.gen .tu-spark { animation: tuTwinkle 3s ease-in-out infinite; } .tu-proc-fl.gen .s2 { animation-delay: 1s; } .tu-proc-fl.gen .s3 { animation-delay: 2s; }
@keyframes tuTwinkle { 0%, 100% { opacity: 0; transform: scale(.4); } 50% { opacity: 1; transform: scale(1.1) rotate(45deg); } }
/* 参考素材（founder 10-22 简化）：一摞卡片轮流转到最前面，再滑出去落到最后面 */
.tu-proc-ref .tu-rc { position: absolute; left: 50%; top: 46%; width: 44%; transform-origin: 50% 60%; transition: transform .55s cubic-bezier(.4, .1, .2, 1), opacity .55s, filter .55s; }
.tu-proc-ref .tu-rcp { position: relative; display: block; width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: 12px; border: 4px solid #fff; background: #fff center / cover no-repeat; box-shadow: 0 10px 24px rgba(28, 24, 20, .2); }
.tu-proc-ref .tu-rc[data-slot="0"] { transform: translate(-50%, -50%); z-index: 6; }
.tu-proc-ref .tu-rc[data-slot="1"] { transform: translate(-50%, -50%) translate(24%, -6%) scale(.86) rotate(5deg); z-index: 5; opacity: .92; filter: brightness(.96); }
.tu-proc-ref .tu-rc[data-slot="2"] { transform: translate(-50%, -50%) translate(42%, -11%) scale(.74) rotate(10deg); z-index: 4; opacity: .8; filter: brightness(.92); }
.tu-proc-ref .tu-rc[data-slot="3"] { transform: translate(-50%, -50%) translate(57%, -15%) scale(.64) rotate(14deg); z-index: 3; opacity: .66; filter: brightness(.9); }
/* 最前面那张往左滑出（再落到最后面） */
.tu-proc-ref .tu-rc.to-back { transform: translate(-50%, -50%) translate(-64%, 6%) scale(.9) rotate(-11deg); z-index: 7; }
.tu-proc-ref .tu-rc > .tu-pchip { left: 50%; top: 100%; transform: translate(-50%, 8px); opacity: 0; transition: opacity .3s; }
.tu-proc-ref .tu-rc[data-slot="0"]:not(.to-back) > .tu-pchip { opacity: 1; transition-delay: .35s; }
.tu-proc-ref .tu-rc > .tu-pchip svg { flex: none; }
.tu-proc-ref .tu-rcp .processing-scan { display: none; }
.tu-proc-ref.comp .tu-rc[data-slot="0"] .processing-scan { display: block; }
.tu-proc-ref.one .tu-rc { animation: tuFloat 3s ease-in-out infinite; }
@keyframes tuFloat { 0%, 100% { margin-top: 0; } 50% { margin-top: -6px; } }
.tu-proc-ref .s1 { left: 24%; top: 18%; } .tu-proc-ref .s2 { left: 72%; top: 26%; } .tu-proc-ref .s3 { left: 30%; top: 74%; }
.tu-proc-ref.gen .tu-spark { animation: tuTwinkle 2.4s ease-in-out infinite; } .tu-proc-ref.gen .s2 { animation-delay: .8s; } .tu-proc-ref.gen .s3 { animation-delay: 1.6s; }
@media (max-width: 600px) { .status-card-preview-wrap.tu-proc-wrap { width: 100%; } .tu-proc { width: 100% !important; } .tu-proc-ref .tu-rc > .tu-pchip { font-size: 11px; padding: 2px 7px; } }
@media (prefers-reduced-motion: reduce) { .tu-proc, .tu-proc * { animation: none !important; } .tu-proc-fl .tu-pl-e { clip-path: inset(0 0 0 50%); } }

/* ---------- 键盘焦点：统一橙色外框；鼠标点击不出框 ---------- */
.tu-modeseg button:focus-visible, .tu-help:focus-visible, .tu-rm:focus-visible, .tu-role:focus-visible, .tu-rolepop button:focus-visible,
.tu-pk-it:focus-visible, .tu-opt:focus-visible, .tu-swap:focus-visible, .tu-hpop-ok:focus-visible,
.tu-atbtn:focus-visible, .tu-name:focus-visible, .tu-slot:focus-visible, .tu-im.btn:focus-visible, .tu-picker-x:focus-visible { outline: 2px solid #E89A1A; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .tu-genhint { animation: none; } }