/* 电商头图 / AI 主图生成 */
.mi-app {
    display: flex;
    /* 页面高度锁定，改由 .mi-main 内部滚动，避免左侧子菜单/右侧区域跟随滚动 */
    height: 100%;
    min-height: 0;
    overflow: hidden;
    background: #f6f7fb;
    --mi-brand: #1980fa;
    --mi-brand-2: #4da3ff;
    --mi-brand-soft: #e8f2ff;
    --mi-ink: #1f2430;
    --mi-muted: #8a95a8;
    --mi-line: #eef1f6;
    --mi-danger: #ff4d4f;
    /* 主区上下内边距，左右两栏高度计算需与之保持一致 */
    --mi-main-pt: 16px;
    --mi-main-pb: 8px;
}

.mi-app * { box-sizing: border-box; }

.mi-main {
    flex: 1;
    min-width: 0;
    height: 100%;
    min-height: 0;
    display: grid;
    grid-template-columns: 400px minmax(0, 1fr);
    /* 行高跟随容器，避免用 100vh 硬算导致顶部公告栏出现时底部溢出 */
    grid-template-rows: minmax(0, 1fr);
    align-items: stretch;
    gap: 18px;
    padding: var(--mi-main-pt) 20px var(--mi-main-pb);
    overflow-y: auto;
    /* 阻断滚动链：滚到底后不再带动外层容器 */
    overscroll-behavior: contain;
}

/* 左侧子菜单自身滚动也阻断链式滚动 */
.mi-app #menus_son .n-layout-sider-scroll-container {
    overscroll-behavior: contain;
}

@media (max-width: 1180px) {
    .mi-main { grid-template-columns: 1fr; grid-template-rows: auto; }
    .mi-panel { max-width: 520px; position: static; max-height: none; }
    .mi-panel-scroll { overflow: visible; }
    .mi-result {
        position: static;
        height: auto;
        min-height: 460px;
        max-height: none;
    }
    .mi-preview { min-height: 460px; }
}

/* ---------- 左侧表单 ---------- */
/* 与线上一致:面板整体固定,表单区内部滚动,计费/生成块常驻底部 */
.mi-panel {
    background: #fff;
    border: 1px solid var(--mi-line);
    border-radius: 14px;
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    max-height: 100%;
    min-height: 0;
    overflow: hidden;
}

.mi-panel-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 16px 16px 4px;
}

.mi-panel-footer {
    flex: none;
    border-top: 1px solid var(--mi-line);
    padding: 10px 16px 14px;
    background: #fff;
}

/* 快捷跳转 */
.mi-quickjump {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px 0 6px;
    margin-bottom: 2px;
    background: #fff;
}

.mi-quickjump button {
    border: 1px solid var(--mi-line);
    border-radius: 20px;
    background: #fff;
    color: #5b6473;
    font-size: 12px;
    font-family: inherit;
    padding: 4px 11px;
    cursor: pointer;
    transition: .15s;
}

.mi-quickjump button:hover {
    border-color: var(--mi-brand);
    color: var(--mi-brand);
}

/* 全部收起 */
.mi-panel-tools {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 2px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--mi-line);
}

.mi-panel-tools button {
    border: none;
    background: none;
    color: var(--mi-brand);
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
    padding: 2px 0;
}

.mi-sec {
    padding: 14px 0 12px;
    border-top: 1px solid var(--mi-line);
    scroll-margin-top: 46px;
}

/* 首个配置块上方已是「全部收起」的分隔线,不再重复 */
#miSecMode { border-top: none; }

.mi-sec-title {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    border: none;
    background: none;
    padding: 0;
    text-align: left;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--mi-ink);
    margin-bottom: 10px;
    cursor: pointer;
}

.mi-sec.collapsed { padding-bottom: 4px; }

.mi-sec.collapsed .mi-sec-body { display: none; }

.mi-chev {
    position: relative;
    flex: none;
    margin-left: auto;
    width: 14px;
    height: 14px;
    transition: transform .2s;
}

.mi-chev::before {
    content: "";
    position: absolute;
    top: 1px;
    left: 3px;
    width: 7px;
    height: 7px;
    border-right: 1.6px solid #b3bac6;
    border-bottom: 1.6px solid #b3bac6;
    transform: rotate(45deg);
}

.mi-sec.collapsed .mi-chev { transform: rotate(-90deg); }

.mi-sec-title::before {
    content: "";
    width: 3px;
    height: 13px;
    border-radius: 2px;
    background: var(--mi-brand);
}

.mi-sec-title em {
    color: var(--mi-danger);
    font-style: normal;
}

.mi-sec-title .mi-sub {
    font-size: 11px;
    font-weight: 400;
    color: var(--mi-muted);
}

/* 分段选择 */
.mi-seg {
    display: flex;
    background: #f1f4f9;
    border-radius: 10px;
    padding: 3px;
    gap: 3px;
}

.mi-seg-item {
    flex: 1;
    border: none;
    background: none;
    border-radius: 8px;
    padding: 8px 6px;
    font-size: 13px;
    color: var(--mi-muted);
    cursor: pointer;
    font-family: inherit;
    transition: .15s;
}

/* 仅生成模式:图标 + 标题/副标题左对齐(不影响极速/节省等其它分段) */
#miModeSeg .mi-seg-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px;
    text-align: left;
}

/* 生成模式左侧图标 */
.mi-seg-ico {
    flex: none;
    font-size: 15px;
    line-height: 1;
    color: #9aa5b6;
    transition: .15s;
}

.mi-seg-item.on .mi-seg-ico { color: var(--mi-brand); }

.mi-seg-txt {
    display: block;
    min-width: 0;
}

.mi-seg-item small {
    display: block;
    font-size: 10px;
    color: #9aa5b6;
    margin-top: 2px;
    line-height: 1.4;
}

.mi-seg-item.on {
    background: #fff;
    color: var(--mi-brand);
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(25, 128, 250, .15);
}

.mi-seg-item.on small { color: var(--mi-brand-2); }

.mi-mode-note {
    margin: 8px 0 0;
    font-size: 11.5px;
    line-height: 1.6;
    color: var(--mi-muted);
}

/* 上传区 */
.mi-drop {
    border: 1.5px dashed #cfd8e6;
    border-radius: 12px;
    background: #fafbfe;
    padding: 18px 12px;
    text-align: center;
    color: var(--mi-muted);
    font-size: 13px;
    cursor: pointer;
    transition: .15s;
}

.mi-drop:hover,
.mi-drop.dragover {
    border-color: var(--mi-brand);
    background: var(--mi-brand-soft);
}

.mi-drop .mi-drop-ico {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--mi-brand-soft);
    color: var(--mi-brand);
    display: grid;
    place-items: center;
    margin: 0 auto 8px;
}

.mi-drop .mi-drop-ico svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linejoin: round;
}

.mi-drop .mi-drop-main {
    font-size: 13px;
    font-weight: 400;
    color: var(--mi-muted);
}

.mi-drop .mi-drop-main em {
    color: var(--mi-danger);
    font-style: normal;
    margin-right: 1px;
}

.mi-drop .mi-drop-tip {
    font-size: 12px;
    color: var(--mi-muted);
    margin-top: 4px;
    line-height: 1.6;
}

.mi-drop-sm { padding: 12px 10px; }
.mi-drop-sm .mi-drop-main { font-size: 12px; }

/* 爆款复刻方式:爆款复刻 / 原图换品 */
.mi-ref-modes {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

.mi-ref-mode {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--mi-line);
    border-radius: 10px;
    background: #fff;
    padding: 7px 9px;
    text-align: left;
    font-family: inherit;
    cursor: pointer;
    transition: .15s;
}

.mi-ref-mode strong {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--mi-ink);
}

.mi-ref-mode small {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    color: var(--mi-muted);
    line-height: 1.4;
}

.mi-ref-mode.on {
    border-color: var(--mi-brand);
    background: var(--mi-brand-soft);
}

.mi-ref-mode.on strong { color: var(--mi-brand); }

.mi-ref-mode[disabled] {
    opacity: .5;
    cursor: not-allowed;
}

/* 参考图上传:缩略图 + 加号按钮 + 说明(同排显示) */
.mi-ref-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 9px;
    border: 1px dashed rgba(25, 128, 250, .35);
    border-radius: 10px;
    background: rgba(25, 128, 250, .04);
    transition: background .15s, border-color .15s;
}

.mi-thumbs.mi-ref-thumbs { margin-top: 0; }

.mi-ref-add {
    flex: none;
    width: 62px;
    height: 62px;
    border: 1.5px dashed #cfd8e6;
    border-radius: 10px;
    background: #fafbfe;
    color: #9db8dd;
    font-size: 20px;
    line-height: 1;
    font-family: inherit;
    cursor: pointer;
    transition: .15s;
}

.mi-ref-add:hover { border-color: var(--mi-brand); color: var(--mi-brand); }

.mi-ref-note {
    flex: 1 1 150px;
    margin: 0;
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--mi-muted);
}

.mi-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.mi-thumbs:empty { display: none; }

.mi-thumb {
    position: relative;
    width: 62px;
    height: 62px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--mi-line);
    background: #f1f4f9;
}

.mi-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mi-thumb .mi-thumb-del {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    border: none;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    display: grid;
    place-items: center;
    padding: 0;
}

/* 开关 */
.mi-switch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--mi-muted);
    cursor: pointer;
    user-select: none;
}

.mi-switch .mi-tt {
    position: relative;
    width: 34px;
    height: 20px;
    border-radius: 10px;
    background: #d8dfea;
    transition: .18s;
    flex: none;
}

.mi-switch .mi-tt::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
    transition: .18s;
}

.mi-switch.on .mi-tt { background: var(--mi-brand); }
.mi-switch.on .mi-tt::after { left: 16px; }

.mi-replica { margin-top: 10px; }

/* chips */
.mi-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* 图片尺寸:4列网格,比例图标在上、像素值在下,自定义项独占一行 */
.mi-chips--sizes {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
}

.mi-chips--sizes .mi-chip {
    width: 100%;
    min-width: 0;
    height: 48px;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    padding: 5px 9px;
    line-height: 1;
}

.mi-chip-main {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.mi-chip-main em { font-style: normal; }

.mi-chip-sub {
    color: #9b9ea8;
    font-size: 10.5px;
    font-weight: 400;
    white-space: nowrap;
}

.mi-chips--sizes .mi-chip.on .mi-chip-sub { color: rgba(25, 128, 250, .82); }

.mi-chips--sizes .mi-chip--custom {
    grid-column: 1 / -1;
    flex-direction: row;
    height: 38px;
    gap: 8px;
}

.mi-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid #e3e9f2;
    background: #fff;
    border-radius: 8px;
    padding: 6px 15px;
    font-size: 12px;
    color: #4b5568;
    cursor: pointer;
    font-family: inherit;
    transition: .15s;
    line-height: 1.2;
}

.mi-chip:hover { border-color: var(--mi-brand-2); color: var(--mi-brand); }

.mi-chip.on {
    border-color: var(--mi-brand);
    background: var(--mi-brand-soft);
    color: var(--mi-brand);
    font-weight: 600;
}

/* 平台图标(品牌 logo 字形,需足够大才看得清图形) */
.mi-plat-ico {
    flex: none;
    width: 20px;
    height: 20px;
    font-style: normal;
    font-size: 19px;
    line-height: 20px;
    text-align: center;
    display: inline-block;
    /* 字体图标只有 400 一档，选中态按钮的 font-weight:600 会触发合成加粗导致图标变深变粗，这里锁死 */
    font-weight: 400;
}

/* 抖音电商/速卖通改用内联 SVG 绘制(字体字形是实心色块) */
.mi-plat-ico--svg {
    display: block;
    flex: none;
}

/* 京东使用独立 SVG 资源 */
.mi-plat-ico--img {
    display: block;
    flex: none;
}

/* 页面内的图标 symbol 容器不占位 */
.mi-svg-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.mi-ratio {
    display: inline-block;
    border: 1.4px solid currentColor;
    border-radius: 2px;
    opacity: .75;
}

.mi-ratio-custom {
    width: 12px;
    height: 12px;
    border-style: dashed;
}

/* 自定义尺寸项里的齿轮图标(对齐线上 el-icon-setting) */
.mi-chip-custom-ico {
    flex: none;
    width: 13px;
    height: 13px;
    opacity: .72;
}

/* 带标题的下拉区域 */
.mi-field-title {
    font-size: 12px;
    color: #6b7688;
    margin: 12px 0 6px;
}

.mi-row2 {
    display: flex;
    gap: 10px;
}

/* 国家 / 语言:自定义下拉(不使用原生 select 的默认样式) */
.mi-select {
    position: relative;
    flex: 1;
    min-width: 0;
}

.mi-select-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    height: 36px;
    padding: 0 10px;
    border: 1px solid #e3e9f2;
    border-radius: 9px;
    background: #fff;
    color: #46546a;
    font-size: 13px;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}

.mi-select-btn:hover { border-color: var(--mi-brand-2); }

.mi-select.open .mi-select-btn {
    border-color: var(--mi-brand);
    box-shadow: 0 0 0 3px rgba(25, 128, 250, .1);
}

.mi-select-val {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.mi-select-arrow {
    flex: none;
    width: 6px;
    height: 6px;
    margin-top: -3px;
    border-right: 1.5px solid #a8b1c1;
    border-bottom: 1.5px solid #a8b1c1;
    transform: rotate(45deg);
    transition: transform .18s, margin-top .18s;
}

.mi-select.open .mi-select-arrow {
    margin-top: 3px;
    transform: rotate(-135deg);
}

.mi-select-menu {
    position: absolute;
    z-index: 30;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    display: none;
    max-height: 216px;
    overflow-y: auto;
    padding: 5px;
    border: 1px solid #e9edf5;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 10px 26px rgba(31, 42, 61, .14);
}

.mi-select.open .mi-select-menu {
    display: block;
    animation: mi-select-in .14s ease-out;
}

/* 下方空间不足时向上展开 */
.mi-select.open-up .mi-select-menu {
    top: auto;
    bottom: calc(100% + 6px);
}

@keyframes mi-select-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: none; }
}

.mi-select-opt {
    display: block;
    width: 100%;
    padding: 7px 10px;
    border: none;
    border-radius: 7px;
    background: none;
    color: #4b5568;
    font-size: 12.5px;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background .13s, color .13s;
}

.mi-select-opt:hover { background: #f2f6fd; color: var(--mi-brand); }

.mi-select-opt.on {
    background: var(--mi-brand-soft);
    color: var(--mi-brand);
    font-weight: 600;
}

.mi-addon { margin-top: 10px; }

.mi-addon input {
    width: 100%;
    height: 36px;
    border: 1px solid #e3e9f2;
    border-radius: 8px;
    padding: 0 10px;
    font-size: 12.5px;
    color: var(--mi-ink);
    font-family: inherit;
    outline: none;
}

.mi-addon input:focus { border-color: var(--mi-brand); }

/* 自定义尺寸(对齐线上 custom-size-box) */
.mi-custom-size {
    display: none;
    margin-top: 10px;
    padding: 11px 12px 10px;
    border: 1px solid #eceef1;
    border-radius: 10px;
    background: #fafbfc;
    transition: border-color .16s, background-color .16s;
}

.mi-custom-size.show { display: block; }

.mi-custom-size-fields {
    display: flex;
    align-items: flex-end;
    gap: 9px;
}

.mi-custom-size-multiply {
    flex: none;
    padding-bottom: 9px;
    color: #9b9ea8;
    font-size: 13px;
}

.mi-custom-field {
    flex: 1;
    min-width: 0;
}

.mi-custom-field-label {
    display: block;
    margin-bottom: 5px;
    color: #5a5d68;
    font-size: 11px;
    font-weight: 600;
}

.mi-custom-field-control {
    display: flex;
    align-items: center;
    height: 34px;
    padding: 0 9px;
    border: 1px solid #eceef1;
    border-radius: 8px;
    background: #fff;
    color: #9b9ea8;
    transition: border-color .16s, box-shadow .16s;
}

.mi-custom-field-control:focus-within {
    border-color: var(--mi-brand);
    box-shadow: 0 0 0 3px rgba(25, 128, 250, .12);
}

.mi-custom-field-control input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--mi-ink);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    appearance: textfield;
}

.mi-custom-field-control input::-webkit-inner-spin-button,
.mi-custom-field-control input::-webkit-outer-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

.mi-custom-field-control > span {
    flex: none;
    margin-left: 4px;
    font-size: 10px;
}

.mi-custom-size-hint {
    display: flex;
    align-items: flex-start;
    gap: 5px;
    margin: 8px 0 0;
    color: #9b9ea8;
    font-size: 11px;
    line-height: 1.45;
}

.mi-custom-size-hint-ico {
    flex: none;
    margin-top: 2px;
    width: 11px;
    height: 11px;
    border: 1px solid currentColor;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    font-style: normal;
    line-height: 1;
}

.mi-custom-size-hint-ico::before { content: "i"; }

.mi-custom-size.has-error {
    border-color: rgba(255, 77, 79, .42);
    background: #fff8f8;
}

.mi-custom-size.has-error .mi-custom-size-hint { color: var(--mi-danger); }

.mi-custom-size.has-error .mi-custom-size-hint-ico::before { content: "!"; }

/* 生图质量(对齐线上 ql-slider) */
.mi-ql { padding: 0; }

.mi-ql-track {
    position: relative;
    height: 10px;
    margin: 18px 14px 0;
    border-radius: 999px;
    background: #edeef1;
    cursor: pointer;
    touch-action: none;
    user-select: none;
    outline: none;
}

.mi-ql-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 10px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--mi-brand-2), var(--mi-brand));
}

.mi-ql-stop {
    position: absolute;
    top: 2.5px;
    width: 5px;
    height: 5px;
    margin-left: -2.5px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 1px rgba(22, 22, 26, .12);
}

.mi-ql-thumb {
    position: absolute;
    top: 50%;
    left: 0;
    width: 30px;
    height: 20px;
    margin-left: -15px;
    transform: translateY(-50%);
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 3px 10px rgba(22, 22, 26, .2), 0 0 0 1px rgba(25, 128, 250, .2);
    transition: box-shadow .16s, transform .16s;
}

/* 手柄内的三条竖纹 */
.mi-ql-thumb::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 9px;
    opacity: .45;
    background:
        linear-gradient(var(--mi-brand), var(--mi-brand)) 0/2px 100% no-repeat,
        linear-gradient(var(--mi-brand), var(--mi-brand)) 5px/2px 100% no-repeat,
        linear-gradient(var(--mi-brand), var(--mi-brand)) 10px/2px 100% no-repeat;
}

.mi-ql-track:hover .mi-ql-thumb,
.mi-ql-track:focus-visible .mi-ql-thumb {
    transform: translateY(-50%) scale(1.05);
    box-shadow: 0 7px 18px rgba(25, 128, 250, .3), 0 0 0 1px rgba(25, 128, 250, .35);
}

.mi-ql-marks {
    display: flex;
    justify-content: space-between;
    margin: 12px 14px 0;
    font-size: 12.5px;
    color: #9b9ea8;
}

.mi-ql-marks span {
    cursor: pointer;
    transition: color .15s;
}

.mi-ql-marks span:hover { color: var(--mi-brand); }

.mi-ql-info {
    position: relative;
    margin-top: 12px;
    padding: 13px 13px 12px;
    border: 1px solid rgba(25, 128, 250, .18);
    border-radius: 12px;
    background: linear-gradient(135deg, #f2f8ff, #fff 54%, #f8fafc);
    box-shadow: 0 6px 18px rgba(25, 128, 250, .08), 0 1px 2px rgba(22, 22, 26, .04);
}

.mi-ql-line {
    display: flex;
    align-items: center;
    gap: 7px;
    line-height: 1.3;
}

.mi-ql-badge {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--mi-brand);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    flex-shrink: 0;
}

.mi-ql-name {
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--mi-brand);
}

.mi-ql-desc {
    margin: 7px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: #5a5d68;
}

.mi-ql-cost {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 9px 0 0;
    font-size: 11.5px;
    line-height: 1.45;
    color: #5a5d68;
}

.mi-ql-cost span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 7px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(25, 128, 250, .12);
}

.mi-ql-ico {
    width: 12px;
    height: 12px;
    fill: var(--mi-brand);
    flex: none;
}

.mi-ql-cost b {
    font-weight: 700;
    color: var(--mi-brand);
}

/* 生成数量 */
.mi-counts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.mi-count {
    flex: 1;
    min-width: 56px;
    border: 1px solid #e3e9f2;
    background: #fff;
    border-radius: 8px;
    padding: 8px 4px;
    font-size: 12.5px;
    color: #4b5568;
    cursor: pointer;
    font-family: inherit;
    transition: .15s;
}

.mi-count:hover { border-color: var(--mi-brand-2); color: var(--mi-brand); }

.mi-count.on {
    border-color: var(--mi-brand);
    background: var(--mi-brand-soft);
    color: var(--mi-brand);
    font-weight: 600;
}

/* 套图模式:与线上 opt-chip 一致(仅主题色替换为品牌蓝) */
.mi-suite-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 7px;
}

.mi-suite-tab {
    flex: 1;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 6px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: #f1f2f4;
    font-size: 13px;
    color: #5a5d68;
    cursor: pointer;
    font-family: inherit;
    transition: all .16s ease;
}

.mi-suite-tab:hover { background: #e9eaed; color: #16161a; }

.mi-suite-tab.on {
    background: var(--mi-brand-soft);
    border-color: var(--mi-brand);
    color: var(--mi-brand);
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(25, 128, 250, .14);
}

.mi-suite-hint {
    margin: 8px 0 0;
    font-size: 12px;
    color: var(--mi-muted);
    line-height: 1.5;
}

/* 选择镜头:与线上 adv-card 一致 */
.mi-adv-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mi-adv-card {
    border: 1px solid #eceef1;
    border-radius: 12px;
    background: #fafbfc;
    overflow: hidden;
    transition: border-color .16s, box-shadow .16s, background .16s;
}

.mi-adv-card:not(.off) {
    border-color: var(--mi-brand);
    background: #fff;
    box-shadow: 0 2px 10px rgba(25, 128, 250, .07);
}

.mi-adv-card__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    cursor: pointer;
    user-select: none;
}

.mi-adv-card__check {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid #c7cad1;
    border-radius: 6px;
    font-size: 12px;
    line-height: 1;
    color: #fff;
    transition: all .15s;
}

.mi-adv-card__check i { opacity: 0; font-style: normal; }

.mi-adv-card__check.on {
    background: var(--mi-brand);
    border-color: var(--mi-brand);
}

.mi-adv-card__check.on i { opacity: 1; }

.mi-adv-card__meta {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.mi-adv-card__label {
    font-size: 13px;
    font-weight: 600;
    color: var(--mi-ink);
    line-height: 1.3;
}

.mi-adv-card.off .mi-adv-card__label {
    color: #5a5d68;
    font-weight: 500;
}

.mi-adv-card__short {
    font-size: 12px;
    color: var(--mi-muted);
    line-height: 1.25;
}

.mi-adv-card__body { padding: 0 14px 14px; }

.mi-adv-imgs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.mi-adv-thumb {
    position: relative;
    width: 56px;
    height: 56px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #eceef1;
    background: #f4f5f7;
}

.mi-adv-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mi-adv-thumb__del {
    position: absolute;
    top: 1px;
    right: 1px;
    width: 16px;
    height: 16px;
    padding: 0;
    border: none;
    border-radius: 0 0 0 6px;
    background: rgba(0, 0, 0, .5);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
}

.mi-adv-thumb__del:hover { background: var(--mi-brand); }

.mi-adv-thumb--add {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed #c7cad1;
    color: var(--mi-muted);
    background: transparent;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    font-family: inherit;
}

.mi-adv-thumb--add:hover {
    border-color: var(--mi-brand);
    color: var(--mi-brand);
    background: var(--mi-brand-soft);
}

.mi-adv-borrow {
    margin: 8px 0 0;
    font-size: 12px;
    color: var(--mi-muted);
}

.mi-adv-style { margin-top: 10px; }

.mi-adv-style__label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--mi-ink);
    margin-bottom: 6px;
}

.mi-adv-style__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.mi-adv-style__chip {
    padding: 5px 12px;
    border: 1px solid #eceef1;
    border-radius: 999px;
    background: #fff;
    font-size: 12px;
    color: #5a5d68;
    cursor: pointer;
    font-family: inherit;
    transition: all .15s;
}

.mi-adv-style__chip:hover:not(.on) {
    border-color: #c7cad1;
    color: #16161a;
}

.mi-adv-style__chip.on {
    border-color: var(--mi-brand);
    color: var(--mi-brand);
    background: var(--mi-brand-soft);
    font-weight: 500;
}

.mi-adv-style__tip {
    margin: 8px 0 0;
    font-size: 11px;
    color: var(--mi-muted);
    line-height: 1.4;
}

.mi-adv-prompt {
    width: 100%;
    margin-top: 10px;
    padding: 8px 10px;
    border: 1px solid #eceef1;
    border-radius: 8px;
    font-size: 12px;
    font-family: inherit;
    color: var(--mi-ink);
    resize: vertical;
    outline: none;
    line-height: 1.6;
    transition: border-color .15s;
}

.mi-adv-prompt:focus { border-color: var(--mi-brand); }

/* 是否包含价格 */
.mi-price-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
}

.mi-price-label {
    font-size: 12px;
    color: #6b7688;
    flex: none;
}

/* 创意提示词:与线上 prompt-box 结构一致 */
.mi-prompt-box {
    border: 1px solid #eceef1;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 1px 2px rgba(22, 22, 26, .04), 0 2px 8px rgba(22, 22, 26, .04);
    transition: border-color .16s, box-shadow .16s;
}

.mi-prompt-box:focus-within {
    border-color: var(--mi-brand);
    box-shadow: 0 0 0 3px rgba(25, 128, 250, .12);
}

.mi-prompt-box__system {
    background: linear-gradient(180deg, #fbfbfc, #f5f6f8);
    padding: 11px 14px 12px;
    border-bottom: 1px solid #eceef1;
}

.mi-prompt-box__cap {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    font-size: 11px;
    line-height: 1;
}

.mi-pb-ico {
    display: inline-flex;
}

.mi-pb-ico svg {
    width: 13px;
    height: 13px;
    fill: none;
    stroke: #aeb2bb;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mi-prompt-box__cap--edit .mi-pb-ico svg { stroke: var(--mi-brand); }

.mi-cap-strong {
    font-weight: 600;
    color: #7c8089;
    letter-spacing: .2px;
}

.mi-cap-weak { color: #b3b7bf; }

.mi-cap-weak::before {
    content: "·";
    margin-right: 5px;
    color: #d2d5db;
}

.mi-prompt-box__text {
    margin: 9px 0 0;
    font-size: 12.5px;
    line-height: 1.66;
    color: #6c7079;
    user-select: none;
    max-height: 180px;
    overflow-y: auto;
}

.mi-prompt-box__edit { padding: 11px 14px 5px; }

.mi-prompt-box__user {
    width: 100%;
    display: block;
    border: none;
    padding: 8px 0 11px;
    min-height: 62px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--mi-ink);
    resize: vertical;
    outline: none;
    box-sizing: border-box;
    font-family: inherit;
    background: transparent;
}

.mi-prompt-box__user::placeholder { color: #bcc0c8; }

.mi-prompt-box__hint {
    margin: 9px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: #9b9ea8;
}

/* 高级模式:完整提示词(与线上 prompt-box--advanced 一致) */
.mi-prompt-box--advanced .mi-prompt-box__edit { padding-top: 12px; }

.mi-prompt-box--advanced .mi-prompt-box__user {
    min-height: 132px;
    padding-bottom: 11px;
}

/* 算力 / 消耗 / 生成按钮 */
.mi-points {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 0 10px;
    font-size: 12.5px;
    color: #6b7688;
}

.mi-points b { color: var(--mi-ink); }

.mi-points .mi-balance b { color: var(--mi-brand); font-size: 14px; }

.mi-points .mi-cost { margin-left: auto; }

.mi-recharge {
    border: 1px solid var(--mi-brand);
    background: #fff;
    color: var(--mi-brand);
    border-radius: 6px;
    padding: 3px 10px;
    font-size: 12px;
    font-family: inherit;
    line-height: 1.6;
    text-decoration: none;
    cursor: pointer;
    flex: none;
}

.mi-recharge:hover { background: var(--mi-brand-soft); }

.mi-seg-line { margin-bottom: 12px; }

.mi-gen {
    width: 100%;
    border: none;
    border-radius: 10px;
    padding: 13px 0;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    font-family: inherit;
    background: linear-gradient(90deg, #1980fa 0%, #4da3ff 55%, #7b7bff 100%);
    box-shadow: 0 6px 16px rgba(25, 128, 250, .28);
    transition: .18s;
    letter-spacing: .5px;
}

.mi-gen:hover { filter: brightness(1.05); }

.mi-gen:disabled {
    cursor: not-allowed;
    background: #cfd8e6;
    box-shadow: none;
    color: #fff;
}

.mi-gen.busy { background: #9ec7ff; box-shadow: none; }

/* 算力不足:可点击(点击引导充值),用告警色区分 */
.mi-gen.lack {
    background: linear-gradient(90deg, #ff9a4d 0%, #ff7a45 100%);
    box-shadow: 0 6px 16px rgba(255, 122, 69, .24);
}

.mi-gen.lack:hover { filter: brightness(1.04); }

.mi-gen-tip {
    margin: 8px 0 0;
    text-align: center;
    font-size: 11.5px;
    color: #ff8b3d;
    background: #fff7ef;
    border: 1px solid #ffe2c8;
    border-radius: 8px;
    padding: 6px 8px;
}

.mi-gen-tip.lack {
    color: var(--mi-danger);
    background: #fff2f0;
    border-color: #ffccc7;
}

/* ---------- 右侧 ---------- */
.mi-result {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: auto;
    min-height: 460px;
    max-height: none;
}

.mi-banner {
    display: flex;
    gap: 10px;
    background: #fff8e6;
    border: 1px solid #ffe1a8;
    border-radius: 12px;
    padding: 12px 14px;
}

.mi-banner-ico {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ffb020;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    display: grid;
    place-items: center;
    flex: none;
    margin-top: 1px;
}

.mi-banner b {
    display: block;
    font-size: 13px;
    color: #8a5a00;
}

.mi-banner p {
    margin: 4px 0 0;
    font-size: 11.5px;
    line-height: 1.6;
    color: #a97a20;
}

/* 空状态 / 引导 */
.mi-preview {
    flex: 1;
    min-height: 0;
    background: #fff;
    border: 1px solid var(--mi-line);
    border-radius: 16px;
    padding: 30px 26px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: auto;
}

.mi-preview svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* 空状态：上传引导 */
.mi-empty {
    width: 100%;
    max-width: 560px;
    border: 1px dashed #d8e2f2;
    border-radius: 16px;
    padding: 30px 20px;
    background: linear-gradient(135deg, #fafcff, #f4f8ff);
    color: var(--mi-muted);
}

/* 引导框与示意图同时存在时留出间距 */
.mi-empty + .mi-hero { margin-top: 14px; }

.mi-empty-ico {
    width: 46px;
    height: 46px;
    margin: 0 auto 10px;
    border-radius: 13px;
    background: var(--mi-brand-soft);
    color: var(--mi-brand);
    display: grid;
    place-items: center;
}

.mi-empty-ico svg { width: 24px; height: 24px; }

.mi-empty b {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: var(--mi-ink);
    margin-bottom: 6px;
}

.mi-empty span { font-size: 12.5px; line-height: 1.8; }

/* 有图：单图 -> 箭头 -> 四宫格 */
.mi-hero {
    width: 100%;
    max-width: 560px;
    height: 236px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-radius: 16px;
    background: linear-gradient(135deg, #eaf3ff, #f7fbff);
    margin-bottom: 0;
}

.mi-hero-ph {
    background: linear-gradient(135deg, #d8e8ff, #eef5ff);
    border-radius: 12px;
    display: grid;
    place-items: center;
    color: #9db8dd;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.mi-hero-ph svg { width: 22px; height: 22px; }

.mi-hero-single { height: 100%; }

.mi-hero-arrow {
    color: #9fb6d4;
    font-size: 20px;
    line-height: 1;
}

.mi-hero-grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 10px;
    height: 100%;
}

/* 介绍区 */
.mi-intro { margin-top: 16px; }

.mi-kicker {
    font-size: 12px;
    font-weight: 700;
    color: var(--mi-brand);
}

.mi-intro h2 {
    margin: 8px 0 6px;
    font-size: 20px;
    font-weight: 700;
    color: var(--mi-ink);
}

.mi-intro-sub {
    font-size: 12.5px;
    color: var(--mi-muted);
    line-height: 1.8;
}

.mi-badge {
    display: inline-block;
    margin-top: 10px;
    font-size: 11px;
    color: var(--mi-brand);
    background: var(--mi-brand-soft);
    border-radius: 20px;
    padding: 4px 12px;
}

.mi-features {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
    max-width: 640px;
    margin: 22px auto 0;
}

.mi-feature {
    background: #fbfcfe;
    border: 1px solid var(--mi-line);
    border-radius: 12px;
    padding: 14px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.mi-feature .mi-fi {
    width: 30px;
    height: 30px;
    margin-bottom: 2px;
    border-radius: 9px;
    background: var(--mi-brand-soft);
    color: var(--mi-brand);
    display: grid;
    place-items: center;
}

.mi-feature .mi-fi svg { width: 16px; height: 16px; }

.mi-feature b { font-size: 12.5px; color: var(--mi-ink); }

.mi-feature span {
    font-size: 11px;
    color: var(--mi-muted);
    line-height: 1.6;
}

/* 最近生成列表 */
.mi-recent {
    flex: 1;
    background: #fff;
    border: 1px solid var(--mi-line);
    border-radius: 14px;
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: none;
}

.mi-recent-hd {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--mi-line);
}

.mi-recent-hd h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--mi-ink);
}

.mi-recent-hd h3 span {
    margin-left: 6px;
    font-size: 12.5px;
    font-weight: 400;
    color: var(--mi-muted);
}

.mi-recent-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* 提交成功提示:从顶部下滑,停在距顶部 40px 处 */
.mi-toast {
    position: fixed;
    top: 40px;
    left: 50%;
    z-index: 3000;
    max-width: calc(100% - 40px);
    padding: 9px 20px;
    border-radius: 12px;
    background: #e9f7f0;
    border: 1px solid #bfe8d5;
    box-shadow: 0 8px 20px rgba(31, 138, 91, .18);
    color: #1f8a5b;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -22px);
    transition: transform .3s cubic-bezier(.22, .61, .36, 1), opacity .3s;
}

.mi-toast.show {
    opacity: 1;
    transform: translate(-50%, 0);
}

.mi-ghost-btn {
    border: 1px solid #e3e9f2;
    background: #fff;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 11.5px;
    color: #6b7688;
    cursor: pointer;
    font-family: inherit;
}

.mi-ghost-btn:hover { border-color: var(--mi-brand); color: var(--mi-brand); }

.mi-recent-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0;
    /* 左右留 10px:记录行 hover 外扩 10px 的高亮不会被 overflow 裁掉 */
    padding: 4px 10px;
    margin: 0 -10px;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
}

.mi-recent-end {
    width: 100%;
    border: none;
    background: none;
    font-family: inherit;
    text-align: center;
    font-size: 11px;
    color: #b3bccb;
    padding: 4px 0;
    cursor: default;
}

/* 单条记录:不用卡片,改为分隔线列表(对齐线上排版) */
.mi-rec {
    display: grid;
    /* 右侧操作区固定宽度,避免中间块过宽把右侧提示挤成两行 */
    grid-template-columns: 78px minmax(0, 1fr) 160px;
    align-items: center;
    gap: 14px;
    min-height: 94px;
    padding: 8px 2px;
    border-bottom: 1px solid #e7e9ee;
    background: transparent;
    /*border-radius: 10px;*/
    /* padding 与 margin 同步过渡,保证外扩时内容不位移 */
    transition: background-color .16s ease, padding .16s ease, margin .16s ease;
}

/* 悬停:整行浅色高亮并左右外扩(内外抵消,内容不位移),对齐线上效果 */
.mi-rec:hover {
    margin: 0 -10px;
    padding: 8px 12px;
    background: #f7f9fc;
}

.mi-rec:last-child { border-bottom: none; }

.mi-rec-thumb {
    width: 78px;
    height: 78px;
    flex: none;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    background: #f2f3f5;
    display: grid;
    place-items: center;
    border: 1px solid #e1e3e8;
}

/* 有封面图时可点击放大:放大镜光标 + 悬停黑色遮罩与放大镜图标 */
.mi-rec-thumb.has-img { cursor: zoom-in; }

.mi-rec-thumb.has-img::after {
    content: '\e684';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 17, 21, .32);
    font-family: iconfont;
    font-size: 22px;
    font-style: normal;
    line-height: 1;
    color: #fff;
    opacity: 0;
    transition: opacity .16s;
    pointer-events: none;
}

.mi-rec-thumb.has-img:hover::after { opacity: 1; }

.mi-rec-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mi-rec-spin {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid #d6e4f7;
    border-top-color: var(--mi-brand);
    animation: mi-spin .8s linear infinite;
}

@keyframes mi-spin {
    to { transform: rotate(360deg); }
}

.mi-rec-fail {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #ffecec;
    color: #ff4d4f;
    font-size: 15px;
    font-weight: 700;
    display: grid;
    place-items: center;
}

.mi-rec-main {
    min-width: 0;
}

.mi-rec-meta {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 状态点 + 状态文字(颜色随记录状态变化,对齐线上) */
.mi-rec-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 700;
    color: #9ba1ad;
}

.mi-rec-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #c3ccdb;
    flex: none;
}

.mi-rec.done .mi-rec-dot { background: #34a876; box-shadow: 0 0 0 3px rgba(52, 168, 118, .1); }
.mi-rec.pending .mi-rec-dot { background: #d8922b; box-shadow: 0 0 0 3px rgba(216, 146, 43, .1); }
.mi-rec.fail .mi-rec-dot { background: #e23744; box-shadow: 0 0 0 3px rgba(226, 55, 68, .1); }

.mi-rec.done .mi-rec-status { color: #277b57; }
.mi-rec.pending .mi-rec-status { color: #b36b18; }
.mi-rec.fail .mi-rec-status { color: #e23744; }

.mi-rec-time { font-size: 10px; color: #9ba1ad; }

/* 规格行:比例 · 尺寸 · 本批张数 */
.mi-rec-spec {
    margin: 5px 0 0;
    font-size: 10px;
    line-height: 1.45;
    color: #626874;
}

.mi-rec-spec i {
    margin: 0 6px;
    font-style: normal;
    color: #c1c5cc;
}

/* 提示词只占一行,超出省略 */
.mi-rec-ask {
    margin: 5px 0 0;
    max-width: 620px;
    overflow: hidden;
    font-size: 11px;
    line-height: 1.45;
    color: #5f6470;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.mi-rec-ops {
    display: grid;
    grid-template-columns: repeat(3, minmax(46px, auto));
    align-items: center;
    justify-content: end;
    gap: 5px;
    min-width: 0;
}

.mi-op {
    height: 27px;
    padding: 0 8px;
    border: 1px solid #e7e9ee;
    border-radius: 7px;
    background: #fff;
    font-size: 10px;
    color: #606672;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    transition: color .15s, border-color .15s, background .15s;
    /* 图标与文字同一行居中 */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
}

.mi-op-icon {
    width: 11px;
    height: 11px;
    flex: none;
}

/* 这两个按钮用 JS 浮层提示,屏蔽全局 data-tooltip 伪元素,避免重复 */
.mi-op[data-tooltip]:hover::after {
    display: none;
}

.mi-op-tip {
    position: fixed;
    z-index: 9999;
    display: none;
    padding: 5px 9px;
    border-radius: 6px;
    background: rgba(15, 27, 45, .92);
    color: #fff;
    font-size: 12px;
    line-height: 1.3;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
}

.mi-op:hover { border-color: #cfe0fb; color: var(--mi-brand); background: #f5f9ff; }

/* 生成中的右侧提示:单行显示,不换行 */
.mi-rec-wait {
    grid-column: 1 / -1;
    font-size: 10.5px;
    color: #b36b18;
    text-align: right;
    line-height: 1.5;
    white-space: nowrap;
}

/* 失败原因:文案比"生成失败"长,允许换行并限制3行,完整内容由 title 悬浮展示 */
.mi-rec-wait.is-fail {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    white-space: normal;
    word-break: break-word;
    color: #d64545;
}

/* ---------- 大图预览弹窗 ---------- */
/* 尺寸/间距/字号均对齐线上预览弹窗 */
.mi-modal {
    position: fixed;
    inset: 0;
    z-index: 3200;
    display: none;
    background: rgba(0, 0, 0, .82);
    cursor: zoom-out;
}

.mi-modal * { box-sizing: border-box; }

.mi-modal.show {
    display: flex;
    align-items: center;
    justify-content: center;
}

.mi-modal-body {
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: 92vw;
}

.mi-modal-img {
    display: block;
    width: auto;
    height: auto;
    max-width: 56vw;
    max-height: 84vh;
    object-fit: contain;
    border-radius: 10px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, .5);
    cursor: default;
}

.mi-modal-close {
    position: absolute;
    top: 24px;
    right: 24px;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .15);
    color: #fff;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.mi-modal-close:hover { background: rgba(255, 255, 255, .26); }

.mi-modal-pager {
    position: absolute;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    padding: 5px 14px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .5);
    color: #fff;
    font-size: 13px;
    line-height: 1.2;
    letter-spacing: .3px;
}

.mi-modal-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.mi-modal-nav:hover { background: rgba(255, 255, 255, .24); }
.mi-modal-prev { left: 24px; }
.mi-modal-next { right: 24px; }

/* 右侧参数卡 */
.mi-modal-side {
    flex: none;
    width: 300px;
    max-height: 84vh;
    margin-bottom: 20px;
    padding: 18px;
    overflow-y: auto;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, .1);
    background: rgba(20, 20, 24, .92);
    color: rgba(255, 255, 255, .92);
    cursor: default;
}

.mi-side-head {
    margin-bottom: 14px;
    font-size: 14px;
    font-weight: 600;
    line-height: 32px;
    color: #fff;
}

.mi-side-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0 0 14px;
}

.mi-side-item {
    display: flex;
    gap: 10px;
    margin: 0;
    font-size: 13px;
    line-height: 32px;
}

.mi-side-item dt {
    flex: none;
    width: 42px;
    color: rgba(255, 255, 255, .45);
}

.mi-side-item dd {
    margin: 0;
    min-width: 0;
    color: rgba(255, 255, 255, .92);
    word-break: break-all;
}

.mi-side-sub {
    margin-left: 6px;
    font-style: normal;
    color: rgba(255, 255, 255, .55);
}

.mi-side-prompt-box {
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, .1);
}

.mi-side-prompt-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 12px;
    color: rgba(255, 255, 255, .45);
}

.mi-copy-btn {
    padding: 3px 9px;
    border: none;
    border-radius: 6px;
    background: rgba(255, 255, 255, .12);
    color: rgba(255, 255, 255, .85);
    font-size: 11px;
    font-family: inherit;
    cursor: pointer;
}

.mi-copy-btn:hover { background: rgba(255, 255, 255, .2); }

.mi-side-prompt {
    max-height: 42vh;
    overflow-y: auto;
    font-size: 12.5px;
    line-height: 1.65;
    color: rgba(255, 255, 255, .85);
    white-space: pre-wrap;
    word-break: break-word;
}

@media (max-width: 560px) {
    .mi-modal.show { flex-direction: column; }
    .mi-modal-body { flex-direction: column; gap: 12px; }
    .mi-modal-img { max-width: 88vw; max-height: 52vh; }
    .mi-modal-side { width: min(340px, 88vw); max-height: 30vh; margin-bottom: 0; }
    .mi-modal-nav { display: none; }
}