:root {
    --bg: #f5f7fb;
    --card: #ffffff;
    --line: #e6eaf2;
    --text: #1f2430;
    --muted: #7b8496;
    --accent: #3b6ef6;
    --accent-soft: #eaf0ff;
    --ok: #12a150;
    --warn: #d98b00;
    --err: #e5484d;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 14px/1.65 -apple-system, "Segoe UI", "Microsoft YaHei", system-ui, sans-serif;
}

a { color: var(--accent); text-decoration: none; }
h1, h2, h3 { margin: 0 0 8px; font-weight: 650; }
h2 { font-size: 17px; }

.topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 22px;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line);
}

.brand { display: flex; align-items: center; gap: 9px; font-size: 15px; }
.brand .dot {
    width: 10px; height: 10px; border-radius: 3px;
    background: linear-gradient(135deg, #3b6ef6, #8b5cf6);
}

.container { max-width: 1220px; margin: 0 auto; padding: 22px; }
.layout { display: grid; grid-template-columns: 1fr 340px; gap: 20px; align-items: start; }
@media (max-width: 1020px) { .layout { grid-template-columns: 1fr; } }

.card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

.card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }

.field { margin: 0 0 16px; }
.field > label { display: block; margin-bottom: 6px; font-weight: 600; }
.req { color: var(--err); }

input[type=text], input[type=password], input[type=number], select, textarea {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: #fff;
    color: var(--text);
    font: inherit;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
textarea { resize: vertical; }

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 700px) { .grid-3 { grid-template-columns: 1fr; } }

.hint { margin-top: 5px; color: var(--muted); font-size: 12px; }
.muted { color: var(--muted); }

/* 视频类型：一行一个，8 个类型竖着排下来（描述过长自动省略，不撑破侧栏） */
.types { display: grid; grid-template-columns: 1fr; gap: 6px; }

.type-item {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 8px;
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    cursor: pointer;
    background: #fcfdff;
    transition: border-color .15s, background .15s;
}
.type-item:hover { border-color: #cfd9f0; }
.type-item .t-main { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.type-item .t-name {
    display: block;
    font-weight: 600;
    font-size: 13px;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.type-item small {
    display: block;
    color: var(--muted);
    font-size: 11.5px;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.type-item .t-count { width: 54px; flex: 0 0 54px; padding: 5px 7px; font-size: 12.5px; }
.type-item input[type=checkbox] { width: 15px; height: 15px; flex: none; }
.type-item:has(> .t-check:checked) { border-color: var(--accent); background: var(--accent-soft); }

/* ------------------------------------------- 视频时长两档（15 秒 / 30 秒） */
/* ------------------------------- 视频板块「调测密码」门（密码本身不显示） */
.vg-wrap { min-height: 60vh; display: flex; align-items: center; justify-content: center; padding: 48px 20px; }
.vg-box {
    width: 100%; max-width: 460px; padding: 30px 28px;
    background: #fff; border: 1px solid var(--line); border-radius: 16px;
    box-shadow: 0 18px 44px rgba(15, 32, 66, .10); text-align: center;
}
.vg-box h1 { margin: 0 0 10px; font-size: 20px; }
.vg-tip { margin: 0 0 18px; color: var(--muted); font-size: 13.5px; line-height: 1.7; }
.vg-err {
    margin: 0 0 14px; padding: 9px 12px; border-radius: 9px;
    background: #fff1f0; border: 1px solid #ffccc7; color: #b3261e; font-size: 13px;
}
.vg-input {
    width: 100%; padding: 12px 14px; font-size: 15px; text-align: center; letter-spacing: 2px;
    border: 1.5px solid #d6ddea; border-radius: 10px; background: #f9fbff; color: #16233d;
}
.vg-input:focus { outline: none; border-color: var(--accent); background: #fff; box-shadow: 0 0 0 3px var(--accent-soft); }
.vg-btn {
    width: 100%; margin-top: 14px; padding: 12px 16px; font-size: 15px; font-weight: 600; cursor: pointer;
    color: #fff; border: 0; border-radius: 10px;
    background: linear-gradient(135deg, #4f6bff, #8b5cf6);
    box-shadow: 0 10px 22px rgba(79, 107, 255, .28);
}
.vg-btn:hover { filter: brightness(1.06); }
.vg-note { margin: 12px 0 0; color: var(--muted); font-size: 12px; }

.dur-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 560px) { .dur-pick { grid-template-columns: 1fr; } }
.dur-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fcfdff;
    cursor: pointer;
    transition: border-color .15s, background .15s, box-shadow .15s;
}
.dur-item:hover { border-color: #cfd9f0; }
.dur-item .dur-main { flex: 1 1 auto; min-width: 0; }
.dur-item .dur-name { display: block; font-weight: 600; font-size: 13.5px; }
.dur-item small { display: block; color: var(--muted); font-size: 11.5px; line-height: 1.4; }
.dur-item input[type=radio] { width: 16px; height: 16px; flex: none; }
.dur-item:has(> input[type=radio]:checked) {
    border-color: var(--accent);
    background: var(--accent-soft);
    box-shadow: 0 0 0 1px var(--accent) inset;
}

/* ------------------------------------------- 卖点 / 脚本的历史记录下拉面板 */
.hist-panel {
    margin-top: 6px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: #fff;
    max-height: 210px;
    overflow-y: auto;
    box-shadow: 0 6px 18px rgba(20, 30, 60, .08);
}
.hist-panel .hist-head {
    position: sticky;
    top: 0;
    padding: 6px 9px;
    background: #f7f9fd;
    border-bottom: 1px solid var(--line);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--muted);
}
.hist-panel .hist-head .muted { font-weight: 400; }
.hist-panel .hist-empty { padding: 9px; font-size: 12px; color: var(--muted); }
.hist-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 9px;
    border-bottom: 1px solid #f2f4f9;
    cursor: pointer;
}
.hist-item:last-child { border-bottom: 0; }
.hist-item:hover { background: #f7faff; }
.hist-item .hist-text {
    flex: 1;
    min-width: 0;
    font-size: 12px;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hist-item .hist-meta {
    flex: none;
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--muted);
    font-size: 11px;
}
.hist-item .hist-del {
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 5px;
}
.hist-item .hist-del:hover { background: #fdecec; color: var(--err); }

.advanced { margin: 4px 0 16px; border: 1px dashed var(--line); border-radius: 10px; padding: 10px 12px; }
.advanced summary { cursor: pointer; font-weight: 600; }
.advanced .field { margin-top: 12px; }

.inline { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.inline input[type=number] { width: 80px; }
.inline input[type=checkbox] { width: 16px; height: 16px; }

.actions { display: flex; align-items: center; gap: 12px; margin-top: 4px; }

.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: #fff;
    color: var(--text);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: .15s;
}
.btn:hover { border-color: #cfd9f0; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { background: #2f60e6; }
.btn.primary:disabled { opacity: .6; cursor: not-allowed; }
.btn.ghost { background: transparent; }
.btn.danger { color: var(--err); border-color: #f7d0d1; }
.btn.sm { padding: 4px 10px; font-size: 12px; border-radius: 7px; }

.alert {
    margin: 0 0 14px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #fff6e8;
    border: 1px solid #ffe3b3;
    color: #8a5a00;
}

.tasks { display: flex; flex-direction: column; gap: 11px; max-height: 74vh; overflow: auto; }

.task {
    border: 1px solid var(--line);
    border-radius: 11px;
    padding: 12px;
    background: #fcfdff;
}
.task-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.task-title { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-meta { margin-top: 5px; color: var(--muted); font-size: 12px; }

.chip {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.chip.pending, .chip.submitting { background: #eef2ff; color: #3b5bdb; }
.chip.running { background: #e8f4ff; color: #1d7fd4; }
.chip.success { background: #e7f7ee; color: var(--ok); }
.chip.partial, .chip.insufficient { background: #fff4e0; color: var(--warn); }
.chip.failed { background: #fdecec; color: var(--err); }
.chip.canceled { background: #f0f1f4; color: var(--muted); }

.bar { height: 5px; border-radius: 3px; background: #eef1f7; overflow: hidden; margin: 8px 0 6px; }
.bar > i { display: block; height: 100%; background: var(--accent); transition: width .4s; }

.videos { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.video-row { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.video-row .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }

.gate-body { display: grid; place-items: center; min-height: 100vh; }
.gate {
    width: 360px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 26px;
    box-shadow: 0 8px 30px rgba(16, 24, 40, .06);
}
.gate h1 { font-size: 17px; }
.gate input { margin: 12px 0; }
.gate .btn { width: 100%; justify-content: center; }

.admin-nav { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.admin-nav a { padding: 6px 12px; border-radius: 8px; color: var(--text); font-weight: 600; }
.admin-nav a:hover { background: #f0f3fa; }
.admin-nav a.active { background: var(--accent-soft); color: var(--accent); }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 18px; }
.stat { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 15px; }
.stat .k { color: var(--muted); font-size: 12px; }
.stat .v { font-size: 24px; font-weight: 700; margin-top: 4px; }

table { width: 100%; border-collapse: collapse; }
th, td { padding: 9px 10px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-size: 12px; font-weight: 600; background: #fafbfe; }
tr:hover td { background: #fcfdff; }
.mono { font-family: ui-monospace, Consolas, monospace; font-size: 12px; }
.ellipsis { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* 养号池：操作列按钮多（客户扫码链接 / 刷新美豆 / 直接标成品 / 恢复培育 / 删除），
   以前这一列没宽度，按钮会挤成一坨、还压到旁边的备注列 —— 给它留够宽度，让它自己换行。 */
.np-ops { width: 340px; min-width: 340px; vertical-align: top; }
.np-ops .row-actions { align-items: center; }
.inline-form { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.inline-form .field { margin: 0; }

/* 后台任务列表：列多，固定表格布局 + 紧凑一点才不显得乱 */
.task-table { table-layout: fixed; }
.task-table th { font-size: 11.5px; }
.task-table td { padding: 8px 9px; font-size: 12.5px; }
.task-table .ellipsis { max-width: none; }
.task-table .task-reason {
    color: var(--err);
    font-size: 11.5px;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ------------------------------------------------------------ 图片上传 */
.label-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.label-row > span { font-weight: 600; }

.uploader {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 14px;
    border: 1.5px dashed #c8d3ea;
    border-radius: 10px;
    background: #fbfcff;
    transition: border-color .15s, background .15s;
}
.uploader .thumbs {
    /* 缩略图放在上传框「里面」：自成一行 + 自动换行；多了框会跟着变高 */
    width: 100%;
    margin-top: 4px;
}
.uploader.over { border-color: var(--accent); background: var(--accent-soft); }
.uploader .hint { margin: 0; }

.thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.thumbs:empty { display: none; }
.thumb {
    position: relative;
    width: 68px;
    height: 68px;
    border: 1px solid var(--line);
    border-radius: 9px;
    overflow: hidden;
    background: #f2f4f9;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 缩略图拖拽换位（上传后按住拖动，提交就按这个顺序发给官方） */
.thumb { touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; }
.thumb.dragging {
    cursor: grabbing;
    opacity: .95;
    z-index: 6;
    box-shadow: 0 12px 26px rgba(2, 6, 18, .45);
}
.thumb.drop-target { outline: 2px dashed var(--accent); outline-offset: 2px; }
.thumb .thumb-no {
    position: absolute;
    left: 3px;
    bottom: 3px;
    min-width: 16px;
    height: 16px;
    line-height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: rgba(8, 12, 24, .72);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    pointer-events: none;
}
.thumbs .thumbs-tip {
    flex: 0 0 100%;
    font-size: 12px;
    line-height: 1.6;
    color: #9aa3b8;
}
.thumb a {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 18px;
    height: 18px;
    line-height: 16px;
    text-align: center;
    border-radius: 50%;
    background: rgba(31, 36, 48, .62);
    color: #fff;
    font-size: 13px;
}

.ai-btn {
    border-color: #d8c9ff;
    color: #6b46ff;
    background: #f7f4ff;
}
.ai-btn:hover { border-color: #c3adff; }
.ai-btn:disabled { opacity: .6; cursor: not-allowed; }

/* -------------------------------------------------- 前台顶栏的剩余次数 */
.quota-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--accent-soft);
    color: #2c4a9e;
    font-size: 12px;
    white-space: nowrap;
}
.quota-chip b { font-size: 14px; }

/* 登录 / 注册页里的多个输入框之间留点距离 */
.gate input + input,
.gate input + .alert,
.gate .alert + input { margin-top: 10px; }

/* 卡密 / 兑换码这种需要按字符对齐的，等宽更好认 */
.gate input[name=code],
textarea[readonly] { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* ==================================================== 生成记录页（作品卡片） */
.record-tabs {
    display: flex;
    gap: 6px;
    margin: 4px 0 16px;
    border-bottom: 1px solid var(--line);
    padding-bottom: 10px;
}
.record-tabs a {
    padding: 5px 14px;
    border-radius: 8px;
    color: var(--muted);
    font-size: 13px;
}
.record-tabs a:hover { background: #f2f5fb; }
.record-tabs a.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }

.record-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 16px;
}

.record-card {
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    display: flex;
    flex-direction: column;
}
.record-card .record-cover {
    position: relative;
    display: block;
    aspect-ratio: 9 / 16;
    max-height: 280px;
    background: #f2f4f9;
    overflow: hidden;
}
.record-card .record-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.record-card .record-cover video { width: 100%; height: 100%; object-fit: cover; display: block; background: #eef1f7; }
.record-card .record-cover .play-badge {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(31, 36, 48, .45);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    padding-left: 3px;
    pointer-events: none;
    transition: opacity .15s;
}
.record-card .record-cover.video:hover .play-badge { opacity: 0; }
.record-card .record-cover .placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 26px;
    color: #b8c2d6;
}
.record-card.failed .record-cover .placeholder { color: var(--err); }

.record-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.record-title {
    font-size: 13px;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.record-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; }
.record-type {
    padding: 2px 8px;
    border-radius: 999px;
    background: #eef2ff;
    color: #4152b8;
}
.record-state { color: var(--muted); }
.record-card.failed .record-state { color: var(--err); }
.record-actions { display: flex; gap: 8px; margin-top: auto; }

/* ========================================================== 视频模板板块 */
.gen-wrap {
    display: grid;
    grid-template-columns: 470px 1fr;
    align-items: start;
    min-height: calc(100vh - 57px);
}
.gen-side {
    background: #fff;
    border-right: 1px solid var(--line);
    padding: 18px 20px 40px;
    position: sticky;
    top: 57px;
    max-height: calc(100vh - 57px);
    overflow-y: auto;
}
.side-tip {
    margin: 0 0 16px;
    padding: 9px 11px;
    background: #f5f7fb;
    border-radius: 9px;
    color: var(--muted);
    font-size: 12.5px;
    line-height: 1.6;
}
/* min-width:0 很关键：不加的话网格里的宽内容会把这一列撑开，右侧被切掉、也不换行 */
.gen-main { padding: 54px 40px 60px; min-width: 0; }
.show-title { font-size: 30px; text-align: center; margin: 0 0 10px; }
.show-sub { text-align: center; color: var(--muted); margin: 0 0 34px; }

@media (max-width: 1080px) {
    .gen-wrap { grid-template-columns: 1fr; }
    .gen-side { position: static; max-height: none; border-right: 0; border-bottom: 1px solid var(--line); }
    .gen-main { padding: 30px 20px 40px; }
}

.tpl-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    max-width: 1040px;
    margin: 0 auto;
}
@media (max-width: 1400px) { .tpl-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1080px) { .tpl-grid { grid-template-columns: repeat(4, 1fr); gap: 14px; } }
@media (max-width: 760px)  { .tpl-grid { grid-template-columns: repeat(2, 1fr); } }

.tpl-card .tpl-use {
    position: absolute;
    right: 8px;
    left: auto;
    bottom: 8px;
    padding: 5px 11px;
    border: 0;
    border-radius: 8px;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
    background: rgba(59, 110, 246, .92);
    color: #fff;
    opacity: .94;
    transition: background .15s, opacity .15s;
}
.tpl-card:hover .tpl-use { opacity: 1; background: #2f60e6; }
.tpl-card {
    display: flex;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    user-select: none;
}
.tpl-thumb {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    background: #eef1f7;
    border: 1px solid var(--line);
    transition: border-color .15s, box-shadow .15s;
}
.tpl-card:hover .tpl-thumb { border-color: var(--accent); box-shadow: 0 3px 12px rgba(59, 110, 246, .18); }
.tpl-video {
    width: 100%;
    aspect-ratio: 9 / 16;
    object-fit: cover;
    background: #eef1f7;
    display: block;
}
/* 模板缩略图：封面用 <img>（<video poster> 不带 no-referrer 会被 CDN 拦），
   鼠标移上去视频才淡入盖在封面上 */
.tpl-thumb .tpl-cover {
    width: 100%;
    aspect-ratio: 9 / 16;
    object-fit: cover;
    display: block;
    background: #12161d;
}
.tpl-thumb .tpl-video {
    position: absolute;
    inset: 0;
    height: 100%;
    opacity: 0;
    transition: opacity .18s ease;
    pointer-events: none;
}
.tpl-thumb.playing .tpl-video { opacity: 1; }
/* .mov 之类浏览器放不了的模板，就用封面图顶着 */
.tpl-poster-fallback {
    width: 100%;
    aspect-ratio: 9 / 16;
    object-fit: cover;
    background: #eef1f7;
    display: block;
}
.tpl-card .play-badge.sm {
    width: 26px;
    height: 26px;
    font-size: 11px;
    left: 8px;
    top: auto;
    bottom: 8px;
    transform: none;
    background: rgba(255, 255, 255, .82);
    color: #1f2430;
}
.tpl-card:hover .play-badge.sm { opacity: 0; }
.tpl-name { font-weight: 650; font-size: 15px; text-align: center; margin-top: 2px; }
.tpl-desc {
    color: var(--muted);
    font-size: 12.5px;
    line-height: 1.45;
    text-align: center;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.side-sep { height: 1px; background: var(--line); margin: 18px 0 14px; }

/* ================================================== 站内弹窗播放（不跳外链） */
.video-modal { display: none; position: fixed; inset: 0; z-index: 999; }
.video-modal.open { display: block; }
.video-modal .vm-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 20, 30, .72);
    backdrop-filter: blur(2px);
}
.video-modal .vm-box {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(92vw, 420px);
    max-height: 92vh;
    background: #0f1420;
    border-radius: 14px;
    padding: 10px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .45);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.video-modal video {
    width: 100%;
    max-height: 76vh;
    border-radius: 10px;
    background: #000;
    display: block;
}
.video-modal .vm-title {
    color: #cfd6e4;
    font-size: 12.5px;
    line-height: 1.5;
    max-height: 40px;
    overflow: hidden;
}
.video-modal .vm-close {
    position: absolute;
    right: -6px;
    top: -32px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 0;
    background: rgba(255, 255, 255, .16);
    color: #fff;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}
.video-modal .vm-close:hover { background: rgba(255, 255, 255, .3); }
.video-modal .vm-foot { display: flex; gap: 8px; }
.video-modal .vm-foot:empty { display: none; }
.video-modal .vm-use {
    flex: 1;
    border: 0;
    border-radius: 9px;
    padding: 9px 0;
    background: var(--accent);
    color: #fff;
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
}
.video-modal .vm-use:hover { background: #2f60e6; }

/* ============================================ 首页右边的「最近生成」迷你行 */
.tasks.mini { display: flex; flex-direction: column; gap: 8px; }

/* ======================================================================
   板块选择页（登录后先选板块）
   ====================================================================== */
.portal-head { margin: 6px 0 20px; }
.portal-head h1 { font-size: 24px; }

.portal-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}
@media (max-width: 780px) { .portal-grid { grid-template-columns: 1fr; } }

.portal-card {
    position: relative;
    display: block;
    padding: 24px 24px 20px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--card);
    color: inherit;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    transition: transform .15s, box-shadow .15s, border-color .15s;
    overflow: hidden;
}
.portal-card::after {
    content: '';
    position: absolute;
    right: -60px; top: -60px;
    width: 180px; height: 180px;
    border-radius: 50%;
    opacity: .12;
}
.portal-card.viral::after { background: #3b6ef6; }
.portal-card.kit::after { background: #12a150; }
.portal-card:hover {
    transform: translateY(-2px);
    border-color: #cfd9f0;
    box-shadow: 0 10px 28px rgba(16, 24, 40, .09);
}
.portal-card h2 { font-size: 20px; margin: 8px 0 6px; }
.portal-card p { margin: 0 0 12px; color: var(--muted); }

.pc-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    background: var(--accent-soft);
    color: var(--accent);
}
.portal-card.kit .pc-badge { background: #e7f7ee; color: #12a150; }

.pc-list { margin: 0 0 16px; padding-left: 18px; color: var(--muted); }
.pc-list li { margin: 3px 0; }

.pc-go {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 9px;
    font-weight: 600;
    background: var(--accent);
    color: #fff;
}
.portal-card.kit .pc-go { background: #12a150; }

.portal-more { margin-top: 26px; }
.portal-more-title { font-weight: 650; margin-bottom: 10px; }
.portal-more-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}
@media (max-width: 900px) { .portal-more-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.portal-mini {
    display: block;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    color: inherit;
    transition: border-color .15s, background .15s;
}
.portal-mini:hover { border-color: #cfd9f0; background: #fafbff; }
.portal-mini b { display: block; margin-bottom: 2px; }
.portal-mini span { color: var(--muted); font-size: 12px; }

/* ======================================================================
   商品图板块：板块切换 tabs
   ====================================================================== */
.scene-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin: 0 0 12px;
    padding: 4px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: #fff;
}
.scene-tab {
    text-align: center;
    padding: 7px 6px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
    transition: background .15s, color .15s;
}
.scene-tab:hover { background: #f5f8ff; color: var(--text); }
.scene-tab.active { background: var(--accent); color: #fff; }

/* 商品套图：四类图张数 */
.photo-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
.photo-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fcfdff;
}
.photo-item .p-name { font-weight: 600; }
.photo-item small { color: var(--muted); font-size: 11px; }
.photo-item input[type=number] { margin-top: 4px; }

/* 素材选择器：卖点图版式 / 官方模特（缩略图卡片，可多选/单选） */
.asset-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
    gap: 8px;
    max-height: 260px;
    overflow: auto;
    padding: 2px;
}
.asset-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 6px 4px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fcfdff;
    cursor: pointer;
    transition: border-color .15s, background .15s, box-shadow .15s;
}
.asset-card:hover { border-color: #cfd9f0; background: #fafbff; }
.asset-card input { position: absolute; opacity: 0; width: 0; height: 0; }
.asset-card img,
.asset-card .asset-ph {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 7px;
    background: #eef1f7;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    font-weight: 700;
    font-size: 13px;
}
.asset-card .asset-name {
    font-size: 11px;
    color: var(--muted);
    text-align: center;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
/* 选中态：勾选框在卡片右上角显示一个对勾 */
.asset-card:has(input:checked) {
    border-color: var(--accent);
    background: var(--accent-soft);
    box-shadow: 0 0 0 2px var(--accent-soft);
}
.asset-card:has(input:checked)::after {
    content: '✓';
    position: absolute;
    right: 5px;
    top: 5px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-size: 11px;
    line-height: 16px;
    text-align: center;
}

/* 场景偏好这类「小标签多选」 */
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-check {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fcfdff;
    font-size: 13px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.chip-check:hover { border-color: #cfd9f0; background: #fafbff; }
.chip-check input { width: 14px; height: 14px; }
.chip-check:has(input:checked) {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 600;
}

/* ======================================================================
   商品图结果画廊
   ====================================================================== */
.kit-gallery { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

.kit-task {
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    padding: 14px 16px 16px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    min-width: 0;   /* 别让里面的长标题 / 长文案把整列撑宽 */
}
.kit-task-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}
.kit-task-title { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 生成记录里展示「当时选的参数」（客户要求） */
.kit-params { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 2px 0 10px; }
.kit-param {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .10);
    color: var(--text);
    font-size: 12px;
    line-height: 1.5;
}
.kit-param i { font-style: normal; color: var(--muted); }
.kit-state {
    flex: none;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 12px;
    background: var(--accent-soft);
    color: var(--accent);
}
.kit-state.st-success, .kit-state.st-partial { background: #e7f7ee; color: #12a150; }
.kit-state.st-failed { background: #fdecec; color: var(--err); }
.kit-state.st-insufficient, .kit-state.st-canceled { background: #fff6e5; color: var(--warn); }

.kit-grid {
    display: grid;
    /* min(220px, 100%) 保证窄列也能换行；一行最多 5 张，多了自动折到下一行 */
    grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
    gap: 10px;
}
.kit-card {
    margin: 0;
    position: relative;      /* 勾选框要绝对定位在图片左上角 */
    border: 1px solid var(--line);
    border-radius: 11px;
    overflow: hidden;
    background: #fafbff;
}
.kit-thumb { display: block; aspect-ratio: 1 / 1; background: #f0f2f7; }
.kit-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kit-card figcaption {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 6px 8px;
    font-size: 12px;
}
.kit-label { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kit-dl { flex: none; font-weight: 600; }

/* 失败的图位：显示原因 + 重新生成 */
.kit-card.kit-failed,
.kit-card.kit-pending { display: flex; flex-direction: column; }
.kit-failbox {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    background: repeating-linear-gradient(45deg, #fdf1f1, #fdf1f1 8px, #fbe7e7 8px, #fbe7e7 16px);
}
.kit-pending .kit-failbox {
    background: repeating-linear-gradient(45deg, #f4f7fd, #f4f7fd 8px, #eaf0fb 8px, #eaf0fb 16px);
}
.kit-failtag {
    padding: 3px 10px;
    border-radius: 999px;
    background: #fdecec;
    color: #b3261e;
    font-size: 12px;
    font-weight: 600;
}
.kit-wait {
    padding: 3px 10px;
    border-radius: 999px;
    background: #eaf0ff;
    color: #3b6ef6;
    font-size: 12px;
    font-weight: 600;
}
.kit-failmsg {
    padding: 0 8px 6px;
    color: #b3261e;
    font-size: 12px;
    line-height: 1.5;
}
.kit-failbtns { padding: 0 8px 8px; }

.kit-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
}

.kit-listing {
    margin-top: 12px;
    border: 1px dashed var(--line);
    border-radius: 11px;
    padding: 10px 12px;
    background: #fcfdff;
}
.kit-listing-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
    margin-bottom: 6px;
}
.kit-listing pre {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
    font: 13px/1.7 inherit;
    color: var(--text);
}

.kit-note { padding: 10px 0 4px; }

/* 结果区上方的用法提示（和爆款视频页的副标题风格一致） */
.kit-hintbar {
    margin: 0 0 10px;
    padding: 8px 12px;
    border: 1px dashed var(--line);
    border-radius: 10px;
    background: #fbfcff;
    color: var(--muted);
    font-size: 13px;
}

.kit-mini {
    padding: 7px 9px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: #fcfdff;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ======================================================================
   统一生成记录：一条记录 = 一行卡片
   （视频一行一条；套图一行一批，图多就在卡片里铺网格）
   ====================================================================== */
/* 生成记录：一条记录一行卡片，卡片里的图位大一点 + 自动换行（别一屏塞一堆小图） */
.record-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 1180px;
}

.rec-row {
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    padding: 12px 14px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

/* 视频行：左边封面，右边信息 + 操作 */
.rec-row.rec-video { display: flex; gap: 14px; align-items: flex-start; }
.rec-row.rec-video .rec-cover {
    position: relative;
    flex: 0 0 190px;
    width: 190px;
    aspect-ratio: 16 / 9;
    border-radius: 10px;
    overflow: hidden;
    background: #0f1420;
    display: block;
}
.rec-row.rec-video .rec-cover video { width: 100%; height: 100%; object-fit: cover; display: block; }
.rec-row.rec-video .rec-cover .play-badge {
    position: absolute;
    right: 8px;
    bottom: 6px;
    padding: 1px 8px;
    border-radius: 999px;
    background: rgba(15, 20, 32, .62);
    color: #fff;
    font-size: 12px;
}
.rec-cover.placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 26px;
    font-weight: 700;
}
.rec-row.rec-video[data-group="failed"] .rec-cover.placeholder { background: #f6e7e7; color: #b3261e; }
.rec-row.rec-video[data-group="running"] .rec-cover.placeholder { background: #eaf0ff; color: #3b6ef6; }

.rec-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.rec-title { font-weight: 650; line-height: 1.5; word-break: break-word; }
.rec-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; }
.rec-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.rec-kind {
    display: inline-block;
    margin-right: 6px;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    vertical-align: 1px;
}
.rec-kind.video { background: #eaf0ff; color: #3b6ef6; }
.rec-kind.kit { background: #e7f7ee; color: #12a150; }
.rec-kind.erase { background: #fff2e8; color: #d97706; }
.rec-kind.cutout { background: #f3ecff; color: #7c3aed; }
/* 生成记录里的抠图结果：透明底用棋盘格 */
.kit-card-cutout .kit-thumb img {
    aspect-ratio: 1 / 1;
    object-fit: contain;
    background-color: #fff;
    background-image:
        linear-gradient(45deg, #eceff4 25%, transparent 25%, transparent 75%, #eceff4 75%),
        linear-gradient(45deg, #eceff4 25%, transparent 25%, transparent 75%, #eceff4 75%);
    background-size: 16px 16px;
    background-position: 0 0, 8px 8px;
}

/* 生成记录里的「AI 消除」卡片：和套图同一套 rec-row 结构，只是图少 */
.rec-row.rec-erase .kit-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 180px)); }
.kit-card-erase .kit-thumb img { aspect-ratio: 1 / 1; object-fit: contain; background: #f4f6f9; }

/* PSD 转换状态小标（常驻在图卡上，转好/失败都能一眼看到） */
/* 顶栏「剩余美豆」：做成可点的按钮 */
.quota-chip-btn {
    border: 1px solid transparent;
    cursor: pointer;
    font: inherit;
    color: inherit;
}
.quota-chip-btn:hover { border-color: var(--accent); color: var(--accent); }

/* 美豆明细浮窗 */
/* AI 抠图：结果卡片 + 透明底棋盘格预览 */
/* AI 抠图：原图 / 结果都是「一行 5 个」的网格 */
/* AI 抠图：一格 = 原图 + 结果（左右对应），一行 5 格 */
.cut-pair2 { margin: 0; }
.cut-two { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.cut-two img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    background: #f4f6f9;
    border: 1px solid var(--line);
    border-radius: 8px;
}
.cut-two .cut-out img,
.cut-two .cut-ph {
    background-color: #fff;
    background-image:
        linear-gradient(45deg, #eceff4 25%, transparent 25%, transparent 75%, #eceff4 75%),
        linear-gradient(45deg, #eceff4 25%, transparent 25%, transparent 75%, #eceff4 75%);
    background-size: 14px 14px;
    background-position: 0 0, 7px 7px;
}
.cut-two .cut-ph {
    display: flex; align-items: center; justify-content: center;
    aspect-ratio: 1 / 1;
    border: 1px dashed var(--line);
    border-radius: 8px;
    color: var(--muted);
    font-size: 12.5px;
    text-align: center;
}
.cut-two .cut-ph.failed { background: #fdecec; border-color: #f7d0d1; color: #b3261e; }
/* 还没合成透明底时的「生成透明底」按钮（占满右格，和左边原图一样高） */
.cut-two .cut-make {
    width: 100%;
    aspect-ratio: 1 / 1;
    display: flex; align-items: center; justify-content: center;
    border-radius: 8px;
}

.cut-section { margin-top: 18px; }
.cut-section h3 { margin: 0 0 10px; font-size: 16px; }
.cut-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}
@media (max-width: 1400px) { .cut-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1080px) { .cut-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 780px)  { .cut-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.cut-cell { margin: 0; }
.cut-cell img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    background: #f4f6f9;
    border: 1px solid var(--line);
    border-radius: 10px;
}
.cut-cell .cut-ph {
    display: flex; align-items: center; justify-content: center;
    aspect-ratio: 1 / 1;
    background: #f4f6f9;
    border: 1px dashed var(--line);
    border-radius: 10px;
    color: var(--muted);
    font-size: 13px;
    text-align: center;
    padding: 6px;
}
.cut-cell figcaption {
    margin-top: 5px;
    display: flex; align-items: center; justify-content: space-between; gap: 6px;
    font-size: 12px; color: var(--muted);
}
.cut-cell figcaption span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cut-cell.failed .cut-ph { background: #fdecec; border-color: #f7d0d1; color: #b3261e; }
.cut-cell.cut-out img {
    background-color: #fff;
    background-image:
        linear-gradient(45deg, #eceff4 25%, transparent 25%, transparent 75%, #eceff4 75%),
        linear-gradient(45deg, #eceff4 25%, transparent 25%, transparent 75%, #eceff4 75%);
    background-size: 16px 16px;
    background-position: 0 0, 8px 8px;
}
.cut-result { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; }
.cut-card {
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--card);
    padding: 14px 16px 12px;
}
.cut-card.failed { border-color: #f7d0d1; background: #fffafa; }
.cut-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 700px) { .cut-pair { grid-template-columns: 1fr; } }
.cut-pair figure { margin: 0; }
.cut-pair img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    background: #f4f6f9;
    border: 1px solid var(--line);
    border-radius: 10px;
}
/* 透明 PNG 用棋盘格兜底，一眼能看出是透明的 */
.cut-pair .cut-out img {
    background-color: #fff;
    background-image:
        linear-gradient(45deg, #eceff4 25%, transparent 25%, transparent 75%, #eceff4 75%),
        linear-gradient(45deg, #eceff4 25%, transparent 25%, transparent 75%, #eceff4 75%);
    background-size: 18px 18px;
    background-position: 0 0, 9px 9px;
}
.cut-pair figcaption { margin-top: 6px; font-size: 12.5px; color: var(--muted); text-align: center; }
.q-modal { position: fixed; inset: 0; z-index: 80; display: none; }
.q-modal.open { display: block; }
.q-modal .q-backdrop {
    position: absolute; inset: 0;
    background: rgba(15, 23, 42, .45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.q-modal .q-box {
    position: relative;
    width: min(680px, 92vw);
    max-height: 78vh;
    margin: 7vh auto 0;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
    overflow: hidden;
}
.q-modal .q-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px 10px;
}
.q-modal .q-head h3 { margin: 0; font-size: 17px; }
.q-modal .q-close {
    border: none; background: none; font-size: 22px; line-height: 1;
    cursor: pointer; color: #8a93a3;
}
.q-modal .q-sum {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 10px; padding: 0 20px 12px;
}
.q-modal .q-sum-item {
    background: #f6f8fb; border-radius: 10px; padding: 10px 12px;
    display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; color: var(--muted);
}
.q-modal .q-sum-item b { font-size: 18px; color: var(--text); }
.q-modal .q-list { overflow-y: auto; padding: 0 12px 14px; }
.q-modal .q-row {
    display: grid;
    grid-template-columns: 132px 1fr 64px 88px;
    gap: 8px; align-items: center;
    padding: 9px 8px; border-bottom: 1px solid #f1f3f7;
    font-size: 13px;
}
.q-modal .q-time { color: var(--muted); font-size: 12px; }
.q-modal .q-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-modal .q-delta { text-align: right; font-weight: 650; }
.q-modal .q-delta.up { color: var(--ok); }
.q-modal .q-delta.down { color: var(--err); }
.q-modal .q-bal { text-align: right; color: var(--muted); font-size: 12px; }

.thumbs { flex-wrap: wrap; }
#refThumbs .ref-item { display: flex; flex-direction: column; gap: 4px; width: 118px; }
#refThumbs .ref-item input {
    width: 100%;
    font-size: 12px;
    padding: 4px 6px;
    border: 1px solid var(--line);
    border-radius: 6px;
}

/* A+ 模块：完整列表（原来挤成一行看不全），每个模块一项、自动换行 */
#kitScenePick { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
#kitScenePick .chip-check { justify-content: flex-start; width: 100%; }
/* 复刻的图片类型、穿戴的拍摄场景：一排小卡片能看清选中态 */
#kitCloneScene .chip-check, #kitTryonScenePresets .chip-check { padding: 6px 12px; }

/* 卖点图版式：点按钮弹浮窗选，最多 3 个 */
.layout-modal { position: fixed; inset: 0; z-index: 70; display: none; }
.layout-modal.open { display: block; }
.layout-modal .lm-backdrop {
    position: absolute; inset: 0;
    background: rgba(15, 23, 42, .45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.layout-modal .lm-box {
    position: relative;
    max-width: 860px;
    max-height: 80vh;
    overflow: auto;
    margin: 6vh auto 0;
    background: #fff;
    border-radius: 16px;
    padding: 20px 22px 16px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
}
.layout-modal h3 { margin: 0 0 4px; }
.layout-modal .lm-foot { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.addon-box {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #f7f8fa;
    margin-bottom: 8px;
}
.addon-box input[type=text] { width: 100%; }
.addon-box input[type=text]:disabled { background: #eef0f4; color: #9aa3b2; }

.psd-badge {
    display: inline-block;
    margin-right: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 11.5px;
    line-height: 18px;
    white-space: nowrap;
}
.psd-badge.pending { background: #eef4ff; color: #2f60e6; }
.psd-badge.done    { background: #e7f7ee; color: #0d7a3e; }
.psd-badge.failed  { background: #fdecec; color: #b3261e; }

/* 套图行：一行一批，卡片内部自己铺图网格 */
.rec-row.rec-kit { padding: 14px 16px 16px; }
/* 套图 / 消除的图位：一屏 3~4 张，超出自动换行（原来 150px 挤一排太小） */
.rec-row.rec-kit .kit-grid,
.rec-row.rec-erase .kit-grid,
.rec-row.rec-cutout .kit-grid {
    margin-top: 8px;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
}
@media (max-width: 900px) {
    .rec-row.rec-kit .kit-grid,
    .rec-row.rec-erase .kit-grid,
    .rec-row.rec-cutout .kit-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}

@media (max-width: 700px) {
    .rec-row.rec-video { flex-direction: column; }
    .rec-row.rec-video .rec-cover { width: 100%; flex: none; }
}

/* ======================================================================
   图片小窗预览（点出图放大看，可左右翻页 / 下载原图）
   ====================================================================== */
.img-modal { position: fixed; inset: 0; z-index: 60; display: none; }
.img-modal.open { display: block; }

.im-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 20, 32, .55);
    backdrop-filter: blur(8px) saturate(120%);
    -webkit-backdrop-filter: blur(8px) saturate(120%);
}

/* 站内确认弹窗（生成前提示消耗多少美豆）：空白区域高斯模糊 */
.cf-modal { position: fixed; inset: 0; z-index: 70; display: none; }
.cf-modal.open { display: block; }

.cf-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 20, 32, .42);
    backdrop-filter: blur(10px) saturate(120%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    animation: cf-fade .16s ease-out;
}

@keyframes cf-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cf-pop {
    from { opacity: 0; transform: translate(-50%, -46%) scale(.97); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.cf-box {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: min(460px, 92vw);
    padding: 20px 22px 16px;
    background: #fff;
    /* 弹窗是白底：深色主题的浅色字在这里要显式改回深色，不然看不清 */
    color: #1f2430;
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(9, 14, 26, .32);
    animation: cf-pop .18s ease-out;
}
.cf-title { margin: 0 0 10px; font-size: 17px; color: #1f2430; }
.cf-body { color: #1f2430; line-height: 1.75; }
.cf-body .cf-coin {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    background: #fff6e5;
    color: #a86a00;
    font-weight: 700;
}
.cf-body .cf-sub { display: block; margin-top: 6px; color: #5b6472; font-size: 12px; }
.cf-body b { color: #111827; }
/* 白底上的按钮也要用浅色款，深色主题的浅灰字在白底上看不见 */
.cf-modal .btn {
    background: #fff;
    border: 1px solid #dfe3ec;
    color: #334155;
    box-shadow: none;
    transform: none;
}
.cf-modal .btn:hover { background: #f6f8fc; border-color: #cfd9f0; transform: none; }
.cf-modal .btn.primary { background: #3b6ef6; border-color: #3b6ef6; color: #fff; }
.cf-modal .btn.primary:hover { background: #2f60e6; filter: none; }
/* 白底弹窗里的「危险操作」按钮（停用 / 删除）：白底红字红边，看得清又不刺眼 */
.cf-modal .btn.danger { background: #fff; border-color: #f0c2c4; color: #d3383c; }
.cf-modal .btn.danger:hover { background: #fdf3f3; border-color: #e5a2a5; }
.cf-modal .btn.ghost { background: transparent; color: #5b6472; }
.cf-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px;
}

/* ---------------------------------------------------------------- 反馈问题弹窗 */
.fb-modal { position: fixed; inset: 0; z-index: 90; display: none; }
.fb-modal.open { display: block; }

.fb-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 20, 32, .42);
    backdrop-filter: blur(10px) saturate(120%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    animation: cf-fade .16s ease-out;
}

.fb-box {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: min(560px, 94vw);
    max-height: 90vh;
    overflow-y: auto;
    padding: 18px 20px 16px;
    background: #fff;
    /* 弹窗是白底：整站深色主题的浅色字在这里要改回深色，不然内容看不清 */
    color: #1f2430;
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(9, 14, 26, .32);
    animation: cf-pop .18s ease-out;
}

.fb-head { display: flex; align-items: center; justify-content: space-between; }
.fb-head h3 { margin: 0; font-size: 17px; color: #1f2430; }
.fb-x {
    border: 0;
    background: transparent;
    font-size: 22px;
    line-height: 1;
    color: #6b7280;
    cursor: pointer;
    padding: 0 4px;
}
.fb-sub { margin: 6px 0 10px; color: #5b6472; font-size: 12.5px; line-height: 1.7; }
.fb-user { margin: 0 0 4px; font-size: 13px; color: #5b6472; }
.fb-label { display: block; margin: 10px 0 6px; font-size: 13px; font-weight: 600; color: #1f2430; }

.fb-modal textarea,
.fb-modal input[type=text] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #dfe3ec;
    border-radius: 10px;
    font: inherit;
    outline: none;
    color: #1f2430;          /* 输入 / 已填的内容都用深色字 */
    background: #fff;
}
.fb-modal textarea::placeholder,
.fb-modal input[type=text]::placeholder { color: #98a1b0; }
.fb-modal textarea:focus,
.fb-modal input[type=text]:focus { border-color: #8fb0f0; }

/* 弹窗里的按钮也换成浅色底（深色主题的按钮样式放在白底上字看不清） */
.fb-modal .btn {
    background: #fff;
    border-color: #dfe3ec;
    color: #334155;
    box-shadow: none;
    transform: none;
}
.fb-modal .btn:hover { background: #f6f8fc; border-color: #cfd9f0; transform: none; }
.fb-modal .btn.primary {
    background: #3b6ef6;
    border-color: #3b6ef6;
    color: #fff;
    box-shadow: none;
}
.fb-modal .btn.primary:hover { background: #2f60e6; filter: none; }
.fb-modal .muted { color: #6b7280; }

.fb-drop {
    margin-top: 12px;
    padding: 10px 12px;
    border: 1px dashed #dfe3ec;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.fb-drop.hot { border-color: #7fa4f0; background: #f4f8ff; }
.fb-thumbs { display: flex; gap: 8px; flex-wrap: wrap; width: 100%; }
.fb-thumbs:empty { display: none; }
.fb-thumb {
    position: relative;
    width: 64px; height: 64px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #e6e9f1;
}
.fb-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fb-thumb-x {
    position: absolute;
    right: 2px; top: 2px;
    width: 20px; height: 20px;
    border: 0;
    border-radius: 50%;
    background: rgba(17, 24, 39, .62);
    color: #fff;
    line-height: 1;
    font-size: 14px;
    cursor: pointer;
}

.fb-msg { min-height: 18px; margin-top: 8px; font-size: 12.5px; color: #5b6472; }
.fb-msg.err { color: #c62828; }
.fb-msg.ok { color: #15803d; }
.fb-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }

/* 右上角轻提示 */
.mt-toast {
    position: fixed;
    right: 18px; top: 64px;
    z-index: 80;
    max-width: 340px;
    padding: 10px 14px;
    border-radius: 10px;
    background: #1f2430;
    color: #fff;
    font-size: 13px;
    line-height: 1.6;
    box-shadow: 0 10px 28px rgba(9, 14, 26, .28);
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .18s, transform .18s;
    pointer-events: none;
}
.mt-toast.open { opacity: 1; transform: translateY(0); }
.mt-toast.ok { background: #12a150; }
.mt-toast.error { background: #b3261e; }

.im-box {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(1080px, 94vw);
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(9, 14, 26, .38);
}

.im-stage {
    flex: 1 1 auto;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0f1420;
    overflow: auto;
}
.im-stage img {
    display: block;
    max-width: 100%;
    max-height: 76vh;
    object-fit: contain;
}

/* 参考图 → 生成图 对比（缩略图小窗） */
.im-stage.im-compare {
    align-items: flex-start;
    gap: 14px;
    padding: 14px;
}
.im-stage.im-compare .im-side {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.im-stage.im-compare .im-side img { max-height: 66vh; border-radius: 8px; }
.im-stage.im-compare .im-cap { margin-top: 8px; color: #c7ccd6; font-size: 12.5px; }

.im-close {
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 2;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: #1f2430;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}
.im-close:hover { background: #fff; }

.im-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 40px;
    height: 60px;
    border: 0;
    border-radius: 10px;
    background: rgba(255, 255, 255, .82);
    color: #1f2430;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}
.im-nav:hover { background: #fff; }
.im-prev { left: 10px; }
.im-next { right: 10px; }

.im-foot {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px 14px;
    border-top: 1px solid var(--line);
}
.im-title { font-weight: 600; }
.im-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.im-msg { font-size: 12px; }

/* 超过张数上限之类的「软提示」：不弹窗、不报错，提示一句就淡出 */
.kit-limit {
    margin-top: 6px;
    padding: 6px 10px;
    border: 1px solid #f2d9a8;
    border-radius: 9px;
    background: #fffaf0;
    color: #a86a00;
}

/* 生成中：按钮置灰的样子明显一点 */
.btn.primary:disabled { background: #a9b6d6; border-color: #a9b6d6; cursor: not-allowed; }
.mini-task {
    display: block;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 9px;
    color: inherit;
    background: #fff;
    transition: border-color .15s, background .15s;
}
.mini-task:hover { border-color: #c8d3ea; background: #fafbff; }
.mt-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mt-title {
    font-size: 12.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}
.mt-head .chip { flex: 0 0 auto; font-size: 11px; padding: 1px 7px; }
.mt-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    font-size: 11.5px;
    color: var(--muted);
}
.mt-type { color: #4152b8; }
.nowrap { white-space: nowrap; }

/* ========================================================== 选择达人板块 */
.model-box {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 12px 12px 14px;
    background: #fcfdff;
}
.model-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    max-height: 260px;
    overflow-y: auto;
}
.model-tile {
    position: relative;
    border: 1px solid var(--line);
    border-radius: 9px;
    overflow: hidden;
    cursor: pointer;
    background: #eef1f7;
    transition: border-color .15s, box-shadow .15s;
}
.model-tile img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    display: block;
}
.model-tile:hover { border-color: var(--accent); }
.model-tile.sel { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft) inset, 0 2px 10px rgba(59, 110, 246, .22); }
.model-tile .mt-check {
    position: absolute;
    right: 4px;
    top: 4px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-size: 12px;
    line-height: 18px;
    text-align: center;
    display: none;
}
.model-tile.sel .mt-check { display: block; }

.model-chosen {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    padding: 8px;
    border: 1px solid var(--accent-soft);
    background: #f3f7ff;
    border-radius: 10px;
}
.model-chosen img {
    width: 46px;
    height: 46px;
    border-radius: 8px;
    object-fit: cover;
    flex: none;
}
.model-chosen .mc-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.model-chosen .mc-info b { font-size: 13px; }
.model-chosen .mc-info span {
    font-size: 11.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ======================================================================
   AI 消除（erase.php）：涂抹画布 + 原图/结果对比
   ====================================================================== */
.erase-tools { display: flex; gap: 8px; flex-wrap: wrap; }
.erase-tools .btn.sm { padding: 5px 12px; }

.erase-stage {
    position: relative;
    margin-top: 10px;
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
    background: #f4f6f9;
    line-height: 0;
}
.erase-stage img {
    display: block;
    width: 100%;
    height: auto;
    user-select: none;
    -webkit-user-drag: none;
}
.erase-stage canvas {
    position: absolute;
    left: 0; top: 0;
    width: 100%;
    height: 100%;
    cursor: crosshair;
    touch-action: none;
}

.erase-result { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; }

.erase-card {
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--card);
    padding: 14px 16px 12px;
}
.erase-card.failed { border-color: #f7d0d1; background: #fffafa; }
.erase-card.running { border-color: #dbe6f7; }

.erase-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 700px) { .erase-pair { grid-template-columns: 1fr; } }

.erase-pair figure { margin: 0; }
.erase-pair img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    background: #f4f6f9;
    border: 1px solid var(--line);
    border-radius: 10px;
}
.erase-pair figcaption {
    margin-top: 6px;
    font-size: 12.5px;
    color: var(--muted);
    text-align: center;
}
.erase-pair .erase-wait span {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    background: #f4f6f9;
    border: 1px dashed var(--line);
    border-radius: 10px;
    color: var(--muted);
    font-size: 13px;
}

.erase-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 12px;
    font-size: 13.5px;
}
.erase-err {
    margin-top: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    background: #fdecec;
    border: 1px solid #f7d0d1;
    color: #b3261e;
    font-size: 13px;
}

/* 选择页第三张卡片的配色 */
.portal-card.erase .pc-badge { background: #eef6ff; color: #2f60e6; }
.portal-card.erase::after { background: radial-gradient(closest-side, rgba(47, 96, 230, .16), transparent); }

/* ======================================================================
   AI 消除编辑器（erase.php）—— 版式对照官网 aieraser
   ====================================================================== */
.ez-body { background: #f4f5f7; height: 100vh; overflow: hidden; }

.ez-top {
    height: 56px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 16px;
    background: #fff;
    border-bottom: 1px solid var(--line);
}
.ez-brand { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.ez-sep { color: #ccd2dc; }
.ez-history { display: flex; gap: 4px; margin-left: 40px; }
.ez-topright { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.ez-icon {
    width: 30px; height: 30px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--line); background: #fff; border-radius: 8px;
    cursor: pointer; font-size: 15px; color: #444; text-decoration: none;
}
.ez-icon:disabled { opacity: .35; cursor: not-allowed; }

.ez-main { display: flex; height: calc(100vh - 56px - 76px); }

.ez-side {
    width: 380px;
    flex: none;
    background: #fff;
    border-right: 1px solid var(--line);
    padding: 18px 18px 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}
.ez-block { margin-bottom: 22px; }
.ez-block h3 { margin: 0 0 4px; font-size: 15px; }
.ez-sub { margin: 0 0 10px; font-size: 12.5px; color: var(--muted); line-height: 1.6; }

.ez-switches { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ez-switch {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 14px; border: 1px solid var(--line); border-radius: 10px;
    background: #f7f8fa; cursor: pointer; font-size: 14px;
}
.ez-switch input { display: none; }
.ez-switch i {
    width: 34px; height: 20px; border-radius: 10px; background: #d8dde6;
    position: relative; transition: background .15s; flex: none;
}
.ez-switch i::after {
    content: ''; position: absolute; top: 2px; left: 2px;
    width: 16px; height: 16px; border-radius: 50%; background: #fff;
    transition: transform .15s; box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.ez-switch input:checked + i { background: #2f60e6; }
.ez-switch input:checked + i::after { transform: translateX(14px); }

.ez-tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.ez-tool {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 14px 0; border: 1px solid var(--line); border-radius: 10px;
    background: #f7f8fa; cursor: pointer; font-size: 13px; color: #444;
}
.ez-tool.active { border-color: #2f60e6; background: #eef3ff; color: #2f60e6; }

.ez-brushrow { display: flex; align-items: center; gap: 10px; }
.ez-brushrow input[type=range] { flex: 1; }
.ez-clear {
    border: none; background: none; color: #666; cursor: pointer; font-size: 13px;
    white-space: nowrap;
}

.ez-sidefoot { margin-top: auto; padding: 12px 0 18px; }
.ez-cost { font-size: 12.5px; color: var(--muted); text-align: center; margin-bottom: 8px; }
.ez-start {
    width: 100%; padding: 13px 0; border: none; border-radius: 10px;
    background: #2f60e6; color: #fff; font-size: 15px; cursor: pointer;
}
.ez-start:disabled { background: #b9c8ee; cursor: not-allowed; }
.ez-msg { min-height: 18px; margin-top: 8px; font-size: 12.5px; color: var(--muted); text-align: center; }

.ez-canvas-wrap {
    flex: 1; position: relative; overflow: auto;
    display: flex; flex-direction: column; align-items: center;
    padding: 24px 24px 90px;
}
.ez-empty { margin: auto; }
.ez-empty-box {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    border: 1px dashed #c9d2e0; border-radius: 16px; background: #fff;
    padding: 40px 56px; text-align: center;
}
.ez-stage { display: flex; }
.ez-canvas-box { position: relative; line-height: 0; }
.ez-canvas-box img { display: block; max-width: none; user-select: none; -webkit-user-drag: none; }
.ez-canvas-box canvas {
    position: absolute; left: 0; top: 0; width: 100%; height: 100%;
    cursor: crosshair; touch-action: none;
}

.ez-thumbs {
    display: flex; gap: 8px; flex-wrap: wrap; justify-content: center;
    margin: 14px 0 0; background: #fff; padding: 8px; border-radius: 10px;
    border: 1px solid var(--line);
}
.ez-thumbs img { width: 54px; height: 54px; object-fit: cover; border-radius: 8px; cursor: pointer; border: 2px solid transparent; }
.ez-thumbs .thumb { position: relative; line-height: 0; }
.ez-thumbs .thumb.sel img { border-color: #2f60e6; }
.ez-thumbs .thumb a { position: absolute; right: -4px; top: -4px; width: 16px; height: 16px; line-height: 16px;
    text-align: center; background: #333; color: #fff; border-radius: 50%; font-size: 11px; text-decoration: none; }

.ez-zoombar {
    position: fixed; right: 26px; bottom: 96px;
    display: flex; align-items: center; gap: 6px;
    background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 5px 10px;
    font-size: 12.5px; color: #666;
}

.ez-results {
    display: flex; gap: 12px; flex-wrap: wrap; justify-content: center;
    width: 100%; margin-top: 18px;
}
.ez-results .erase-card { width: 420px; }
.ez-results-head {
    width: 100%;
    text-align: center;
    font-size: 13px;
    color: var(--muted);
    padding: 4px 0 2px;
}

.ez-chat {
    position: fixed; left: 0; right: 0; bottom: 0; height: 76px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(to top, #f4f5f7 60%, rgba(244,245,247,0));
    pointer-events: none;
}
.ez-chat-box {
    pointer-events: auto;
    display: flex; align-items: center; gap: 10px;
    width: min(820px, 70vw);
    background: #fff; border: 1px solid var(--line); border-radius: 26px;
    padding: 10px 12px 10px 16px; box-shadow: 0 6px 24px rgba(17, 24, 39, .08);
}
.ez-chat-icon { color: #2f60e6; }
.ez-chat-box input { flex: 1; border: none; outline: none; font-size: 14px; background: none; }
.ez-send {
    width: 40px; height: 40px; border-radius: 50%; border: none;
    background: #dfe3ea; color: #fff; cursor: pointer; font-size: 15px;
}
.ez-chat-box input:not(:placeholder-shown) ~ .ez-send { background: #2f60e6; }

@media (max-width: 1100px) {
    .ez-side { width: 320px; }
    .ez-results .erase-card { width: 100%; }
}


/* ============================================================================
   深色科技风主题（Dark Mode + Glassmorphism）
   ----------------------------------------------------------------------------
   设计稿：左侧 240px 固定侧边栏 + 右侧主内容区；#0a0e1a 渐变底 + 蓝紫/粉紫光斑；
   玻璃拟态卡片（rgba(255,255,255,.03) / 1px 亮边 / blur10 / 16px 圆角）；
   渐变按钮（#6366f1 → #8b5cf6，悬停上浮 2px）；板块胶囊发光；导航选中左侧高亮条。
   下面全部是「覆盖式」样式，只改外观：不动后端、不动功能、不动文案。
   ========================================================================= */

:root {
    --bg: #161b22;
    --card: rgba(255, 255, 255, .03);
    --line: rgba(255, 255, 255, .06);
    --text: #c9d1d9;
    --muted: #8b949e;
    --accent: #58a6ff;
    --accent-soft: rgba(88, 166, 255, .12);
    --ok: #3fb950;
    --warn: #d29922;
    --err: #f85149;

    --glass: rgba(255, 255, 255, .03);
    --glass-2: rgba(255, 255, 255, .05);
    --glass-line: rgba(255, 255, 255, .06);
    --glass-line-2: rgba(255, 255, 255, .14);
    --panel: #161b22;
    --radius: 14px;
    --blur: blur(10px);
    --sb-w: 240px;
    --sb-bg: #0d1117;
    --grad: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    --glow: 0 6px 18px rgba(99, 102, 241, .15);
    --glow-hover: 0 10px 24px rgba(99, 102, 241, .22);

    /* 新板块（AI 证件照 / 变清晰 / AI Logo）的版式用到这几个令牌，一起补上 */
    --line-strong: rgba(255, 255, 255, .18);
    --accent-ink: #79b8ff;
    --ink: #6366f1;
    --ink-hover: #7c74f6;
    --promo: #f97316;
    --r-sm: 8px;
    --r-md: 10px;
    --r-lg: 14px;
    --r-xl: 20px;
    --sh-1: 0 1px 3px rgba(0, 0, 0, .3);
    --sh-2: 0 8px 20px rgba(0, 0, 0, .35);
    --sh-3: 0 20px 32px rgba(0, 0, 0, .45);
    --font-head: -apple-system, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
    --font-body: -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}

html { background: #161b22; }

body {
    background:
        radial-gradient(1100px 720px at 100% 0%, rgba(99, 102, 241, .06), transparent 62%),
        radial-gradient(950px 680px at 0% 100%, rgba(168, 85, 247, .045), transparent 62%),
        linear-gradient(170deg, #161b22 0%, #161b22 60%, #141a21 100%);
    background-attachment: fixed;
    color: var(--text);
}

/* 滚动条也换成暗色，不然右侧一条白边很跳 */
* { scrollbar-color: rgba(255, 255, 255, .18) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .14); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .24); }

a { color: #58a6ff; }
a:hover { color: #79b8ff; }
h1, h2, h3 { color: #e6edf3; }
::selection { background: rgba(88, 166, 255, .28); }

/* ---------------------------------------------------------------- 侧边栏 */
body.sb-on { padding-left: var(--sb-w); }

.app-sidebar {
    position: fixed;
    left: 0; top: 0; bottom: 0;
    width: var(--sb-w);
    z-index: 40;
    display: flex;
    flex-direction: column;
    padding: 16px 14px 14px;
    background: linear-gradient(180deg, #0d1117 0%, #0b0f14 100%);
    border-right: 1px solid var(--glass-line);
    backdrop-filter: blur(14px) saturate(120%);
    -webkit-backdrop-filter: blur(14px) saturate(120%);
}

.sb-brand { display: flex; align-items: center; gap: 10px; padding: 6px 8px 18px; color: var(--text); }
.sb-brand:hover { color: #fff; }
.sb-logo {
    width: 30px; height: 30px; border-radius: 9px; flex: none;
    background: var(--grad);
    box-shadow: 0 4px 12px rgba(99, 102, 241, .18);
    position: relative;
}
.sb-logo::after {
    content: ''; position: absolute; inset: 9px; border-radius: 3px;
    background: rgba(255, 255, 255, .92);
}
.sb-brand-text { min-width: 0; }
.sb-brand-text b { display: block; font-size: 13.5px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-brand-text small { display: block; color: var(--muted); font-size: 11px; }

.sb-nav { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; overflow-y: auto; padding: 2px 0; }
.sb-item {
    position: relative;
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px;
    border-radius: 11px;
    border: 1px solid transparent;
    color: #9aa4b1;
    font-size: 13.5px;
    transition: background .16s, color .16s, border-color .16s;
}
.sb-item:hover { background: rgba(255, 255, 255, .05); color: #fff; border-color: var(--glass-line); }
.sb-item.active {
    background: rgba(88, 166, 255, .1);
    border-color: rgba(88, 166, 255, .32);
    color: #e6edf3;
}
.sb-item.active::before {
    /* 选中态：左侧 2px 蓝色高亮条，不再发光 */
    content: ''; position: absolute; left: -7px; top: 9px; bottom: 9px; width: 2px;
    border-radius: 2px; background: #58a6ff;
}
.sb-ico {
    width: 22px; height: 22px; flex: none; border-radius: 7px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .06);
    color: #8b949e; font-size: 12px;
}
.sb-item.active .sb-ico { background: rgba(88, 166, 255, .18); color: #58a6ff; }

.sb-foot { margin-top: auto; border-top: 1px solid var(--glass-line); padding-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.sb-quota { width: 100%; justify-content: center; }
.sb-user { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }
.sb-avatar {
    width: 26px; height: 26px; flex: none; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(88, 166, 255, .16); color: #79b8ff; font-size: 12px;
}
.sb-user-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #e5e7eb; }
.sb-logout { color: var(--muted); font-size: 12.5px; }
.sb-logout:hover { color: #fca5a5; }
.sb-login-btn { display: block; text-align: center; }

.sb-toggle { display: none; }
.sb-scrim { display: none; }

@media (max-width: 900px) {
    body.sb-on { padding-left: 0; padding-top: 54px; }
    .app-sidebar {
        width: 262px;
        transform: translateX(-100%);
        transition: transform .22s ease;
    }
    .app-sidebar.open { transform: none; box-shadow: 24px 0 60px rgba(0, 0, 0, .55); }
    .sb-toggle {
        display: flex; align-items: center; justify-content: center;
        position: fixed; left: 12px; top: 10px; z-index: 50;
        width: 36px; height: 36px; border-radius: 12px;
        border: 1px solid var(--glass-line); background: rgba(17, 24, 39, .92);
        color: #e5e7eb; font-size: 16px; cursor: pointer;
        backdrop-filter: var(--blur);
    }
    .sb-scrim { position: fixed; inset: 0; z-index: 39; background: rgba(3, 6, 15, .6); }
    .sb-scrim.open { display: block; }
}

/* ------------------------------------------------- 二级页面：左控制面板 / 右内容 */
/* 顶栏没了，sticky 定位改成贴顶 */
.gen-side {
    top: 0;
    max-height: 100vh;
    background: rgba(13, 18, 32, .72);
    border-right: 1px solid var(--glass-line);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* 「开始生成」固定在下半屏：滚到哪都能点 */
@media (min-width: 1081px) {
    .gen-side .actions {
        position: sticky;
        bottom: -1px;
        z-index: 6;
        margin-top: 6px;
        padding: 12px 0 4px;
        background: linear-gradient(180deg, rgba(10, 14, 26, 0) 0%, rgba(10, 14, 26, .92) 42%);
        backdrop-filter: blur(6px);
    }
}

/* ---------------------------------------------------------- 通用玻璃卡片 */
.card,
.task,
.record-card,
.kit-task,
.rec-row,
.kit-card,
.kit-hintbar,
.kit-mini,
.mini-task,
.hist-panel,
.kit-listing,
.model-box,
.asset-card,
.photo-item,
.chip-check,
.type-item,
.side-tip,
.addon-box,
.uploader,
.side-block,
.panel,
.stat {
    background: var(--glass);
    border-color: var(--glass-line);
    color: var(--text);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
}

.card,
.task,
.record-card,
.kit-task,
.rec-row,
.kit-card,
.portal-card,
.portal-mini,
.model-box,
.hist-panel {
    border-radius: var(--radius);
}

.card { box-shadow: 0 10px 30px rgba(2, 6, 18, .45); }

.kit-card figcaption,
.cut-cell figcaption,
.cut-pair2 figcaption { color: var(--muted); }

/* 卡片悬停：亮边 + 微微发光 */
.card:hover,
.record-card:hover,
.rec-row:hover,
.kit-card:hover,
.task:hover,
.asset-card:hover,
.photo-item:hover,
.mini-task:hover {
    border-color: var(--glass-line-2);
    background: var(--glass-2);
}

/* ---------------------------------------------------------------- 表单 */
input[type=text], input[type=password], input[type=number], input[type=url], input[type=search], select, textarea {
    background: rgba(255, 255, 255, .05);
    border-color: var(--glass-line);
    color: var(--text);
}
input::placeholder, textarea::placeholder { color: #6b7280; }
input:focus, select:focus, textarea:focus {
    border-color: rgba(129, 140, 248, .6);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, .18);
}
select option { background: #0f1524; color: var(--text); }
input[type=checkbox], input[type=radio] { accent-color: #6366f1; }

/* ---------------------------------------------------------------- 按钮 */
.btn {
    background: rgba(255, 255, 255, .05);
    border-color: var(--glass-line);
    color: #e5e7eb;
    transition: transform .14s ease, background .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.btn:hover {
    background: rgba(255, 255, 255, .1);
    border-color: var(--glass-line-2);
    transform: translateY(-2px);
}
.btn.primary {
    background: var(--grad);
    border-color: transparent;
    color: #fff;
    box-shadow: var(--glow);
}
.btn.primary:hover { box-shadow: 0 14px 34px rgba(139, 92, 246, .45); filter: brightness(1.06); }
.btn.primary:disabled, .btn:disabled { opacity: .45; transform: none; box-shadow: none; cursor: not-allowed; }
.btn.ghost { background: transparent; }
.btn.ghost:hover { background: rgba(255, 255, 255, .07); }
.btn.danger { color: #fca5a5; border-color: rgba(248, 113, 113, .38); background: rgba(248, 113, 113, .1); }

/* 选中态：边框高亮 + 外发光 */
.type-item:has(> .t-check:checked),
.chip-check:has(input:checked),
.model-tile.chosen,
.model-chosen {
    border-color: rgba(129, 140, 248, .55) !important;
    background: var(--accent-soft) !important;
    box-shadow: 0 0 0 1px rgba(129, 140, 248, .35), 0 0 22px rgba(99, 102, 241, .28);
}

/* ---------------------------------------------------------------- 胶囊 / 状态 */
.chip.pending, .chip.submitting { background: rgba(99, 102, 241, .2); color: #a5b4fc; }
.chip.running { background: rgba(56, 189, 248, .18); color: #7dd3fc; }
.chip.success { background: rgba(16, 185, 129, .18); color: #34d399; }
.chip.partial, .chip.insufficient { background: rgba(245, 158, 11, .18); color: #fbbf24; }
.chip.failed { background: rgba(248, 113, 113, .16); color: #fca5a5; }
.chip.canceled { background: rgba(148, 163, 184, .16); color: #cbd5e1; }

.kit-state.st-success, .kit-state.st-partial { background: rgba(16, 185, 129, .18); color: #34d399; }
.kit-state.st-failed { background: rgba(248, 113, 113, .16); color: #fca5a5; }
.kit-state.st-insufficient, .kit-state.st-canceled { background: rgba(245, 158, 11, .16); color: #fbbf24; }
.kit-state.st-queued, .kit-state.st-running, .kit-state.st-pending { background: rgba(99, 102, 241, .18); color: #a5b4fc; }

.psd-badge { background: rgba(99, 102, 241, .2); color: #a5b4fc; }
.psd-badge.done { background: rgba(16, 185, 129, .18); color: #34d399; }
.psd-badge.failed { background: rgba(248, 113, 113, .16); color: #fca5a5; }
.record-type { background: rgba(99, 102, 241, .2); color: #a5b4fc; }

/* 板块标签：爆款视频蓝紫发光、商品套图青绿发光（设计稿指定） */
.rec-kind.video, .pc-badge.viral, .portal-card.viral .pc-badge {
    background: rgba(99, 102, 241, .2); color: #818cf8;
    box-shadow: 0 0 14px rgba(99, 102, 241, .38);
}
.rec-kind.kit, .portal-card.kit .pc-badge {
    background: rgba(16, 185, 129, .2); color: #34d399;
    box-shadow: 0 0 14px rgba(16, 185, 129, .32);
}
.rec-kind.erase { background: rgba(249, 115, 22, .2); color: #fdba74; box-shadow: 0 0 14px rgba(249, 115, 22, .3); }
.rec-kind.cutout { background: rgba(168, 85, 247, .22); color: #c4b5fd; box-shadow: 0 0 14px rgba(168, 85, 247, .32); }

.quota-chip {
    background: rgba(255, 255, 255, .06);
    border-color: var(--glass-line);
    color: var(--muted);
}
.quota-chip b { color: #fff; }
.quota-chip-btn:hover { border-color: rgba(129, 140, 248, .55); color: #c7d2fe; }

/* -------------------------------------------------------- 图片格子 / 预览底 */
.thumb, .tpl-thumb, .tpl-video, .tpl-poster-fallback, .record-card .record-cover,
.asset-card .asset-ph, .model-tile, .erase-stage, .kit-card-erase .kit-thumb img {
    background: #111827;
    border-color: var(--glass-line);
}
.record-card .record-cover video { background: #0f1524; }

/* 透明底结果：保留白灰棋盘格（一眼看出是透明的），不要黑底 */
.cut-cell.cut-out img, .cut-two .cut-out img, .cut-two .cut-ph,
.cut-pair img, .kit-card-cutout .kit-thumb img {
    background-color: #fff;
    background-image:
        linear-gradient(45deg, #e5e7eb 25%, transparent 25%, transparent 75%, #e5e7eb 75%),
        linear-gradient(45deg, #e5e7eb 25%, transparent 25%, transparent 75%, #e5e7eb 75%);
    background-size: 18px 18px;
    background-position: 0 0, 9px 9px;
}

/* 点开大图：底部是空白马赛克（不再是黑底），透明 PNG 看得清 */
.im-stage {
    background-color: #fff;
    background-image:
        linear-gradient(45deg, #e5e7eb 25%, transparent 25%, transparent 75%, #e5e7eb 75%),
        linear-gradient(45deg, #e5e7eb 25%, transparent 25%, transparent 75%, #e5e7eb 75%);
    background-size: 22px 22px;
    background-position: 0 0, 11px 11px;
}

/* ---------------------------------------------------------------- 弹窗 */
.cf-box, .q-modal .q-box, .layout-modal .lm-box, .im-box {
    background: linear-gradient(180deg, rgba(23, 30, 48, .96) 0%, rgba(12, 17, 30, .98) 100%);
    border: 1px solid var(--glass-line);
    color: var(--text);
    backdrop-filter: blur(14px) saturate(120%);
    -webkit-backdrop-filter: blur(14px) saturate(120%);
    box-shadow: 0 30px 80px rgba(2, 6, 18, .65);
}
.cf-box .cf-head, .q-modal .q-head, .layout-modal .lm-head { border-color: var(--glass-line); }
.cf-body .cf-coin { background: rgba(245, 158, 11, .18); color: #fbbf24; }
.im-close, .im-nav { background: rgba(255, 255, 255, .08); color: #e5e7eb; }
.im-close:hover, .im-nav:hover { background: rgba(255, 255, 255, .18); }
.im-backdrop { background: rgba(3, 6, 15, .62); }
.q-modal .q-row, .q-modal .q-head { border-color: var(--glass-line); }

/* ---------------------------------------------------------------- 表格 */
table { color: var(--text); }
th { color: var(--muted); border-color: var(--glass-line); background: rgba(255, 255, 255, .04); }
td { border-color: var(--glass-line); }
tr:hover td { background: rgba(255, 255, 255, .03); }
.bar { background: rgba(255, 255, 255, .08); }

/* ---------------------------------------------------------------- 分页 / 标签 */
.record-tabs, .scene-tabs { border-color: var(--glass-line); }
.record-tabs a:hover, .record-tabs a.active, .scene-tab.active {
    background: rgba(99, 102, 241, .2);
    color: #c7d2fe;
}
.scene-tabs { background: var(--glass); border: 1px solid var(--glass-line); border-radius: 12px; }

/* ------------------------------------------------- 首页（选择页）大卡片 */
.portal-card {
    background: var(--glass);
    border: 1px solid var(--glass-line);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
}
.portal-card:hover {
    border-color: rgba(129, 140, 248, .5);
    background: var(--glass-2);
    box-shadow: 0 18px 46px rgba(2, 6, 18, .5);
}
.portal-card h2 { color: #fff; }
.portal-card .pc-list li { color: #cbd5e1; }
.portal-mini {
    background: var(--glass);
    border: 1px solid var(--glass-line);
    border-radius: 14px;
}
.portal-mini:hover { border-color: rgba(129, 140, 248, .45); background: var(--glass-2); }
.portal-card.cutout .pc-badge { background: rgba(168, 85, 247, .22); color: #c4b5fd; }
.portal-card.erase .pc-badge { background: rgba(249, 115, 22, .2); color: #fdba74; }

/* 「进入 xxx →」按钮统一成渐变发光 */
.portal-card .pc-go {
    background: var(--grad);
    box-shadow: var(--glow);
    border-radius: 11px;
}
.portal-card.kit .pc-go { background: linear-gradient(135deg, #10b981 0%, #34d399 100%); box-shadow: 0 10px 30px rgba(16, 185, 129, .32); }
.portal-card.erase .pc-go { background: linear-gradient(135deg, #f97316 0%, #fb923c 100%); box-shadow: 0 10px 30px rgba(249, 115, 22, .3); }

/* 更多工具：一行排得下 4~5 个小卡 */
.portal-more-grid { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

/* 没有顶栏了，主区高度按整屏算 */
.gen-wrap { min-height: 100vh; }

/* 首页：爆款视频占左边大卡，商品套图 + AI 消除上下叠在右边 */
@media (min-width: 981px) {
    .portal-hero { display: grid; grid-template-columns: 1.35fr 1fr; gap: 18px; align-items: stretch; }
    .portal-hero .portal-card { margin: 0; height: 100%; }
    .portal-hero .portal-card.viral { min-height: 460px; display: flex; flex-direction: column; }
    .portal-hero .portal-card.viral .pc-go { margin-top: auto; }
    .portal-stack { display: grid; grid-template-rows: 1fr 1fr; gap: 18px; }
    .portal-stack .portal-card { min-height: 220px; }
}
.portal-head h1 { font-size: 34px; letter-spacing: .5px; }
.portal-head p { font-size: 14px; }

/* ---------------------------------------------------------------- 其他页面块 */
.gate { background: var(--glass); border: 1px solid var(--glass-line); border-radius: var(--radius); backdrop-filter: var(--blur); }
.gate-body { background: transparent; }
/* 页面里的提示条很多是行内样式写的浅色底，这里统一压成暗色玻璃（!important 才盖得住） */
.alert {
    position: relative;
    background: rgba(255, 255, 255, .05) !important;
    border: 1px solid var(--glass-line) !important;
    color: #dbe1ea !important;
    padding-left: 34px;
    border-radius: 12px;
    backdrop-filter: var(--blur);
}
.alert::before {
    content: '';
    position: absolute;
    left: 14px; top: 50%;
    transform: translateY(-50%);
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--grad);
    box-shadow: 0 0 10px rgba(139, 92, 246, .8);
}
.alert a { color: #a5b4fc; }
.kit-hintbar { color: var(--muted); border-radius: 12px; }
.kit-mini, .mini-task { border-radius: 12px; }
.kit-limit { background: rgba(245, 158, 11, .14); border-color: rgba(245, 158, 11, .3); color: #fcd34d; }
.addon-box { background: rgba(255, 255, 255, .02); }
.side-sep { background: var(--glass-line); }

/* AI 消除编辑器（erase.php 用的是自己一套 ez-* 结构） */
.ez-body { background: transparent; }
.ez-top { background: rgba(13, 18, 32, .92); border-bottom-color: var(--glass-line); }
.ez-icon { background: rgba(255, 255, 255, .05); border-color: var(--glass-line); color: #cbd5e1; }
.ez-icon:hover { background: rgba(255, 255, 255, .12); }
.ez-side { background: rgba(13, 18, 32, .72); border-right-color: var(--glass-line); }
.ez-start { background: var(--grad); box-shadow: var(--glow); border-radius: 12px; }
.ez-start:disabled { background: rgba(255, 255, 255, .12); box-shadow: none; }
.ez-thumbs { background: rgba(255, 255, 255, .04); }
.ez-chat-box { background: rgba(255, 255, 255, .05); border-color: var(--glass-line); }
.ez-chat-box input { color: var(--text); background: none; }
.ez-chat-icon { color: #a5b4fc; }
.ez-send { background: rgba(255, 255, 255, .16); }
.ez-chat-box input:not(:placeholder-shown) ~ .ez-send { background: var(--grad); }
.ez-tool { background: rgba(255, 255, 255, .05); border-color: var(--glass-line); color: #cbd5e1; }
.ez-tool.active, .ez-tool:has(input:checked) { border-color: rgba(129, 140, 248, .55); background: var(--accent-soft); color: #fff; }
.ez-canvas-wrap { background: rgba(255, 255, 255, .02); }
.ez-empty-box { color: var(--muted); }

/* AI 消除：六个开关卡片 + 底部对话框（原来是浅灰底，暗色下很跳） */
.ez-switch {
    background: rgba(255, 255, 255, .04);
    border-color: var(--glass-line);
    color: #dbe1ea;
}
.ez-switch:hover { border-color: var(--glass-line-2); background: rgba(255, 255, 255, .07); }
.ez-switch i { background: rgba(255, 255, 255, .18); }
.ez-switch input:checked + i { background: var(--grad); }
.ez-clear { color: var(--muted); }
.ez-clear:hover { color: #fca5a5; }
.ez-zoombar {
    background: rgba(13, 18, 32, .92);
    border: 1px solid var(--glass-line);
    color: var(--text);
}
.ez-chat {
    left: var(--sb-w);
    background: linear-gradient(to top, rgba(10, 14, 26, .96) 60%, rgba(10, 14, 26, 0));
}
.ez-chat-box {
    background: rgba(17, 24, 39, .92);
    border-color: var(--glass-line);
    box-shadow: 0 18px 50px rgba(2, 6, 18, .6);
    backdrop-filter: blur(10px);
}
.ez-send { background: rgba(255, 255, 255, .16); }
.ez-results-head { color: var(--muted); }
@media (max-width: 900px) {
    .ez-chat { left: 0; }
}

/* 登录页 */
.gate-body .gate { box-shadow: 0 30px 80px rgba(2, 6, 18, .6); }

/* 窄屏：主内容别被侧边栏顶掉 */
@media (max-width: 900px) {
    .gen-wrap { grid-template-columns: 1fr; }
    .gen-side { position: static; max-height: none; top: auto; }
    .container { padding: 14px; }
    .portal-head h1 { font-size: 26px; }
}

/* ------------------------------------------------ AI 抠图结果：全选 / 清除记录 */
.cut-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; margin-bottom: 12px;
}
.cut-head h3 { margin: 0; }
.cut-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cut-tools .cut-count b { color: #fff; }

.cut-pair2 {
    position: relative;
    padding: 8px;
    border: 1px solid transparent;
    border-radius: 14px;
    transition: border-color .15s, background .15s, box-shadow .15s;
}
.cut-pair2:hover { border-color: var(--glass-line); background: rgba(255, 255, 255, .02); }
.cut-pair2.on {
    border-color: rgba(129, 140, 248, .5);
    background: rgba(99, 102, 241, .12);
    box-shadow: 0 0 22px rgba(99, 102, 241, .22);
}
.cut-pick {
    position: absolute; left: 14px; top: 14px; z-index: 3;
    width: 24px; height: 24px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(8, 11, 20, .72);
    border: 1px solid var(--glass-line);
    cursor: pointer;
}
.cut-pick:hover { border-color: var(--glass-line-2); }
.cut-pick input { width: 14px; height: 14px; margin: 0; }

/* hidden 属性优先级要比 .btn 之类的 display 高，不然「点了才显示」的元素会一直露着 */
[hidden] { display: none !important; }

/* ------------------------------------------------ 美豆价目表弹窗（顶栏按钮打开） */
.price-modal .price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 4px;
    border-bottom: 1px solid var(--glass-line);
}
.price-modal .price-row:last-child { border-bottom: 0; }
.price-modal .price-name { color: var(--text); font-size: 13.5px; }
.price-modal .price-val { color: #8b9dfb; font-size: 13px; white-space: nowrap; }
.price-modal .price-val b { color: #fff; font-size: 14px; margin-right: 2px; }
.price-modal .price-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 20px 16px;
    border-top: 1px solid var(--glass-line);
}

/* ============================================================================
   每页顶部导航条（板块名 + 剩余美豆 + 充值美豆）+ 侧边栏子版块 + 子功能 Tab
   ========================================================================= */
:root { --pb-h: 54px; }

.page-bar {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    min-height: var(--pb-h);
    padding: 9px 22px;
    background: linear-gradient(180deg, rgba(13, 17, 23, .94) 0%, rgba(13, 17, 23, .88) 100%);
    border-bottom: 1px solid var(--glass-line);
    backdrop-filter: blur(12px) saturate(120%);
    -webkit-backdrop-filter: blur(12px) saturate(120%);
}
.pb-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pb-home {
    width: 28px; height: 28px; flex: none; border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .06);
    border: 1px solid var(--glass-line);
    color: #58a6ff; font-size: 13px;
}
.pb-home:hover { background: rgba(88, 166, 255, .14); color: #e6edf3; }
.pb-board { font-size: 14.5px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pb-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pb-quota { cursor: pointer; }
.pb-recharge { box-shadow: var(--glow); }

/* 侧边栏里的子版块（商详 A+ / 爆款图复刻 / 服饰穿戴） */
.sb-item.sb-sub { padding: 7px 12px 7px 34px; font-size: 12.5px; color: #9aa3b2; }
.sb-item.sb-sub .sb-ico {
    width: 6px; height: 6px; border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    color: transparent; font-size: 0;
}
.sb-item.sb-sub:hover { color: #e5e7eb; }
.sb-item.sb-sub.active { color: #fff; background: rgba(99, 102, 241, .14); }
.sb-item.sb-sub.active .sb-ico { background: #818cf8; box-shadow: 0 0 10px rgba(129, 140, 248, .9); }
.sb-item.sb-sub.active::before { top: 6px; bottom: 6px; }

/* 二级页面子功能 Tab：一行文字标签 + 蓝紫发光下划线（不要深色块） */
.scene-tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px 30px;
    margin: 0;
    padding: 0 22px 2px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--glass-line);
    border-radius: 0;
    grid-column: 1 / -1;
}
.scene-tab {
    position: relative;
    padding: 11px 2px 12px;
    background: transparent;
    border-radius: 0;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--muted);
    transition: color .16s;
}
.scene-tab:hover { background: transparent; color: #e5e7eb; }
.scene-tab.active { background: transparent; color: #fff; }
.scene-tab.active::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 2px;
    border-radius: 2px;
    background: var(--grad);
    box-shadow: 0 0 12px rgba(139, 92, 246, .9);
}

/* Tab 栏现在横跨两栏，左侧控制面板的 sticky 要避开顶部导航条 */
.gen-side { top: var(--pb-h); max-height: calc(100vh - var(--pb-h)); }

@media (max-width: 900px) {
    .page-bar { padding: 8px 12px; }
    .pb-board { font-size: 13px; }
    .scene-tabs { gap: 2px 18px; padding: 0 12px 2px; }
    .scene-tab { padding: 9px 2px 10px; font-size: 12.5px; }
    .gen-side { top: auto; max-height: none; }
}

/* ============================================================================
   后台（admin/*）：和前台同一套深色玻璃风 + 左侧导航
   —— 只动样式：页面结构、表单字段、按钮文案全部保持不变
   ========================================================================= */
.adm-body .container { max-width: 1420px; padding: 18px 22px 40px; }
.adm-body .adm-sidebar .sb-brand-text b { font-size: 13px; }

/* 后台表格宽，给卡片自己横向滚动，别把页面撑破 */
.adm-body .card { overflow-x: auto; }
.adm-body .card > form,
.adm-body .card > p,
.adm-body .card > h2,
.adm-body .card > .card-head,
.adm-body .card > .alert,
.adm-body .card > .inline-form { min-width: 0; }

.adm-body table { font-size: 13px; }
.adm-body th {
    background: rgba(255, 255, 255, .04);
    color: var(--muted);
    font-weight: 600;
    white-space: nowrap;
}
.adm-body td { border-bottom: 1px solid var(--glass-line); }
.adm-body tr:hover td { background: rgba(255, 255, 255, .03); }
.adm-body .task-table td { vertical-align: top; }

/* 概览页的统计卡：玻璃 + 数字渐显 */
.adm-body .stat {
    background: var(--glass);
    border: 1px solid var(--glass-line);
    border-radius: 14px;
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
}
.adm-body .stat .v { color: #fff; }

/* 后台里的提示条（成功/失败/说明）统一成暗色玻璃，左边保留发光点 */
.adm-body .alert { color: #dbe1ea !important; }

/* 后台表单里的 code / 说明文字 */
.adm-body code.mono { color: #c7d2fe; }
.adm-body .hint, .adm-body .muted { color: var(--muted); }

/* 后台登录页 */
.gate-body .gate {
    background: linear-gradient(180deg, rgba(23, 30, 48, .96) 0%, rgba(12, 17, 30, .98) 100%);
    backdrop-filter: blur(14px) saturate(120%);
    -webkit-backdrop-filter: blur(14px) saturate(120%);
}

/* 后台里的小提示块（例如会员账号页的保活接口地址） */
.adm-notice {
    background: var(--glass);
    border: 1px solid var(--glass-line);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 14px;
    font-size: 13px;
    color: #cbd5e1;
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
}
.adm-notice .mono { color: #c7d2fe; }

/* 后台扫码弹窗：外框走暗色玻璃，二维码本身留在白底上好扫 */
.adm-qr-box {
    position: relative;
    max-width: 420px;
    margin: 8vh auto 0;
    padding: 22px 22px 18px;
    border-radius: 16px;
    text-align: center;
    background: linear-gradient(180deg, rgba(23, 30, 48, .98) 0%, rgba(12, 17, 30, .99) 100%);
    border: 1px solid var(--glass-line);
    box-shadow: 0 30px 80px rgba(2, 6, 18, .7);
    backdrop-filter: blur(14px) saturate(120%);
    -webkit-backdrop-filter: blur(14px) saturate(120%);
}
.adm-qr-canvas {
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.adm-qr-canvas canvas,
.adm-qr-canvas img {
    background: #fff;
    padding: 10px;
    border-radius: 10px;
}

/* ---------------------------------------------- 养号池：一屏搞定核心操作 */
.np-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 10px;
}
.np-stat {
    background: var(--glass);
    border: 1px solid var(--glass-line);
    border-radius: 14px;
    padding: 11px 14px;
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
}
.np-stat .k { color: var(--muted); font-size: 12px; }
.np-stat .v { font-size: 22px; font-weight: 700; color: #fff; line-height: 1.25; }
.np-stat .s { color: var(--muted); font-size: 11.5px; }

.np-tags { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 12px; }
.np-tag {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    border: 1px solid var(--glass-line);
    background: rgba(255, 255, 255, .04);
    color: var(--muted);
}
.np-tag::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%;
    background: currentColor; opacity: .9;
}
.np-tag.nurturing { color: #a5b4fc; background: rgba(99, 102, 241, .16); border-color: rgba(129, 140, 248, .35); }
.np-tag.ready     { color: #34d399; background: rgba(16, 185, 129, .16); border-color: rgba(16, 185, 129, .35); }
.np-tag.used      { color: #cbd5e1; background: rgba(148, 163, 184, .14); border-color: rgba(148, 163, 184, .3); }
.np-tag.exhausted { color: #fca5a5; background: rgba(248, 113, 113, .14); border-color: rgba(248, 113, 113, .32); }
.np-tag.error     { color: #fdba74; background: rgba(249, 115, 22, .16); border-color: rgba(249, 115, 22, .34); }
.np-tag.muted::before { background: rgba(255, 255, 255, .35); }

/* 导入区：输入框 + 渐变大按钮同一行 */
.np-import-card { margin-bottom: 12px; }
.np-import-card .card-head { align-items: flex-start; gap: 10px; }
.np-import-card .card-head .hint { font-size: 12px; line-height: 1.6; text-align: right; }
.np-import {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 190px;
    gap: 12px;
    align-items: stretch;
}
.np-import textarea {
    min-height: 96px;
    height: 100%;
    resize: vertical;
    font-size: 12.5px;
    line-height: 1.55;
}
.np-import-btn {
    font-size: 15px;
    font-weight: 650;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(99, 102, 241, .15);
}
.np-import-foot {
    display: flex; align-items: center; gap: 10px;
    flex-wrap: wrap;
    margin-top: 10px;
    min-height: 22px;
}
.np-import-msg { font-size: 12.5px; }
.np-progress {
    flex: 1 1 160px;
    min-width: 120px;
    height: 6px;
    border-radius: 4px;
    background: rgba(255, 255, 255, .08);
    overflow: hidden;
}
.np-progress i {
    display: block; height: 100%; width: 0;
    background: var(--grad);
    transition: width .2s ease;
}
.np-fails {
    margin-top: 10px;
    border: 1px solid rgba(248, 113, 113, .3);
    background: rgba(248, 113, 113, .1);
    border-radius: 12px;
    padding: 10px 12px 10px 30px;
    max-height: 180px;
    overflow: auto;
    color: #fca5a5;
    font-size: 12.5px;
}
.np-fails ol { margin: 0; padding-left: 4px; }
.np-fails li { margin: 2px 0; }

/* 折叠面板：默认只露标题 + 箭头 */
.adm-fold {
    border: 1px solid var(--glass-line);
    border-radius: 14px;
    background: var(--glass);
    margin-bottom: 12px;
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
    overflow: hidden;
}
.adm-fold > summary {
    display: flex; align-items: center;
    gap: 8px;
    padding: 12px 14px;
    cursor: pointer;
    font-weight: 600;
    color: #e5e7eb;
    list-style: none;
}
.adm-fold > summary::-webkit-details-marker { display: none; }
.adm-fold > summary::after {
    content: '▾';
    color: var(--muted);
    font-size: 12px;
    transition: transform .18s ease;
}
.adm-fold[open] > summary::after { transform: rotate(180deg); }
.adm-fold > summary:hover { background: rgba(255, 255, 255, .04); }
.adm-fold[open] > summary { border-bottom: 1px solid var(--glass-line); }
.adm-fold-body { padding: 14px; }

/* 长表格：限定高度、表头吸顶，页面本身不用一直往下拉 */
.adm-table-wrap {
    max-height: 58vh;
    overflow: auto;
    border: 1px solid var(--glass-line);
    border-radius: 12px;
}
.adm-table-wrap table { margin: 0; }
.adm-table-wrap thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #141b2c;
    border-bottom: 1px solid var(--glass-line);
}
.adm-table-wrap td { background: transparent; }

/* 养号池账号列表：点整行就能勾选（悬浮时给个提示态） */
.adm-table-wrap tbody tr.np-row { cursor: pointer; }
.adm-table-wrap tbody tr.np-row:hover td { background: rgba(88, 166, 255, .07); }
.adm-table-wrap tbody tr.np-row:has(.np-check:checked) td { background: rgba(88, 166, 255, .10); }
.adm-table-wrap tbody tr.np-row:has(.np-check:checked) td:first-child { box-shadow: inset 2px 0 0 #58a6ff; }

/* 后台「操作密码」输入框（删除等敏感操作要填） */
.op-pwd { display: inline-flex; align-items: center; margin: 0 0 12px; }
.op-pwd input {
    width: 190px;
    padding: 7px 10px;
    border-radius: 9px;
    border: 1px solid var(--glass-line);
    background: rgba(255, 255, 255, .05);
    color: var(--text);
    font: inherit;
    font-size: 12.5px;
}
.op-pwd input:focus { border-color: rgba(88, 166, 255, .55); outline: none; }
.op-pwd input.bad { border-color: var(--err); box-shadow: 0 0 0 2px rgba(248, 81, 73, .18); }

@media (max-width: 900px) {
    .np-stats { grid-template-columns: 1fr; }
    .np-import { grid-template-columns: 1fr; }
    .np-import-card .card-head .hint { text-align: left; }
}

/* ============================================================================
   柔和化（护眼版）：发光整体减弱、选中态改成淡蓝描边、主区左右 40px 边距
   —— 只调视觉，不动任何结构 / 功能
   ========================================================================= */

/* 1. 标签胶囊：去掉外发光，只留底色 */
.rec-kind,
.pc-badge,
.kit-state,
.psd-badge,
.record-type,
.chip,
.np-tag,
.kit-failtag,
.kit-wait,
.quota-chip {
    box-shadow: none !important;
}
.rec-kind,
.pc-badge,
.chip {
    border-radius: 20px;
}

/* 2. 卡片/面板：柔和阴影，不要硬边 */
.card,
.record-card,
.rec-row,
.kit-task,
.kit-card,
.portal-card,
.portal-mini,
.task,
.model-box,
.hist-panel,
.np-stat,
.adm-fold,
.stat {
    box-shadow: 0 1px 2px rgba(1, 4, 9, .24) !important;
}
.portal-card:hover,
.card:hover,
.rec-row:hover,
.kit-card:hover {
    box-shadow: 0 6px 18px rgba(1, 4, 9, .3) !important;
}

/* 3. 按钮：蓝紫渐变 + 圆角 10px + 柔和阴影（悬停只加深一点） */
.btn.primary,
.ez-start,
.portal-card .pc-go {
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(99, 102, 241, .15) !important;
}
.btn.primary:hover,
.portal-card:hover .pc-go {
    box-shadow: 0 8px 20px rgba(99, 102, 241, .22) !important;
}
.portal-card.kit .pc-go { box-shadow: 0 4px 14px rgba(16, 185, 129, .14) !important; }
.portal-card.erase .pc-go { box-shadow: 0 4px 14px rgba(249, 115, 22, .14) !important; }

/* 4. 选中态：淡蓝描边，不再强发光 */
.type-item:has(> .t-check:checked),
.chip-check:has(input:checked),
.model-tile.chosen,
.model-chosen,
.cut-pair2.on {
    border-color: rgba(88, 166, 255, .45) !important;
    background: rgba(88, 166, 255, .08) !important;
    box-shadow: none !important;
}

/* 首页大卡是 flex 布局，胶囊别被拉成一整条 */
.portal-hero .portal-card.viral .pc-badge { align-self: flex-start; }

/* 5. 子功能 Tab 下划线用蓝色 */
.scene-tab.active::after {
    background: #58a6ff;
    box-shadow: none;
}

/* ======================================================================
   站内确认弹窗（.cf-modal：生成前提示消耗多少美豆、游客登录提醒…）
   统一成白灰底 —— 前面的深色弹窗覆盖段在这里之后，所以用同优先级就能盖住
   ====================================================================== */
.cf-box {
    background: #fff;
    border: 1px solid #e5e7eb;
    color: #1f2430;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 0 24px 60px rgba(9, 14, 26, .32);
}
.cf-modal .cf-title { color: #1f2430; }
.cf-modal .cf-body { color: #1f2430; }
.cf-modal .cf-body .cf-sub { color: #5b6472; }
.cf-modal .cf-body .cf-coin { background: #fff6e5; color: #a86a00; }
.cf-modal .btn {
    background: #fff;
    border: 1px solid #dfe3ec;
    color: #334155;
    box-shadow: none;
    transform: none;
}
.cf-modal .btn:hover { background: #f6f8fc; border-color: #cfd9f0; transform: none; }
.cf-modal .btn.primary { background: #3b6ef6; border-color: #3b6ef6; color: #fff; }
.cf-modal .btn.primary:hover { background: #2f60e6; filter: none; }

/* 6. 主内容区左右各留 40px；二级页左栏按设计稿收窄到 340px */
.container { max-width: 1360px; padding: 22px 40px 40px; }
.gen-wrap { grid-template-columns: clamp(440px, 36vw, 620px) minmax(0, 1fr); }
.gen-main { padding: 34px 40px 60px; }
.page-bar { padding-left: 40px; padding-right: 40px; }
.scene-tabs { padding-left: 40px; padding-right: 40px; }
.adm-body .container { padding: 18px 40px 40px; }

/* 6.1 左侧参数面板再放宽一半：内部按可用宽度自适应排（能并排就并排，放不下自动堆叠） */
.gen-side { width: 100%; }
.gen-side .types { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.gen-side .grid-3 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.gen-side .photo-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.gen-side .chip-row { gap: 8px 10px; }
.gen-side .actions { gap: 10px; }

/* AI 消除的左侧面板同步加宽（原来是 380px） */
.ez-side { width: clamp(440px, 34vw, 580px); }

/* 中屏 / 窄屏：面板跟着视口收，最后收成单列 */
@media (max-width: 1280px) {
    .gen-wrap { grid-template-columns: clamp(400px, 42vw, 520px) minmax(0, 1fr); }
    .ez-side { width: clamp(380px, 38vw, 470px); }
}
@media (max-width: 1080px) {
    .gen-wrap { grid-template-columns: 1fr; }
    .gen-side {
        position: static;
        max-height: none;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }
}
@media (max-width: 1100px) {
    .ez-side { width: 340px; }
}

/* 7. 输入框聚焦：淡蓝描边，不要大光圈 */
input:focus, select:focus, textarea:focus {
    border-color: rgba(88, 166, 255, .55);
    box-shadow: 0 0 0 2px rgba(88, 166, 255, .12);
}

/* 8. 滚动条/分隔线跟着变柔和 */
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .1); }
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .18); }

/* 9. 状态色按护眼版重排（底色更淡、文字更柔） */
.chip.pending, .chip.submitting, .rec-kind.video, .kit-state.st-queued,
.kit-state.st-running, .kit-state.st-pending, .record-type {
    background: rgba(99, 102, 241, .14); color: #8b9dfb;
}
.chip.running { background: rgba(88, 166, 255, .14); color: #79b8ff; }
.chip.success, .rec-kind.kit, .kit-state.st-success, .kit-state.st-partial,
.psd-badge.done, .portal-card.kit .pc-badge {
    background: rgba(63, 185, 80, .14); color: #56d364;
}
.chip.partial, .chip.insufficient, .kit-state.st-insufficient,
.kit-state.st-canceled, .psd-badge {
    background: rgba(210, 153, 34, .14); color: #e3b341;
}
.chip.failed, .kit-state.st-failed, .psd-badge.failed, .rec-kind.exhausted {
    background: rgba(248, 81, 73, .14); color: #ff7b72;
}
.chip.canceled { background: rgba(139, 148, 158, .14); color: #8b949e; }
.rec-kind.erase { background: rgba(219, 109, 40, .14); color: #f0883e; }
.rec-kind.cutout { background: rgba(188, 140, 255, .14); color: #bc8cff; }
.rec-kind.idphoto { background: rgba(56, 189, 248, .16); color: #7dd3fc; }
.rec-kind.quality { background: rgba(45, 212, 191, .16); color: #5eead4; }
.rec-kind.logo { background: rgba(244, 114, 182, .16); color: #f9a8d4; }
.rec-kind.ve { background: rgba(96, 165, 250, .16); color: #93c5fd; }
.psd-badge { background: rgba(99, 102, 241, .14); color: #8b9dfb; }

/* 10. 提示条上的小圆点、子菜单小圆点：去掉强发光 */
.alert::before { box-shadow: none; }
.sb-item.sb-sub.active .sb-ico { box-shadow: none; }
.np-tag::before { opacity: .85; }

@media (max-width: 900px) {
    .container { padding: 14px; }
    .page-bar, .scene-tabs { padding-left: 14px; padding-right: 14px; }
    .gen-wrap { grid-template-columns: 1fr; }
}

/* 窄屏：后台侧边栏同样收成抽屉 */
@media (max-width: 900px) {
    .adm-body .container { padding: 12px; }
}

/* ======================================================================
   上传 / 输入框：边框更明显 + 上传框高度 ×2（前台 + 后台一起生效）
   ====================================================================== */
input[type=text], input[type=password], input[type=number], input[type=url], input[type=search],
select, textarea {
    border-width: 1.5px;
    border-color: rgba(148, 163, 184, .55);
}
input[type=text]:hover, input[type=password]:hover, input[type=number]:hover,
input[type=url]:hover, input[type=search]:hover, select:hover, textarea:hover {
    border-color: rgba(148, 163, 184, .8);
}

/* 上传框（选择图片上传 / 拖拽区）：视觉高度约原来的 2 倍，虚线也更清楚 */
.uploader {
    min-height: 124px;
    padding: 22px 24px;
    border-width: 2px;
    border-style: dashed;
    border-color: rgba(203, 213, 225, .55);
    border-radius: 12px;
    /* 中灰色底（原来几乎全透明）：缩略图放在框里面也看得清楚 */
    background: rgba(148, 163, 184, .26);
}
.uploader:hover { border-color: rgba(203, 213, 225, .8); background: rgba(148, 163, 184, .34); }
.uploader.over { border-color: var(--accent); border-style: solid; background: var(--accent-soft); }
.uploader .btn { padding: 12px 22px; font-size: 15px; }
.uploader .hint { line-height: 1.7; }

/* AI 消除页的空状态上传框：同一套中灰风格 */
.ez-empty-box {
    background: rgba(148, 163, 184, .26);
    border: 2px dashed rgba(203, 213, 225, .55);
    border-radius: 14px;
    padding: 26px 24px;
    text-align: center;
}
/* 后台「充值审核」的订单截图上传块：同样中灰盒子 */
.audit-shot {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 12px;
    border: 1.5px dashed rgba(203, 213, 225, .5);
    border-radius: 10px;
    background: rgba(148, 163, 184, .26);
}
.audit-shot img[data-audit-preview] {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid rgba(148, 163, 184, .5);
}

/* 商品图标签旁边的「上传图片引导」入口 */
.upload-tip-link {
    font-size: 12.5px;
    color: #8ab4ff;
    border-bottom: 1px dashed rgba(138, 180, 255, .55);
    text-decoration: none;
}
.upload-tip-link:hover { color: #a8c8ff; }

/* ======================================================================
   上传图片引导弹窗（白灰底色）
   ====================================================================== */
.ug-modal { position: fixed; inset: 0; z-index: 86; display: none; }
.ug-modal.open { display: block; }
.ug-backdrop {
    position: absolute; inset: 0;
    background: rgba(15, 20, 32, .45);
    backdrop-filter: blur(10px) saturate(120%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    animation: cf-fade .16s ease-out;
}
.ug-box {
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: min(620px, 94vw); max-height: 90vh; overflow-y: auto;
    padding: 18px 20px 16px;
    background: #fff; color: #1f2430;
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(9, 14, 26, .32);
    animation: cf-pop .18s ease-out;
}
.ug-head { display: flex; align-items: center; justify-content: space-between; }
.ug-head h3 { margin: 0; font-size: 17px; color: #1f2430; }
.ug-x { border: 0; background: transparent; font-size: 22px; line-height: 1; color: #6b7280; cursor: pointer; }
.ug-sub { margin: 8px 0 12px; color: #5b6472; font-size: 13px; line-height: 1.7; }
.ug-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ug-item { text-align: center; }
.ug-img {
    border: 1px solid #e5e7eb; border-radius: 10px; overflow: hidden; background: #f5f6f8;
    aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center;
}
.ug-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ug-name { margin-top: 6px; font-size: 13px; color: #1f2430; }
.ug-hint { margin: 12px 0 0; color: #5b6472; font-size: 12.5px; }
.ug-actions { display: flex; justify-content: flex-end; margin-top: 14px; }
.ug-modal .btn { background: #fff; border: 1px solid #dfe3ec; color: #334155; }
.ug-modal .btn.primary { background: #3b6ef6; border-color: #3b6ef6; color: #fff; }
@media (max-width: 560px) { .ug-grid { grid-template-columns: repeat(2, 1fr); } }

/* ======================================================================
   顶栏弹窗（剩余美豆 / 充值美豆 / 美豆价目表 / 生成记录）：白灰底色
   ====================================================================== */
.pm-modal { position: fixed; inset: 0; z-index: 88; display: none; }
.pm-modal.open { display: block; }
.pm-backdrop {
    position: absolute; inset: 0;
    background: rgba(15, 20, 32, .45);
    backdrop-filter: blur(10px) saturate(120%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    animation: cf-fade .16s ease-out;
}
.pm-box {
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: min(680px, 94vw); max-height: 86vh;
    display: flex; flex-direction: column;
    background: #fff; color: #1f2430;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(9, 14, 26, .32);
    animation: cf-pop .18s ease-out;
    overflow: hidden;
}
.pm-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px 8px;
    border-bottom: 1px solid #f0f1f4;
}
.pm-head h3 { margin: 0; font-size: 17px; color: #1f2430; }
.pm-x {
    border: 0; background: transparent; font-size: 22px; line-height: 1;
    color: #9aa1ad; cursor: pointer; padding: 0 4px;
}
.pm-x:hover { color: #4b5563; }
.pm-body { padding: 14px 20px 16px; overflow-y: auto; }
.pm-muted { color: #6b7280; font-size: 12.5px; }
.pm-body .req { color: #e5484d; }
.pm-alert {
    margin: 12px 0; padding: 10px 12px; border-radius: 10px;
    background: #fdecec; border: 1px solid #f7d0d1; color: #b3261e; font-size: 13px;
}

.pm-sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px; }
.pm-sum-item {
    background: #f5f6f8; border: 1px solid #eceef2; border-radius: 10px;
    padding: 10px 12px; display: flex; flex-direction: column; gap: 2px;
    font-size: 12.5px; color: #6b7280;
}
.pm-sum-item b { font-size: 18px; color: #111827; }
.pm-sum-item b.pm-small { font-size: 13px; }

.pm-list { display: flex; flex-direction: column; }
.pm-row {
    display: grid; grid-template-columns: 108px 1fr 72px 92px 56px;
    gap: 8px; align-items: center;
    padding: 9px 8px; border-bottom: 1px solid #f0f1f4;
    font-size: 13px; color: #1f2430;
}
.pm-row:last-child { border-bottom: 0; }
.pm-time { color: #6b7280; font-size: 12px; }
.pm-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-delta { text-align: right; font-weight: 650; }
.pm-delta.up { color: #15803d; }
.pm-delta.down { color: #c62828; }
.pm-bal { text-align: right; color: #6b7280; font-size: 12px; }
.pm-price { text-align: right; color: #2f60e6; font-weight: 650; white-space: nowrap; }
.pm-price-row { grid-template-columns: 1fr 140px; }

.pm-kind {
    display: inline-block; padding: 2px 8px; border-radius: 999px;
    background: #eef2ff; color: #4556c8; font-size: 11.5px; text-align: center;
}
.pm-state { font-size: 12px; }
.pm-state.ok { color: #15803d; }
.pm-state.err { color: #c62828; }
.pm-state.warn { color: #b45309; }
.pm-state.run { color: #2f60e6; }
.pm-state.muted { color: #6b7280; }
.pm-link { color: #2f60e6; font-size: 12.5px; text-align: right; }
.pm-rec-row { grid-template-columns: 96px 1fr 64px 132px 48px; }

.pm-note { margin: 0 0 8px; color: #5b6472; font-size: 13px; line-height: 1.7; }
.pm-plans { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 12px 0; }
.pm-plan {
    display: flex; flex-direction: column; gap: 3px; text-align: left;
    padding: 12px 14px; border: 1.5px solid #e3e6ec; border-radius: 12px;
    background: #f7f8fa; color: #1f2430; cursor: pointer; font: inherit;
}
.pm-plan:hover { border-color: #b9c8ea; background: #f2f5fb; }
.pm-plan.on { border-color: #3b6ef6; background: #eff4ff; }
.pm-plan b { font-size: 14px; }
.pm-plan-coins { font-size: 15px; font-weight: 700; color: #2f60e6; }
.pm-plan-amount { font-size: 12.5px; color: #6b7280; }
.pm-plan-unit { font-size: 11.5px; color: #5b7bbd; }
.pm-plan-note { font-size: 11.5px; color: #9aa1ad; }
.pm-plan-once { font-size: 11px; color: #b45309; font-weight: 600; }
/* 限 1 次的优惠包：用过了就灰掉、不可点 */
.pm-plan-off { opacity: .6; cursor: not-allowed; background: #f2f3f5; }
.pm-plan-off:hover { border-color: #e3e6ec; background: #f2f3f5; }
.pm-plan-off-tip { font-size: 11px; color: #9aa1ad; }

.pm-form { display: grid; gap: 6px; margin-top: 6px; }
.pm-form label { font-size: 12.5px; font-weight: 600; color: #1f2430; }
/* 登录 / 注册弹窗：上面的「登录 / 注册一个」切换 */
.pm-tabs {
    display: flex; gap: 6px; margin: 0 0 12px;
    padding: 4px; border-radius: 10px; background: #f5f6f8; border: 1px solid #eceef2;
}
.pm-tab {
    flex: 1; padding: 8px 10px; border: 0; border-radius: 8px;
    background: transparent; color: #5b6472; font: inherit; font-weight: 600; cursor: pointer;
}
.pm-tab.on { background: #fff; color: #2f60e6; box-shadow: 0 1px 4px rgba(16, 24, 40, .08); }
.pm-form input {
    width: 100%; padding: 9px 11px;
    border: 1.5px solid #dfe3ec; border-radius: 10px;
    color: #1f2430; background: #fff; font: inherit; outline: none;
}
.pm-form input:focus { border-color: #8fb0f0; }
.pm-form input::placeholder { color: #9aa1b0; }
/* 套餐那一栏是「点卡片选」的，不让手打：只读样式做得明显一点 */
.pm-form input[readonly] {
    background: #f5f6f8;
    border-color: #e3e6ec;
    color: #1f2430;
    cursor: default;
}
.pm-form input[readonly]:focus { border-color: #e3e6ec; }

.pm-msg { min-height: 18px; margin-top: 8px; font-size: 12.5px; color: #6b7280; }
.pm-msg.err { color: #c62828; }
.pm-msg.ok { color: #15803d; }
.pm-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    margin-top: 12px; padding-top: 12px; border-top: 1px solid #f0f1f4;
}
.pm-modal .btn {
    background: #fff; border: 1px solid #dfe3ec; color: #334155;
    box-shadow: none; transform: none;
}
.pm-modal .btn:hover { background: #f6f8fc; border-color: #cfd9f0; transform: none; }
.pm-modal .btn.primary { background: #3b6ef6; border-color: #3b6ef6; color: #fff; }
.pm-modal .btn.primary:hover { background: #2f60e6; filter: none; }

@media (max-width: 620px) {
    .pm-row, .pm-rec-row { grid-template-columns: 1fr; }
    .pm-sum { grid-template-columns: 1fr; }
    .pm-bal, .pm-price, .pm-link, .pm-time { text-align: left; }
}

/* ------------------------------------------------ 点图放大弹窗（全站通用）
   客户 2026-10-13 要求：无痕改字那一页/页签里**所有图片**点一下都要弹出来看大图。
   层级压在所有东西上面（z-index 压过侧边栏与其它弹窗），点背景 / 点 × / 按 Esc 关闭。 */
.pm-img { position: fixed; inset: 0; z-index: 120; display: none; }
.pm-img.open { display: block; }
.pm-img .pi-backdrop { position: absolute; inset: 0; background: rgba(8, 12, 22, .84); }
.pm-img .pi-stage {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; padding: 26px;
}
.pm-img .pi-img {
    max-width: 92vw; max-height: 80vh; border-radius: 12px; background: #0d1220;
    box-shadow: 0 26px 70px rgba(0, 0, 0, .55);
}
.pm-img .pi-cap {
    margin-top: 12px; max-width: 90vw; color: #e6ebf5; font-size: 13px;
    text-align: center; line-height: 1.6; word-break: break-all;
}
.pm-img .pi-bar { position: absolute; top: 14px; right: 16px; display: flex; gap: 10px; }
.pm-img .pi-btn {
    display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px;
    border-radius: 10px; font-size: 13px; cursor: pointer; text-decoration: none;
    color: #16233d; background: #fff; border: 1px solid rgba(255, 255, 255, .5);
}
.pm-img .pi-btn:hover { background: #eef2fb; }
.pm-img .pi-x { font-size: 18px; line-height: 1; padding: 6px 12px; }

/* ======================================================================
   视觉统一 · 最终版设计稿（前台 + 后台同一套）
   ----------------------------------------------------------------------
   侧边栏 #191d26（底部用户区 #151920）· 内容区 #1e222b · 文字 #c9d1d9 / #8b949e
   强调色 #58a6ff · 卡片 rgba(255,255,255,.03) + 1px rgba(255,255,255,.06) + 12~16px 圆角
   发光减弱：按钮外发光 .15、胶囊标签不发光、选中态只留淡蓝边框
   只改样式，不动任何后端逻辑 / 结构 / 文案。
   ====================================================================== */
:root {
    --bg: #1e222b;              /* 右侧主内容区：比侧边栏稍浅，形成明暗层次 */
    --panel: #1e222b;
    --sb-bg: #191d26;           /* 侧边栏：中性冷灰，不偏蓝不偏紫 */
    --sb-foot-bg: #151920;      /* 侧边栏底部用户区 */
    --text: #c9d1d9;            /* 柔和浅灰白，不是纯白 */
    --muted: #8b949e;
    --accent: #58a6ff;
    --card: rgba(255, 255, 255, .03);
    --line: rgba(255, 255, 255, .06);
    --glass: rgba(255, 255, 255, .03);
    --glass-line: rgba(255, 255, 255, .06);
}

html { background: #1e222b; }
body {
    background:
        radial-gradient(1100px 720px at 100% 0%, rgba(99, 102, 241, .05), transparent 62%),
        radial-gradient(950px 680px at 0% 100%, rgba(168, 85, 247, .035), transparent 62%),
        linear-gradient(170deg, #1e222b 0%, #1e222b 60%, #1b1f27 100%);
    background-attachment: fixed;
    color: var(--text);
}

/* ------------------------------------------------ 侧边栏（固定 240px） */
.app-sidebar {
    width: var(--sb-w);
    background: var(--sb-bg);
    border-right: 1px solid rgba(255, 255, 255, .06);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.sb-item { color: #f2f6fb; border-radius: 10px; }          /* 侧边栏文字提亮到最亮 */
.sb-item .sb-ico { color: #dbe3ec; }
.sb-item:hover { background: rgba(255, 255, 255, .07); color: #fff; border-color: transparent; }
.sb-item:hover .sb-ico { color: #fff; }
.sb-item.active {
    background: rgba(99, 102, 241, .12);          /* 选中：淡靛蓝底 */
    border-color: rgba(88, 166, 255, .22);
    color: #ffffff;
}
.sb-item.active .sb-text { font-weight: 600; }
.sb-item.sb-sub { color: #e7eef7; }                        /* 子项比一级稍柔一点但也很亮 */
.sb-item.active::before {                          /* 左侧 2px 亮蓝高亮条 */
    left: -8px; top: 8px; bottom: 8px; width: 2px;
    background: #58a6ff; box-shadow: none;
}
.sb-item.active .sb-ico { background: rgba(88, 166, 255, .18); color: #58a6ff; box-shadow: none; }
.sb-item.sb-sub.active .sb-ico { background: rgba(88, 166, 255, .18); color: #58a6ff; box-shadow: none; }
.sb-brand-text b { color: #ffffff; }
.sb-brand-text small { color: #aab4c0; }
.sb-user-name { color: #f2f6fb; }
.sb-logout { color: #c3ccd8; }

/* 底部用户区：单独一块 #151920，和侧边栏主体区分 */
.sb-foot {
    margin: 10px -4px 0;
    padding: 12px;
    background: var(--sb-foot-bg);
    border-top: 0;
    border-radius: 12px;
}

/* ------------------------------------------------ 内容区：左右边距 40px */
.container { padding: 24px 40px; }
.adm-body .container { padding: 18px 40px 40px; }
@media (max-width: 900px) {
    .container, .adm-body .container { padding: 14px; }
}

/* ------------------------------------------------ 卡片 / 面板：圆角 + 柔和阴影 */
.card, .panel, .stat, .kit-card, .rec-row, .portal-card, .portal-mini,
.record-card, .task, .model-box, .np-stat, .adm-notice {
    border-radius: 14px;
    background: rgba(255, 255, 255, .03);
    border-color: rgba(255, 255, 255, .06);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
}

/* ------------------------------------------------ 按钮：蓝紫渐变 + 10px 圆角 + 柔和阴影 */
.btn { border-radius: 10px; }
.btn.sm { border-radius: 8px; }
.btn.primary {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 4px 14px rgba(99, 102, 241, .15);   /* 外发光透明度 .15，不刺眼 */
}
.btn.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(99, 102, 241, .18);
    filter: none;
}

/* ------------------------------------------------ 发光特效减弱 */
.chip, .rec-kind, .kit-state, .psd-badge, .np-tag, .kit-label { box-shadow: none; }
.alert::before { box-shadow: none; opacity: .8; }
.sb-logo { box-shadow: 0 4px 12px rgba(99, 102, 241, .15); }

/* 选中态：淡蓝边框高亮，不再强发光 */
.type-item:has(> .t-check:checked),
.chip-check:has(input:checked),
.model-tile.chosen,
.model-chosen {
    border-color: rgba(88, 166, 255, .5) !important;
    background: rgba(99, 102, 241, .12) !important;
    box-shadow: 0 0 0 1px rgba(88, 166, 255, .28);
}

/* 子功能 Tab：一行文字 + 选中态蓝色下划线（不要发光块） */
.scene-tabs { padding-left: 40px; padding-right: 40px; }
.scene-tab { color: var(--muted); }
.scene-tab.active { color: #fff; }
.scene-tab.active::after {
    background: #58a6ff;
    box-shadow: none;
}
@media (max-width: 900px) {
    .scene-tabs, .page-bar { padding-left: 14px; padding-right: 14px; }
}

/* ======================================================================
   复刻爆款视频（右侧展示）：参考视频 → 复刻视频 成对展示（和官网一致）
   ====================================================================== */
.rp-grid {
    /* 「参考视频 → 复刻视频」的案例卡**并排**显示：一排放 2 组，窄屏再自动折成 1 列 */
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 18px;
    max-width: 1060px;
    margin: 26px auto 0;
}
.rp-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .06);
    box-shadow: 0 2px 12px rgba(0, 0, 0, .14);
}
.rp-item {
    margin: 0;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.rp-item figcaption { font-size: 13px; color: var(--text); }

.rp-thumb {
    position: relative;
    display: block;
    width: 100%;          /* 跟着卡片列宽走，并排时自动缩小 */
    aspect-ratio: 9 / 16;
    border-radius: 12px;
    overflow: hidden;
    background: #12161d;
    border: 1px solid rgba(255, 255, 255, .08);
}
.rp-thumb video,
.rp-thumb .rp-cover { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 复刻案例：鼠标移上去才播放，播起来淡入盖住封面 */
.rp-thumb .rp-video {
    position: absolute;
    inset: 0;
    height: 100%;
    opacity: 0;
    transition: opacity .18s ease;
    pointer-events: none;
}
.rp-thumb.playing .rp-video { opacity: 1; }
.rp-thumb .play-badge {
    position: absolute; left: 8px; bottom: 8px;
    width: 26px; height: 26px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, .45); color: #fff; font-size: 11px;
}
/* 参考视频左下角的「商品图」小图（官网也有这个角标） */
.rp-pic {
    position: absolute;
    left: 50%; bottom: 40px;
    transform: translateX(-50%);
    display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.rp-pic img {
    width: 62px; height: 62px; object-fit: cover;
    border-radius: 8px; border: 2px solid rgba(255, 255, 255, .85);
    background: #fff;
}
.rp-pic i {
    font-style: normal; font-size: 11px; line-height: 1;
    padding: 3px 8px; border-radius: 999px;
    background: rgba(0, 0, 0, .55); color: #fff;
}
.rp-arrow {
    font-size: 26px; line-height: 1;
    color: #8ab4ff; opacity: .9;
    padding: 0 2px;
}
@media (max-width: 1100px) {
    .rp-grid { gap: 14px; }
    .rp-card { padding: 12px; gap: 10px; }
    .rp-item figcaption { font-size: 12px; }
}
@media (max-width: 860px) {
    .rp-grid { grid-template-columns: 1fr; }   /* 手机 / 窄屏：折成一列 */
}
@media (max-width: 700px) {
    .rp-card { flex-direction: column; }
    .rp-arrow { transform: rotate(90deg); }
}

/* ---------------------------------------------- 复刻视频展示（官方案例库）
   卡片里的视频**自动播放**（静音循环），不需要鼠标悬浮；
   滑出屏幕的会自己暂停，省流量。 */
.cs-block {
    max-width: 1060px;
    margin: 34px auto 0;
}
.cs-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
    margin-bottom: 14px;
}
.cs-head h2 {
    margin: 0;
    font-size: 17px;
    color: #f2f6fb;
}
.cs-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.cs-tab {
    border: 1px solid var(--glass-line, rgba(255, 255, 255, .16));
    background: rgba(255, 255, 255, .04);
    color: #cfd8e3;
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 12.5px;
    cursor: pointer;
}
.cs-tab.active {
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    border-color: transparent;
    color: #fff;
    font-weight: 600;
}
.cs-tip {
    font-size: 12.5px;
    color: #8fa0b5;
    margin-left: auto;
}
.cs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    gap: 14px;
}
.cs-card {
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 14px;
    overflow: hidden;
    background: rgba(255, 255, 255, .03);
    cursor: pointer;
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.cs-card:hover {
    border-color: rgba(138, 180, 255, .75);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .35);
}
.cs-card.on {
    border-color: #8ab4ff;
    box-shadow: 0 0 0 1px rgba(138, 180, 255, .6), 0 10px 24px rgba(0, 0, 0, .35);
}
.cs-thumb {
    position: relative;
    aspect-ratio: 9 / 16;
    background: #0d1424;
    overflow: hidden;
}
.cs-thumb img,
.cs-thumb video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.cs-thumb img { z-index: 1; }
.cs-thumb video { z-index: 2; opacity: 0; transition: opacity .25s ease; }
.cs-card.playing .cs-thumb video { opacity: 1; }
.cs-dur {
    position: absolute;
    right: 6px;
    bottom: 6px;
    z-index: 3;
    background: rgba(0, 0, 0, .6);
    color: #fff;
    font-size: 11px;
    padding: 1px 6px;
    border-radius: 999px;
}
.cs-pick {
    position: absolute;
    left: 8px;
    top: 8px;
    z-index: 3;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    color: #fff;
    font-size: 11.5px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 999px;
    opacity: .92;
}
.cs-name {
    padding: 8px 10px 10px;
    font-size: 12.8px;
    color: #dfe7f1;
    line-height: 1.35;
    min-height: 40px;
}
@media (max-width: 700px) {
    .cs-grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
    .cs-tip { margin-left: 0; }
}

/* ---------------------------------------------- 后台：点 UID 串号 = 复制 */
[data-copy] {
    cursor: pointer;
    border-bottom: 1px dashed rgba(138, 180, 255, .45);
}
[data-copy]:hover {
    color: #8ab4ff;
    border-bottom-color: #8ab4ff;
}
.copied-tip {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 9999;
    padding: 8px 14px;
    border-radius: 10px;
    background: #1f6feb;
    color: #fff;
    font-size: 13px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .18s ease, transform .18s ease;
    pointer-events: none;
}
.copied-tip.on { opacity: 1; transform: translateY(0); }

/* ======================================================================
   所有输入框 / 下拉 / 多行文本统一改成「浅底深字」风格
   —— 深色页面上放浅色输入框（参考设计稿：浅灰底 + 深色文字 + 淡蓝聚焦圈）。
   前台 + 后台都生效（客户要求「所有改动的视觉，后端也需要改动」）。
   ====================================================================== */
input[type=text],
input[type=password],
input[type=number],
input[type=url],
input[type=search],
input[type=email],
input[type=tel],
select,
textarea {
    background: #eef1f6;
    color: #1b1f26;
    border: 1.5px solid rgba(148, 163, 184, .55);
    border-radius: 10px;
}
input::placeholder,
textarea::placeholder {
    color: #8b93a1;
}
input[type=text]:hover,
input[type=password]:hover,
input[type=number]:hover,
input[type=url]:hover,
input[type=search]:hover,
input[type=email]:hover,
input[type=tel]:hover,
select:hover,
textarea:hover {
    background: #f4f6fa;
    border-color: rgba(120, 140, 180, .75);
}
input[type=text]:focus,
input[type=password]:focus,
input[type=number]:focus,
input[type=url]:focus,
input[type=search]:focus,
input[type=email]:focus,
input[type=tel]:focus,
select:focus,
textarea:focus {
    background: #fff;
    color: #11151c;
    border-color: #6f8ff5;
    box-shadow: 0 0 0 3px rgba(111, 143, 245, .22);
}
/* 下拉展开的选项也要浅底深字，别在深色里看不见 */
select option {
    background: #fff;
    color: #1b1f26;
}
/* 只读 / 停用：浅一点，但仍看得清内容 */
input[readonly],
textarea[readonly],
input:disabled,
select:disabled,
textarea:disabled {
    background: #e6eaf1;
    color: #5b6472;
}

/* ======================================================================
   AI 证件照 / 变清晰 / AI Logo 三个新板块的版式（从同一套项目的 app.css 原样搬过来，
   保持和官方 designkit 页面一致；深色主题的适配放在文件最后的覆盖段里）
   ====================================================================== */
/* =====================================================================
   AI Logo 板块
   ===================================================================== */
.logo-gallery { display: grid; gap: 16px; }
.logo-card .logo-gallery-inner {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
    margin-top: 12px;
}
.logo-item {
    margin: 0;
    position: relative;
    border: 1px solid var(--line);
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    box-shadow: var(--sh-1);
    aspect-ratio: 1 / 1;
    display: grid;
    place-items: center;
    transition: box-shadow .15s, transform .15s;
}
.logo-item:hover { box-shadow: var(--sh-2); transform: translateY(-2px); }
.logo-item img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.logo-item .logo-dl {
    position: absolute; right: 10px; bottom: 10px;
    padding: 6px 14px; border-radius: 10px;
    background: var(--ink); color: #fff;
    font-size: 12.5px; font-weight: 600;
    opacity: 0; transition: opacity .15s;
}
.logo-item:hover .logo-dl { opacity: 1; }
.logo-item-loading {
    background: linear-gradient(100deg, #f1f5f9 30%, #e2e8f0 50%, #f1f5f9 70%);
    background-size: 200% 100%;
    animation: logo-shimmer 1.4s linear infinite;
}
.logo-item-loading span { color: var(--muted); font-size: 12.5px; }
@keyframes logo-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

.logo-err {
    margin-top: 10px; padding: 8px 12px;
    border-radius: 10px;
    background: #fef2f2; border: 1px solid #fecaca; color: var(--err);
    font-size: 12.5px;
}

.logo-history { display: flex; flex-direction: column; }
.logo-row {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
}
.logo-row:last-child { border-bottom: 0; }
.logo-row-thumb {
    width: 48px; height: 48px; flex: none;
    border: 1px solid var(--line); border-radius: 12px;
    display: grid; place-items: center;
    overflow: hidden; background: #f8fafc; color: var(--muted);
}
.logo-row-thumb img { width: 100%; height: 100%; object-fit: contain; }
.logo-row-main { flex: 1; min-width: 0; }
.logo-row-main b { font-family: var(--font-head); }
.logo-row-right { flex: none; }

/* ================= 变清晰（版式照官方 /quality） ================= */
.q-body { background: var(--bg); }

/* ---------- 入口态 ---------- */
.q-wrap { padding: 26px 30px 60px; }
.q-hero { text-align: center; margin: 10px 0 26px; }
.q-hero h1 { margin: 0 0 8px; font-family: var(--font-head); font-size: 40px; letter-spacing: -.02em; }
.q-hero p { margin: 0 0 16px; color: var(--muted); font-size: 15px; }
.q-tabs { display: inline-flex; gap: 6px; background: #eef1f5; padding: 4px; border-radius: 999px; }
.q-tab { position: relative; height: 32px; padding: 0 20px; border: 0; border-radius: 999px; background: transparent;
         color: #475569; font-family: inherit; font-size: 14px; cursor: pointer; }
.q-tab.active { background: #fff; color: var(--text); box-shadow: var(--sh-1); }
.q-new { position: absolute; top: -10px; right: -6px; font-style: normal; font-size: 10px; line-height: 1;
         padding: 2px 5px; border-radius: 6px; background: var(--accent-soft); color: var(--accent-ink); }

/* 和官方一样：整块内容居中，左演示图 450 见方，右上传卡片同高（不要拉满整屏） */
.q-cols { display: grid; grid-template-columns: 452px minmax(0, 1fr); gap: 40px; align-items: stretch;
          max-width: 1092px; margin: 0 auto; }
.q-demo { border-radius: 18px; overflow: hidden; background: #0f172a; display: flex; align-items: center;
          justify-content: center; aspect-ratio: 1 / 1; min-height: 0; }
.q-demo video { width: 100%; height: 100%; object-fit: cover; display: block; }
.q-card { border: 1px dashed var(--line-strong); border-radius: 18px; background: #fff; padding: 30px 26px;
          display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.q-btn { width: 100%; max-width: 420px; height: 48px; border: 0; border-radius: 12px; cursor: pointer;
         font-family: inherit; font-size: 15px; font-weight: 600; display: flex; align-items: center;
         justify-content: center; gap: 8px; }
.q-btn-ink { background: #2f7cf6; color: #fff; }
.q-btn-ink:hover { background: #1f6ae0; }
.q-btn-soft { background: #fff; color: var(--text); border: 1px solid var(--line); }
.q-btn-soft:hover { border-color: var(--line-strong); }
.q-ico { font-size: 15px; }
.q-plain { margin-top: 2px; border: 0; background: transparent; color: var(--muted); font-family: inherit;
           font-size: 13px; cursor: pointer; }
.q-chev { color: var(--line-strong); }
.q-try { margin-top: 22px; text-align: center; }
.q-try-label { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12.5px;
               justify-content: center; }
.q-try-label span { display: block; width: 26px; height: 1px; background: var(--line); }
.q-try-list { margin-top: 10px; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.q-thumb { width: 62px; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 8px;
           overflow: hidden; background: #f1f5f9; cursor: pointer; }
.q-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.q-hint { margin: 14px 0 0; color: var(--muted); font-size: 12.5px; text-align: center; }
.q-entry.over .q-card { border-color: var(--accent); background: var(--accent-soft); }

/* ---------- 编辑态 ---------- */
.q-edit { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 20px; align-items: start; }
.q-side { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 16px;
          display: flex; flex-direction: column; gap: 18px; position: sticky; top: 74px; }
.q-block h3 { margin: 0 0 4px; font-size: 14px; }
.q-sub { margin: 0 0 10px; color: var(--muted); font-size: 12.5px; line-height: 1.6; }
.q-levels { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.q-mode { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 1px solid var(--line);
          border-radius: 12px; background: #fff; cursor: pointer; font-family: inherit; text-align: left; }
.q-mode:hover { border-color: var(--line-strong); }
.q-mode.active { border-color: #2f7cf6; box-shadow: inset 0 0 0 1px #2f7cf6; }
.q-mode-ico { flex: none; width: 30px; height: 22px; border-radius: 6px; background: #eef1f5; color: #334155;
              font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.q-mode-main { min-width: 0; flex: 1; }
.q-mode-main b { display: block; font-size: 13.5px; color: var(--text); }
.q-mode-main i { display: block; font-style: normal; color: var(--muted); font-size: 11.5px; line-height: 1.5; }
.q-vip { flex: none; font-size: 10px; line-height: 1; padding: 3px 6px; border-radius: 6px;
         background: #fff7ed; color: #c2410c; border: 1px solid #fed7aa; }
.q-scenes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.q-scene { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px;
           border: 1px solid var(--line); border-radius: 12px; background: #fff; cursor: pointer; font-family: inherit; }
.q-scene.active { border-color: #2f7cf6; box-shadow: inset 0 0 0 1px #2f7cf6; }
.q-scene-ico { font-size: 16px; line-height: 1; }
.q-scene b { font-size: 12.5px; color: var(--text); font-weight: 500; }
.q-side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.q-cost { color: var(--muted); font-size: 12.5px; }
.q-run { height: 44px; border: 0; border-radius: 12px; background: #2f7cf6; color: #fff; cursor: pointer;
         font-family: inherit; font-size: 15px; font-weight: 600; }
.q-run:hover:not([disabled]) { background: #1f6ae0; }
.q-run[disabled] { background: #cbd5e1; cursor: not-allowed; }
.q-msg { min-height: 16px; font-size: 12.5px; color: var(--muted); }
.q-msg.error { color: var(--err); }

.q-stage { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 14px;
           display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.q-stage-head { display: flex; justify-content: flex-end; gap: 8px; }
.q-canvas-box { position: relative; border-radius: 12px; background:
    linear-gradient(45deg, #f1f5f9 25%, transparent 25%, transparent 75%, #f1f5f9 75%),
    linear-gradient(45deg, #f1f5f9 25%, #fff 25%, #fff 75%, #f1f5f9 75%);
    background-size: 20px 20px; background-position: 0 0, 10px 10px;
    min-height: 460px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.q-compare { position: relative; display: inline-block; max-width: 100%; line-height: 0; transform-origin: center; }
.q-img { display: block; max-width: 100%; max-height: 64vh; user-select: none; -webkit-user-drag: none; }
/* 「处理后」那半张要用**和原图一样的渲染尺寸**，否则被 50% 容器压扁：
   外层裁切宽度 = 滑块位置，内层图按容器高度等比铺开 */
.q-after-wrap { position: absolute; left: 0; top: 0; bottom: 0; width: 50%; overflow: hidden; }
.q-after-wrap .q-img-after { position: absolute; left: 0; top: 0; height: 100%; width: auto; max-width: none; }
.q-handle { position: absolute; top: 0; bottom: 0; width: 2px; background: #fff; cursor: ew-resize;
            box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); }
.q-handle i { position: absolute; top: 50%; left: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px;
              border-radius: 50%; background: #fff; box-shadow: var(--sh-2); }
.q-handle i::before { content: '⇔'; position: absolute; inset: 0; display: flex; align-items: center;
                      justify-content: center; font-size: 13px; color: #334155; }
.q-badge { position: absolute; top: 10px; left: 10px; padding: 3px 8px; border-radius: 8px;
           background: rgba(0, 0, 0, .55); color: #fff; font-size: 12px; line-height: 1.4; z-index: 2; }
.q-busy { position: absolute; inset: 0; background: rgba(255, 255, 255, .84); display: flex;
          flex-direction: column; align-items: center; justify-content: center; gap: 12px; font-size: 13.5px; }
.q-busy i { width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--line-strong);
            border-top-color: #2f7cf6; animation: idp-spin .8s linear infinite; display: block; }
.q-busy[hidden] { display: none !important; }
.q-edit[hidden], .q-entry[hidden] { display: none !important; }
.q-zoom { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--muted); font-size: 13px; }
.q-zoom-btn { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); background: #fff;
              cursor: pointer; font-size: 15px; line-height: 1; color: var(--text); font-family: inherit; }
.q-zoom-btn:hover { border-color: var(--line-strong); }

@media (max-width: 1080px) {
    .q-wrap { padding: 16px 14px 40px; }
    .q-cols { grid-template-columns: 1fr; max-width: 620px; gap: 20px; }
    .q-demo { aspect-ratio: 16 / 9; }
    .q-edit { grid-template-columns: 1fr; }
    .q-side { position: static; }
}

/* ================= AI 证件照（版式照官方 /certified/ai） ================= */
.idp-body { background: var(--bg); }
.idp-wrap { display: grid; grid-template-columns: 372px minmax(0, 1fr); align-items: start;
            min-height: calc(100vh - 57px); }

/* ---- 左栏 ---- */
.idp-side { border-right: 1px solid var(--line); background: #fff; padding: 20px 18px 28px;
            display: flex; flex-direction: column; gap: 18px; position: sticky; top: 57px;
            max-height: calc(100vh - 57px); overflow-y: auto; }
.idp-side-head h1 { margin: 0 0 4px; font-family: var(--font-head); font-size: 20px; }
.idp-side-head p { margin: 0; color: var(--muted); font-size: 12.5px; }
.idp-block h3 { margin: 0 0 10px; font-size: 14px; display: flex; align-items: center; gap: 6px; }
.idp-opt { color: var(--muted); font-size: 11.5px; font-weight: 400; }

.idp-specs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.idp-spec { border: 1px solid var(--line); background: #fff; border-radius: 10px; cursor: pointer;
            padding: 8px 4px; font-family: inherit; color: var(--text); line-height: 1.35; }
.idp-spec b { display: block; font-size: 12.5px; font-weight: 600; }
.idp-spec i { display: block; font-style: normal; color: var(--muted); font-size: 11px; }
.idp-spec:hover { border-color: var(--line-strong); }
.idp-spec.active { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.idp-spec-all { display: flex; align-items: center; justify-content: center; color: var(--muted); }

.idp-colors { display: flex; flex-wrap: wrap; gap: 8px; }
.idp-color { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line);
             cursor: pointer; padding: 0; position: relative; }
.idp-color span { position: absolute; inset: 0; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.04); }
.idp-color.active { border-color: var(--ink); box-shadow: 0 0 0 2px rgba(24,24,27,.24); }

.idp-people { display: flex; gap: 6px; margin-bottom: 8px; }
.idp-person { flex: 1; height: 30px; border-radius: 8px; border: 1px solid var(--line); background: #fff;
              cursor: pointer; font-family: inherit; font-size: 12.5px; color: var(--text); }
.idp-person.active { background: var(--ink); border-color: var(--ink); color: #fff; }
.idp-topics { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.idp-topic { height: 26px; padding: 0 10px; border-radius: 999px; border: 1px solid transparent;
             background: #f1f5f9; color: #475569; font-size: 12px; cursor: pointer; font-family: inherit; }
.idp-topic.active { background: var(--accent-soft); color: var(--accent-ink); border-color: #bae6fd; }
.idp-faces { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.idp-face { padding: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden;
            background: #f1f5f9; cursor: pointer; aspect-ratio: 3 / 4; }
.idp-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.idp-face.active { border-color: var(--ink); box-shadow: 0 0 0 2px rgba(24,24,27,.24); }
.idp-more { margin-top: 8px; width: 100%; height: 30px; border: 1px dashed var(--line-strong);
            background: #fff; border-radius: 8px; color: var(--muted); cursor: pointer; font-family: inherit; font-size: 12.5px; }

.idp-block textarea { width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 9px 10px;
                      font-family: inherit; font-size: 13px; resize: vertical; color: var(--text); }
.idp-quick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.idp-quickbtn { height: 26px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--line);
                background: #fff; color: #475569; font-size: 12px; cursor: pointer; font-family: inherit; }
.idp-quickbtn:hover { border-color: var(--line-strong); }

.idp-foot { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.idp-cost { color: var(--muted); font-size: 12.5px; }
.idp-go { height: 42px; border: 0; border-radius: 12px; background: var(--ink); color: #fff;
          font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.idp-go:hover:not([disabled]) { background: var(--ink-hover); }
.idp-go[disabled] { background: #cbd5e1; cursor: not-allowed; }
.idp-msg { font-size: 12.5px; color: var(--muted); min-height: 16px; }
.idp-msg.error { color: var(--err); }
.idp-link { color: var(--accent-ink); font-size: 12.5px; text-decoration: none; }

/* ---- 右侧画布 ---- */
.idp-stage { padding: 22px 26px 40px; min-width: 0; }
.idp-drop { border: 1.5px dashed var(--line-strong); border-radius: 16px; background: #fff;
            min-height: 560px; display: flex; flex-direction: column; align-items: center;
            justify-content: center; gap: 14px; text-align: center; padding: 30px; }
.idp-drop.over { border-color: var(--accent); background: var(--accent-soft); }
.idp-dropart { font-size: 46px; line-height: 1; }
.idp-drop h2 { margin: 0; font-family: var(--font-head); font-size: 22px; }
.idp-drop h2 b { color: #e11d48; }
.idp-upload { height: 44px; padding: 0 34px; border: 0; border-radius: 12px; background: #e11d48;
              color: #fff; font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.idp-upload:hover { background: #be123c; }
.idp-tip { margin: 0; color: var(--muted); font-size: 12.5px; }

.idp-work { display: flex; flex-direction: column; gap: 14px; align-items: center; }
.idp-work[hidden], .idp-drop[hidden] { display: none !important; }
.idp-canvas-box { position: relative; background: #fff; border: 1px solid var(--line);
                  border-radius: 14px; padding: 14px; display: flex; justify-content: center; }
#idpCanvas { max-width: 100%; max-height: 68vh; border-radius: 6px; box-shadow: var(--sh-1); }
.idp-busy { position: absolute; inset: 0; background: rgba(255,255,255,.82); border-radius: 14px;
            display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
            font-size: 13.5px; color: var(--text); }
.idp-busy i { width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--line-strong);
              border-top-color: var(--ink); animation: idp-spin .8s linear infinite; display: block; }
.idp-busy[hidden] { display: none !important; }
@keyframes idp-spin { to { transform: rotate(360deg); } }
.idp-actions { display: flex; gap: 10px; align-items: center; }

@media (max-width: 1080px) {
    .idp-wrap { grid-template-columns: 1fr; }
    .idp-side { position: static; max-height: none; border-right: 0; border-bottom: 1px solid var(--line); }
    .idp-stage { padding: 16px; }
    .idp-drop { min-height: 320px; }
}


/* ======================================================================
   新板块深色适配（AI 证件照 / 变清晰 / AI Logo）
   —— 版式沿用官方那套，底色换成站内的深色玻璃，别和左侧深色侧边栏打架。
      只覆盖 .idp-* / .q-* / .logo-* 这些只属于新板块的类，不影响别的页面。
   ====================================================================== */
.idp-body, .q-body { background: transparent; color: var(--text); }

.idp-side, .idp-drop, .idp-spec, .idp-person, .idp-face, .idp-more, .idp-quickbtn,
.q-card, .q-plain, .q-thumb, .q-side, .q-stage, .q-canvas-box, .q-zoom, .q-zoom-btn,
.q-tabs, .logo-item, .logo-item img, .logo-row-thumb, .q-after-wrap {
    background: rgba(255, 255, 255, .03);
    border-color: rgba(255, 255, 255, .08);
    color: var(--text);
}

.idp-head, .idp-block, .q-block, .q-hero h1, .idp-side-head h1 { color: #e6edf3; }
.idp-side-head p, .idp-cost, .idp-msg, .idp-tip, .idp-opt, .q-hint, .q-sub, .q-try-label {
    color: var(--muted);
}

.idp-spec:hover, .idp-person:hover, .idp-quickbtn:hover, .q-thumb:hover, .q-zoom-btn:hover {
    border-color: rgba(138, 180, 255, .55);
}
.idp-spec.active, .idp-face.active {
    border-color: #6366f1;
    box-shadow: inset 0 0 0 1px #6366f1;
    background: rgba(99, 102, 241, .16);
}
.idp-person.active { background: #6366f1; border-color: #6366f1; color: #fff; }
.idp-topic.active { background: rgba(88, 166, 255, .16); color: #79b8ff; border-color: rgba(88, 166, 255, .35); }
.idp-color.active { border-color: #6366f1; box-shadow: 0 0 0 2px rgba(99, 102, 241, .35); }

.idp-go, .idp-upload, .q-btn-ink, .q-run { background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); }
.idp-go:hover:not([disabled]), .idp-upload:hover, .q-btn-ink:hover, .q-run:hover { background: #7c74f6; }
.idp-go[disabled] { background: rgba(255, 255, 255, .08); color: #8b949e; }
.q-btn-soft, .q-zoom-btn, .q-handle { background: rgba(255, 255, 255, .05); color: var(--text); }

.q-tabs { background: rgba(255, 255, 255, .05); }
.q-tab { color: var(--muted); }
.q-tab.active { background: rgba(255, 255, 255, .12); color: #e6edf3; }
.q-demo { background: #0d1424; }
.q-badge { background: rgba(0, 0, 0, .55); color: #fff; }
.logo-item { box-shadow: none; }
.logo-item:hover { box-shadow: 0 10px 24px rgba(0, 0, 0, .35); border-color: rgba(138, 180, 255, .55); }
.logo-item .logo-dl { background: #6366f1; }
.logo-item-loading { background: linear-gradient(100deg, rgba(255,255,255,.05) 30%, rgba(255,255,255,.12) 50%, rgba(255,255,255,.05) 70%); background-size: 200% 100%; }
.logo-err { background: rgba(248, 81, 73, .12); border-color: rgba(248, 81, 73, .35); }

/* ======================================================================
   智能抠图编辑器（cutout.php，版式照官方 /cutout/edit）—— 原样搬自同一套项目的 app.css
   ====================================================================== */
/* ==========================================================================
   智能抠图（cutout.php 入口页 + cutout_img.php 编辑器）
   官方这一块的主按钮是**黑底**（不是 AI 蓝），照它复刻
   ========================================================================== */
.ae-btn-ink { background: #18181b; color: #fff; }
.ae-btn-ink:hover { background: #27272a; }

/* 入口页左边那 2x2 的示例棋盘 */
.co-demo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.co-demo-card { margin: 0; border-radius: 18px; overflow: hidden; background: #fff;
                border: 1px solid #f0f1f3; aspect-ratio: 1 / 1; }
.co-demo-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s; }
.co-demo-card:hover img { transform: scale(1.03); }

.co-body { background: #f4f5f7; }
.co-main { max-width: 1520px; margin: 0 auto; padding: 18px 34px 60px; }
.co-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 6px 2px 14px; }
.co-head h1 { margin: 0; font-size: 22px; font-weight: 800; }
.co-head p { margin: 4px 0 0; color: #9aa0aa; font-size: 13px; }
.co-head-right { display: flex; gap: 10px; }
.co-tbtn { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 16px;
           border: 1px solid #e3e7ed; border-radius: 9px; background: #fff; color: #2c3138;
           font-size: 14px; cursor: pointer; font-family: inherit; }
.co-tbtn:hover { border-color: #c9d1da; }

.co-shell { display: flex; align-items: center; justify-content: center; background: #fff;
            border-radius: 16px; padding: 60px 24px; min-height: 480px; }
.co-pickcard { width: min(420px, 100%); border: 1px dashed #d8dde3; border-radius: 16px;
               padding: 44px 36px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.co-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
          height: 52px; border: 1px solid transparent; border-radius: 10px; font-size: 16px;
          font-weight: 600; cursor: pointer; font-family: inherit; text-decoration: none; }
.co-btn-ink { background: #18181b; color: #fff; }
.co-btn-ink:hover { background: #27272a; }
.co-btn-soft { background: #eef1f5; color: #2c3138; }
.co-btn-soft:hover { background: #e3e8ef; }
.co-btn:disabled { background: #b9c6d6; cursor: not-allowed; }

/* 编辑器 */
.co-editor { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start;
             background: #fff; border-radius: 16px; padding: 18px 22px 22px; }
.co-stage-wrap { min-width: 0; }
.co-stage { position: relative; display: flex; align-items: center; justify-content: center;
            min-height: 460px; border-radius: 10px; padding: 12px;
            /* 棋盘格 = 透明底 */
            background-color: #fff;
            background-image:
                linear-gradient(45deg, #e9ebee 25%, transparent 25%, transparent 75%, #e9ebee 75%),
                linear-gradient(45deg, #e9ebee 25%, transparent 25%, transparent 75%, #e9ebee 75%);
            background-size: 20px 20px;
            background-position: 0 0, 10px 10px; }
.co-stage canvas { display: block; max-width: 100%; }
.co-busy { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
           justify-content: center; gap: 10px; background: rgba(255,255,255,.72); color: #475569;
           font-size: 14px; border-radius: 10px; }
.co-busy i { width: 26px; height: 26px; border: 3px solid #dbe3ec; border-top-color: #18181b;
             border-radius: 50%; animation: co-spin .8s linear infinite; }
@keyframes co-spin { to { transform: rotate(360deg); } }

.co-thumbs { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.co-thumb { width: 58px; height: 58px; padding: 0; border: 1px solid #e6e9ee; border-radius: 8px;
            overflow: hidden; background: #f5f6f8; cursor: pointer; }
.co-thumb.sel { border-color: #18181b; box-shadow: 0 0 0 1px #18181b inset; }
.co-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.co-panel { display: flex; flex-direction: column; gap: 14px; }
.co-block { border: 1px solid #eef0f3; border-radius: 12px; padding: 12px 14px; }
.co-block h3 { margin: 0 0 10px; font-size: 13px; font-weight: 700; color: #3c4149; }
.co-types, .co-ratios { display: flex; flex-wrap: wrap; gap: 8px; }
.co-chip { height: 32px; padding: 0 12px; border: 1px solid transparent; border-radius: 8px;
           background: #f4f6f9; color: #3c4149; font-size: 13px; cursor: pointer; font-family: inherit; }
.co-chip.active { background: #eef1f5; border-color: #18181b; color: #18181b; font-weight: 600; }
.co-mini { margin-top: 10px; height: 30px; padding: 0 12px; border: 1px solid #e3e7ed; border-radius: 8px;
           background: #fff; color: #3c4149; font-size: 12.5px; cursor: pointer; font-family: inherit; }
.co-mini:hover { border-color: #c9d1da; }

.co-bgs { display: flex; gap: 10px; flex-wrap: wrap; }
.co-bg { width: 40px; height: 40px; border: 1px solid #e6e9ee; border-radius: 9px; cursor: pointer;
         padding: 0; position: relative; background-color: #fff;
         background-image:
             linear-gradient(45deg, #e9ebee 25%, transparent 25%, transparent 75%, #e9ebee 75%),
             linear-gradient(45deg, #e9ebee 25%, transparent 25%, transparent 75%, #e9ebee 75%);
         background-size: 14px 14px; background-position: 0 0, 7px 7px; }
.co-bg.active { border-color: #18181b; box-shadow: 0 0 0 1px #18181b; }
.co-bg-up { background: #f4f6f9; font-size: 16px; display: flex; align-items: center; justify-content: center; }

.co-foot { margin-top: auto; }
.co-cost { color: #8b9099; font-size: 12.5px; margin-bottom: 8px; min-height: 16px; }
.co-msg { margin-top: 8px; font-size: 13px; color: #64748b; min-height: 18px; }
.co-msg.error { color: #ba1a1a; }

/* 附加功能那一排 + AI 换背景素材 */
.co-ops { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.co-ops .co-chip { height: 36px; justify-content: center; display: inline-flex; align-items: center; }
.co-block-more { float: right; color: #8b9099; font-size: 12px; font-weight: 400; cursor: pointer; }
.co-block-more:hover { color: #18181b; }
.co-bglist { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-top: 4px; }
.co-bgitem { padding: 0; border: 1px solid #e6e9ee; border-radius: 8px; overflow: hidden;
             aspect-ratio: 1 / 1; background: #f5f6f8; cursor: pointer; }
.co-bgitem.on { border-color: #18181b; box-shadow: 0 0 0 1px #18181b; }
.co-bgitem img { width: 100%; height: 100%; object-fit: cover; display: block; }
.co-aibg { display: flex; gap: 6px; margin-top: 8px; }
.co-aibg input { flex: 1 1 auto; min-width: 0; height: 34px; padding: 0 10px; border: 1px solid #e3e7ed;
                 border-radius: 8px; font-size: 13px; font-family: inherit; }
.co-aibg button { flex: 0 0 auto; white-space: nowrap; height: 34px; padding: 0 12px; border: 0; border-radius: 8px;
                  background: #18181b; color: #fff; font-size: 13px; cursor: pointer; font-family: inherit; }
.co-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.co-tools button { height: 36px; border: 1px solid #e3e7ed; border-radius: 8px; background: #fff;
                   color: #3c4149; font-size: 13px; cursor: pointer; font-family: inherit; }
.co-tools button:hover { border-color: #c9d1da; }
.co-tools button.is-off { color: #b9bfc8; background: #f7f8fa; cursor: not-allowed; }

@media (max-width: 1080px) {
    .co-main { padding: 14px 16px 50px; }
    .co-editor { grid-template-columns: 1fr; }
    .co-demo { gap: 10px; }
    .co-stage { min-height: 300px; }
}

/* ======================================================================
   智能抠图编辑器深色适配（只覆盖 .co-* 这些只属于抠图页的类）
   —— 版式跟官方一致，底色换成站内的深色玻璃（棋盘格保留，才看得见透明底）
   ====================================================================== */
.co-body { background: transparent; color: var(--text); }
.co-head h1 { color: #e6edf3; }
.co-head p { color: var(--muted); }

.co-shell, .co-editor, .co-panel, .co-block, .co-pickcard, .co-tbtn,
.co-btn-soft, .co-chip, .co-thumb, .co-demo-card, .co-aibg,
.co-tools button, .co-color, .co-bg, .co-ratio {
    background: rgba(255, 255, 255, .03);
    border-color: rgba(255, 255, 255, .08);
    color: var(--text);
}
.co-shell, .co-editor { background: rgba(255, 255, 255, .03); }
.co-pickcard { border: 1px dashed rgba(203, 213, 225, .45); }
.co-tbtn:hover, .co-tools button:hover, .co-btn-soft:hover, .co-chip:hover, .co-thumb:hover {
    border-color: rgba(138, 180, 255, .5);
    background: rgba(255, 255, 255, .06);
}
.co-block h3 { color: #c9d1d9; }

/* 主按钮：官方是黑底，深色页面上改站内渐变，不然黑底看不见 */
.co-btn-ink, .co-aibg button, .co-tools button.is-on { background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); color: #fff; }
.co-btn-ink:hover, .co-aibg button:hover { background: #7c74f6; }
.co-btn:disabled { background: rgba(255, 255, 255, .08); color: #8b949e; }

/* 画布棋盘格：深色版（透明底照样看得出来） */
.co-stage {
    background-color: #12161f;
    background-image:
        linear-gradient(45deg, rgba(255, 255, 255, .06) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, .06) 75%),
        linear-gradient(45deg, rgba(255, 255, 255, .06) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, .06) 75%);
    background-size: 20px 20px;
    background-position: 0 0, 10px 10px;
}
.co-busy { background: rgba(13, 18, 32, .72); color: var(--text); }
.co-busy i { border-color: rgba(255, 255, 255, .18); border-top-color: #8b5cf6; }
.co-thumb { background: rgba(255, 255, 255, .04); }
.co-thumb.sel { border-color: #8ab4ff; box-shadow: 0 0 0 1px #8ab4ff inset; }
.co-chip.active, .co-ratio.active { background: rgba(99, 102, 241, .2); border-color: #6366f1; color: #c7d2fe; }
.co-cost, .co-msg { color: var(--muted); }

/* ======================================================================
   AI 消除：画布工具栏（撤销/重做/重新上传/下载）挪进左栏空位，
   不再单独占一列 —— 腾出来的宽度给右侧「生成记录 / 结果区」。
   ====================================================================== */
.ez-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 2px 0 18px;
    padding: 10px 12px;
    border: 1px dashed var(--line);
    border-radius: 12px;
    background: rgba(255, 255, 255, .03);
}
.ez-toolbar .ez-tb-sep { width: 1px; height: 18px; background: var(--line); }
.ez-toolbar .btn.sm { padding: 6px 12px; font-size: 12.5px; }

/* 右侧结果区：卡片跟着列宽走，一行能并排两张（原来固定 420px） */
.ez-results { gap: 14px; }
.ez-results .erase-card { width: min(500px, 100%); }
@media (max-width: 900px) {
    .ez-results .erase-card { width: 100%; }
}

/* ======================================================================
   AI 视频编辑（video_erase.php：去水印 / 去背景 / 变清晰 / 去字幕）—— 版式搬自同一套项目
   ====================================================================== */
/* ==========================================================================
   视频去水印（video_erase.php）· 版式复刻 designkit 的 video-watermark-remover
   ========================================================================== */
.ve-body { background: #f4f5f7; }
.ve-main { max-width: 1520px; margin: 0 auto; padding: 18px 34px 60px; }

.ve-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 6px 2px 16px; }
.ve-head h1 { margin: 0; font-size: 26px; font-weight: 800; }
.ve-head p { margin: 4px 0 0; color: #9aa0aa; font-size: 13px; }
.ve-head-right { display: flex; align-items: center; padding: 3px; border-radius: 999px; background: #eceef1; }
.ve-seg { display: inline-flex; align-items: center; justify-content: center; min-width: 72px; height: 36px;
          border-radius: 999px; font-size: 14px; font-weight: 600; color: #8b9099; text-decoration: none; }
.ve-seg.active { background: #fff; color: #16181d; box-shadow: 0 1px 4px rgba(16, 24, 40, .10); }

.ve-shell { display: grid; grid-template-columns: minmax(0, 480px) minmax(0, 1fr); gap: 44px; align-items: center;
            background: #fff; border-radius: 16px; padding: 44px 48px; min-height: 520px; }
.ve-demo { position: relative; border-radius: 10px; overflow: hidden; background: #0b0b0c; aspect-ratio: 1 / 1; }
.ve-demo video { display: block; width: 100%; height: 100%; object-fit: cover; }

.ve-card { border: 1px dashed #d8dde3; border-radius: 16px; padding: 48px 44px;
           display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.ve-card-row { display: flex; justify-content: center; gap: 12px; }
.ve-card-row .ve-btn { min-width: 200px; }
.ve-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
          height: 52px; border: 0; border-radius: 10px; font-size: 15px; font-weight: 600;
          cursor: pointer; font-family: inherit; }
.ve-btn-primary { background: #2b7fff; color: #fff; }
.ve-btn-primary:hover { background: #1f6ff0; }
.ve-btn-soft { background: #eef1f5; color: #2c3138; }
.ve-btn-soft:hover { background: #e3e8ef; }
.ve-ico { font-size: 15px; }

.ve-link { display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 12px;
           border-radius: 10px; background: #f4f6f9; width: 100%; max-width: 500px; margin: 0 auto; }
.ve-link input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; font-size: 15px;
                 color: #1f2937; outline: none; font-family: inherit; }
.ve-link input::placeholder { color: #9aa0aa; }
.ve-link button { height: 34px; padding: 0 16px; border: 0; border-radius: 8px; background: #fff;
                  font-size: 14px; white-space: nowrap; cursor: pointer; font-family: inherit; }
.ve-link-ico { color: #b7bcc5; }
.ve-card-tip { margin: 0; color: #9aa0aa; font-size: 14px; text-align: center; }

.ve-try { margin-top: 14px; padding-top: 14px; border-top: 1px solid #eef0f3; }
.ve-try-label { text-align: center; color: #9aa0aa; font-size: 13px; }
.ve-try-list { display: flex; justify-content: center; gap: 10px; margin-top: 12px; }
.ve-thumb { width: 56px; height: 56px; padding: 0; border: 1px solid #e6e9ee; border-radius: 8px;
            overflow: hidden; background: #f5f6f8; cursor: pointer; }
.ve-thumb:hover { border-color: #2b7fff; }
.ve-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ve-hint { margin: 6px 0 0; color: #a0a6b0; font-size: 12.5px; text-align: center; line-height: 1.7; }
.ve-warn { color: #f59e0b; font-weight: 600; }

#vePick.drag { outline: 2px dashed #2b7fff; outline-offset: -8px; }

/* ---------------------------------------------------------------- 编辑器 */
.ve-editor { background: #fff; border-radius: 16px; padding: 18px 22px 22px; }
.ve-tool-deck { display: flex; align-items: center; justify-content: space-between; gap: 16px;
                padding: 2px 2px 14px; }
.ve-fileinfo { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ve-file-thumb { width: 40px; height: 40px; border-radius: 8px; overflow: hidden; background: #eef1f5; flex: 0 0 auto; }
.ve-file-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ve-file-name { font-weight: 600; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ve-file-meta { color: #9aa0aa; font-size: 13px; }
.ve-tool-actions { display: flex; gap: 10px; }
.ve-tbtn { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 16px;
           border: 1px solid #e3e7ed; border-radius: 9px; background: #fff; color: #2c3138;
           font-size: 14px; cursor: pointer; font-family: inherit; }
.ve-tbtn:hover { border-color: #c9d1da; }

.ve-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; }
.ve-stage { position: relative; }
.ve-stage-tabs { display: flex; justify-content: center; gap: 8px; padding: 4px 0 10px; }
.ve-stage-tab { border: 0; background: transparent; color: #9aa0aa; font-size: 14px; cursor: pointer;
                padding: 4px 12px; border-radius: 8px; font-family: inherit; }
.ve-stage-tab.active { color: #16181d; font-weight: 600; background: #f2f4f7; }

.ve-player { position: relative; background: #000; border-radius: 10px; overflow: hidden;
             aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; }
.ve-player video { display: block; max-width: 100%; max-height: 100%; }
.ve-player #veOverlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ve-player-mask { position: absolute; left: 18px; bottom: 18px; width: 42px; height: 42px; border-radius: 50%;
                  border: 1px solid rgba(255,255,255,.75); color: #fff; display: flex; align-items: center;
                  justify-content: center; cursor: pointer; background: rgba(0,0,0,.25); }
.ve-player-mask span { margin-left: 2px; }

.ve-progress { display: flex; align-items: center; gap: 10px; margin-top: 10px; color: #64748b; font-size: 13px; }
.ve-progress-bar { flex: 1 1 auto; height: 6px; border-radius: 999px; background: #eef1f5; overflow: hidden; }
.ve-progress-bar i { display: block; height: 100%; width: 8%; background: #2b7fff; transition: width .4s; }

.ve-panel { border: 1px solid #eef0f3; border-radius: 12px; padding: 14px; display: flex;
            flex-direction: column; gap: 14px; min-height: 420px; }
.ve-panel-top { display: flex; align-items: center; gap: 10px; }
.ve-seg2 { flex: 1 1 auto; display: flex; padding: 3px; border-radius: 10px; background: #f2f4f7; }
.ve-seg2 button { flex: 1 1 0; height: 34px; border: 0; border-radius: 8px; background: transparent;
                  color: #8b9099; font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; }
.ve-seg2 button.active { background: #fff; color: #16181d; box-shadow: 0 1px 3px rgba(16,24,40,.10); }
.ve-close { border: 0; background: transparent; font-size: 17px; color: #6b7280; cursor: pointer; }

.ve-feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ve-feat { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
           gap: 8px; height: 88px; border: 1px solid transparent; border-radius: 10px; background: #f4f6f9;
           color: #3c4149; font-size: 13px; cursor: pointer; font-family: inherit; }
.ve-feat:hover { background: #eef1f5; }
.ve-feat.active { background: #eaf3ff; border-color: #2b7fff; color: #1858c4; }
.ve-feat-ico { font-size: 20px; }
.ve-crown { position: absolute; top: 6px; right: 8px; color: #f0a020; font-style: normal; }

.ve-manual-tip { margin: 0; color: #7b8290; font-size: 13px; line-height: 1.7; }
.ve-manual-tools { display: flex; gap: 10px; }
.ve-manual-feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }

.ve-more-title { margin: 16px 0 8px; font-size: 15px; font-weight: 700; }
.ve-more { display: flex; flex-direction: column; gap: 10px; }
.ve-more-row { display: flex; align-items: center; gap: 10px; height: 54px; padding: 0 14px;
               border: 1px solid transparent; border-radius: 10px; background: #f7f8fa;
               cursor: pointer; font-family: inherit; font-size: 14px; color: #3c4149; }
.ve-more-row:hover { background: #eef1f5; }
.ve-more-row.active { background: #eaf3ff; border-color: #2b7fff; color: #1858c4; }
.ve-more-ico { font-size: 18px; }
.ve-more-name { flex: 1 1 auto; text-align: left; }

.ve-res-row { display: flex; align-items: center; gap: 16px; margin-top: 12px; color: #5b6169; font-size: 13px; }
.ve-res-row label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }

.ve-panel-foot { margin-top: auto; padding-top: 14px; border-top: 1px solid #f0f2f5; }
.ve-cost { color: #8b9099; font-size: 12.5px; margin-bottom: 8px; }
.ve-start { width: 100%; height: 50px; border: 0; border-radius: 10px; background: #2b7fff; color: #fff;
            font-size: 16px; font-weight: 600; cursor: pointer; font-family: inherit; }
.ve-start:hover { background: #1f6ff0; }
.ve-start:disabled { background: #b9c6d6; cursor: not-allowed; }
.ve-msg { margin-top: 8px; font-size: 13px; color: #64748b; min-height: 18px; }
.ve-msg.error { color: #ba1a1a; }
.ve-msg.warn { color: #b45309; }

@media (max-width: 1080px) {
    .ae-grid, .ve-shell { grid-template-columns: 1fr; }
    .ve-layout { grid-template-columns: 1fr; }
    .ae-h1 { font-size: 40px; }
    .ve-main { padding: 14px 16px 50px; }
    .ve-shell, .ae-card, .ve-card { padding: 28px 20px; }
    .ve-feats { grid-template-columns: repeat(2, 1fr); }
    .ae-demo, .ve-demo { min-height: 260px; }
}


/* ======================================================================
   AI 视频编辑 深色适配（只覆盖 .ve-* / .kit-preview-tag 这些属于该板块的类）
   ====================================================================== */
.ve-body { background: transparent; color: var(--text); }
.ve-head h1 { color: #e6edf3; }
.ve-head p { color: var(--muted); }

.ve-shell, .ve-card, .ve-panel, .ve-block, .ve-seg, .ve-btn-soft, .ve-drop,
.ve-tool, .ve-list-item, .ve-clip {
    background: rgba(255, 255, 255, .03);
    border-color: rgba(255, 255, 255, .08);
    color: var(--text);
}
.ve-card { border: 1px dashed rgba(203, 213, 225, .45); }
.ve-btn-soft:hover, .ve-tool:hover, .ve-list-item:hover { border-color: rgba(138, 180, 255, .5); background: rgba(255, 255, 255, .06); }
.ve-btn-primary, .ve-start { background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); color: #fff; }
.ve-btn-primary:hover, .ve-start:hover { background: #7c74f6; }
.ve-seg { color: var(--muted); }
.ve-seg.active { background: rgba(255, 255, 255, .12); color: #e6edf3; }
.ve-demo, .ve-stage { background: #0d1424; }
.ve-try { border-top-color: rgba(255, 255, 255, .08); }
.ve-warn { color: #fbbf24; }
.ve-cost, .ve-msg, .ve-hint { color: var(--muted); }
.ve-msg.error, .ve-msg.err { color: #fca5a5; }
.ve-progress { background: rgba(255, 255, 255, .08); }
.ve-progress i { background: linear-gradient(135deg, #6366f1, #8b5cf6); }
.ve-list { background: rgba(255, 255, 255, .02); }
.ve-list-item.active { border-color: #8ab4ff; background: rgba(99, 102, 241, .14); }
.kit-preview-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(251, 191, 36, .18);
    color: #fbbf24;
    font-size: 11px;
    font-style: normal;
}
/* ======================================================================
   商品套图结果卡：每张图左上角的勾选框（配合「全部下载」）+ 卡片按钮
   ====================================================================== */
.kit-card .kit-pick {
    position: absolute;
    left: 8px;
    top: 8px;
    z-index: 4;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: rgba(13, 18, 32, .72);
    border: 1px solid rgba(255, 255, 255, .25);
    cursor: pointer;
}
.kit-card .kit-pick input {
    width: 14px;
    height: 14px;
    margin: 0;
    accent-color: #6366f1;
    cursor: pointer;
}
.kit-card .kit-pick:hover { border-color: #8ab4ff; }
.kit-actions .btn.sm { white-space: nowrap; }

/* ======================================================================
   AI 视频编辑：处理前 / 处理后 并排展示（右边的「处理后」没出片时显示「等待生成中…」）
   ====================================================================== */
.ve-sidebyside { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 900px) { .ve-sidebyside { grid-template-columns: 1fr; } }

.ve-col { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ve-col-head {
    font-size: 13px;
    font-weight: 600;
    color: #c9d1d9;
    padding: 2px 2px 0;
}
.ve-col-head::before {
    content: '';
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    margin-right: 6px;
    background: rgba(148, 163, 184, .75);
    vertical-align: middle;
}
.ve-col:last-child .ve-col-head::before { background: #6366f1; }

.ve-player-result { position: relative; }
.ve-waiting {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8b93a1;
    font-size: 13.5px;
    background: rgba(13, 18, 32, .55);
    letter-spacing: .02em;
}
.ve-waiting::before {
    content: '';
    width: 14px; height: 14px;
    margin-right: 8px;
    border: 2px solid rgba(255,255,255,.18);
    border-top-color: #8b5cf6;
    border-radius: 50%;
    animation: ve-wait-spin .9s linear infinite;
}
@keyframes ve-wait-spin { to { transform: rotate(360deg); } }
/* ======================================================================
   左侧边栏：带子项的板块做成「点击折叠」（客户要求）
   父项那一行是折叠开关，子项列表里第一项是板块首页本身
   ====================================================================== */
/* 折叠组：父项加粗 + 明显的折叠按钮；子项带竖线缩进，选中态更醒目（客户说原来看着累） */
.sb-group { display: block; }
.sb-group + .sb-group { margin-top: 2px; }

.sb-kids {
    display: none;
    margin-left: 12px;
    padding-left: 10px;
    border-left: 1px dashed rgba(148, 163, 184, .3);
}
.sb-group.open .sb-kids { display: block; animation: sb-kids-in .16s ease-out; }
@keyframes sb-kids-in {
    from { opacity: 0; transform: translateY(-3px); }
    to   { opacity: 1; transform: none; }
}

.sb-parent {
    width: 100%;
    border: 0;
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.sb-parent .sb-text { font-weight: 600; }

/* 折叠箭头：做成一个小方块按钮，展开时变蓝，一眼能看出「这里能点」 */
.sb-caret {
    margin-left: auto;
    width: 18px;
    height: 18px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: rgba(255, 255, 255, .07);
    color: #cbd5e1;
    font-size: 12px;
    line-height: 1;
    transition: transform .16s ease, background .16s ease, color .16s ease;
}
.sb-group.open .sb-parent .sb-caret {
    transform: rotate(90deg);
    background: rgba(99, 102, 241, .3);
    color: #c7d2fe;
}
.sb-parent:hover .sb-caret { background: rgba(255, 255, 255, .16); }

/* 子项：竖线里的小圆点 + 更清楚的 hover / 选中 */
.sb-kids .sb-item {
    padding: 8px 10px 8px 14px;
    font-size: 13px;
    color: #aab4c4;
    border-radius: 9px;
}
.sb-kids .sb-item:hover { background: rgba(255, 255, 255, .07); color: #eef2f7; }
.sb-kids .sb-item.sb-sub .sb-ico { width: 7px; height: 7px; background: rgba(255, 255, 255, .24); }
.sb-kids .sb-item.active {
    background: rgba(99, 102, 241, .2);
    border-color: rgba(129, 140, 248, .5);
    color: #fff;
    font-weight: 600;
}
.sb-kids .sb-item.active .sb-ico { background: #a5b4fc; box-shadow: 0 0 0 3px rgba(129, 140, 248, .25); }
/* ======================================================================
   AI 视频编辑：批量任务列表（每条视频一个单独处理框，客户要求）
   ====================================================================== */
.ve-tasks { margin-top: 14px; }
.ve-tasks-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.ve-tasks-head b { font-size: 14px; color: #e6edf3; }
.ve-tasks-hint { font-size: 12.5px; color: var(--muted); }

.ve-tasks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    gap: 10px;
}
.ve-task-box {
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 12px;
    background: rgba(255, 255, 255, .03);
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ve-task-box.cur { border-color: #8ab4ff; box-shadow: 0 0 0 1px rgba(138, 180, 255, .45); }
.ve-task-box.done { border-color: rgba(63, 185, 80, .5); }
.ve-task-box.failed { border-color: rgba(248, 81, 73, .45); }

.ve-task-cover {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    overflow: hidden;
    background: #0d1424;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ve-task-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ve-task-ph { color: rgba(255, 255, 255, .35); font-size: 18px; }
.ve-task-badge {
    position: absolute;
    left: 6px;
    bottom: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(13, 18, 32, .78);
    color: #cbd5e1;
    font-size: 11px;
}
.ve-task-box.done .ve-task-badge { color: #56d364; }
.ve-task-box.failed .ve-task-badge { color: #ff7b72; }
.ve-task-box.running .ve-task-badge { color: #79b8ff; }

.ve-task-name {
    font-size: 12.5px;
    color: #dfe7f1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ve-task-meta { font-size: 11.5px; color: var(--muted); }
.ve-task-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.ve-task-btn {
    flex: 1 1 auto;
    min-width: 0;
    height: 28px;
    padding: 0 8px;
    border: 0;
    border-radius: 8px;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: #fff;
    font-size: 12px;
    cursor: pointer;
    text-align: center;
    line-height: 28px;
    text-decoration: none;
    font-family: inherit;
}
.ve-task-btn.ghost { background: rgba(255, 255, 255, .06); color: #cbd5e1; }
.ve-task-btn:hover { filter: brightness(1.06); }

/* ======================================================================
   商品套图：「卖点图版式」挪进「图片类型与张数」的格子里（占其他图右边的空位）
   ====================================================================== */
.photo-item.photo-layout-cell {
    grid-column: span 2;          /* 3 列布局时正好填满「其他图」右边的空位 */
    gap: 6px;
    align-items: flex-start;
    justify-content: flex-start;
}
.photo-item.photo-layout-cell .p-name { font-weight: 600; }
.photo-item.photo-layout-cell .btn.sm { align-self: flex-start; }
.photo-item.photo-layout-cell .hint { font-size: 12px; }

@media (max-width: 620px) {
    .photo-item.photo-layout-cell { grid-column: span 1; }
}
/* ======================================================================
   商详 / A+：「包含模块（多选）」的 16 个模块卡片（官方那套，带一行说明小字）
   ====================================================================== */
#aplusModules .type-item {
    align-items: flex-start;
    padding: 9px 10px;
}
#aplusModules .type-item .t-main { overflow: visible; }
#aplusModules .t-desc {
    display: block;
    margin-top: 2px;
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--muted);
}
#aplusModules .type-item:has(> .m-check:checked) .t-desc { color: #9db4d8; }
/* ======================================================================
   AI 视频编辑：批量时把每条视频拆成一个「独立编辑器」并排排列（客户要求）
   每个编辑器自己一对 处理前 / 处理后 + 自己的处理按钮
   ====================================================================== */
.ve-tasks-head { align-items: center; }
#veStartAll { flex: none; min-width: 150px; }

.ve-tasks-grid {
    grid-template-columns: repeat(auto-fill, minmax(430px, 1fr));
    gap: 14px;
}
@media (max-width: 980px) { .ve-tasks-grid { grid-template-columns: 1fr; } }

.ve-task-box { padding: 10px; gap: 8px; }
.ve-task-head {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: space-between;
}
.ve-task-head .ve-task-name { font-size: 13px; font-weight: 600; color: #e6edf3; }
.ve-task-badge {
    position: static;
    flex: none;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .07);
    color: #cbd5e1;
    font-size: 11.5px;
}

.ve-task-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 560px) { .ve-task-pair { grid-template-columns: 1fr; } }
.ve-task-side { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ve-task-cap {
    font-size: 11.5px;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 6px;
}
.ve-task-mini {
    font-style: normal;
    font-size: 10.5px;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(251, 191, 36, .18);
    color: #fbbf24;
}
.ve-task-side video {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #0d1424;
    border-radius: 8px;
    display: block;
}
.ve-task-wait {
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    background: rgba(13, 18, 32, .6);
    border: 1px dashed rgba(148, 163, 184, .3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8b93a1;
    font-size: 12.5px;
}
.ve-task-box.cur { border-color: #8ab4ff; }
.ve-task-box .ve-task-btn { height: 30px; line-height: 30px; font-size: 12.5px; }

/* ======================================================================
   全站统一（客户要求 2026-10-04）：
   ① 所有「上传素材」的蚂蚁线框 —— 琥珀色，悬浮 / 拖拽更亮；
   ② 所有「开始 / 提交 / 生成」主按钮 —— 琥珀渐变（和套图「开始生成」同款）。
   ====================================================================== */
.uploader,
.q-card,
.idp-drop,
.co-pickcard,
.ve-card,
.fb-drop {
    border-color: rgba(245, 158, 11, .55) !important;
}
.uploader:hover,
.uploader.dragover,
.q-card:hover,
.idp-drop:hover,
.idp-drop.dragover,
.co-pickcard:hover,
.ve-card:hover,
#vePick.drag {
    border-color: #fbbf24 !important;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, .16);
}

.btn.primary,
.ve-start,
.ez-start,
.idp-go,
.q-run,
.co-btn-ink,
.q-btn-ink,
.ve-task-btn {
    background: linear-gradient(135deg, #fbbf24, #f97316) !important;
    color: #1c1003 !important;
    font-weight: 700;
    border: 0 !important;
    box-shadow: 0 6px 20px rgba(249, 115, 22, .32);
}
.btn.primary:hover,
.ve-start:hover,
.ez-start:hover,
.idp-go:hover,
.q-run:hover,
.co-btn-ink:hover,
.q-btn-ink:hover,
.ve-task-btn:hover {
    filter: brightness(1.06);
}
.btn.primary[disabled],
.ve-start[disabled],
.ez-start[disabled],
.idp-go[disabled],
.q-run[disabled],
.co-btn-ink[disabled],
.q-btn-ink[disabled],
.ve-task-btn[disabled] {
    opacity: .5;
    box-shadow: none;
    filter: none;
}

/* 爆款视频「视频类型与条数」：换成套图那种暗色 + 琥珀卡片（尺寸不变，只改样式） */
body.viral-page .type-item {
    background: #10131a;
    border: 1.5px solid #2e3646;
    border-radius: 9px;
}
body.viral-page .type-item:hover { border-color: rgba(245, 158, 11, .55) !important; }
body.viral-page .type-item:has(> .t-check:checked) {
    /* 深色主题里有一条 !important 的蓝色选中态，这里要用 !important 压过去 */
    border-color: #f59e0b !important;
    background: rgba(245, 158, 11, .07) !important;
    box-shadow: none !important;
}
body.viral-page .type-item .t-name { color: #e8eaed; }
body.viral-page .type-item small { color: #5c6472; }
body.viral-page .type-item input[type=checkbox] {
    appearance: none;
    -webkit-appearance: none;
    width: 15px;
    height: 15px;
    border-radius: 5px;
    border: 1.5px solid #2e3646;
    background: transparent;
    position: relative;
    cursor: pointer;
}
body.viral-page .type-item input[type=checkbox]:checked {
    background: #f59e0b;
    border-color: #f59e0b;
}
body.viral-page .type-item input[type=checkbox]:checked::after {
    content: "✓";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0b0e14;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}
body.viral-page .type-item .t-count {
    background: #0b0e14;
    border: 1px solid #2e3646;
    color: #e8eaed;
    border-radius: 8px;
    font-weight: 700;
    text-align: center;
}
body.viral-page .type-item .t-count:focus {
    outline: none;
    border-color: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, .18);
}

/* ============================================================================
   生成爆款视频：「视频类型与条数」↔「高级：自定义脚本」= 二选一（客户要求）
   ----------------------------------------------------------------------------
   这两块原来是分开的（类型在最上面、脚本折在最下面），现在并成一块、
   一起放到原「高级：自定义脚本」的位置，上面两个页签点着切。
   视觉沿用站内的玻璃卡片 + 渐变选中态，不引入新色板。
   ========================================================================= */
.gm-switch {
    border: 1px dashed var(--glass-line-2, rgba(255, 255, 255, .14));
    border-radius: var(--radius, 14px);
    padding: 10px 12px;
    background: rgba(255, 255, 255, .02);
}
.gm-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin: 0 0 10px;
    padding: 4px;
    border: 1px solid var(--glass-line, rgba(255, 255, 255, .06));
    border-radius: var(--r-md, 10px);
    background: rgba(0, 0, 0, .18);
}
.gm-tab {
    appearance: none;
    -webkit-appearance: none;
    text-align: center;
    padding: 8px 6px;
    border: 0;
    border-radius: var(--r-sm, 8px);
    background: transparent;
    color: var(--muted, #8b949e);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.gm-tab:hover { background: rgba(255, 255, 255, .05); color: #e5e7eb; }
.gm-tab.on {
    background: var(--grad, linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%));
    color: #fff;
    box-shadow: var(--glow, 0 6px 18px rgba(99, 102, 241, .15));
}
/* 页签里的内容原来都是独立 field，套进来之后别再叠一层外边距 */
.gm-pane > .field { margin: 0; }
.gm-pane > .types { margin-bottom: 8px; }
.gm-pane > .hint { margin-top: 8px; }
@media (max-width: 700px) {
    .gm-tabs { grid-template-columns: 1fr; }
}