/* Sokaris V12.1 一步创作层样式：延续 v120 的深色现代语言，
   但把留白放到最大——这个屏幕的价值在于「没有别的东西可看」。 */
/* Give the desktop controls and style previews room; adapt to the actual content width. */
.simple-v121{max-width:1200px;margin:0 auto;padding:16px 0 80px;container-type:inline-size}

/* 输入态 */
.simple-input-v121{display:grid;gap:14px}
.simple-input-v121 textarea{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:18px;padding:18px 20px;font-size:16.5px;line-height:1.75;color:var(--text);resize:vertical;min-height:96px;transition:border-color .2s ease,background .2s ease}
.simple-input-v121 textarea:focus{border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.055);box-shadow:0 0 0 4px rgba(227,189,87,.07)}
.simple-drop-v121{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:132px;border:1px dashed rgba(255,255,255,.18);border-radius:18px;background:rgba(255,255,255,.02);cursor:pointer;transition:border-color .2s ease,background .2s ease;overflow:hidden}
.simple-drop-v121:hover,.simple-drop-v121.drag{border-color:rgba(227,189,87,.5);background:rgba(227,189,87,.06)}
.simple-drop-main-v121{color:#d3d3da;font-size:14.5px}
.simple-drop-sub-v121{color:var(--dim);font-size:12.5px}
.simple-drop-v121.has{border-style:solid;border-color:var(--line);min-height:0;padding:10px}
.simple-drop-v121 img{max-height:190px;width:auto;max-width:100%;border-radius:12px;display:block}
.simple-x-v121{position:absolute;top:10px;right:10px;width:30px;height:30px;border-radius:50%;border:0;background:rgba(10,10,12,.72);color:#fff;font-size:17px;line-height:1;backdrop-filter:blur(6px)}
.simple-go-v121{justify-self:center;min-width:220px;padding:14px 30px;font-size:16px;margin-top:6px}

/* 进度条（已经开始做了的那一屏） */
.simple-bar-v121{max-width:340px;height:4px;margin:16px auto 0;border-radius:99px;background:rgba(255,255,255,.09);overflow:hidden}
.simple-bar-v121 i{display:block;height:100%;background:var(--gold);border-radius:99px;transition:width .6s ease}

/* 错误页的卡片、成片页（图片）的一排按钮 */
.simple-card-v121{border:1px solid var(--line);border-radius:20px;background:var(--surface);padding:26px}
.simple-actions-v121{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.simple-error-v121 h2{font:640 20px var(--sans);margin:0 0 8px}
.simple-error-v121 p{color:var(--muted);font-size:14px;margin:0 0 16px}
.simple-error-v121 details{margin:0 0 16px;overflow-wrap:anywhere}
.simple-error-v121 summary{cursor:pointer;color:var(--muted);font-size:14px}

/* 结果态 */
.simple-result-v121{display:grid;gap:16px;justify-items:center}
/* 成片按自身比例显示，不裁切：写死 9:16 + cover 时，一旦成片不是竖屏
   （换了模型、换了画幅、或用了横屏风格），用户看到的就是被裁过的自己的作品。
   给一个高度上限即可，宽度随比例自适应。 */
.simple-result-v121 video{width:auto;max-width:100%;max-height:min(62vh,560px);border-radius:18px;background:#000;object-fit:contain;box-shadow:var(--shadow)}
.simple-tweaks-v121{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.simple-tweaks-v121 .tool.on{background:rgba(227,189,87,.16);border-color:rgba(227,189,87,.4);color:var(--gold2)}

/* 高级入口：明确存在，但不抢注意力 */
.simple-advanced-v121{margin-top:44px;padding-top:20px;border-top:1px solid var(--line);display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap;color:var(--dim);font-size:13px}
.link-v121{background:none;border:0;color:var(--muted);font-size:13px;padding:6px 10px;border-radius:999px;transition:color .18s ease,background .18s ease}
.link-v121:hover{color:#fff;background:rgba(255,255,255,.06)}

@media(max-width:600px){.simple-v121{padding-top:4px}.simple-go-v121{width:100%}}

/* 输入区底部选项上面那一行小字（视频模型、时长、版本、画幅） */
.simple-styles-label-v121{font-size:11.5px;letter-spacing:.16em;color:var(--dim);text-transform:uppercase}

/* 风格详情弹窗 */
.pd-body-v121{display:grid;gap:14px}
.pd-media-v121{width:100%;max-height:300px;object-fit:contain;border-radius:14px;background:#0c0d0b;display:block}
.pd-nodemo-v121{padding:26px;text-align:center;color:var(--dim);font-size:13px;border:1px dashed var(--line2);border-radius:14px}
.pd-desc-v121{margin:0;color:var(--text);font-size:15px;line-height:1.75}
.pd-grid-v121{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pd-grid-v121>div{background:rgba(255,255,255,.04);border-radius:12px;padding:12px 14px}
.pd-grid-v121 p{margin:4px 0 0;font-size:14px;color:var(--text)}
.pd-body-v121 h4{margin:6px 0 0;font-size:11.5px;letter-spacing:.16em;color:var(--dim);text-transform:uppercase;font-weight:600}
.pd-list-v121{margin:0;padding-left:18px;display:grid;gap:6px;color:#c9c9d1;font-size:14px;line-height:1.65}
.pd-list-v121 li::marker{color:var(--gold)}
.pd-list-v121.never li::marker{color:var(--red)}
.pd-list-v121.never{color:var(--muted)}
@media(max-width:600px){.pd-grid-v121{grid-template-columns:1fr}}

/* ---------- 玩法详情：样片铺满顶部，名字压在它下缘 ----------
   这一屏要回答的是「这玩法做出来长什么样」，那就该让样片占最大的地方，
   而不是塞在一行标题底下当插图。 */
.skill-detail-v132 .sd-hero-v132{
  position:relative;width:100%;height:clamp(230px,38vh,430px);overflow:hidden;
  border-radius:19px 19px 0 0;background:#0c0d0b;
}
.skill-detail-v132 .sd-hero-v132>video,
.skill-detail-v132 .sd-hero-v132>img{width:100%;height:100%;object-fit:cover;display:block;border-radius:0;max-height:none}
/* 没有样片时不要留一个空洞：给一块底色，名字照样压在上面 */
.skill-detail-v132 .sd-nodemo-v132{height:100%;display:grid;place-items:center;border:0;border-radius:0;background:linear-gradient(140deg,#191a16,#24261f)}
/* 下缘的渐变：字压在画面上要读得清，又不能把画面盖掉 */
.skill-detail-v132 .sd-hero-v132::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(8,9,7,.82) 0%,rgba(8,9,7,.72) 26%,rgba(8,9,7,.12) 52%,transparent 72%);
}
.skill-detail-v132 .sd-hero-text-v132{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:0 26px 20px;display:flex;flex-direction:column;gap:7px}
.skill-detail-v132 .sd-hero-text-v132 h2{margin:0;font:750 27px var(--serif);color:#fff}
.skill-detail-v132 .sd-hero-text-v132 p{margin:0;font-size:14px;line-height:1.7;color:rgba(255,255,255,.78);max-width:74ch}
.skill-detail-v132 .sd-tags-v132{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.skill-detail-v132 .sd-tags-v132 span{font-size:11.5px;border-radius:999px;padding:3px 10px;background:rgba(255,255,255,.14);color:rgba(255,255,255,.88)}
.skill-detail-v132 .sd-kind-v132{background:rgba(255,200,97,.9)!important;color:#17150f!important;font-weight:600}
/* 关闭键浮在画面上，不再单占一行标题栏 */
.skill-detail-v132 .sd-close-v132{
  position:absolute;top:14px;right:14px;z-index:3;width:34px;height:34px;border-radius:50%;
  border:1px solid rgba(255,255,255,.22);background:rgba(10,11,9,.55);color:#fff;font-size:20px;line-height:1;
  cursor:pointer;
}
.skill-detail-v132 .sd-close-v132:hover{background:rgba(10,11,9,.85);border-color:rgba(255,255,255,.45)}
.skill-detail-v132 .modal-body{padding:18px 26px}
.skill-detail-v132 .sd-caption-v132{margin:0;font-size:13px;color:var(--muted)}
/* 说明文字长的玩法会把弹窗撑过一屏，这颗按钮就滚出视野了。钉在底部。 */
.skill-detail-v132 .modal-foot{position:sticky;bottom:0;padding:14px 26px;background:#20221d;border-radius:0 0 19px 19px}
.skill-detail-v132 .modal-foot .gold,.skill-detail-v132 .modal-foot .ghost{border-radius:999px;padding:11px 26px}
@media(max-width:760px){
  .skill-detail-v132 .sd-hero-v132{height:clamp(180px,30vh,300px)}
  .skill-detail-v132 .sd-hero-text-v132{padding:0 16px 14px}
  .skill-detail-v132 .sd-hero-text-v132 h2{font-size:21px}
  .skill-detail-v132 .modal-body,.skill-detail-v132 .modal-foot{padding-left:16px;padding-right:16px}
}


/* 模型下拉框：color-scheme:dark 是关键——原生下拉面板由系统绘制，不加这行时
   Windows 会用浅色面板画出白底白字，选项完全看不见（RC24 实测）。 */
.simple-option-v121{display:flex;align-items:center;gap:8px;min-width:0;flex:1 1 0}
.simple-option-v121 label{flex:none;white-space:nowrap}
.simple-model-control-v121 select{flex:1;min-width:0;width:100%;padding:9px 10px;border-radius:12px;font-size:13.5px;color-scheme:dark;background-color:var(--surface2);color:var(--text)}
.simple-model-control-v121{flex-grow:1.35}
@container(max-width:900px){
  .simple-option-v121{flex:1 1 calc(50% - 8px)}
}
@container(max-width:560px){
  .simple-option-v121{flex-basis:100%}
  .simple-option-v121 label{min-width:100px}
}

/* ---------- 参考图：多张（上限由当前视频模型的 maxImageRefs 决定） ---------- */
.simple-refs-v121{display:grid;gap:8px}
.simple-refs-grid-v121{display:flex;flex-wrap:wrap;gap:10px}
.simple-ref-item-v121{position:relative;width:96px;height:96px;border-radius:14px;overflow:hidden;border:1px solid var(--line2);background:#000}
.simple-ref-item-v121 img{width:100%;height:100%;object-fit:cover;display:block}
.simple-ref-item-v121:first-child:after{content:"1";position:absolute;left:6px;top:6px;width:18px;height:18px;border-radius:50%;background:var(--gold);color:#141005;font-size:11px;font-weight:700;display:grid;place-items:center}
.simple-ref-add-v121{width:96px;height:96px;border-radius:14px;border:1px dashed var(--line2);display:grid;place-items:center;align-content:center;gap:2px;color:var(--muted);cursor:pointer;font-size:22px;background:rgba(255,255,255,.02);transition:border-color .18s ease,color .18s ease}
.simple-ref-add-v121:hover,.simple-ref-add-v121.drag{border-color:var(--gold);color:var(--gold)}
.simple-ref-add-t-v121{font-size:11.5px}
.simple-refs-hint-v121{margin:0;font-size:12px;color:var(--dim)}

/* ---------- 全部风格弹窗（目录会长到 100+，横向条装不下） ---------- */
.sb-body-v121{display:grid;gap:12px}
.sb-search-v121{width:100%;padding:11px 14px;border-radius:12px;border:1px solid var(--line2);background:var(--surface2);color:var(--text);font-size:14px}
.sb-search-v121:focus{outline:none;border-color:var(--gold)}
.sb-count-v121{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.sb-grid-v121{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;max-height:min(58vh,560px);overflow-y:auto;padding:2px}
.sb-card-wrap-v121{position:relative;display:flex;flex-direction:column}
.sb-card-v121{display:flex;flex-direction:column;gap:2px;text-align:left;padding:0 0 10px;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--surface);color:var(--text);width:100%;height:100%;cursor:pointer;transition:border-color .18s ease,transform .18s ease}
.sb-card-v121:hover{border-color:var(--line2);transform:translateY(-2px)}
.sb-card-v121.on{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset}
.sb-card-v121 img,.sb-nocover-v121{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;background:#111}
.sb-card-v121 b{padding:9px 11px 0;font-size:14px;font-weight:600}
.sb-card-v121 span{padding:0 11px;font-size:12px;color:var(--muted);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sb-need-v121{margin:4px 11px 0;font-style:normal;font-size:10.5px;color:var(--gold);letter-spacing:.04em}
.sb-auto-v121{justify-content:center;min-height:96px;padding:16px 12px}
.sb-auto-v121 b{padding-top:0}
.sb-detail-v121{position:absolute;right:8px;top:8px;padding:4px 9px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(10,10,12,.72);backdrop-filter:blur(6px);color:#fff;font-size:11px;cursor:pointer}
.sb-detail-v121:hover{border-color:var(--gold);color:var(--gold2)}
.sb-none-v121{grid-column:1/-1;padding:34px;text-align:center;color:var(--dim);font-size:13.5px}

/* ---------- 模式开关与「导演模式」外观 ----------
   两档必须一眼可辨：快速创作沿用低调胶囊，导演模式用品牌金实心。
   进入后整站换一层外观——金色描边 + 极缓慢流动的底色，
   只做氛围，不动布局，也不影响任何交互。 */
/* 选择器要带上 .mode button：v120 的 `.mode button{color:var(--muted)}`
   specificity 比单个类高，只写 .v121-director-btn 会被它压成灰色（实测）。 */
.mode button.v121-director-btn{border:1px solid var(--gold);background:transparent;color:var(--gold);border-radius:999px;padding:8px 22px;font-weight:600;letter-spacing:0;cursor:pointer;transition:background .18s ease,color .18s ease,box-shadow .18s ease}
.mode button.v121-director-btn:hover{background:rgba(227,189,87,.14);color:var(--gold2)}
.mode button.v121-director-btn.on{background:var(--gold);color:#141005;border-color:var(--gold);box-shadow:0 0 22px rgba(227,189,87,.35)}

body.v121-director{
  background-image:
    radial-gradient(720px 380px at 18% 8%,rgba(227,189,87,.13),transparent 60%),
    radial-gradient(640px 420px at 84% 92%,rgba(227,189,87,.09),transparent 62%),
    radial-gradient(900px 480px at 50% -160px,#17171b 0,#0e0e11 45%,#0a0a0c 100%);
  background-attachment:fixed;
  background-size:200% 200%,200% 200%,100% 100%;
  animation:v121DirectorDrift 42s ease-in-out infinite alternate;
}
@keyframes v121DirectorDrift{
  from{background-position:0% 0%,100% 100%,50% 0}
  to{background-position:100% 60%,0% 20%,50% 0}
}
body.v121-director .topbar{border-bottom-color:rgba(227,189,87,.28)}
body.v121-director .card,
body.v121-director .panel,
body.v121-director .composer,
body.v121-director .skill-card,
body.v121-director .modal{border-color:rgba(227,189,87,.34)}
body.v121-director .composer{box-shadow:0 0 0 1px rgba(227,189,87,.12),0 18px 50px rgba(0,0,0,.4)}

.v121-director-banner{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:0 0 16px;padding:12px 16px;border:1px solid rgba(227,189,87,.4);border-left:3px solid var(--gold);border-radius:12px;background:rgba(227,189,87,.06)}
.v121-director-banner b{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.v121-director-banner span{font-size:13px;color:var(--muted)}

@media(prefers-reduced-motion:reduce){
  body.v121-director{animation:none}
}

/* ---------- 导演模式的动态背景 ----------
   z-index:-1 让它落在 body 内容之下、html 底色之上；
   因此 body 在有视频时必须透明，否则底色会把视频整个盖住。 */
.v121-director-bg{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.v121-director-bg video{width:100%;height:100%;object-fit:cover;display:block;
  filter:brightness(.78) saturate(.9) blur(1px);transform:scale(1.06);will-change:transform}
/* 幕布中间压得比四周重：正文压在中轴上必须始终可读，
   画面则从两侧和上下透出来——太均匀地压暗就等于没有背景（实测第一版全黑）。 */
.v121-director-scrim{position:absolute;inset:0;display:block;
  background:
    radial-gradient(1050px 700px at 50% 46%,rgba(10,10,12,.88) 0%,rgba(10,10,12,.62) 46%,rgba(10,10,12,.2) 100%),
    linear-gradient(180deg,rgba(10,10,12,.5) 0%,rgba(10,10,12,.2) 38%,rgba(10,10,12,.24) 62%,rgba(10,10,12,.7) 100%),
    radial-gradient(760px 420px at 14% 10%,rgba(227,189,87,.12),transparent 64%)}
body.v121-director.v121-has-bg{background:transparent;animation:none}

/* ---------- 换挡幕：切模式时的过渡 ---------- */
.v121-modeshift{position:fixed;inset:0;z-index:200;display:grid;place-items:center;
  background:rgba(8,8,10,.96);opacity:0;transition:opacity .3s ease;pointer-events:none}
.v121-modeshift.in{opacity:1}
.v121-modeshift.out{opacity:0;transition:opacity .5s ease}
.v121-modeshift-name{font-size:13px;letter-spacing:.42em;text-transform:uppercase;font-weight:600;
  color:var(--muted);transform:translateY(6px);opacity:0;transition:transform .34s ease,opacity .34s ease}
.v121-modeshift.in .v121-modeshift-name{transform:translateY(0);opacity:1}
.v121-modeshift.to-director .v121-modeshift-name{color:var(--gold)}
/* 一道横扫的光带，像仪表盘换挡时的扫描 */
.v121-modeshift:after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);
  transform:scaleX(0);transition:transform .42s cubic-bezier(.4,0,.2,1)}
.v121-modeshift.to-director:after{background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.v121-modeshift.in:after{transform:scaleX(1)}

@media(prefers-reduced-motion:reduce){
  .v121-modeshift{display:none}
  .v121-director-bg{display:none}
}

/* 注册入口：登录弹窗里的次要链接，不与主按钮抢视觉 */
.signup-switch-v122{align-self:flex-start;padding:4px 0;color:var(--gold);font-size:13px;background:none;border:0;cursor:pointer}
.signup-switch-v122:hover{color:var(--gold2);background:none;text-decoration:underline}

/* ---------- 素材卡：让画幅一眼可辨 ----------
   原本预览是固定 16:10 的框 + object-fit:cover，竖屏成片被裁成横的，
   和 16:9 的成片在缩略图上长得一模一样——用户没法判断这条能不能直接发竖屏平台。
   改成 contain 后缩略图保持真实形状（竖屏就是窄高一条），再补一个比例角标。 */
.asset-card-preview{position:relative;background:#0c0d0b}
.asset-card-preview img,
.asset-card-preview video{width:100%;height:100%;object-fit:contain!important;background:#0c0d0b}
/* 竖屏内容在横框里两侧会留黑边，加一层同色渐变让它看起来是刻意的留白而非缺陷 */
.asset-card-preview.portrait{background:linear-gradient(90deg,#0a0b09,#131511 35%,#131511 65%,#0a0b09)}

.asset-aspect-badge-v123{position:absolute;left:8px;bottom:8px;z-index:2;
  padding:2px 7px;border-radius:999px;font-size:10.5px;font-weight:600;letter-spacing:.02em;
  background:rgba(8,8,10,.78);color:#e8e8ee;backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.14)}
/* 竖屏用品牌金标出来：它通常就是可以直接发抖音/小红书的那一条 */
.asset-aspect-badge-v123.portrait{color:#141005;background:var(--gold);border-color:var(--gold)}
.asset-aspect-badge-v123.square{color:#e8e8ee}

/* 详情弹窗里的预览同样保持真实比例，不要再裁一次 */
.asset-detail-media-v117 img,
.asset-detail-media-v117 video{object-fit:contain!important;background:#0c0d0b}

/* 成片页（图片）「改提示词再生成」的编辑框：用户要能在这里加台词、改细节。
   等宽偏大的行高是给中文长句读的，太密会让人不想改。 */
.simple-prompt-edit-v121{
  width:100%;box-sizing:border-box;resize:vertical;
  /* 提示词动辄七八百字。150px 只能看到三四行，用户得在一个小窗口里
     上下翻着找要改的那句——等于没法改。给足高度，并随内容自动长高。 */
  min-height:300px;max-height:58vh;
  padding:14px 16px;border-radius:12px;border:1px solid var(--line2);
  background:var(--surface2);color:var(--text);
  font:inherit;font-size:14.5px;line-height:1.85;
}
.simple-prompt-edit-v121:focus{outline:2px solid var(--gold);outline-offset:1px;border-color:transparent}

/* 成片页的「改提示词再生成」：默认收起，点开才占地方 */
.simple-repro-v121{display:flex;flex-direction:column;gap:10px;margin-top:12px;width:100%;min-width:0;justify-self:stretch}
.simple-repro-v121 label{color:var(--muted);font-size:14px}
.simple-result-v121{min-width:0;grid-template-columns:minmax(0,1fr)}
.simple-output-badge-v121{display:block;color:var(--muted);font-size:11px;line-height:1.4}
.simple-repro-v121 button{align-self:flex-start}

/* 参考素材现在可能是视频或音频，缩略图要能各自成立 */
.simple-ref-item-v121 video{width:100%;height:100%;object-fit:cover;display:block}
.simple-ref-audio-v121{
  display:flex;align-items:center;justify-content:center;width:100%;height:100%;
  padding:6px;font-size:11px;line-height:1.35;text-align:center;word-break:break-all;
  background:var(--surface3);color:var(--muted);
}

/* 图片类 Skill 产出一组图，不是一条视频 */
.simple-imggrid-v121{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.simple-imggrid-v121 img{width:100%;border-radius:12px;display:block}
.simple-imggrid-v121 figure{margin:0;min-width:0}
.simple-imggrid-v121.single-image{grid-template-columns:1fr;max-width:640px;margin:0 auto;width:100%}
.simple-imggrid-v121.single-image img{max-height:560px;object-fit:contain}
.simple-imggrid-v121 button{display:block;width:100%;padding:0;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:transparent;cursor:zoom-in}
.simple-imggrid-v121 button:hover{border-color:var(--gold)}
.simple-imggrid-v121 figure>a{display:block;text-align:center;padding:8px;font-size:12px;color:var(--muted)}

/* ---------- 素材详情：把素材本身放大，其余退到一边 ----------
   原来的版面把一个 4:3 的小框和六个信息卡片左右并排，各占一半：
   用户点「详情」是想看清这张图/这条视频长什么样，结果画面只有约四成宽，
   另一半写着「来源：项目产出」「状态：可使用」这类几乎不影响判断的字段。
   现在改成上下结构——素材占满整个宽度，信息压成一行淡色说明。 */
.asset-detail-layout-v117{grid-template-columns:1fr !important;gap:14px !important}
.asset-detail-media-v117{
  aspect-ratio:auto !important;
  /* 弹窗整体高度有上限（约 648px），预览再大就会把标题和关闭按钮挤出可视区。
     这里留出动作栏、标签页与说明行的空间，宁可小一点也要让整个弹窗完整可见。 */
  min-height:min(34vh,270px);max-height:40vh;
  background:#0b0c0a;
}
/* 正文自己滚动，并把高度限制在视口内——否则弹窗会顶出屏幕，
   标题和关闭按钮被裁掉（实测标题只剩下半截）。 */
.modal-body:has(.asset-detail-layout-v117){
  overflow-y:auto;overscroll-behavior:contain;
  max-height:calc(100vh - 168px);
}
.asset-detail-media-v117 img,
.asset-detail-media-v117 video{
  width:100%;height:100%;max-height:40vh;object-fit:contain !important;
}
.asset-detail-current-grid-v117{
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr)) !important;
  align-content:center;padding:10px !important;gap:10px !important;
}

/* 六个信息框压成一行低对比度说明：需要时看得到，不需要时不抢戏 */
.asset-detail-info-v117{
  display:flex !important;flex-wrap:wrap;gap:6px 18px !important;
  padding:2px 2px 4px;
}
.asset-detail-info-v117>div{
  padding:0 !important;border:0 !important;background:none !important;
  display:flex;align-items:baseline;gap:6px;font-size:12.5px;
}
.asset-detail-info-v117>div>*:first-child{color:var(--dim);font-size:11.5px}
.asset-detail-info-v117>div>*:last-child{color:var(--muted);font-weight:500}

/* 标签页轻量化：多数素材只有一份文件，标签不该看起来像主导航 */
.asset-detail-tabs-v117{gap:4px}
.asset-detail-tabs-v117 button{font-size:12.5px;padding:6px 12px}

@media (max-width:720px){
  .asset-detail-media-v117{min-height:38vh}
}

/* ---------- 素材页：把版面还给素材 ----------
   原本在看到第一张素材前要先越过约 200px 的标题与工具栏，外加 250px 的侧栏。
   页面上真正有信息的是素材本身，其余都是导航与说明。 */
.asset-title-v121{margin-bottom:14px}
.asset-title-v121 h1{margin:0;font-size:26px}

/* 工具栏挤成一行：搜索 + 来源 + 类型标签本来就是同一件事的三个维度，
   分两行摆会白占一整行高度。 */
.asset-toolbar-v117{gap:10px !important;margin-bottom:10px !important}
/* 来源下拉与类型标签本来上下堆着，白占一整行：它们是同一件事的两个维度 */
.asset-toolbar-actions{
  display:flex !important;align-items:center;justify-content:flex-end;
  gap:8px !important;flex-wrap:wrap;
}
.asset-toolbar-actions select{min-width:120px;width:auto !important}
@media (max-width:900px){
  .asset-toolbar-v117{grid-template-columns:1fr !important}
}

/* 侧栏收窄：文件夹名都很短，250px 是浪费 */
.asset-shell-v2{grid-template-columns:200px minmax(0,1fr)}
.asset-nav{padding:12px}

/* 卡片给大一点，一眼能看清素材长什么样 */
.asset-grid-v117,.asset-grid{grid-template-columns:repeat(auto-fill,minmax(228px,1fr)) !important;gap:14px !important}

/* 商品链接导入：紧贴在描述框下面，属于「还没想好怎么写」时的入口 */
.simple-link-v121{display:flex;gap:8px;margin-top:8px}
.simple-link-v121 input{
  flex:1;min-width:0;padding:10px 12px;border-radius:10px;
  border:1px solid var(--line);background:var(--surface2);color:var(--text);
  font:inherit;font-size:13px;
}
.simple-link-v121 input:focus{outline:2px solid var(--gold);outline-offset:1px;border-color:transparent}
.simple-link-v121 button{
  flex:0 0 auto;padding:10px 16px;border-radius:10px;cursor:pointer;
  border:1px solid var(--line2);background:var(--surface3);color:var(--text);font-size:13px;
}
.simple-link-v121 button:hover:not(:disabled){border-color:var(--gold);color:var(--gold)}
.simple-link-v121 button:disabled{opacity:.6;cursor:default}

/* Keep the language control reachable on narrow screens. */
@media(max-width:760px){
  /* A backdrop filter makes the header the containing block for fixed nav.
     Keep the mobile mode switch at the viewport bottom, clear of language/account controls. */
  .topbar{backdrop-filter:none;background:#0a0a0c}
  .topbar .mode{background:#151518;width:max-content;max-width:calc(100vw - 28px)}
  .topbar .mode button{padding:10px 12px;white-space:nowrap}
  /* 手机上三个圆钮（社区、任务、语言）一样大：都是 40×40，和下面「顶栏尺寸」那段的 40px 一致 */
  .top-actions #langToggle{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;min-width:40px;min-height:40px;padding:0}
}

.simple-asset-import-v121{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;margin:20px 0 12px}
.simple-asset-import-v121 button{font-size:13px;white-space:nowrap}
.simple-asset-import-v121 span{font-size:12px;color:var(--muted)}
.simple-asset-import-v121 button:disabled{opacity:.5;cursor:wait}

.simple-edit-summary-v121{padding:16px 18px;border:1px solid var(--line);border-radius:14px;margin:14px 0;text-align:left}.simple-edit-summary-v121 p{margin:8px 0 0;color:var(--muted);font-size:13px;line-height:1.7}
@media(max-width:600px){.simple-v121{padding-bottom:calc(140px + env(safe-area-inset-bottom,0px))}.simple-actions-v121:has(.billing-inline){display:grid;grid-template-columns:auto minmax(0,1fr)}.simple-actions-v121>button{scroll-margin-bottom:110px;justify-self:start}}

.simple-result-v121>.simple-model-control-v121{max-width:440px;margin:16px 0}
.simple-model-control-v121 option{background:#222225;color:#fff}

/* ---------- 素材槽位 ----------
   选了风格后按这个风格的需要一格一格列出：第几个、干什么、必填还是可选。
   沿用上面投放区的圆角、虚线、缩略图尺寸，只是把「一个大框」拆成有名字的格子。 */
.slots-v121{display:grid;gap:12px}
.slots-head-v121{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px}
.slots-head-v121 b{font-weight:600;color:var(--text)}
.slots-ok-v121{color:var(--green);font-size:12px}
.slots-todo-v121{color:var(--gold);font-size:12px}
/* 一行排得下就别往下堆：有的玩法要四五份素材，一格一行会把输入区拉得很长，
   底下的「开始创作」被推出屏幕。144px 是「96px 缩略图 + 标题」放得下的最小宽度。 */
.slots-grid-v121{display:grid;grid-template-columns:repeat(auto-fill,minmax(144px,1fr));gap:10px}
.slot-v121{display:grid;gap:8px;align-content:start;padding:12px;border-radius:16px;border:1px dashed var(--line2);background:rgba(255,255,255,.02);transition:border-color .18s ease,background .18s ease}
/* 必填且还空着：金色虚线提示「这一格要放」；放好了改成实线 */
.slot-v121.required:not(.filled){border-color:rgba(225,184,77,.55)}
.slot-v121.filled{border-style:solid;border-color:var(--line2)}
.slot-v121.active:hover{border-color:var(--gold);background:rgba(225,184,77,.04)}
.slot-top-v121{display:flex;align-items:center;gap:6px;font-size:13px;min-width:0}
.slot-top-v121 b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
.slot-top-v121 em{font-style:normal;font-size:11px;color:var(--dim);flex:none}
.slot-v121.required .slot-top-v121 em{color:var(--gold)}
.slot-n-v121{flex:none;font-size:15px;color:var(--muted)}
.slot-add-v121{display:grid;place-items:center;align-content:center;gap:2px;height:96px;border-radius:12px;border:1px dashed var(--line2);color:var(--muted);cursor:pointer;font-size:13px;text-align:center;padding:0 6px}
.slot-add-v121 span:first-child{font-size:22px;line-height:1}
.slot-add-v121:hover{border-color:var(--gold);color:var(--text)}
/* 按顺序填的格子：前一格还空着时，这一格先等着，避免文件落错位置 */
.slot-wait-v121{display:grid;place-items:center;height:96px;border-radius:12px;background:rgba(255,255,255,.015);color:var(--dim);font-size:12px;text-align:center;padding:0 8px}
/* 2026-10-06 起空着的格子不再「等前一格」：每一格都能点、能拖进去。.slot-wait-v121 现在只剩一种用处——放不进去的格子里那一句为什么。
   整格都能点：标题那一行、作者的那句话、四周的留白也是手形，点哪儿都打开文件选择框 */
.slot-v121.active{cursor:pointer}
/* 拖着文件停在这一格上：松手就进这一格 */
.slot-v121.active.over{border-color:var(--gold);background:rgba(225,184,77,.08)}
/* 放不进去的格子（当前模型不读这一种、读的份数用完了）不画成能点的：没有金色虚线、不是手形，里面那一句说为什么 */
.slot-v121.locked,.slot-v121.locked.required:not(.filled){border-style:solid;border-color:var(--line2);cursor:not-allowed}
.slot-v121.locked .slot-top-v121{opacity:.6}
.slot-v121.locked .slot-wait-v121{line-height:1.45;padding:6px 8px}
.slot-v121 .simple-ref-item-v121{width:100%;height:96px}
.slot-hint-v121{margin:0;font-size:11.5px;line-height:1.45;color:var(--dim)}
/* 用户写的 skill：这一行是作者写的上传追问，长短不由我们定。最多三行，长词、长网址也在格子里折行，全文在悬停的 title 里 */
.slot-hint-v121[data-user-content]{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden;overflow-wrap:anywhere}
.slots-extras-v121{display:grid;gap:8px;padding-top:4px}
.slots-extras-head-v121{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:12.5px}
.slots-extras-head-v121 b{font-weight:600;color:var(--muted)}
.slots-extras-head-v121 span{color:var(--dim);font-size:11.5px}
.slots-warn-v121{margin:0;padding:9px 12px;border-radius:12px;background:rgba(224,113,113,.1);color:var(--red);font-size:12.5px}
@media (max-width:600px){.slots-grid-v121{grid-template-columns:1fr 1fr}}

/* ---------- 等待页（已经开始做了的那一屏） ----------
   只说一句「已经开始做了」，剩下的屏幕拿去翻成片。卡片是横向矩形：
   这一屏的作用是让等待不难受，不是展柜，竖条卡在这里没有道理。 */
.started-v130{display:flex;flex-direction:column;gap:22px}
.started-bar-v130{margin:0}
.started-head-v130{display:flex;align-items:center;gap:16px;padding:16px 20px;border:1px solid rgba(225,184,77,.26);border-radius:16px;background:var(--panel)}
.started-thumb-v130{width:52px;height:52px;flex:0 0 auto;border-radius:11px;object-fit:cover;background:#2a2118;border:1px solid rgba(225,184,77,.28)}
.started-text-v130{min-width:0;flex:1 1 auto}
.started-text-v130 h2{margin:0 0 3px;font-size:19px;font-weight:800}
.started-text-v130 p{margin:0;font-size:13px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.started-eta-v130{flex:0 0 auto;text-align:right;display:flex;flex-direction:column;gap:3px;max-width:260px}
.started-eta-v130 span{font-size:11.5px;color:var(--dim);line-height:1.5}
.started-head-v130 .gold{border-radius:999px;padding:10px 20px;white-space:nowrap}
.started-browse-v130{display:flex;flex-direction:column;gap:12px}
.browse-head-v130{display:flex;align-items:center;gap:12px}
.browse-head-v130 h3{margin:0;font-size:15px;font-weight:700}
/* 「换一批」挨着标题放：推到最右边之后，它和它作用的那句话隔了一整行宽 */
.browse-head-v130 button{margin-left:0}
.browse-grid-v130{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media (max-width:900px){.browse-grid-v130{grid-template-columns:repeat(2,minmax(0,1fr))}}
.browse-card-v130{margin:0;display:flex;flex-direction:column;gap:6px}
.browse-card-v130 button{position:relative;padding:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#15161a;aspect-ratio:5/3;cursor:pointer;transition:border-color .18s ease,transform .18s ease}
.browse-card-v130 button:hover{transform:translateY(-2px)}
.browse-play-v130{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .18s ease;background:rgba(8,9,10,.34)}
.browse-play-v130 svg{width:38px;height:38px;color:#fff;filter:drop-shadow(0 2px 8px rgba(0,0,0,.5))}
.browse-card-v130 button:hover .browse-play-v130,.browse-card-v130 button:focus-visible .browse-play-v130{opacity:1}
.browse-card-v130 button:hover{border-color:rgba(225,184,77,.45)}
.browse-card-v130 video,.browse-card-v130 img{width:100%;height:100%;object-fit:cover;display:block}
/* 封面还没生成好或者取不到：留个底色和常亮的播放键，别是一块纯黑 */
.browse-card-nocover-v130 img{visibility:hidden}
.browse-card-nocover-v130 button{background:linear-gradient(140deg,#191a1f,#232228)}
.browse-card-nocover-v130 .browse-play-v130{opacity:.5;background:none}
.browse-card-v130 figcaption{font-size:11.5px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.browse-empty-v130{grid-column:1/-1;margin:0;padding:28px 0;text-align:center;font-size:13px;color:var(--dim)}
.browse-foot-v130{margin:0;font-size:12px;color:var(--dim)}
@media (max-width:900px){.browse-grid-v130{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){.started-head-v130{flex-wrap:wrap}.started-eta-v130{text-align:left}}

/* ---------- 成片页与修改页 ----------
   成片是唯一的主角：画框高度固定，9:16 和 16:9 都放在里面自适应，
   竖片瘦一条、横片宽一条，页面不会因为画幅跳来跳去。 */
.done-v130,.changes-v130{display:flex;flex-direction:column;align-items:center;gap:14px}
/* flex:none 是必须的：这是列向 flex 的子项，而 <video> 在元数据加载前没有
   固有尺寸，一旦允许收缩，画框就会被压成 0——实测正是如此。 */
.done-stage-v130{flex:none;height:clamp(320px,calc(100vh - 372px),900px);display:flex;align-items:center;justify-content:center;width:100%}
.done-stage-v130 video{height:auto;width:auto;max-height:100%;max-width:100%;object-fit:contain;border-radius:15px;border:1px solid rgba(225,184,77,.28);background:#15161a;display:block}
.changes-stage-v130{height:clamp(190px,calc(100vh - 650px),420px)}
.done-meta-v130{text-align:center;display:flex;flex-direction:column;gap:5px;max-width:720px}
.done-meta-v130 h2{margin:0;font-size:22px;font-weight:800}
.done-meta-v130 p{margin:0;font-size:14px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.done-meta-v130 span{font-size:12px;color:var(--dim)}
.done-actions-v130{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center}
.done-actions-v130 .gold{border-radius:999px;padding:12px 30px;font-size:15px}
.done-actions-v130 .ghost{border-radius:999px;padding:12px 22px}
.done-icon-v130{width:42px;height:42px;flex:0 0 auto;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--text);display:grid;place-items:center;cursor:pointer;text-decoration:none}
.done-icon-v130:hover{border-color:rgba(225,184,77,.45);background:#1d1f19}
.done-others-v130{width:100%;display:flex;flex-direction:column;gap:10px;margin-top:6px}
.done-others-v130 h3{margin:0;font-size:13px;font-weight:700;color:var(--muted)}
.done-start-over-v130{border:0;background:transparent;color:var(--dim);font-size:12.5px;cursor:pointer;padding:4px 8px}
.done-start-over-v130:hover{color:var(--text)}

.changes-current-v130{margin:0;font-size:12px;color:var(--dim);text-align:center}
.changes-title-v130{margin:6px 0 0;font-size:19px;font-weight:800;text-align:center}
.changes-sub-v130{margin:0;font-size:13px;color:var(--muted);text-align:center}
.changes-foot-v130{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid var(--line);padding-top:14px;margin-top:4px}
.changes-foot-v130 .gold,.changes-foot-v130 .ghost{border-radius:999px;padding:12px 26px}
@media (max-width:760px){.changes-fields-v130{grid-template-columns:1fr}.done-stage-v130{height:clamp(260px,calc(100vh - 300px),560px)}.changes-stage-v130{height:min(34vh,280px)}}

/* ---------- 新版输入页 v130：成片在前 · 一个输入区 · 玩法是大卡 ---------- */
.make-v130{gap:22px}
.make-v130 .sr-only-v130{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* 成片带：回来的人第一眼看到的是做出来的东西，不是空白输入框。
   一条都没有的新账号不显示这一段——空位不该当欢迎语用。 */
.band-v130{display:flex;flex-direction:column;gap:9px}
.band-v130 h2{margin:0;font-size:13px;font-weight:500;color:var(--muted)}
.band-grid-v130{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;align-content:start}
@media (max-width:1500px){.band-grid-v130{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.band-grid-v130{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* 每 20 秒换一批时轻轻淡入，免得六张图同时跳脸 */
.band-fade-v130>*{animation:bandFadeV130 .45s ease}
@keyframes bandFadeV130{from{opacity:.15}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.band-fade-v130>*{animation:none}}
.band-grid-v130 .browse-empty-v130{display:none}

/* 输入区：规格在卡顶一行，文字、素材、参数、生成都在同一张卡里 */
.composer-v130{border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.02);display:flex;flex-direction:column}
.composer-spec-v130{display:flex;align-items:center;gap:12px;padding:13px 22px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.02);border-radius:15px 15px 0 0}
.composer-pill-v130{border:1px solid rgba(255,200,97,.4);border-radius:999px;padding:6px 15px;font-size:13.5px;color:var(--gold2)}
.composer-skill-v130{font-size:13.5px;color:var(--muted)}
.composer-clear-v130{border:1px solid var(--line);background:transparent;color:var(--dim);border-radius:50%;width:22px;height:22px;line-height:1;cursor:pointer;padding:0}
.composer-clear-v130:hover{color:var(--text)}
.composer-spacer-v130{flex:1 1 auto}
.make-v130 .composer-text-v130{background:transparent;border:0;border-radius:0;padding:16px 18px 6px;font-size:17px;min-height:84px;resize:none}
.make-v130 .composer-text-v130:focus{outline:none;background:transparent}
.composer-media-v130{display:flex;flex-direction:column;gap:10px;padding:0 18px 14px}
.composer-media-v130>.slots-v121{flex:1 1 auto;width:100%;min-width:0}
.composer-foot-v130{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;padding:12px 14px 12px 18px;border-top:1px solid var(--line)}
/* 下拉框不许被挤到看不清型号：这一行放不下就让它自己换行，
   而不是把「Seedance 2.0」削成「Seedance 2.」。 */
.composer-foot-v130 .simple-option-v121{display:flex;flex-direction:column;gap:5px;flex:0 0 auto}
.composer-foot-v130 select{min-width:max-content}
.composer-foot-v130 .simple-go-v121{margin:0;border-radius:11px;padding:12px 30px;white-space:nowrap}

/* 玩法：最大的卖点，所以是大封面卡；筛选词说的是用途，不是分类 */
.skills-v130{display:flex;flex-direction:column;gap:12px}
.skills-head-v130{display:flex;align-items:baseline;gap:9px}
.skills-head-v130 h2{margin:0;font-size:17px;font-weight:700}
.skills-head-v130>span{font-size:12px;color:var(--dim)}
.skills-all-v130{border:0;background:transparent;color:var(--muted);font-size:12px;cursor:pointer;padding:0}
.skills-all-v130:hover{color:var(--gold2)}
.skills-goals-v130{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.skills-goals-v130 button{border:1px solid var(--line);border-radius:999px;padding:7px 15px;font-size:13px;background:transparent;color:var(--muted);cursor:pointer}
.skills-goals-v130 button:hover{color:var(--text)}
.skills-goals-v130 button.on{border-color:transparent;background:var(--gold);color:#17150f;font-weight:600}
.skills-grid-v130{display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(200px,14vw,290px),1fr));gap:14px}
.skill-card-v130{position:relative;border:1px solid var(--line);border-radius:13px;overflow:hidden;background:rgba(255,255,255,.02);transition:border-color .2s ease,transform .2s ease}
.skill-card-v130:hover{border-color:rgba(225,184,77,.4);transform:translateY(-2px)}
.skill-card-v130.on{border-color:rgba(225,184,77,.75)}
.skill-card-v130>button:first-child{display:block;width:100%;text-align:left;border:0;background:transparent;padding:0 0 12px;color:var(--text);cursor:pointer;font:inherit}
.skill-card-v130 img,.skill-blank-v130{display:block;width:100%;height:92px;object-fit:cover;background:rgba(225,184,77,.08)}
.skill-card-v130 b{display:block;padding:10px 12px 3px;font-size:14px;font-weight:700;line-height:1.3}
.skill-card-v130>button:first-child>span{display:block;padding:0 12px;font-size:11.5px;line-height:1.5;color:var(--muted)}
.skill-card-v130 em{display:block;padding:6px 12px 0;font-size:11px;font-style:normal;color:var(--gold2)}

@media (max-width:760px){
  .skills-grid-v130{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .composer-foot-v130 .simple-go-v121{width:100%}
}
/* 输入卡里的上传位是配角：不铺成整块空地，高度只够放缩略图和一句话 */
.composer-media-v130 .simple-drop-v121{min-height:0;padding:13px 16px;border-radius:12px;gap:2px}
.composer-media-v130 .simple-drop-main-v121{font-size:13.5px}
.composer-media-v130 .simple-refs-v121{padding:0}

/* 选中的玩法要一眼看见：金底深字，外加一圈很慢的呼吸——
   它是「你现在在做什么」的唯一提示，不该和旁边的说明文字长得一样。 */
.composer-skill-v130.on{
  background:var(--gold);color:#17150f;font-weight:700;border-radius:999px;padding:7px 16px;
  box-shadow:0 0 0 0 rgba(225,184,77,.55);animation:skillBreathe-v130 3.2s ease-in-out infinite;
}
@keyframes skillBreathe-v130{
  0%,100%{box-shadow:0 0 0 0 rgba(225,184,77,.55),0 0 0 0 rgba(225,184,77,.35);filter:brightness(.9);transform:scale(1)}
  50%{box-shadow:0 0 18px 4px rgba(225,184,77,.45),0 0 0 12px rgba(225,184,77,0);filter:brightness(1.12);transform:scale(1.045)}
}
/* 动画只是提示，不该给对动效敏感的人添麻烦 */
@media (prefers-reduced-motion:reduce){.composer-skill-v130.on{animation:none}}
.composer-skill-v130.on+.composer-clear-v130{border-color:rgba(225,184,77,.5);color:var(--gold2)}

.skills-more-v130{
  align-self:center;margin-top:2px;border:1px solid var(--line);border-radius:999px;
  padding:8px 20px;font-size:13px;background:transparent;color:var(--muted);cursor:pointer;
}
.skills-more-v130:hover{color:var(--text);border-color:rgba(225,184,77,.4)}

/* 顶栏主导航：快速创作 / 导演模式 是产品的两个主入口，字号要撑得住，
   但 24px 钉死之后在笔记本上正是顶栏显大的主因，所以同样改成跟着屏宽走。
   手机上它是固定底栏，放大会挤出屏幕，所以这一段只管桌面。
   这里不再设 .topbar 高度——高度由上面那条 clamp 统一管，两处各写一个值
   只会让人改了一处以为没生效。 */
@media (min-width:761px){
  .mode{padding:clamp(3px,.27vw,4.5px)}
  .mode button{padding:clamp(8px,.77vw,10px) clamp(16px,2vw,24px);font-size:clamp(13.5px,1.17vw,17px);font-weight:600}
}

/* 站脚常驻视口底部：不用滚到最后也看得见。
   因为它是 fixed，页面要自己留出等高的底部空间，否则最后一屏会被压在下面。
   手机上底部已经有一条固定的模式栏，两条固定栏叠在一起会把内容挤没，
   所以窄屏回到普通跟随文档流。 */
.site-foot{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  border-top:1px solid var(--line);
  padding:10px 22px calc(10px + env(safe-area-inset-bottom,0px));
  background:rgba(10,11,10,.94);backdrop-filter:blur(14px);
}
body{padding-bottom:63px}
.site-foot-inner{max-width:1860px;margin:0 auto;display:flex;align-items:center;gap:12.5px;flex-wrap:wrap}
.site-foot-copy{font-size:11.5px;color:var(--dim)}
.site-foot-copy b{color:var(--muted);font-weight:600}
.site-foot-social{display:flex;align-items:center;gap:8px;margin-left:auto}
.site-foot-icon{width:31px;height:31px;border-radius:50%;border:1px solid var(--line);display:inline-flex;align-items:center;justify-content:center;color:var(--muted);background:rgba(255,255,255,.02)}
.site-foot-icon svg{width:16px;height:16px}
.site-foot-icon:hover{color:var(--gold2);border-color:rgba(225,184,77,.42)}
@media (max-width:760px){
  .site-foot{position:static;padding:20px 16px;margin-bottom:calc(74px + env(safe-area-inset-bottom,0px))}
  body{padding-bottom:0}
  .site-foot-social{margin-left:0}
}
/* 备案号（docs/66「域名上线：从 IP:8443 搬到 bitframe.cn」；docs/67 第 3 节第 47 条）：index.html 站脚里写着的那一行，不靠脚本，不跑脚本的检查工具也看得到。
   站脚最后自己一行、居中（备案管理办法：主页底部的中央位置），每个宽度都一样。桌面上站脚钉在底边，多了这一行高到 73px 左右，页面底下留 76px；
   手机上站脚跟着页面走，两个号码（公安联网备案号也写了时）上下排、各自居中，不伸到右下角「回到顶部」底下。 */
.site-foot-filing{order:1;flex-basis:100%;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:4px 12px;font-size:11px;line-height:1.5;color:var(--dim);text-align:center}
.site-foot-filing a{color:inherit;text-decoration:none;white-space:nowrap}
.site-foot-filing a:hover,.site-foot-filing a:focus-visible{color:var(--muted);text-decoration:underline}
@media (min-width:761px){.site-foot-inner{row-gap:4px}body{padding-bottom:76px}}
@media (max-width:760px){.site-foot-filing{flex-direction:column;gap:2px}}

/* 输入卡底部这几个下拉框要长得一样：模型那两个走 surface2，
   时长/版本/画幅原来是半透明白，并排看得出色差。 */
.composer-foot-v130 select{background-color:var(--surface2);color:var(--text)}

/* 铺满屏幕：新版的内容宽度跟着窗口走，两侧留一条固定的呼吸位。
   上限 1860px 是为了超宽屏——再宽下去一行能塞十几张卡，反而找不到东西。 */
/* 空白按屏幕的余量给：宽屏两侧合计留 600px，窄屏该铺满还是铺满。
   padding 自己从 16px 长到 300px——1280 的笔记本只让出 80px，
   2560 让出 600px，中间那一段稳定在 1200px 正文宽。 */
.app.app-wide-v130{max-width:none;padding-left:clamp(16px,calc((100vw - 1200px) / 2),300px);padding-right:clamp(16px,calc((100vw - 1200px) / 2),300px)}
.simple-v121.simple-wide-v130{max-width:none}

/* 输入卡整块都是拖放区：从那句话开始一直到底下的按钮，落在哪儿都算。
   一旦有素材进来，这些引导用的虚线和提示就撤掉——它们是给空白页看的。 */
.composer-body-v130{display:flex;flex-direction:column;border-radius:14px;margin:clamp(12px,2vw,20px);transition:background .18s ease,box-shadow .18s ease}
.composer-body-v130.empty-v130{box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);background:rgba(255,255,255,.012);min-height:200px}
.composer-body-v130.empty-v130 .composer-media-v130{margin-top:auto}
.composer-body-v130.drag{background:rgba(225,184,77,.08);box-shadow:inset 0 0 0 2px rgba(225,184,77,.5)}
.composer-body-v130 .composer-text-v130{padding:16px 12px 6px}
.composer-body-v130 .composer-media-v130{padding:0 12px 12px}
/* 空态那一行提示不再自己画一个框：整块已经是框了 */
.composer-body-v130.empty-v130 .simple-drop-v121{border-style:none;background:transparent;padding:6px 0 2px}

/* 点开看别人那条 */
.showcase-body-v130{display:flex;align-items:center;justify-content:center;padding:0}
.showcase-body-v130 video{width:100%;max-height:min(72vh,720px);border-radius:12px;background:#0d0e11;display:block}

/* 停下来问一句的那一屏：只说遇到了什么、可以怎么办。不出现提示词。 */
.notice-v130{max-width:680px;margin:0 auto;display:flex;flex-direction:column;gap:12px;border:1px solid rgba(255,200,97,.3);border-radius:16px;background:var(--surface);padding:24px 26px}
.notice-v130 h2{margin:0;font-size:19px;font-weight:800}
.notice-v130 p{margin:0;color:var(--muted);font-size:14px;line-height:1.7}
.notice-swap-v130{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;color:var(--dim)}
.notice-foot-v130{display:flex;align-items:center;gap:10px;justify-content:flex-end;border-top:1px solid var(--line);padding-top:16px;margin-top:4px}
.notice-foot-v130 .gold,.notice-foot-v130 .ghost{border-radius:999px;padding:11px 22px}

/* ---------- 框角系统 · BITFRAME UI ELEMENTS 01 ----------
   规格照搬设计稿：线宽 1.5px，24px 见方里角线 8px，直角不倒圆。
   八段渐变画在一个伪元素上，不额外加 DOM——卡片列表一行十几个，
   每个多塞四个 span 是要还的。
   状态取自同一张表：默认暖白、悬停变亮、激活与选中用金色加光晕。 */
.bf-frame{position:relative}
.bf-frame::after{
  content:'';position:absolute;inset:var(--bf-inset,0);pointer-events:none;z-index:2;
  --c:var(--bf-color,rgba(237,232,217,.34));
  --l:var(--bf-len,14px);
  --t:var(--bf-thick,1.5px);
  background:
    linear-gradient(var(--c),var(--c)) top left/var(--l) var(--t) no-repeat,
    linear-gradient(var(--c),var(--c)) top left/var(--t) var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) top right/var(--l) var(--t) no-repeat,
    linear-gradient(var(--c),var(--c)) top right/var(--t) var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) bottom left/var(--l) var(--t) no-repeat,
    linear-gradient(var(--c),var(--c)) bottom left/var(--t) var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) bottom right/var(--l) var(--t) no-repeat,
    linear-gradient(var(--c),var(--c)) bottom right/var(--t) var(--l) no-repeat;
  transition:background .2s ease,filter .2s ease;
}
.bf-frame:hover::after{--c:rgba(237,232,217,.6)}
/* 激活 / 选中：金色，带一层克制的光晕。规范 05-01：金色只给激活状态和关键交互。 */
.bf-frame.on::after,.bf-frame:focus-within::after{--c:var(--gold);filter:drop-shadow(0 0 6px var(--glow,rgba(255,200,97,.6)))}
.bf-frame.bf-lg::after{--l:22px;--bf-thick:1.5px}
.bf-frame.bf-gold::after{--c:var(--gold)}
@media (prefers-reduced-motion:reduce){.bf-frame::after{transition:none}}

/* 几处具体用法：输入卡（拖入时整卡转金）、玩法卡、成片画框、停下来问的那一屏 */
.composer-v130.bf-frame::after{--bf-inset:-1px;--l:22px}
.composer-v130:has(.composer-body-v130.drag)::after{--c:var(--gold);filter:drop-shadow(0 0 8px var(--glow))}
.skill-card-v130.on::after{--c:var(--gold);filter:drop-shadow(0 0 6px var(--glow))}
.done-stage-v130.bf-frame::after{--bf-inset:-10px;--l:26px;--c:rgba(255,200,97,.55)}
.notice-v130.bf-frame::after{--l:20px;--c:var(--gold)}

/* 章节标题旁边的细线：参考稿里每个段落标题后面都跟一条，
   它把一屏切成几块，比加边框安静。 */
.bf-rule{flex:1;height:1px;background:linear-gradient(90deg,var(--line2),transparent);min-width:40px}
.band-v130 h2{display:flex;align-items:center;gap:12px}

.site-foot-sep{margin:0 10px;color:var(--line2)}
.site-foot-product{color:var(--dim)}
.site-foot-product b{color:var(--muted);font-weight:600}
@media (max-width:760px){.site-foot-sep{display:none}.site-foot-product{display:block;margin-top:2px}}

/* ---------- 顶栏与站脚：按参考稿的排布 ---------- */
.brand{gap:14px}
.brand-rule{width:1px;height:26px;background:var(--line2);flex:none}
.brand-tagline{display:flex;flex-direction:column;gap:2px;line-height:1.25}
.brand-tagline b{font-size:14px;font-weight:600;color:var(--text);letter-spacing:.12em}
.brand-tagline span{font-size:11.5px;color:var(--dim);letter-spacing:.06em}
@media (max-width:1100px){.brand-rule,.brand-tagline{display:none}}

/* 语言键：和社区、任务一样的正圆，只放地球图标（不再是「地球 + 语言」的胶囊，点一下也不会变宽）。
   切到哪种语言写在 title / aria-label 里。描边和底色照社区按钮（v140-community.css）；
   尺寸、图标大小走 .top-round-v130 那几条，和任务按钮一样。 */
.lang-toggle-v119.top-round-v130{border:1px solid var(--line2);background:var(--surface);color:var(--text);letter-spacing:0}
.lang-toggle-v119.top-round-v130:hover{border-color:#55524a;background:var(--surface2);color:#fff}

.site-foot-brand{font-size:12.5px;color:var(--dim);display:inline-flex;align-items:center;gap:8px;letter-spacing:.06em}
.site-foot-brand b{color:var(--text);font-weight:700;letter-spacing:.14em}
.site-foot-brand i{display:inline-block;width:1px;height:12px;background:var(--line2)}
@media (max-width:900px){.site-foot-brand{display:none}}

/* ---------- 段落标题：金色竖条 + 标题 + 副标题 + 渐隐细线 ---------- */
.bf-head-v130{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.bf-tick{width:3px;height:17px;border-radius:2px;background:var(--gold);box-shadow:0 0 8px var(--glow);flex:none}
.bf-head-v130 h2{margin:0;font-size:17px;font-weight:700;letter-spacing:.02em}
.bf-head-v130 p{margin:0;font-size:12.5px;color:var(--dim)}
.band-v130 .bf-head-v130 h2{font-size:15px}

/* ---------- 输入卡：上传位是左边一个小方块，例句和素材库排在它右边 ---------- */
.composer-media-v130{flex-direction:row;align-items:stretch;gap:14px}
.composer-media-v130 .simple-drop-v121{flex:0 0 170px;min-height:118px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center}
.composer-body-v130.empty-v130 .simple-drop-v121{border:1px dashed var(--line2);background:rgba(255,255,255,.015);border-radius:12px;padding:14px 12px}
.composer-body-v130.empty-v130 .simple-drop-v121:hover{border-color:rgba(255,200,97,.45)}
.composer-media-v130 .simple-refs-v121{flex:0 1 auto;max-width:min(100%,458px)}
.composer-foot-v130 .simple-asset-import-v121{margin:0;flex:0 0 auto;align-items:center}
.composer-foot-v130 .simple-asset-import-v121 button{
  min-width:210px;padding:14px 32px;font-size:17px;font-weight:600;border-radius:13px;
  background:transparent;border:1px solid var(--gold);color:var(--gold2);white-space:nowrap;
}
.composer-foot-v130 .simple-asset-import-v121 button:hover{background:rgba(225,184,77,.1);border-color:var(--gold2)}
@media (max-width:1280px){.composer-foot-v130 .simple-asset-import-v121 button{min-width:0;padding:14px 22px;font-size:15px}}
@media (max-width:760px){
  .composer-media-v130{flex-direction:column}
  .composer-media-v130 .simple-drop-v121{flex:none;width:100%}
}

/* ---------- 开始创作 ---------- */
.simple-go-v121{display:inline-flex;align-items:center;gap:9px}
.simple-go-v121 svg{width:17px;height:17px;flex:none}
.simple-go-v121 .go-arrow-v130{width:16px;height:16px;opacity:.75;transition:transform .18s ease}
.simple-go-v121:hover .go-arrow-v130{transform:translateX(3px)}

/* ---------- 玩法卡底部：模板类型 + 圆箭头 ---------- */
.skill-foot-v130{display:flex;align-items:center;gap:10px;padding:0 12px 12px;margin-top:2px}
.skill-kind-v130{font-size:11px;color:var(--dim);border:1px solid var(--line);border-radius:999px;padding:3px 9px}
/* 分类标签：一个玩法可以挂好几个，卡片上最多显示两个。
   比输出类型那颗更淡——它是分类，不是「这会产出什么」那种要紧的信息。 */
.skill-meta-v130{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:8px 12px 12px}
/* 上面 .skill-card-v130 em 是 display:block（那时它自己占一行），
   进了这一行就得改回行内，否则三样东西各占一行。 */
.skill-card-v130 .skill-meta-v130 em{display:inline;padding:0;font-size:11.5px}
/* 这一行实际是块级的（上面 .skill-card-v130>button:first-child>span 的权重更高，display:flex 没生效），
   标签是行内的 <i>：行内元素不认 max-width，长标签会顶出卡片。改成 inline-block 才截得住（v121）。
   上限是这一行的宽度，不再是 9em：9em 会把一直整行显示的 Design & posters 截成 Design & post…，
   官方卡片的样子不该因为这次修改变了 */
.skill-tag-v130{display:inline-block;vertical-align:middle;font-style:normal;font-size:11px;color:var(--dim);background:rgba(255,255,255,.05);border-radius:999px;padding:2px 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
/* 从圆点改成胶囊：一个箭头说不清点下去会发生什么 */
.skill-card-v130 em{padding:0 12px}
.drop-icon-v130{width:26px;height:26px;color:var(--muted);opacity:.85}
.drop-tile-v130 .simple-drop-main-v121{font-size:12.5px;line-height:1.5}
.drop-tile-v130 .simple-drop-sub-v121{display:block;font-size:11.5px;color:var(--dim)}

/* ---------- 顶栏尺寸 ----------
   原来照着参考稿钉的是一组固定像素（112 / 78 / 60 / 57）。参考稿是按宽屏画的，
   放到笔记本上就太占地方——笔记本窄，而且矮，112px 的顶栏是从内容里切走的。
   现在全部改成 clamp(下限, 随屏宽, 上限)：上限取原来的八成，中间那一项让它
   在笔记本这一段自己往下收，到窄屏再停在下限上，不会缩到点不中。 */
.topbar{height:clamp(61px,5.6vw,81px)}
.brand-wordmark{height:clamp(36px,3.9vw,56px)}
.top-round-v130{width:clamp(38px,3vw,43px);height:clamp(38px,3vw,43px)}
.top-round-v130 svg{width:clamp(15px,1.3vw,19px);height:clamp(15px,1.3vw,19px)}
.avatar-btn .avatar{width:clamp(34px,2.9vw,41px);height:clamp(34px,2.9vw,41px);font-size:clamp(12.5px,.95vw,14px)}
.tasks-btn-v123.top-round-v130 .tasks-badge-v123{top:-2px;right:-2px}
/* 手机上顶栏本来就窄，再按 vw 缩会缩到点不中；这里给一组固定值，
   圆钮不小于 40px（触控目标的下限）。 */
/* 手机上圆钮仍然保持 40px：再按比例缩就低于触控目标的下限了，
   缩的是顶栏高度和 logo。 */
@media (max-width:760px){.topbar{height:61px}.brand-wordmark{height:36px}.top-round-v130{width:40px;height:40px}.top-round-v130 svg{width:18px;height:18px}.avatar-btn .avatar{width:36px;height:36px;font-size:13px}}

/* ---------- 灵感参考：左边成片，右边主视觉 ---------- */
.band-row-v130{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:12px;align-items:start}
.band-grid-v130{display:contents}
/* 一行放得下就别折行：折成两行之后这一段要占掉近 430px，
   笔记本上（768 高）输入框就整个掉到屏幕外了，而那才是要用的东西。 */
@media (max-width:1200px){.band-row-v130{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:560px){.band-row-v130{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* 和成片卡同尺寸同圆角：以后这一格要换成提示词视频，先按卡片的形状占住。
   原来左边缘做了淡出，是为了跟旁边那排卡接得上；现在它自己就是一张卡，
   淡出反而显得缺了一块，去掉。 */
.band-art-v130{
  aspect-ratio:5/3;border-radius:14px;border:1px solid var(--line);
  background-image:url('/assets/brand/bitframe-bg.webp?v=20260924');
  background-size:cover;background-position:center;
}
.band-art-card-v130 figcaption{visibility:hidden}
@media (max-width:560px){.band-art-card-v130{display:none}}   /* 手机上两列，留给成片 */

/* ---------- 回到顶部 ---------- */
.back-to-top-v130{
  position:fixed;right:clamp(16px,2.4vw,40px);bottom:calc(72px + env(safe-area-inset-bottom,0px));z-index:45;
  width:55px;height:55px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line2);background:rgba(20,20,20,.92);color:var(--muted);
  backdrop-filter:blur(10px);box-shadow:0 10px 30px rgba(0,0,0,.45);cursor:pointer;
}
.back-to-top-v130:hover{color:var(--gold);border-color:rgba(255,200,97,.5)}
.back-to-top-v130 svg{width:23px;height:23px}
.back-to-top-v130[hidden]{display:none}
@media (max-width:760px){.back-to-top-v130{bottom:calc(100px + env(safe-area-inset-bottom,0px))}}
/* 铺满一行的按钮（开始创作、查看套餐与积分、「没有开始」那一屏的出口）正好滚到这个圆底下：先让开，别让一点回了顶部（clearFab，设计稿 d3） */
body.fab-off-v142 #backToTop{visibility:hidden}

/* 滚动追加的哨兵：占一行的空位，别让它把网格撑出间隙 */
.skills-end-v130{height:1px;grid-column:1/-1}

/* 选中的玩法飞过去用的替身：贴在页面上层，落地即删 */
.skill-fly-v130{position:fixed;z-index:120;border-radius:10px;background-color:#1a1b20;background-size:cover;background-position:center;box-shadow:0 12px 30px rgba(0,0,0,.45);pointer-events:none}
/* 落地那一下让「玩法：xx」自己弹一下，告诉用户东西落在这儿了。
   选中状态本来就挂着 skillBreathe 这个无限循环，animation 是同一个属性，
   只写落地那一条会把呼吸整条顶掉——所以两条一起写，呼吸延后到落地之后接上。
   选择器也要压过 .composer-skill-v130.on，否则这条根本不生效。 */
.composer-skill-v130.on.composer-skill-landed-v130{
  animation:skillLanded-v130 .55s cubic-bezier(.2,1.5,.4,1),skillBreathe-v130 3.2s ease-in-out .55s infinite;
}
@keyframes skillLanded-v130{
  0%{transform:scale(.82);filter:brightness(1.35)}
  60%{transform:scale(1.14);filter:brightness(1.2)}
  100%{transform:scale(1);filter:brightness(1)}
}
@media (prefers-reduced-motion:reduce){.composer-skill-v130.on.composer-skill-landed-v130{animation:none}}

/* 价格跟着按钮竖排：写在同一行里会把按钮挤窄，而它是整页最该点的东西 */
/* margin-left:auto 是为了换行之后：这一组独占一行时前面没有撑开的空位，
   不推一把就会贴到左边，而按钮该一直在右下角。 */
/* 封住整组的宽度：价格那行在试用受限时是一整句话，不封的话这一组会被它
   撑到 280px，比按钮还宽，整行又放不下——正是刚才换行的原因之一。 */
.go-wrap-v130{display:flex;flex-direction:column;align-items:stretch;gap:5px;flex:0 0 auto;margin-left:auto;max-width:260px}
/* 试用受限时这里是一整句话，封住宽度免得把整行撑开 */
.go-price-v130{margin:0;max-width:280px;font-size:12px;line-height:1.3;color:var(--dim);text-align:center}
.go-price-v130:empty{display:none}
.go-price-warn-v130{color:#e9a13b}
@media (max-width:760px){.go-wrap-v130{width:100%}.go-price-v130{max-width:100%}}

/* ---------- 开始创作：整页最重要的按钮 ----------
   放大一圈，再给星星一点动静。规范 05-04「保持简洁」：只动星星，
   按钮本身不跳不闪；对动效敏感的人一律静止。 */
.composer-foot-v130 .simple-go-v121{flex:0 0 auto;min-width:210px;justify-content:center;padding:14px 32px;font-size:17px;border-radius:13px;gap:10px}
.composer-foot-v130 .simple-go-v121 svg{width:20px;height:20px}
.composer-foot-v130 .simple-go-v121 .go-arrow-v130{width:18px;height:18px}
/* 两颗星错开呼吸：大的慢，小的快半拍，像是在闪 */
.simple-go-v121 svg:first-of-type path:first-child{transform-origin:12px 9.5px;animation:goStar-v130 2.8s ease-in-out infinite}
.simple-go-v121 svg:first-of-type path:last-child{transform-origin:18.5px 17.1px;animation:goStar-v130 2.8s ease-in-out .9s infinite}
@keyframes goStar-v130{
  0%,100%{opacity:.85;transform:scale(.92) rotate(0deg)}
  45%{opacity:1;transform:scale(1.12) rotate(18deg)}
}
/* 悬停时有一道很淡的光扫过，松开就停 */
.composer-foot-v130 .simple-go-v121{position:relative;overflow:hidden}
.composer-foot-v130 .simple-go-v121::after{
  content:'';position:absolute;top:0;bottom:0;width:38%;left:-45%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent);
  transform:skewX(-18deg);opacity:0;pointer-events:none;
}
.composer-foot-v130 .simple-go-v121:hover::after{opacity:1;animation:goSheen-v130 .9s ease-out}
@keyframes goSheen-v130{from{left:-45%}to{left:115%}}
@media (prefers-reduced-motion:reduce){
  .simple-go-v121 svg path{animation:none}
  .composer-foot-v130 .simple-go-v121:hover::after{animation:none;opacity:0}
}
@media (max-width:760px){.composer-foot-v130 .simple-go-v121{padding:14px 26px;font-size:16px}}

/* ---------- 玩法卡片放大一档 ----------
   封面 92px 太小，看不出这玩法做出来是什么样。一排少放一张，换看得清。
   放在文件末尾：上面已经有一份 .skills-grid-v130 和封面高度，同权重时后来者赢。 */
/* 最小轨道用固定值，不要用 vw。
   容器宽度是分档跳的（1600 以下都锁 1200，1920 才到 1320），而 17vw 跟着屏宽
   一路涨——1920 上 min 变成 326px，容器只有 1320，于是列数从 4 掉到 3，
   每张卡反而撑到 431px，比 2560 上的还大。
   固定 280px 之后列数只随容器涨，卡片宽度在 289~319 之间，不会再反过来。 */
.skills-grid-v130{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
/* 用比例不用固定高度：卡片宽度随屏宽从 290 变到 430，钉死 150px 高
   会让宽屏上的封面变成又扁又长的一条（431×150 接近 3:1）。 */
.skill-card-v130 img,.skill-blank-v130{height:auto;aspect-ratio:16/9;object-fit:cover}
.skill-card-v130 b{font-size:15px}

/* ---------- 输入区飞进「正在做」那一屏（v135） ---------- */
.composer-fly-v135{
  position:fixed;z-index:120;border-radius:16px;pointer-events:none;
  background-color:#1a1b20;background-size:cover;background-position:center;
  border:1px solid rgba(225,184,77,.45);box-shadow:0 18px 44px rgba(0,0,0,.5);
}
/* 落地时缩略图自己弹一下，告诉用户东西落在这儿了 */
.started-thumb-landed-v135{animation:startedThumbLand-v135 .5s cubic-bezier(.2,1.5,.4,1)}
@keyframes startedThumbLand-v135{
  0%{transform:scale(.7);filter:brightness(1.4)}
  60%{transform:scale(1.12)}
  100%{transform:scale(1)}
}
@media (prefers-reduced-motion:reduce){.started-thumb-landed-v135{animation:none}}

/* 成片页的两个出口并排：「返回创作页」留着素材回去改，
   「重新开始一条别的」清干净重来。此前只有后者，人不敢点。 */
.done-exits-v136{display:flex;gap:4px;align-items:center;justify-content:center;flex-wrap:wrap}
.done-exits-v136 .done-start-over-v130:first-child{color:var(--muted)}

/* 我的玩法（v137）。列表一行一条，右边三个动作；写和改在新编辑器（v141）里。 */
.myskill-row-v137{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.myskill-row-v137:last-child{border-bottom:0}
.myskill-name-v137{min-width:0;flex:1}
.myskill-name-v137 b{display:block;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.myskill-name-v137>span{display:block;font-size:11.5px;color:var(--dim);margin-top:2px}
.myskill-acts-v137{display:flex;gap:6px;flex-shrink:0}
.myskill-acts-v137 .ghost{padding:5px 11px;font-size:12px}
/* 每一条下面一行小字：分类 · 社区状态 · 分享中 · 来源已下架；再下一行「改编自 @作者 · 原名」 */
.myskill-meta-v141{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin-top:3px;font-size:11.5px;color:var(--dim)}
.myskill-status-v141{display:inline-flex;align-items:center;padding:1px 8px;border-radius:999px;border:1px solid var(--line2);color:var(--muted);line-height:1.6}
.myskill-status-v141[data-status="public"]{color:var(--gold);border-color:rgba(225,184,77,.45);background:rgba(225,184,77,.08)}
.myskill-status-v141[data-status="review"]{color:var(--gold2);border-color:rgba(225,184,77,.3)}
.myskill-status-v141[data-status="rejected"],.myskill-status-v141[data-status="removed"],.myskill-status-v141[data-status="paused"]{color:#f0b8ae;border-color:rgba(214,92,76,.45);background:rgba(214,92,76,.08)}
.myskill-fork-v141{margin:3px 0 0;font-size:11.5px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.myskill-link-v141{padding:0;border:0;background:none;color:var(--gold2);font:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.myskill-link-v141:hover{color:var(--gold)}
.myskill-link-v141:focus-visible{outline:none;box-shadow:var(--ring);border-radius:3px}
/* 校验器的报错是写给作者看的中文，可能很长——让它能换行、能选中复制 */
.myskill-error-v137{margin-top:10px;padding:10px 12px;border:1px solid rgba(214,92,76,.5);border-radius:8px;background:rgba(214,92,76,.08);color:#f0b8ae;font-size:12.5px;line-height:1.6;white-space:pre-wrap;user-select:text}
/* 自己的玩法在卡片上有个角标，否则和四十个官方玩法混在一起认不出来 */
.skill-mine-v137{background:rgba(225,184,77,.18);color:var(--gold);border-color:rgba(225,184,77,.4)}
/* 谁做的（v121）：官方的 BitFrame 带一个小品牌标，用户写的是 @作者。以前收藏的卡片在底栏写「来自 @作者」，
   现在每张卡都单独一行写作者。名字可能很长：这一行不换行、截断，悬停看全名，绝不把卡片撑宽。
   权重要压过上面 .skill-card-v130>button:first-child>span 那条（那条会把它改回 display:block）。
   颜色用 --muted（#9a978f，在近黑的卡片上约 6.9:1）：--dim（#6b6b6b）只有 3.5:1，11.5px 的字不到 WCAG AA 的 4.5:1，
   谁做的这一行（owner 第 2 条）低视力的人读不出来。官方的 BitFrame 也跟着这条（下面 .maker-brand-v121 的权重压不过它） */
.skill-card-v130>button:first-child>.skill-maker-v121{display:flex;align-items:center;gap:5px;min-width:0;padding:5px 12px 0;font-size:11.5px;line-height:1.45;color:var(--muted)}
.skill-maker-v121>span,.sb-maker-v121>span,.sd-maker-v121>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.maker-brand-v121{color:var(--muted)}
.maker-brand-v121>span{font-weight:600;letter-spacing:.03em}
.maker-brand-v121 svg{flex:none;width:12px;height:12px;color:rgba(245,241,232,.72)}
/* 草稿里的 skill 已经下架 / 暂时下线：输入区顶上一句明白话，换一个玩法就消失 */
.skill-gone-v141{margin:0 0 12px;padding:10px 14px;border-radius:10px;border:1px solid rgba(214,92,76,.42);background:rgba(214,92,76,.10);color:#f0b8ae;font-size:13px;line-height:1.6}

/* 控件行的动作区（v138）。
   「从素材库导入」和「开始创作」是一组，中间不再放撑开的占位——
   那个占位 flex:1 1 auto，会把这一行剩下的空间全吃掉，于是后面的按钮
   必定换行，看起来就是「开始创作」莫名其妙掉到下一行、和别的按钮不齐。
   现在：放得下就整组靠右和选择器同排，放不下就整组一起换行，仍然靠右。
   两种都是有意的排法，不是溢出的结果。 */
.composer-actions-v138{display:flex;align-items:flex-end;gap:12px;flex:0 0 auto;margin-left:auto}
@media (max-width:760px){
  .composer-actions-v138{width:100%;flex-wrap:wrap;margin-left:0}
  .composer-actions-v138 .simple-asset-import-v121,.composer-actions-v138 .go-wrap-v130{flex:1 1 100%}
  /* 窄屏下两颗按钮各占一整行；go-wrap 平时有 260px 上限，这里要解掉，
     否则它只占一半宽、看起来像是没对齐 */
  .composer-actions-v138 .go-wrap-v130{max-width:none}
}

/* 玩法详情页的样片：名字挪到左上角，画面下缘整条让给播放条（v138）。
   原来名字压在下缘，正好落在浏览器自带的播放条上：点击全被吃掉，
   而渐变（94% 黑）把播放条整个盖住——量过，最亮像素只有 51/255，
   不是变暗，是看不见了。第一版把名字和渐变都往上抬 48px，
   播放条是露出来了，但中间多出一条硬边，看着更奇怪。
   干脆整块搬到左上角，渐变也跟着从上往下：下半幅画面完全干净，
   播放条落在原片上（它自带半透明底，看得清）。 */
.skill-detail-v132 .sd-hero-text-v132{
  top:0;bottom:auto;
  /* 右边留出关闭键的位置，否则长标题会钻到那个叉底下 */
  padding:22px 76px 0 26px;
}
.skill-detail-v132 .sd-hero-v132::after{
  background:linear-gradient(to bottom,rgba(8,9,7,.88) 0%,rgba(8,9,7,.66) 30%,rgba(8,9,7,.14) 58%,transparent 76%);
}
@media (max-width:760px){
  .skill-detail-v132 .sd-hero-text-v132{padding:16px 62px 0 16px}
}
/* 关闭键钉在弹窗顶上，不再跟着画面滚走。说明长的玩法这一屏要滚两屏，
   原来滚下去之后那个叉就不在视野里了——底部那排按钮早就因为同样的理由
   做成了 sticky，这里漏了。零高度的一条，不占版面。 */
.skill-detail-v132 .sd-closebar-v132{position:sticky;top:0;height:0;z-index:5;display:flex;justify-content:flex-end;pointer-events:none}
.skill-detail-v132 .sd-closebar-v132 .sd-close-v132{position:static;margin:14px 14px 0 0;pointer-events:auto}
/* 关闭键浮在任意一帧画面上，亮画面时那个白叉会看不见。加一层模糊底和投影，
   并且确保它在渐变和标题之上。 */
.skill-detail-v132 .sd-close-v132{
  z-index:4;background:rgba(10,11,9,.62);backdrop-filter:blur(6px);
  box-shadow:0 2px 10px rgba(0,0,0,.45);
  /* 全站有一条「窄屏按钮至少 44px 高」的规则（v117-refinement.css）。
     对一个 34px 的圆来说那是把它抻成椭圆，叉也就不在中间了。 */
  min-height:34px;padding:0;
}

/* 控件行要能收一点（v138）。
   原来每一格都是 flex:0 0 auto 加 select{min-width:max-content}——整行完全不能压。
   英文下五个选择器加起来 799px，加上右边那组 472px 就是 1283px，
   而内容列被 clamp 钉在 1200px（实测 1280–1800 的视口都是这个宽度），
   于是无论屏幕多宽都放不下，「开始创作」永远掉到第二行。
   这也是缩放页面看着就好了的原因：CSS 像素变多，内容列才终于够宽。

   改成可收缩 + 省略号：宽的时候各自保持自然宽度，不够时一起让一点。
   保留 flex-wrap:wrap，窄屏仍然换行而不是横向溢出。
   字号统一到 13.5px：原来两个 13.5、三个 16（浏览器默认），
   既不整齐，也白占了几十像素。 */
.composer-foot-v130 .simple-option-v121{flex:0 1 auto;min-width:0}
.composer-foot-v130 select{min-width:0;max-width:100%;font-size:13.5px;text-overflow:ellipsis}
/* 宽屏一排到底。flex-wrap:wrap 的时候浏览器宁可换行也不压缩，所以光让它
   「可收缩」没有用——得先不许换行，它才会去收。窄屏保持换行，
   否则就是横向滚动条，那比换行糟得多。 */
@media (min-width:1000px){
  .composer-foot-v130{flex-wrap:nowrap}
  .composer-foot-v130 .simple-option-v121{min-width:72px}
}

/* 素材服务挂掉时的那句话（v139）。
   在这之前界面上只有一排灰框，没有一个字说明发生了什么——查了两天才查到
   是阿里云停了服，而浏览器早就知道：每一张封面都是 403。 */
.media-down-v139{
  margin:0 0 14px;padding:11px 14px;border-radius:10px;
  border:1px solid rgba(214,92,76,.42);background:rgba(214,92,76,.10);
  color:#f0b8ae;font-size:13px;line-height:1.65;
}

/* 我的skill（v139）
   它不是一种题材，是「我自己做的东西」，所以长得和分类不一样：
   金色渐变描边、自己的图标、数量，后面一道分隔线把它和分类隔开。 */
.skills-goals-v130 button.goal-mine-v139{display:inline-flex;align-items:center;gap:6px;padding:6px 12px 6px 10px;color:var(--gold2);font-weight:600;
  border:1px solid transparent;background:linear-gradient(#141414,#141414) padding-box,linear-gradient(120deg,#ffc861,#f7e7b5 45%,#b8862f) border-box;
  box-shadow:0 0 0 3px rgba(255,200,97,.06),0 4px 16px rgba(255,200,97,.12);transition:box-shadow .2s ease,color .2s ease}
.skills-goals-v130 button.goal-mine-v139:hover{color:#fff;box-shadow:0 0 0 3px rgba(255,200,97,.12),0 6px 22px rgba(255,200,97,.2)}
.skills-goals-v130 button.goal-mine-v139 svg{width:16px;height:16px;flex:0 0 auto}
.skills-goals-v130 button.goal-mine-v139 i{font-style:normal;font-size:11px;font-weight:700;min-width:18px;height:18px;padding:0 5px;border-radius:9px;
  display:inline-grid;place-items:center;background:rgba(255,200,97,.16);color:var(--gold)}
.skills-goals-v130 button.goal-mine-v139.on{color:#17150f;background:linear-gradient(120deg,#ffc861,#f7e7b5) border-box;box-shadow:0 6px 20px rgba(255,200,97,.26)}
.skills-goals-v130 button.goal-mine-v139.on i{background:rgba(23,21,15,.14);color:#17150f}
.goals-sep-v139{width:1px;height:18px;background:var(--line2);margin:0 4px}

/* 「我的skill」里排第一的那张：新建一个，或者管理已有的 */
.skill-card-v130.mine-new-v139{display:flex;flex-direction:column;border:1px dashed rgba(255,200,97,.45);
  background:linear-gradient(180deg,rgba(255,200,97,.07),rgba(255,255,255,.015))}
.skill-card-v130.mine-new-v139:hover{border-color:rgba(255,200,97,.75)}
.mine-new-art-v139{aspect-ratio:16/9;display:grid;place-items:center;color:var(--gold);
  background:radial-gradient(55% 70% at 50% 45%,rgba(255,200,97,.16),transparent 72%)}
.mine-new-art-v139 svg{width:52px;height:52px}
.mine-new-v139 p{margin:0;padding:0 12px;font-size:12px;line-height:1.6;color:var(--muted)}
.mine-new-actions-v139{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto;padding:12px}
.mine-new-actions-v139 button{flex:1 1 auto;min-height:36px;padding:7px 12px;font-size:13px;border-radius:999px;white-space:nowrap}

/* 自己写的 skill 没有封面时的那一张：一眼认得出是「我的」 */
.skill-blank-v130.mine-cover-v139{position:relative;overflow:hidden;
  background:radial-gradient(110% 90% at 88% 0%,rgba(255,200,97,.30),transparent 55%),
             radial-gradient(90% 80% at 0% 100%,rgba(247,231,181,.10),transparent 60%),
             linear-gradient(160deg,#1f1b13,#121212)}
.mine-cover-v139 small{position:absolute;left:12px;top:10px;font-size:10px;font-weight:700;letter-spacing:.2em;color:rgba(247,231,181,.8)}
.mine-cover-v139 i{position:absolute;right:7%;bottom:-16%;font-style:normal;font-weight:700;line-height:1;font-size:clamp(72px,9vw,128px);color:rgba(255,200,97,.18)}
/* 手机上整张卡占满一行，16:9 的插画会把两个按钮挤到底栏下面 */
@media (max-width:640px){.mine-new-art-v139{aspect-ratio:auto;height:104px}.mine-new-art-v139 svg{width:44px;height:44px}}

/* 做点修改（v139）：一个说人话的框 + 点一下就加进去的常用改法 + 「不要出现」。
   表单收窄到 780，整屏宽的输入框读起来太长。 */
.changes-ask-v139,.changes-never-v139,.changes-tips-v139{width:100%;max-width:780px;box-sizing:border-box}
.changes-v130 .changes-foot-v130{max-width:780px}
.changes-ask-v139 label,.changes-never-v139 label{display:block;font-size:13.5px;font-weight:650;margin-bottom:8px}
.changes-ask-v139 textarea{width:100%;box-sizing:border-box;min-height:112px;resize:vertical;border:1px solid rgba(255,200,97,.35);border-radius:14px;
  background:#15161a;color:var(--text);font:inherit;font-size:14.5px;line-height:1.7;padding:14px 16px;box-shadow:0 0 0 4px rgba(255,200,97,.05)}
.changes-ask-v139 textarea:focus{outline:none;border-color:rgba(255,200,97,.7);box-shadow:0 0 0 4px rgba(255,200,97,.1)}
.changes-chips-v139{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px}
.changes-chips-v139>span{font-size:12px;color:var(--dim);margin-right:2px}
.changes-chips-v139 .tool{padding:6px 12px;font-size:12.5px;border-radius:999px}
.changes-chips-v139 .tool::before{content:'+';margin-right:4px;color:var(--gold)}
.changes-need-v139{margin:8px 0 0;font-size:12.5px;color:var(--gold2)}
.changes-never-v139 input{width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:11px;background:#15161a;color:var(--text);font:inherit;font-size:13.5px;padding:10px 12px}
.changes-never-v139 input:focus{outline:none;border-color:rgba(225,184,77,.5)}
.changes-never-v139 p{margin:6px 0 0;font-size:11.5px;color:var(--dim);line-height:1.55}
.changes-tips-v139{border:1px solid var(--line);border-radius:12px;padding:10px 14px;background:rgba(255,255,255,.02)}
.changes-tips-v139 summary{cursor:pointer;font-size:12.5px;font-weight:600;color:var(--muted);list-style:none}
.changes-tips-v139 summary::-webkit-details-marker{display:none}
.changes-tips-v139 summary::before{content:'';display:inline-block;width:6px;height:6px;margin:0 8px 2px 0;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);transition:transform .15s ease}
.changes-tips-v139[open] summary::before{transform:rotate(45deg)}
.changes-tips-v139 ul{margin:8px 0 2px;padding-left:18px;font-size:12.5px;line-height:1.75;color:var(--muted)}
.changes-foot-v130 button[disabled]{opacity:.65;cursor:progress}
/* 我的skill 的描边光晕盖住了全局的焦点环，键盘用户看不出焦点在它身上 */
.skills-goals-v130 button.goal-mine-v139:focus-visible{box-shadow:var(--ring)}
.changes-ask-v139 textarea:disabled,.changes-never-v139 input:disabled,.changes-chips-v139 .tool:disabled{opacity:.6;cursor:progress}

/* ---------- 首页列出社区里公开的 skill（v121，owner 2026-09-27 第 2、3 条） ---------- */
/* 社区封面外面那一层：只为把「AI 生成」钉在封面右下角（和社区页 .ai-v140 同一个位置、同一个样子）。
   网格卡片里它是按钮的直接子元素，权重要压过 .skill-card-v130>button:first-child>span；
   全部 skill 里要压过 .sb-card-v121 span（那条给简介做两行截断）。 */
.skill-card-v130>button:first-child>.ai-wrap-v121,.sb-card-v121 .ai-wrap-v121{position:relative;display:block;padding:0;overflow:visible;-webkit-line-clamp:unset;line-clamp:none}
.ai-cover-v121,.sb-card-v121 .ai-cover-v121{position:absolute;right:8px;bottom:8px;display:block;padding:2px 7px;border-radius:6px;border:1px solid rgba(255,255,255,.16);background:rgba(10,10,12,.62);color:#f2eee4;font-size:10.5px;font-weight:600;line-height:1.5;letter-spacing:.02em;white-space:nowrap;pointer-events:none;-webkit-line-clamp:unset;line-clamp:none;overflow:visible}
.skill-detail-v132 .sd-ai-v121{right:16px;bottom:16px;z-index:2}
/* 首页的详情里放社区 skill 的示例视频（部署许没登录看详情时，public_browse=full）：画面下缘是播放条，「AI 生成」挪到右上角、
   关闭键左边；压在左上角的字给它让出位置、不接点击（播放、静音总点得到），名字最多两行、简介最多三行（手机两行）。
   和社区页详情的 .dai-up-v140 同一组数（v140-community.css「详情」一节）。只认 .sd-ai-up-v121：官方 skill 的演示不受影响 */
.skill-detail-v132 .sd-ai-up-v121{top:22px;right:56px;bottom:auto}
.skill-detail-v132 .sd-ai-up-v121~.sd-hero-text-v132{pointer-events:none}
.skill-detail-v132 .sd-ai-up-v121~.sd-hero-text-v132 .sd-tags-v132{min-height:22px;padding-right:78px}
.skill-detail-v132 .sd-ai-up-v121~.sd-hero-text-v132 h2,.skill-detail-v132 .sd-ai-up-v121~.sd-hero-text-v132 p{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
.skill-detail-v132 .sd-ai-up-v121~.sd-hero-text-v132 h2{-webkit-line-clamp:2;line-clamp:2}
.skill-detail-v132 .sd-ai-up-v121~.sd-hero-text-v132 p{-webkit-line-clamp:3;line-clamp:3}
@media (max-width:760px){
  .skill-detail-v132 .sd-ai-up-v121{top:16px}
  .skill-detail-v132 .sd-ai-up-v121~.sd-hero-text-v132 .sd-tags-v132{padding-right:92px}
  .skill-detail-v132 .sd-ai-up-v121~.sd-hero-text-v132 p{-webkit-line-clamp:2;line-clamp:2}
}
/* 手机上（600px 以下 v117 把底栏排成两格）这个框的底栏是三个按钮：先不用、在 Skill 社区查看、主按钮。主按钮（没登录时是
   「登录后使用」，owner 要它请人登录）掉到第二行只占半格：让它排最前、占满一行，和社区页详情的底栏一样（v140-community.css 的 .duse-v140）。
   只认框上有 data-pd-skill 的（public_browse=full 才挂）：cards / off 的部署和官方 skill 的详情照旧 */
@media (max-width:600px){
  .skill-detail-v132[data-pd-skill] .modal-foot #pdCommunity~#pdUse{grid-column:1/-1;order:-1}
}
.ai-cover-v121[hidden]{display:none!important}
/* 别人写的 skill 还没有封面（样片没好）：和「MY SKILL」那张同一个做法，用名字首字；底色换成中性的，和自己的分得开 */
.skill-blank-v130.user-cover-v121{background:radial-gradient(110% 90% at 88% 0%,rgba(237,232,217,.16),transparent 55%),
             radial-gradient(90% 80% at 0% 100%,rgba(255,200,97,.07),transparent 60%),
             linear-gradient(160deg,#1b1b1d,#121212)}
.user-cover-v121 i{color:rgba(237,232,217,.14)}
/* 全部 skill、详情弹窗里的作者行 */
.sb-card-v121 .sb-maker-v121{display:flex;align-items:center;gap:5px;min-width:0;padding:1px 11px 0;font-size:11.5px;line-height:1.45;color:var(--muted);-webkit-line-clamp:unset;line-clamp:none}
.sb-card-v121 .sb-maker-v121>span{display:block;padding:0;font-size:inherit;color:inherit;-webkit-line-clamp:unset;line-clamp:none}
.skill-detail-v132 .sd-maker-v121{display:flex;align-items:center;gap:6px;min-width:0;max-width:100%;font-size:13px;color:rgba(255,255,255,.72)}
.skill-detail-v132 .sd-maker-v121.maker-brand-v121{color:rgba(255,255,255,.82)}
.skill-detail-v132 .sd-maker-v121 svg{width:14px;height:14px}
/* 名字、简介里连着写的长串（没有空格的英文、网址）也要折得下，不把卡片撑宽。
   全部 skill 的简介（.sb-card-v121 span，两行截断）、详情弹窗的简介（.sd-hero-text-v132 p）也在这里：
   不然一整串挤在一行，顶到卡片边上被切掉，没有省略号，详情里还跑出画框 */
.skill-card-v130 b,.skill-card-v130>button:first-child>span,.sb-card-v121 b,.sb-card-v121 span,.skill-detail-v132 .sd-hero-text-v132 h2,.skill-detail-v132 .sd-hero-text-v132 p{overflow-wrap:anywhere}

/* ---------- 创作页：系统挑的风格、价格旁的余额、积分不够（v142，设计稿 design-confirm a–d） ---------- */
/* a1：不选 skill 时右上角是一个虚线小标签「Skill：自动匹配 · 选一个」，左边一行小字说清楚会发生什么（手机上不显示，只留标签）。
   这时不显示「选中了哪个」：服务器要等看完图、读完那句话才挑 */
.auto-hint-v142{min-width:0;font-size:12.5px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 输入页外层是单列 grid，列宽原来是 auto：不换行的那行小字按整句算最小宽度，英文 800–900 宽时把整张输入卡撑出屏幕
   （英文 800 宽多出 129px 横向滚动，tests/e2e/community-verify.mjs J 段）。列宽钉在容器以内，那行小字自己省略 */
.simple-input-v121.make-v130{grid-template-columns:minmax(0,1fr)}
.composer-skill-v130.auto-chip-v142{display:inline-flex;align-items:center;gap:9px;flex:none;border:1px dashed rgba(255,200,97,.4);border-radius:999px;padding:4px 5px 4px 14px;background:rgba(255,200,97,.03);white-space:nowrap}
.auto-chip-v142 b{color:var(--gold2);font-weight:600}
/* 窄屏上全站的按钮至少 44px 高（v117-refinement.css）：这颗是标签里的小胶囊，压回去 */
.auto-pick-v142{min-height:0;border:0;border-radius:999px;background:rgba(255,255,255,.08);padding:3px 11px;font-size:12.5px;line-height:1.5;color:var(--text);cursor:pointer}
.auto-pick-v142:hover{background:rgba(255,200,97,.16);color:var(--gold2)}

/* b：价格那一行加上余额，余额那半截淡一点；c1：积分不够时「约需 N 积分 · 余额 M」，余额用橙色 */
.go-price-v130 .go-price-left-v142{font-style:normal;color:var(--muted)}
.go-price-v130 .go-price-low-v142{color:#e9a13b;font-weight:600}

/* c1：不能开工时按钮点之前就变灰——灰底灰字、去掉箭头，文字还是「开始创作」；星星不闪、悬停不扫光 */
.composer-foot-v130 .simple-go-v121.go-off-v142,.composer-foot-v130 .simple-go-v121.go-off-v142:hover{background:#202020;border-color:#363636;color:#7c7a74;box-shadow:none;cursor:not-allowed}
.composer-foot-v130 .simple-go-v121.go-off-v142 svg{opacity:.55}
.composer-foot-v130 .simple-go-v121.go-off-v142 svg path{animation:none}
.composer-foot-v130 .simple-go-v121.go-off-v142 .go-arrow-v130{display:none}
.composer-foot-v130 .simple-go-v121.go-off-v142:hover::after{animation:none;opacity:0}

/* c1：原因和下一步——输入区底部一整条：差多少、写好的都留着，右边是出口（查看套餐与积分 / 改成 1 条 / 换个模型） */
.short-v142{display:flex;align-items:center;gap:14px;padding:13px 18px 13px 20px;border-top:1px solid rgba(233,161,59,.32);background:linear-gradient(90deg,rgba(233,161,59,.11),rgba(233,161,59,.04));border-radius:0 0 15px 15px}
.short-v142[hidden]{display:none}
.coin-v142{width:32px;height:32px;flex:none;border-radius:50%;background:rgba(233,161,59,.15);color:#e9a13b;display:grid;place-items:center}
.coin-v142 svg{width:19px;height:19px}
.short-v142 p{flex:1;min-width:0;margin:0;font-size:13.5px;line-height:1.55;color:var(--muted)}
.short-v142 p b{margin-right:6px;color:var(--text);font-weight:650}
.short-act-v142{flex:none;min-height:0;border:1px solid rgba(255,200,97,.6);border-radius:999px;padding:9px 18px;background:rgba(255,200,97,.07);color:var(--gold2);font-size:13.5px;font-weight:650;white-space:nowrap;cursor:pointer}
.short-act-v142:hover{background:rgba(255,200,97,.14);border-color:var(--gold)}
/* 点了变灰的按钮：这一条轻闪一下（焦点同时移到它的出口上） */
.short-flash-v142{animation:shortFlash-v142 .7s ease}
@keyframes shortFlash-v142{0%,100%{box-shadow:inset 0 0 0 0 rgba(233,161,59,0)}35%{box-shadow:inset 0 0 0 999px rgba(233,161,59,.16)}}

/* a2：已经开始做的那一屏。卡片外框从 .started-head-v130 挪到外面这一层，系统挑的那一行和它装在同一张卡里 */
.started-card-v142{border:1px solid rgba(225,184,77,.26);border-radius:16px;background:var(--panel);overflow:hidden}
.started-card-v142>.started-head-v130{border:0;border-radius:0;background:transparent}
.started-eta-v130 .started-ok-v142{color:var(--gold2)}
.pick-v142{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:0 18px;align-items:center;padding:16px 20px 0;border-top:1px solid rgba(225,184,77,.2);background:linear-gradient(90deg,rgba(255,200,97,.07),rgba(255,200,97,0) 65%)}
.pick-wait-v142{padding-bottom:16px}
.pick-cover-v142{display:block;width:112px;height:63px;border-radius:9px;object-fit:cover;border:1px solid rgba(255,200,97,.5);background:#2a2118;overflow:hidden}
.pick-cover-v142 .ai-wrap-v121,.pick-cover-v142 img{display:block;width:100%;height:100%;object-fit:cover}
.pick-skel-v142{border-color:var(--line);background:linear-gradient(90deg,#1c1c1c,#262626,#1c1c1c);background-size:200% 100%;animation:pickSkel-v142 1.4s ease-in-out infinite}
@keyframes pickSkel-v142{from{background-position:100% 0}to{background-position:-100% 0}}
.pick-label-v142{display:flex;align-items:center;gap:6px;margin-bottom:4px;font-size:12px;letter-spacing:.05em;color:var(--gold)}
.pick-label-v142 svg{width:13px;height:13px;flex:none}
.pick-name-v142{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;min-width:0}
.pick-name-v142 b{font-size:18px;font-weight:750;overflow-wrap:anywhere}
.pick-name-v142 span{font-size:12.5px;color:var(--muted)}
.pick-acts-v142{display:flex;align-items:center;gap:10px}
.pick-acts-v142 .gold,.pick-acts-v142 .ghost{min-height:0;border-radius:999px;padding:10px 20px;font-size:15px;white-space:nowrap}
.pick-acts-v142 .gold{min-width:132px}
.pick-acts-v142 .ghost{border:1px solid var(--line2);background:rgba(255,255,255,.03);font-weight:600}
/* 倒数：按钮上的数字往下走，下面的细条变短（减少动效时只变数字） */
.pick-count-v142{grid-column:1/-1;display:flex;align-items:center;gap:12px;padding:12px 0 13px}
.pick-track-v142{flex:1;height:2px;border-radius:2px;background:rgba(255,255,255,.08);overflow:hidden}
.pick-track-v142 i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),rgba(255,200,97,.55));transition:width .25s linear}
.pick-count-v142>span:last-child{font-size:12px;color:var(--dim);white-space:nowrap}
.pick-more-v142{display:none}
@media (prefers-reduced-motion:reduce){.pick-track-v142{visibility:hidden}.pick-skel-v142{animation:none}.short-flash-v142{animation:none}}

/* c2：点之后才发现不能开工——不叫「没能完成」，说「没有开始，也没扣积分」 */
.late-v142{display:flex;align-items:flex-start;gap:16px;padding:20px 22px;border:1px solid rgba(233,161,59,.38);border-radius:16px;background:linear-gradient(180deg,rgba(233,161,59,.08),rgba(233,161,59,.02))}
.late-v142 .coin-v142{width:40px;height:40px}
.late-v142 .coin-v142 svg{width:22px;height:22px}
.late-text-v142{flex:1;min-width:0}
.late-v142 h2{margin:2px 0 6px;font-size:19px;font-weight:800}
.late-v142 p{margin:0 0 14px;font-size:14px;line-height:1.6;color:var(--muted)}
.late-v142 p b{color:var(--text)}
.late-acts-v142{display:flex;flex-wrap:wrap;gap:10px}
.late-acts-v142 .gold,.late-acts-v142 .ghost{border-radius:999px;padding:10px 20px;font-size:15px;font-weight:650}
.late-acts-v142 .ghost{border:1px solid var(--line2);background:rgba(255,255,255,.03)}
.late-bar-v142 i{background:#e9a13b}

/* 「换一个」回来的「选择风格」：刚才系统挑的那张排最前面，金边，左上角挂「刚才系统选的」。
   权重要压过 .sb-card-v121 span（那条给简介做两行截断） */
.sb-card-v121.sb-was-v142{position:relative;border-color:rgba(255,200,97,.7);box-shadow:0 0 0 1px rgba(255,200,97,.3)}
.sb-card-v121 .sb-badge-v142{position:absolute;top:8px;left:8px;z-index:2;display:block;padding:2px 8px;border:1px solid rgba(255,200,97,.6);border-radius:999px;background:rgba(10,10,12,.82);color:var(--gold2);font-size:11px;line-height:1.5;overflow:visible;-webkit-line-clamp:unset;line-clamp:none}

/* d：手机 390——内容和桌面一样，只改排列：按钮和那一条铺满宽度；「换一个 / 就用它」各占一半；
   「继续创作新作品」挪到卡片最下面，用次要样式，免得和「就用它」抢 */
@media (max-width:760px){
  .auto-hint-v142{display:none}
  .composer-spec-v130{flex-wrap:wrap;row-gap:8px;gap:8px;padding:12px 12px 12px 14px}
  .composer-pill-v130{font-size:12.5px;padding:5px 11px}
  .composer-skill-v130.auto-chip-v142{padding:3px 3px 3px 10px;font-size:12.5px;gap:6px}
  .auto-pick-v142{padding:2px 8px;font-size:12px}
  .short-v142{flex-wrap:wrap;align-items:flex-start;gap:10px 12px;padding:14px 16px}
  .short-v142 p{flex:1 1 200px}
  .short-act-v142{flex:1 1 100%;padding:11px 16px;text-align:center}
  .started-picked-v142 .started-eta-v130{flex-basis:100%;max-width:none;text-align:left}
  .started-picked-v142 .started-head-v130>#v130Another{display:none}
  .started-picked-v142 .pick-more-v142{display:block;padding:12px 16px 14px;border-top:1px solid rgba(225,184,77,.14)}
  .pick-more-v142 .ghost{display:block;width:100%;border:1px solid var(--line2);border-radius:999px;padding:10px 20px;background:rgba(255,255,255,.03);font-size:15px;font-weight:600}
  .pick-v142{grid-template-columns:auto minmax(0,1fr);gap:0 12px;padding:14px 16px 0}
  .pick-wait-v142{padding-bottom:14px}
  .pick-cover-v142{width:84px;height:48px}
  .pick-name-v142 b{font-size:16px}
  .pick-acts-v142{grid-column:1/-1;padding-top:12px}
  .pick-acts-v142>*{flex:1}
  .pick-acts-v142 .gold{min-width:0}
  .pick-count-v142{padding:10px 0 12px}
  .late-v142{padding:18px 16px;gap:12px}
}

/* ---------- 卡片上的「编辑」、复制确认框、专用引擎的说明、创作页的模型提示（owner 2026-09-29 设计稿改动 4、改动 1 第 8 条、决定 c / d） ---------- */
/* 封面右上角一个单独的小按钮（卡片本身点了是看详情、用这个）。手机没有悬停，所以一直显示 */
.skill-card-v130>.card-edit-v143{position:absolute;top:10px;right:10px;z-index:2;display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 11px;border:1px solid rgba(255,200,97,.5);border-radius:999px;background:rgba(10,10,12,.66);color:var(--gold2);font-size:12px;font-weight:650;line-height:1;white-space:nowrap;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background .18s ease,border-color .18s ease}
.card-edit-v143 svg{width:13px;height:13px;flex:none;color:var(--gold)}
.skill-card-v130>.card-edit-v143:hover{background:rgba(26,22,12,.88);border-color:var(--gold)}
.skill-card-v130>.card-edit-v143:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
/* 模型名跟在时长后面，那一颗可能长到「视频 · 22 秒 · Seedance 2.5」：不折行，窄了就截断 */
.skill-card-v130 .skill-kind-v130{white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}

/* 复制确认框（D1）和专用引擎的说明（D3） */
.edit-modal-v143 .modal-head h2{font-size:16px;font-weight:750;line-height:1.4;overflow-wrap:anywhere}
.edit-modal-v143 .modal-body{font-size:13px;line-height:1.65;color:var(--muted)}
.edit-modal-v143 .modal-body p{margin:0}
.fork-sum-v143{display:flex;align-items:center;gap:10px;margin-bottom:12px;padding:8px;border:1px solid var(--line);border-radius:12px;background:rgba(0,0,0,.25)}
.fork-cover-v143{position:relative;flex:none;width:84px;aspect-ratio:16/10;border-radius:8px;overflow:hidden;background:rgba(225,184,77,.08)}
.fork-cover-v143 img,.fork-cover-v143 .ai-wrap-v121,.fork-blank-v143{display:block;width:100%;height:100%;object-fit:cover}
.fork-cover-v143 .ai-cover-v121{right:4px;bottom:4px;padding:1px 5px;font-size:9.5px}
.fork-sum-text-v143{display:flex;flex-direction:column;min-width:0}
.fork-sum-text-v143 b{font-size:13.5px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fork-sum-text-v143 small{font-size:11.5px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fork-body-v143 ul{margin:6px 0 0;padding-left:18px}
.fork-body-v143 li{margin-bottom:3px;overflow-wrap:anywhere}
.fork-err-v143{margin-top:10px!important;padding:8px 12px;border:1px solid rgba(224,113,113,.4);border-radius:10px;background:rgba(224,113,113,.08);color:#f3b1b1}
.fork-err-v143[hidden]{display:none}
.edit-modal-v143 .modal-foot button{min-height:36px;padding:0 16px;border-radius:999px;font-size:13px}
.edit-modal-v143 .modal-foot .ghost{border-color:transparent;background:transparent;color:var(--muted)}
.edit-modal-v143 .modal-foot .ghost:hover{color:var(--text)}
.edit-modal-v143 .modal-foot .gold{display:inline-flex;align-items:center;justify-content:center;gap:7px}
.edit-modal-v143 .modal-foot .gold svg{width:15px;height:15px;flex:none}
.edit-way-v143{display:flex;align-items:center;gap:12px;width:100%;margin-top:10px;padding:11px 14px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.02);color:var(--muted);text-align:left;cursor:pointer;transition:border-color .18s ease,background .18s ease}
.edit-way-v143:first-of-type{margin-top:12px}
.edit-way-v143:hover{border-color:rgba(255,200,97,.5);background:rgba(255,200,97,.05)}
.edit-way-v143:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.edit-way-v143 svg{width:17px;height:17px;flex:none;color:var(--gold)}
.edit-way-v143>span{display:flex;flex-direction:column;gap:2px;min-width:0}
.edit-way-v143 b{font-size:13.5px;font-weight:650;color:var(--text)}
.edit-way-v143 small{font-size:11.5px;line-height:1.5;color:var(--dim)}

/* 创作页：选着的 skill 比这个模型的上限长，开始之前先说会压到多长（决定 c） */
.model-note-v143{display:flex;align-items:flex-start;gap:8px;margin:0 18px 14px;padding:10px 14px;border:1px solid rgba(255,200,97,.3);border-radius:14px;background:rgba(255,200,97,.05);color:var(--muted);font-size:12.5px;line-height:1.6}
.model-note-v143 svg{width:15px;height:15px;flex:none;margin-top:2px;color:var(--gold)}
.model-note-v143[hidden]{display:none}

/* 手机：弹窗本来就从底部弹出（v117 在 600px 以下把 .modal 钉在底边、.modal-foot 排成两格）。确认框按设计稿改成
   「复制并打开编辑器」铺满在上、「取消」在下，顶上一条拖动把手（设计稿改动 4 手机那张） */
@media (max-width:600px){
  .sheet-layer-v143{padding:0}
  .sheet-layer-v143 .modal{border-radius:22px 22px 0 0}
  .sheet-layer-v143 .modal::before{content:"";display:block;width:40px;height:4px;margin:10px auto 0;border-radius:4px;background:#3a3a3a}
  .sheet-layer-v143 .modal-head{border-bottom:0;padding:10px 16px 4px}
  .sheet-layer-v143 .modal-body{padding:8px 16px 4px}
  .sheet-layer-v143 .modal-foot{grid-template-columns:1fr;gap:6px;border-top:0;padding:12px 16px 14px}
  .sheet-layer-v143 .modal-foot .gold{order:-1;min-height:46px}
  .sheet-layer-v143 .modal-foot .ghost{min-height:40px;border-color:transparent;background:transparent;color:var(--muted)}
  .model-note-v143{margin:0 12px 12px}
}

/* ---------- 输入卡的外框（owner 2026-10-03 第 3 条：让创作区的轮廓更显眼一点） ----------
   这一页上十几张卡用的都是同一条 --line 细边，输入卡是整页唯一要用的那一块，却和它们长得一样。
   做法照「我的skill」那颗（.goal-mine-v139）：边框还是 1px，只是颜色换成透明，金色渐变画在 border-box 的背景上——
   线宽没变，卡片里的东西一个像素都不挪。左上、右下两个角亮（右下是「开始创作」那一角），中间退回暖白细线：
   金色只给关键的地方（规范 05-01），不是一整圈金框。外面一层很淡的光把它从背景里托起来。
   padding-box 那一层要不透明才盖得住渐变：#0f0f11 是原来 rgba(255,255,255,.02) 叠在页面底色（#0a0a0c）上的颜色。
   页面顶上那团径向的亮照得到卡片上沿，原来那里跟着亮一点，现在是平的——量过，最多差 3 级，看不出来。
   焦点进了卡片（在写字、在选参数）或者正拖着文件过来：整圈转金、光晕加一档。
   渐变本身不能过渡，过渡的只有光晕（两档的光晕都排第一层，过渡时是同一层在变大）；
   不闪、不转、不呼吸——卡里已经有呼吸的 Skill 标签和闪的星星了。 */
.composer-v130{
  --edge-v144:linear-gradient(135deg,rgba(255,200,97,.9) 0%,rgba(247,231,181,.4) 14%,rgba(237,232,217,.15) 38%,rgba(237,232,217,.15) 62%,rgba(255,200,97,.38) 86%,rgba(255,200,97,.8) 100%);
  --edge-on-v144:linear-gradient(135deg,var(--gold) 0%,rgba(255,200,97,.6) 22%,rgba(255,200,97,.36) 50%,rgba(255,200,97,.6) 78%,var(--gold) 100%);
  --halo-v144:0 0 36px -12px rgba(255,200,97,.3);
  --halo-on-v144:0 0 44px -10px rgba(255,200,97,.42),0 0 0 1px rgba(255,200,97,.12);
  border-color:transparent;
  background:linear-gradient(#0f0f11,#0f0f11) padding-box,var(--edge-v144) border-box;
  box-shadow:var(--halo-v144);
  transition:box-shadow .25s ease;
}
.composer-v130:focus-within{--edge-v144:var(--edge-on-v144);--halo-v144:var(--halo-on-v144)}
/* :has 单独一条：不认它的浏览器只丢这一条，上面焦点那条照常生效 */
.composer-v130:has(.composer-body-v130.drag){--edge-v144:var(--edge-on-v144);--halo-v144:var(--halo-on-v144)}
/* 焦点现在由整张卡的外框说。输入框自己那圈 4px 的淡光（.simple-input-v121 textarea:focus）是直角的，
   会从圆角的内框里戳出来，撤掉 */
.make-v130 .composer-text-v130:focus{box-shadow:none}
/* 手机上卡片两边只有 16px：光晕收一档，不然两侧被屏幕边切掉 */
@media (max-width:760px){
  .composer-v130{--halo-v144:0 0 22px -10px rgba(255,200,97,.28);--halo-on-v144:0 0 26px -8px rgba(255,200,97,.4),0 0 0 1px rgba(255,200,97,.12)}
}
@media (prefers-reduced-motion:reduce){.composer-v130{transition:none}}
/* 长串不出框（所有者 2026-10-10，docs/67 第 3 节第 28 条）：「没能完成」「还没开始」那两屏的那一句里有一截断不了行的长串时
   （供应商的 Request id、任务编号、链接），在卡片的边上折行，不伸到卡片外面。平常的句子一个像素不变；不裁、不藏 */
.simple-error-v121 p,.late-v142 p{overflow-wrap:anywhere}
/* 你定的五件事 B11（所有者 2026-10-12，docs/74 第 10 节；docs/67 第 3 节第 41 条）：口播先写旁白。只在选着口播 skill 时才有这几样，规则照设计稿 cluster b 的 new.css。
   输入区里的先后：旁白那一格（旁白念什么 · 必填，大的那一格）→ 页面那一句（#v121Text，一行高，小标题「画面想要什么样 · 可选」）→ 上传的格子 */
.say-v146{display:flex;flex-direction:column;gap:6px;margin:0 12px 8px}
.say-head-v146{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px;font-size:13px}
.say-head-v146 label{font-weight:600;color:var(--text)}
.say-head-v146 em{font-style:normal;font-size:11px;color:var(--gold)}
.say-n-v146{order:2;margin-left:auto;font-size:12px;color:var(--dim);font-variant-numeric:tabular-nums}
.say-hint-v146{order:1;flex:1 1 0;min-width:0;margin:0 0 0 6px;font-size:11.5px;line-height:1.5;color:var(--dim)}
@media (max-width:760px){.say-hint-v146{order:3;flex:1 0 100%;margin:0}}
/* 前面两个类：输入页给每一个 textarea 的那条规则（.simple-input-v121 textarea）不能盖过它 */
.make-v130 .say-v146 .say-text-v146{width:100%;box-sizing:border-box;min-height:64px;resize:none;border:1px solid var(--line2);border-radius:12px;background:rgba(255,255,255,.02);
  color:var(--text);font:inherit;font-size:15px;line-height:1.6;padding:8px 14px}
.make-v130 .say-v146 .say-text-v146::placeholder{color:var(--dim)}
.make-v130 .say-v146 .say-text-v146:focus{outline:none;border-color:rgba(255,200,97,.55);background:rgba(255,255,255,.03);box-shadow:0 0 0 3px rgba(255,200,97,.08)}
/* 旁白空着时点了灰的「开始创作」：那一格滚进来、光标放进去，框亮一下 */
.make-v130 .say-v146[data-miss] .say-text-v146{border-color:rgba(255,200,97,.7);box-shadow:0 0 0 3px rgba(255,200,97,.12)}
/* 这里没有配音：只有标题，灰着、不能写（以前写的字照样看得见） */
.say-v146[data-off] .say-head-v146 label{color:var(--dim)}
.make-v130 .say-v146[data-off] .say-text-v146{opacity:.45;cursor:not-allowed;background:rgba(255,255,255,.012)}
/* 页面那一句：前面一个小标题（手机上标题在它上面） */
.look-v146{display:flex;align-items:flex-start;gap:6px 12px;margin:0 12px 8px}
.look-head-v146{flex:none;display:flex;align-items:baseline;gap:6px;font-size:13px;padding-top:10px}
.look-head-v146 label{font-weight:600;color:var(--muted)}
.look-head-v146 em{font-style:normal;font-size:11px;color:var(--dim)}
.make-v130 .composer-body-v130.voice-v146 .look-v146 .composer-text-v130{flex:1 1 0;min-width:0;min-height:40px;box-sizing:border-box;padding:7px 14px;font-size:15px;line-height:1.6;
  border:1px solid var(--line2);border-radius:12px;background:rgba(255,255,255,.02)}
.make-v130 .composer-body-v130.voice-v146 .look-v146 .composer-text-v130::placeholder{color:var(--dim)}
.make-v130 .composer-body-v130.voice-v146 .look-v146 .composer-text-v130:focus{border-color:rgba(255,200,97,.55);background:rgba(255,255,255,.03);box-shadow:0 0 0 3px rgba(255,200,97,.08)}
@media (max-width:760px){
  .look-v146{flex-direction:column}
  .look-head-v146{padding-top:0}
  .make-v130 .composer-body-v130.voice-v146 .look-v146 .composer-text-v130{flex:none;width:100%}
  /* 这个宽度上灰字要两行（只在空着的时候） */
  .make-v130 .composer-body-v130.voice-v146 .look-v146 .composer-text-v130:placeholder-shown{min-height:64px}
}
/* 底部那一条说的不是积分（这里没有配音、先写旁白）：同一个圆，里面是「i」不是硬币 */
.short-v142 .coin-v142.info-v146 svg{width:18px;height:18px}
/* 「做点修改」上口播作品的「旁白念什么」：在「想怎么改」上面，样子照那一页自己的格子 */
.changes-say-v146{width:100%;max-width:780px;box-sizing:border-box}
.changes-say-v146 .say-head-v146{font-size:13.5px;margin-bottom:8px}
.changes-say-v146 .say-head-v146 label{font-weight:650}
.changes-say-v146 textarea{width:100%;box-sizing:border-box;min-height:76px;resize:vertical;border:1px solid var(--line);border-radius:14px;background:#15161a;
  color:var(--text);font:inherit;font-size:14.5px;line-height:1.6;padding:12px 14px}
.changes-say-v146 textarea:focus{outline:none;border-color:rgba(225,184,77,.5)}
.changes-say-v146 p{margin:6px 0 0;font-size:11.5px;color:var(--dim);line-height:1.55}
/* 所有者 2026-10-15「竖的就竖着放，不要都弄成横的，照它本来的样子放」（docs/74 第 18 节；docs/67 第 3 节第 49 条）：卡片、缩略图的框不变。
   画面的形状和框差不多的照旧铺满；差得多的（竖的、方的、4:3、21:9 放进横框）整张放进去，露出来的边是素材卡那一条的底色 #0c0d0b（上面的 .asset-card-preview）。
   判的是 web/media-fit.mjs：--media-fit 说这是小格子、还不知道画面多大时先怎么放，判出来不一样才在元素上写 data-fit（下面两条，全站的小格子共用）；
   详情弹窗最上面那一块照旧那么大，示例视频、封面照它自己的形状放在正中，不再铺满、裁掉上下或者两边 */
.skill-card-v130 img,.sb-card-v121 img,img.pick-cover-v142,.pick-cover-v142 img,.browse-card-v130 img{--media-fit:fill}
img[data-fit="whole"],video[data-fit="whole"]{object-fit:contain!important;background:#0c0d0b!important}
img[data-fit="fill"],video[data-fit="fill"]{object-fit:cover!important}
.skill-detail-v132 .sd-hero-v132>video,.skill-detail-v132 .sd-hero-v132>img{object-fit:contain}