/**
 * AI 商品套图 / A+ / 爆款图复刻 / 服饰穿戴 —— 精简美化皮肤
 *
 * 按客户三份改版原型的「观感」落地：暗色 + 琥珀强调色、浅色输入框、圆角胶囊、
 * 下拉按钮、−/+ 步进、竖屏（≤1080 / ≤760）适配。
 * 只改视觉，不动板块结构、不动字段 / 接口；作用域限定在 .kitx（套图页）。
 */
.kitx {
    --kx-bg: #0b0e14;
    --kx-bg2: #10131a;
    --kx-card: #141821;
    --kx-line: #242a36;
    --kx-line2: #2e3646;
    --kx-txt: #e8eaed;
    --kx-sub: #8b93a3;
    --kx-dim: #5c6472;
    --kx-acc: #f59e0b;
    --kx-input-bg: #f1f3f6;
    --kx-input-txt: #1c2027;
    --kx-radius: 14px;
    --kx-radius-s: 9px;
}

/* ------------------------------------------------------------ 顶部 Tab */
.kitx .scene-tabs { border-bottom: 1px solid var(--kx-line); }
.kitx .scene-tab { color: var(--kx-sub); font-size: 13.5px; }
.kitx .scene-tab:hover { color: var(--kx-txt); }
.kitx .scene-tab.active { color: var(--kx-acc); }
.kitx .scene-tab.active::after { background: var(--kx-acc); }

/* ------------------------------------------------------------ 左侧表单栏 */
.kitx .gen-side {
    background: var(--kx-bg2);
    border-right: 1px solid var(--kx-line);
}
.kitx .side-tip { color: var(--kx-sub); font-size: 12.5px; line-height: 1.75; }
.kitx .side-tip b { color: var(--kx-acc); font-weight: 700; }

.kitx .field > label,
.kitx .field .label-row { color: var(--kx-sub); font-size: 13px; }
.kitx .field .label-row .hint,
.kitx .field .hint { color: var(--kx-dim); }
.kitx .req { color: var(--kx-acc); }

/* 浅色输入框（和原型一致） */
.kitx input[type=text],
.kitx input[type=number],
.kitx textarea,
.kitx select {
    background: var(--kx-input-bg);
    color: var(--kx-input-txt);
    border: 1px solid #d8dce3;
    border-radius: 10px;
    font-size: 13.5px;
}
.kitx textarea { line-height: 1.55; }
.kitx input::placeholder,
.kitx textarea::placeholder { color: #8b93a3; }
.kitx input:focus,
.kitx textarea:focus,
.kitx select:focus { outline: none; border-color: var(--kx-acc); box-shadow: 0 0 0 3px rgba(245, 158, 11, .18); }
.kitx input[disabled] { opacity: .55; }
.kitx .hint b { color: var(--kx-acc); }

/* 上传框：蚂蚁线统一琥珀色，悬浮 / 拖拽更亮 */
.kitx .uploader {
    background: transparent;
    border: 1.5px dashed rgba(245, 158, 11, .55);
    border-radius: var(--kx-radius-s);
    transition: border-color .15s, background .15s, box-shadow .15s;
}
.kitx .uploader:hover,
.kitx .uploader.dragover {
    border-color: #fbbf24;
    background: rgba(245, 158, 11, .06);
    box-shadow: 0 0 0 3px rgba(245, 158, 11, .16);
}
.kitx .uploader .btn.ghost {
    border: 0; background: none; color: var(--kx-txt); font-size: 13.5px; padding: 0;
}
.kitx .uploader .btn.ghost::before { content: "⤒"; color: var(--kx-acc); margin-right: 6px; }
.kitx .thumbs { gap: 8px; }
.kitx .thumbs .thumb { border-radius: 8px; border: 1px solid var(--kx-line2); overflow: hidden; }

/* 图片类型与张数：卡片行 + 步进器 */
.kitx .photo-item {
    background: var(--kx-bg2);
    border: 1.5px solid var(--kx-line2);
    border-radius: var(--kx-radius-s);
    padding: 9px 11px;
}
.kitx .photo-item:hover { border-color: rgba(245, 158, 11, .55); }
.kitx .photo-item .p-name { color: var(--kx-txt); }
.kitx .photo-item small { color: var(--kx-dim); }
.kitx .photo-item input[type=number] {
    background: var(--kx-bg);
    border: 1px solid var(--kx-line2);
    color: var(--kx-txt);
    font-weight: 700;
    text-align: center;
    border-radius: 8px;
}
.kitx .kx-step { display: inline-flex; align-items: center; border: 1px solid var(--kx-line2);
    border-radius: 8px; overflow: hidden; background: var(--kx-bg); }
.kitx .kx-step button { width: 28px; height: 30px; font-size: 15px; color: var(--kx-sub);
    background: var(--kx-bg2); border: 0; cursor: pointer; }
.kitx .kx-step button:hover { color: var(--kx-acc); }
.kitx .photo-layout-cell .btn {
    border: 1px solid var(--kx-line2); background: var(--kx-bg2); color: var(--kx-sub);
    border-radius: 8px; font-size: 12px;
}
.kitx .photo-layout-cell .btn:hover { border-color: var(--kx-acc); color: var(--kx-acc); }

/* 卖点图版式：占「其他图」右边那一格，压成一行（尽量少占高度） */
.kitx .photo-layout-cell {
    grid-column: span 2;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
}
.kitx .photo-layout-cell .pi-ver-head { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.kitx .photo-layout-cell .pi-ver-head .p-name { font-size: 13px; }
.kitx .photo-layout-cell .pi-ver-head small { color: var(--kx-dim); font-size: 11px; }
.kitx .photo-layout-cell .btn {
    border: 1px solid var(--kx-line2); background: var(--kx-bg2); color: var(--kx-sub);
    border-radius: 8px; font-size: 12px;
}
.kitx .photo-layout-cell .btn:hover { border-color: var(--kx-acc); color: var(--kx-acc); }
.kitx .photo-layout-cell .hint { margin: 0 0 0 auto; }

/* 参考图：上传 / 导入链接 切换（和官网同款分段按钮） */
.kitx .ref-switch {
    display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
    background: var(--kx-bg2); border: 1px solid var(--kx-line2);
    border-radius: 999px; padding: 3px; margin-bottom: 10px; max-width: 340px;
}
.kitx .ref-switch-btn {
    border: 0; background: none; color: var(--kx-sub); font-size: 12.5px;
    padding: 8px 10px; border-radius: 999px; cursor: pointer; transition: all .15s;
}
.kitx .ref-switch-btn:hover { color: var(--kx-txt); }
.kitx .ref-switch-btn.on { background: rgba(245, 158, 11, .15); color: var(--kx-acc); font-weight: 600; }
.kitx .ref-pane[hidden] { display: none !important; }
.kitx .ref-link-row { display: flex; gap: 8px; align-items: center; }
.kitx .ref-link-row input { flex: 1; min-width: 0; }
.kitx .ref-link-row .btn {
    flex: none; border: 1px solid rgba(245, 158, 11, .35); background: rgba(245, 158, 11, .16);
    color: var(--kx-acc); border-radius: 9px; padding: 9px 16px; font-size: 12.5px; font-weight: 600;
}
.kitx .ref-link-row .btn:hover { background: rgba(245, 158, 11, .24); }
.kitx #refThumbs { margin-top: 10px; }

/* 胶囊多选（场景偏好 / 图片类型） */
.kitx .chip-check {
    background: var(--kx-bg2); border: 1px solid var(--kx-line2); color: var(--kx-sub);
    border-radius: 999px; transition: all .15s;
}
.kitx .chip-check:hover { border-color: var(--kx-acc); color: var(--kx-txt); }
.kitx .chip-check:has(input:checked) {
    border-color: var(--kx-acc); color: var(--kx-txt); background: rgba(245, 158, 11, .08);
}
.kitx .chip-check:has(input:checked)::before {
    content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--kx-acc);
}

/* 模块 / 复刻档位卡片 */
.kitx .types .type-item {
    background: var(--kx-bg2); border: 1.5px solid var(--kx-line2); border-radius: var(--kx-radius-s);
    transition: all .15s; position: relative;
}
.kitx .types .type-item:hover { border-color: var(--kx-acc); }
.kitx .types .type-item:has(input:checked) { border-color: var(--kx-acc); background: rgba(245, 158, 11, .07); }
.kitx .types .type-item:has(input:checked)::after {
    content: "✓"; position: absolute; top: 7px; right: 8px; width: 16px; height: 16px; border-radius: 5px;
    background: var(--kx-acc); color: #0b0e14; font-size: 11px; line-height: 16px; text-align: center; font-weight: 700;
}
.kitx .type-item .t-name { color: var(--kx-txt); }
.kitx .type-item .t-desc { color: var(--kx-dim); }

/* 开关（风格分析 / 上架文案） */
.kitx .addon-box { background: transparent; border: 0; padding: 0; }
.kitx .addon-box .inline { color: var(--kx-txt); }
.kitx input[type=checkbox]:not(.scene-check):not(.m-check):not(.layout-check) {
    appearance: none; -webkit-appearance: none; width: 38px; height: 21px; border-radius: 999px;
    background: var(--kx-line2); position: relative; flex: none; cursor: pointer; transition: background .2s;
}
.kitx input[type=checkbox]:not(.scene-check):not(.m-check):not(.layout-check)::after {
    content: ""; position: absolute; top: 2.5px; left: 3px; width: 16px; height: 16px; border-radius: 50%;
    background: #fff; transition: transform .2s;
}
.kitx input[type=checkbox]:not(.scene-check):not(.m-check):not(.layout-check):checked { background: var(--kx-acc); }
.kitx input[type=checkbox]:not(.scene-check):not(.m-check):not(.layout-check):checked::after { transform: translateX(16px); }

/* 按钮：主按钮换成原型的琥珀渐变 */
.kitx .actions .btn.primary,
.kitx .gen-side .btn.primary {
    background: linear-gradient(135deg, #fbbf24, #f97316);
    color: #1c1003; font-weight: 700; border: 0;
    box-shadow: 0 6px 20px rgba(249, 115, 22, .32);
}
.kitx .gen-side .btn.primary:hover { filter: brightness(1.05); transform: translateY(-1px); }
.kitx .gen-side .btn.primary[disabled] { opacity: .55; box-shadow: none; transform: none; }
.kitx .ai-btn {
    background: linear-gradient(135deg, #fbbf24, #f97316); color: #1c1003; font-weight: 600;
    border: 0; border-radius: 8px;
}

/* 下拉：把原生 select 包成按钮 + 面板（kit2.js 负责） */
.kitx .kx-native { display: none !important; }
.kitx .kx-dd { position: relative; }
.kitx .kx-dd-btn {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px;
    background: var(--kx-input-bg); color: var(--kx-input-txt); border: 1px solid #d8dce3;
    border-radius: 10px; padding: 10px 12px; font-size: 13.5px; text-align: left; cursor: pointer;
}
.kitx .kx-dd-btn:hover { border-color: var(--kx-acc); }
.kitx .kx-dd.open .kx-dd-btn { border-color: var(--kx-acc); box-shadow: 0 0 0 3px rgba(245, 158, 11, .18); }
.kitx .kx-dd-btn .chev { flex: none; color: #8b93a3; transition: transform .2s; }
.kitx .kx-dd.open .kx-dd-btn .chev { transform: rotate(180deg); }
.kitx .kx-panel {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60;
    background: #1a1f2b; border: 1px solid var(--kx-line2); border-radius: var(--kx-radius-s);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .45); overflow: hidden; display: none;
}
.kitx .kx-dd.open .kx-panel { display: block; }
.kitx .kx-panel.wide { min-width: 380px; right: auto; }
.kitx .kx-search { padding: 9px 10px; border-bottom: 1px solid var(--kx-line); }
.kitx .kx-search input {
    width: 100%; background: var(--kx-bg2); border: 1px solid var(--kx-line2); border-radius: 7px;
    color: var(--kx-txt); padding: 7px 10px; font-size: 12.5px;
}
.kitx .kx-list { max-height: 240px; overflow-y: auto; padding: 6px; }
.kitx .kx-item {
    display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 7px;
    color: var(--kx-txt); font-size: 13px; text-align: left; background: none; border: 0; cursor: pointer;
}
.kitx .kx-item:hover { background: rgba(255, 255, 255, .06); }
.kitx .kx-item.on { background: rgba(245, 158, 11, .12); }
.kitx .kx-ck {
    width: 17px; height: 17px; border-radius: 5px; border: 1.5px solid var(--kx-line2);
    flex: none; display: flex; align-items: center; justify-content: center; color: transparent; font-size: 11px;
}
.kitx .kx-item.on .kx-ck { background: var(--kx-acc); border-color: var(--kx-acc); color: #0b0e14; }
.kitx .kx-pills { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 8px; max-height: 280px; overflow-y: auto; }
.kitx .kx-pill {
    display: flex; align-items: center; gap: 8px; background: var(--kx-bg2); border: 1px solid var(--kx-line2);
    border-radius: 9px; padding: 8px 10px; font-size: 12.5px; color: var(--kx-sub); text-align: left; cursor: pointer;
}
.kitx .kx-pill:hover { border-color: var(--kx-acc); color: var(--kx-txt); }
.kitx .kx-pill.on { border-color: var(--kx-acc); background: rgba(245, 158, 11, .08); color: var(--kx-txt); }
.kitx .kx-pill .r-dot { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--kx-line2); flex: none; }
.kitx .kx-pill.on .r-dot { border-color: var(--kx-acc); background: radial-gradient(circle, var(--kx-acc) 0 3px, transparent 3.5px); }

/* ------------------------------------------------------------ 右侧结果区 */
.kitx .show-title { color: var(--kx-txt); }
.kitx .show-sub { color: var(--kx-sub); }
.kitx .kit-hintbar {
    background: var(--kx-card); border: 1px solid var(--kx-line); border-radius: var(--kx-radius-s);
    color: var(--kx-sub); font-size: 12.5px;
}
.kitx .kit-task {
    background: var(--kx-card); border: 1px solid var(--kx-line); border-radius: var(--kx-radius);
}
.kitx .kit-task-title { color: var(--kx-txt); }
.kitx .kit-param {
    background: rgba(255, 255, 255, .05); border: 1px solid var(--kx-line2); color: var(--kx-txt);
}
.kitx .kit-param i { color: var(--kx-sub); }
.kitx .kit-card { background: var(--kx-bg2); border-color: var(--kx-line2); border-radius: var(--kx-radius-s); }
.kitx .kit-card figcaption { color: var(--kx-sub); }
.kitx .kit-card .kit-dl { color: var(--kx-acc); }
.kitx .kit-actions .btn.sm.primary {
    background: linear-gradient(135deg, #fbbf24, #f97316); color: #1c1003; border: 0; font-weight: 600;
}
.kitx .kit-actions .btn.sm.ghost { border: 1px solid var(--kx-line2); background: var(--kx-bg2); color: var(--kx-sub); }
.kitx .kit-listing { background: var(--kx-bg2); border: 1px solid var(--kx-line2); }

/* 历史记录浮层 / 高级 JSON / 弹窗 / 版式卡片 */
.kitx .hist-panel { background: #1a1f2b; border: 1px solid var(--kx-line2); border-radius: var(--kx-radius-s); }
.kitx .advanced {
    background: var(--kx-bg2); border: 1px solid var(--kx-line2); border-radius: var(--kx-radius-s); padding: 8px 12px;
}
.kitx .advanced summary { color: var(--kx-sub); font-size: 12.5px; cursor: pointer; }
/* 卖点图版式弹窗：节点在 body 下（不在 .kitx 里），这里用全局选择器，
   并且给一个高于页面所有元素的层级（页面里最高的是 9999 的确认框，压它下面一层） */
.layout-modal { z-index: 9990; }
.layout-modal .lm-box { background: #1a1f2b; border: 1px solid #2e3646; }
.layout-modal .lm-backdrop { background: rgba(6, 8, 12, .66); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.layout-modal h3 { color: #e8eaed; }
.layout-modal .asset-card { background: #10131a; border: 1px solid #2e3646; }
.layout-modal .asset-card:has(input:checked) { border-color: #f59e0b; }
/* 版式卡片放大一倍（客户要求 2026-10-04）：小方图 → 大方图，一屏能看清版式细节 */
.layout-modal .asset-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
    max-height: 60vh;
}
.layout-modal .asset-card { padding: 12px 10px; gap: 6px; }
.layout-modal .asset-card img,
.layout-modal .asset-card .asset-ph { border-radius: 10px; }
.layout-modal .asset-card .asset-name { font-size: 13px; }

/* 服饰穿戴：拍摄场景二级弹窗（点场景 → 选姿势 + 景别/角度 → 生成场景图片） */
.scene-modal { position: fixed; inset: 0; z-index: 9990; display: none; }
.scene-modal.open { display: block; }
.scene-modal .sm-backdrop {
    position: absolute; inset: 0; background: rgba(6, 8, 12, .66);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.scene-modal .sm-box {
    position: relative; width: min(720px, 94vw); max-height: 86vh; margin: 7vh auto 0;
    background: #1a1f2b; border: 1px solid #2e3646; border-radius: 14px;
    display: flex; flex-direction: column; overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}
.scene-modal h3 { margin: 0; padding: 16px 20px 6px; color: #e8eaed; font-size: 16px; }
.scene-modal .sm-scene { padding: 0 20px 10px; color: #8b93a3; font-size: 13px; border-bottom: 1px solid #242a36; }
.scene-modal .sm-list { flex: 1 1 auto; overflow-y: auto; padding: 12px 20px; display: flex; flex-direction: column; gap: 10px; }
.scene-modal .sm-row {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    background: #10131a; border: 1px solid #2e3646; border-radius: 9px; padding: 10px 12px; cursor: pointer;
}
.scene-modal .sm-row:hover { border-color: rgba(245, 158, 11, .55); }
.scene-modal .sm-check {
    appearance: none; -webkit-appearance: none; width: 18px; height: 18px; border-radius: 5px;
    border: 1.5px solid #2e3646; flex: none; position: relative; cursor: pointer; background: transparent;
}
.scene-modal .sm-check:checked { background: #f59e0b; border-color: #f59e0b; }
.scene-modal .sm-check:checked::after {
    content: "✓"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    color: #0b0e14; font-size: 12px; font-weight: 700;
}
.scene-modal .sm-text { flex: 1 1 240px; color: #e8eaed; font-size: 13px; line-height: 1.6; }
.scene-modal .sm-loading { padding: 26px 10px; text-align: center; color: #8b93a3; font-size: 13px; }
.scene-modal .sm-opts { flex: 1 1 100%; display: flex; gap: 10px; padding-left: 28px; }
.scene-modal .sm-opts[hidden] { display: none; }
.scene-modal .sm-opts select {
    flex: 1 1 0; background: #0b0e14; border: 1px solid #2e3646; color: #e8eaed;
    border-radius: 8px; padding: 7px 10px; font-size: 12.5px;
}
.scene-modal .sm-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 20px; border-top: 1px solid #242a36;
}
.scene-modal .sm-foot .btn.ghost {
    border: 1px solid #2e3646; background: none; color: #8b93a3; border-radius: 9px; padding: 9px 18px;
}
.scene-modal .sm-foot .btn.primary {
    background: linear-gradient(135deg, #fbbf24, #f97316); color: #1c1003;
    border: 0; font-weight: 700; border-radius: 10px; padding: 10px 22px;
}
@media (max-width: 760px) {
    .scene-modal .sm-opts { padding-left: 0; flex-wrap: wrap; }
    .scene-modal .sm-box { margin-top: 4vh; max-height: 90vh; }
}
.kitx .asset-card { background: var(--kx-bg2); border: 1px solid var(--kx-line2); }
.kitx .asset-card:has(input:checked) { border-color: var(--kx-acc); }

/* ------------------------------------------------------------ 竖屏 / 窄屏 */
@media (max-width: 1080px) {
    .kitx .gen-side { background: transparent; border-right: 0; border-bottom: 1px solid var(--kx-line); }
    .kitx .gen-main { padding: 24px 16px 40px; }
    .kitx .show-title { font-size: 24px; }
}
@media (max-width: 760px) {
    .kitx .gen-main { padding: 18px 12px 36px; }
    .kitx .show-title { font-size: 21px; }
    .kitx .show-sub { font-size: 12.5px; margin-bottom: 20px; }
    .kitx .grid-3 { grid-template-columns: 1fr; }
    .kitx .photo-grid { grid-template-columns: 1fr; }
    .kitx .photo-layout-cell { grid-column: 1 / -1; flex-direction: column; align-items: flex-start; }
    .kitx .photo-layout-cell .hint { margin-left: 0; }
    .kitx .types { grid-template-columns: repeat(2, 1fr); }
    .kitx .kx-pills { grid-template-columns: repeat(2, 1fr); }
    .kitx .kx-panel.wide { min-width: 0; }
    .kitx .actions { flex-wrap: wrap; }
    .kitx .actions .btn.primary { flex: 1; justify-content: center; }
}

/* ------------------------------------------- 爆款风格分析（附加功能） */
.kitx .kit-style-head { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:10px; }
.kitx .kit-style-head #kitStyleMsg { color: var(--kx-dim); font-size: 12px; }
.kitx .kit-style-grid { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:10px; margin-top:10px; }
.kitx .kit-style-card { position:relative; display:flex; align-items:flex-start; gap:10px; padding:12px 12px 12px 14px; background: var(--kx-card); border:1px solid var(--kx-line2); border-radius: 12px; cursor:pointer; transition: border-color .18s, background .18s; }
.kitx .kit-style-card:hover { border-color:#3b4557; background:#171c26; }
.kitx .kit-style-card.on { border-color: var(--kx-acc); box-shadow: 0 0 0 2px rgba(245,158,11,.18) inset; }
.kitx .kit-style-check { flex:none; width:18px; height:18px; margin-top:2px; border-radius:5px; border:1.5px solid var(--kx-line2); color:#fff; font-size:12px; line-height:16px; text-align:center; background:transparent; }
.kitx .kit-style-card.on .kit-style-check { background: var(--kx-acc); border-color: var(--kx-acc); }
.kitx .kit-style-txt { flex:1 1 auto; min-width:0; }
.kitx .kit-style-txt b { display:block; color: var(--kx-txt); font-size:14px; font-weight:600; margin-bottom:4px; }
.kitx .kit-style-txt i { display:block; color: var(--kx-sub); font-size:12px; font-style:normal; line-height:1.5; }
.kitx .kit-style-colors { display:flex; gap:6px; align-items:center; flex:none; padding-top:2px; }
.kitx .kit-style-colors span { width:16px; height:16px; border-radius:50%; border:1px solid rgba(255,255,255,.16); display:inline-block; }
@media (max-width: 760px) { .kitx .kit-style-grid { grid-template-columns: 1fr; } }