/* ===== AI P图工作台 - 移动优先 =====
 *
 * 主题：柔雾玫瑰（Soft Rose）
 * ─────────────────────────────────────────────────────────────
 * 早先是「冷紫 #6c5ce7 + 冷灰 #f5f6fa」的通用科技配色，观感偏中性、偏工具。
 * 主要用户是女性，这里换成为「柔、暖、精致」的一套：
 *
 *   主色    玫瑰粉 #cf3f7b —— 温暖但不刺眼，白字对比度 4.52:1，达 AA
 *   点缀    玫瑰金 #e0b088 —— 只用在小面积（品牌角标）与渐变尾端，提供"轻奢"质感
 *   中性色  整体转暖：暖白底 + 暖棕灰字，替掉原来的冷蓝黑
 *   形状    卡片 18px、按钮与标签胶囊化，比原来的 12px 更圆润
 *   阴影    带暖粉调（rgba(184,50,104,.06)），比冷灰阴影更"软"
 *   动效    卡片轻上浮入场；并按 prefers-reduced-motion 关闭
 *
 * 原则：大面积用暖中性色，粉色只做重点（CTA / 选中态 / 强调），
 *       这样是"精致"而不是"廉价少女粉"。
 *
 * ★ 所有颜色都集中在 :root 的变量里，换主题只动这一块。
 * ★ JS 会在 canvas 上画标记框，它通过 getComputedStyle 读 --mark-line / --mark-fill，
 *   所以这两个变量改名字或删掉时，务必同步改 assets/js/app.js。
 * ================================================================== */
:root{
    /* ---------- 主色：柔雾玫瑰 ---------- */
    /* 对比度已校准：白字 / --primary = 4.52:1（AA 正文级），白字 / --accent = 3.48:1（大字级 AA） */
    --primary:#cf3f7b;
    --primary-dark:#b32f66;
    --primary-soft:#fdeaf3;      /* 选中底 */
    --primary-tint:#fbd9e9;      /* 描边 / 更浅的粉 */
    --accent:#de5b95;            /* 渐变的亮端 */

    /* ---------- 点缀：玫瑰金 ---------- */
    --gold:#e0b088;              /* 装饰用（渐变尾端），别拿它当正文色 */
    --gold-ink:#a9702f;          /* 加深版，可作文字：白底 4.16:1 */

    /* ---------- 中性色：全部转暖 ---------- */
    --bg:#fff6fa;                /* 页面底：暖白带一点粉 */
    --surface:#fdf5f8;           /* 区块浅底（原 #f8f8fd） */
    --surface-2:#fffafc;         /* 输入框浅底（原 #fbfbfe） */
    --card:#ffffff;
    /* 文字对比度已校准：text=12.4:1 / text-2=5.8:1 / text-3=3.5:1（原弱文字只有 2.6:1，偏淡） */
    --text:#3d2b34;              /* 暖调深棕，替代冷蓝黑 #1f2233 */
    --text-2:#75606c;
    --text-3:#96858e;
    --line:#f6e6ee;              /* 粉调分隔线 */

    /* ---------- 语义色 ---------- */
    --danger:#e5484d;
    --warn:#d9903a;
    --ok:#2fae7a;

    /* ---------- 形状 ---------- */
    --radius:18px;
    --radius-sm:13px;
    --radius-pill:999px;

    /* ---------- 阴影（暖粉调） ---------- */
    --shadow:0 2px 10px rgba(184,50,104,.06),0 1px 2px rgba(184,50,104,.04);
    --shadow-lg:0 14px 38px rgba(184,50,104,.15);
    --shadow-btn:0 6px 18px rgba(214,65,127,.30);
    --ring:0 0 0 3px rgba(214,65,127,.12);

    /* ---------- 画布标记（app.js 读取，勿改名） ---------- */
    --mark-line:#cf3f7b;
    --mark-fill:rgba(207,63,123,.16);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
    font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB",
                "Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;
    color:var(--text);font-size:15px;line-height:1.6;
    padding-bottom:env(safe-area-inset-bottom);
    /* 顶部两团柔光（粉+蜜桃），让整体不是一块死板的纯色底 */
    background-color:var(--bg);
    background-image:
        radial-gradient(760px 380px at 12% -120px,rgba(255,214,232,.72) 0%,rgba(255,214,232,0) 68%),
        radial-gradient(620px 340px at 92% -90px,rgba(255,232,214,.62) 0%,rgba(255,232,214,0) 66%);
    background-repeat:no-repeat;
}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,textarea{font-family:inherit;font-size:15px}
h1,h2,h3,p{margin:0}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px}

/* ---------- 顶栏 ---------- */
.topbar{
    position:sticky;top:0;z-index:50;
    /* 半透明 + 毛玻璃，让上面的柔光透出来 */
    background:rgba(255,251,253,.84);backdrop-filter:saturate(180%) blur(14px);
    -webkit-backdrop-filter:saturate(180%) blur(14px);
    border-bottom:1px solid var(--line);
    padding-top:env(safe-area-inset-top);
}
.topbar-inner{
    max-width:760px;margin:0 auto;padding:12px 16px;
    display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.brand{display:flex;align-items:center;gap:11px;min-width:0}
.brand-logo{
    width:40px;height:40px;flex:none;border-radius:13px;
    /* 玫瑰 → 粉 → 玫瑰金，三段渐变有"珠光"感 */
    background:linear-gradient(135deg,var(--primary) 0%,var(--accent) 58%,var(--gold) 100%);
    display:flex;align-items:center;justify-content:center;font-size:19px;
    box-shadow:0 6px 16px rgba(214,65,127,.26),inset 0 1px 0 rgba(255,255,255,.35);
}
.brand-text{min-width:0}
.brand-text h1{
    font-size:16px;font-weight:700;line-height:1.2;letter-spacing:.3px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.brand-text p{font-size:11.5px;color:var(--text-3);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar-user{display:flex;align-items:center;gap:8px;flex:none}
.quota-badge{
    font-size:12px;color:var(--primary-dark);background:var(--primary-soft);
    border:1px solid var(--primary-tint);
    padding:4px 11px;border-radius:var(--radius-pill);white-space:nowrap;
}
.quota-badge b{font-weight:700;font-variant-numeric:tabular-nums}
.btn-text{color:var(--text-3);font-size:13px;padding:6px 4px}
.btn-text:active{color:var(--primary)}

/* ---------- 通用 ---------- */
.container{max-width:760px;margin:0 auto;padding:16px 16px 44px}
.card{
    background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);
    border:1px solid #fdf2f7;
    padding:18px;margin-bottom:14px;
    animation:cardIn .3s cubic-bezier(.22,.8,.3,1);
}
@keyframes cardIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:13px}
.card-head h2{font-size:14.5px;font-weight:700;color:var(--text);letter-spacing:.2px}
/* 标题前的玫瑰竖条：整页统一的段落标记 */
.card-head h2::before{
    content:'';display:inline-block;width:3px;height:13px;border-radius:2px;
    background:linear-gradient(180deg,var(--accent),var(--primary));
    margin-right:7px;vertical-align:-1.5px;
}
.btn-primary{
    background:linear-gradient(135deg,var(--primary) 0%,var(--accent) 100%);color:#fff;
    border-radius:var(--radius-pill);padding:14px 22px;font-size:15.5px;font-weight:600;
    letter-spacing:.3px;
    box-shadow:var(--shadow-btn),inset 0 1px 0 rgba(255,255,255,.28);
    transition:transform .12s,opacity .2s,box-shadow .2s;
}
.btn-primary:active{transform:scale(.975);box-shadow:0 3px 10px rgba(214,65,127,.26)}
.btn-primary:disabled{opacity:.55;box-shadow:none;transform:none;filter:saturate(.7)}
.btn-sm{padding:9px 16px;font-size:13.5px}
.btn-block{width:100%;display:block}
.btn-outline{
    display:inline-flex;align-items:center;justify-content:center;
    border:1.5px solid var(--primary-tint);color:var(--primary-dark);border-radius:var(--radius-pill);
    padding:11px 18px;font-size:14.5px;font-weight:600;background:#fff;text-decoration:none;
    transition:background .15s,border-color .15s,transform .12s;
}
.btn-outline:active{background:var(--primary-soft);border-color:var(--primary);transform:scale(.985)}
.notice-bar{
    max-width:760px;margin:0 auto;padding:10px 16px;font-size:13px;color:#8a5a1f;
    background:#fff4e9;border-bottom:1px solid #fbe0c6;text-align:center;
}
.alert{border-radius:var(--radius-sm);padding:12px 14px;font-size:13.5px;margin-bottom:14px}
.alert-warn{background:#fff4e9;color:#8a5a1f;border:1px solid #fbe0c6}

/* ---------- 上传区 ---------- */
.dropzone{
    border:1.5px dashed #f3cede;border-radius:16px;
    background:linear-gradient(180deg,#fffafc 0%,#fdf3f8 100%);
    min-height:178px;display:flex;align-items:center;justify-content:center;
    transition:border-color .2s,background .2s,box-shadow .2s;
    position:relative;overflow:hidden;
}
.dropzone.dragover{border-color:var(--primary);background:var(--primary-soft);box-shadow:var(--ring)}
.dz-empty{text-align:center;padding:26px 16px;pointer-events:none}
.dz-icon{
    width:52px;height:52px;margin:0 auto 12px;border-radius:50%;
    background:linear-gradient(135deg,var(--primary-soft),var(--primary-tint));
    color:var(--primary);font-size:27px;line-height:52px;font-weight:300;
    box-shadow:inset 0 0 0 1px rgba(214,65,127,.10),0 5px 14px rgba(214,65,127,.10);
}
.dz-title{font-size:14.5px;font-weight:600;color:var(--text)}
.dz-tip{font-size:12px;color:var(--text-3);margin-top:5px}
.dz-preview{width:100%;position:relative}
.dz-preview img{width:100%;max-height:340px;object-fit:contain;border-radius:12px;background:#faf1f6}
.dz-remove{
    position:absolute;top:8px;right:8px;width:30px;height:30px;border-radius:50%;
    background:rgba(74,38,56,.58);color:#fff;font-size:19px;line-height:1;
    display:flex;align-items:center;justify-content:center;
}

/* ---------- 模板 ---------- */
.tpl-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px}
.tpl-grid-4{grid-template-columns:repeat(4,1fr)}
.tpl-item{
    display:flex;flex-direction:column;align-items:center;gap:4px;
    padding:11px 4px;border-radius:14px;background:var(--surface);border:1.5px solid transparent;
    transition:all .15s;
}
.tpl-item:active{transform:scale(.96)}
.tpl-item.active{
    background:linear-gradient(180deg,var(--primary-soft),var(--primary-tint));
    border-color:rgba(214,65,127,.42);
}
.tpl-icon{font-size:20px;line-height:1}
.tpl-name{font-size:11.5px;color:var(--text-2);white-space:nowrap}
.tpl-item.active .tpl-name{color:var(--primary-dark);font-weight:600}
.prompt-input{
    width:100%;border:1.5px solid var(--line);border-radius:var(--radius-sm);padding:12px 14px;
    resize:vertical;outline:none;line-height:1.6;background:var(--surface-2);color:var(--text);
    transition:border-color .18s,box-shadow .18s,background .18s;
}
.prompt-input:focus{border-color:var(--primary);background:#fff;box-shadow:var(--ring)}
.row-between{display:flex;align-items:center;justify-content:space-between;margin-top:10px;gap:10px;flex-wrap:wrap}
.size-pick{display:flex;gap:6px}
.size-opt{position:relative}
.size-opt input{position:absolute;opacity:0;pointer-events:none}
.size-opt span{
    display:block;font-size:12.5px;padding:6px 13px;border-radius:var(--radius-pill);
    background:var(--surface);color:var(--text-2);border:1.5px solid transparent;
    transition:all .15s;
}
.size-opt input:checked+span{
    background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;font-weight:600;
    border-color:transparent;box-shadow:0 3px 10px rgba(214,65,127,.24);
}
.counter{font-size:12px;color:var(--text-3);font-variant-numeric:tabular-nums}

/* ---------- 操作 ---------- */
.action-bar{margin:6px 0 16px;text-align:center}
.action-tip{font-size:12px;color:var(--text-3);margin-top:9px}

/* ---------- 结果 ---------- */
.compare{position:relative;border-radius:16px;overflow:hidden;background:#faf1f6;min-height:120px}
.compare img{width:100%;max-height:520px;object-fit:contain;margin:0 auto}
.compare-origin{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.compare-tag{
    position:absolute;left:10px;top:10px;font-size:11.5px;color:#fff;
    background:rgba(214,65,127,.92);backdrop-filter:blur(4px);
    padding:3px 10px;border-radius:var(--radius-pill);
}
.btn-row{display:flex;gap:10px;margin-top:12px}
.btn-row>*{flex:1}

/* ---------- 历史 ---------- */
.his-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.his-item{
    position:relative;border-radius:12px;overflow:hidden;background:#faf1f6;
    aspect-ratio:1/1;cursor:pointer;transition:transform .15s;
}
.his-item:active{transform:scale(.97)}
.his-item img{width:100%;height:100%;object-fit:cover}
.his-item .his-badge{
    position:absolute;left:5px;bottom:5px;font-size:10px;color:#fff;
    background:rgba(74,38,56,.52);padding:1px 6px;border-radius:6px;
}
.empty-tip{text-align:center;color:var(--text-3);font-size:13px;padding:26px 0}

/* ---------- 弹层 ---------- */
.modal{position:fixed;inset:0;z-index:100;display:flex;align-items:flex-end;justify-content:center}
.modal-mask{position:absolute;inset:0;background:rgba(74,38,56,.42);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.modal-panel{
    position:relative;width:100%;max-width:460px;background:#fff;
    border-radius:24px 24px 0 0;padding:26px 20px calc(22px + env(safe-area-inset-bottom));
    box-shadow:var(--shadow-lg);animation:slideUp .26s cubic-bezier(.22,.8,.3,1);
}
@keyframes slideUp{from{transform:translateY(30px);opacity:.6}to{transform:translateY(0);opacity:1}}
.modal-close{position:absolute;right:12px;top:10px;font-size:24px;color:var(--text-3);line-height:1;padding:4px 8px}
.auth-tabs{display:flex;gap:20px;margin-bottom:18px}
.auth-tab{font-size:16px;font-weight:600;color:var(--text-3);padding-bottom:6px;border-bottom:2px solid transparent;transition:color .15s,border-color .15s}
.auth-tab.active{color:var(--primary);border-color:var(--primary)}
.field{margin-bottom:12px}
.field label{display:block;font-size:13px;color:var(--text-2);margin-bottom:5px}
.field input{
    width:100%;border:1.5px solid var(--line);border-radius:var(--radius-sm);padding:11px 13px;
    outline:none;background:var(--surface-2);color:var(--text);
    transition:border-color .18s,box-shadow .18s,background .18s;
}
.field input:focus{border-color:var(--primary);background:#fff;box-shadow:var(--ring)}
.auth-form .btn-primary{margin-top:8px}
.form-msg{font-size:13px;color:var(--danger);min-height:18px;margin-top:8px;text-align:center}
.form-msg.ok{color:var(--ok)}
.form-hint{font-size:12px;color:var(--text-3);text-align:center;margin-top:6px}

/* ---------- Toast ---------- */
.toast{
    position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:200;
    background:rgba(74,38,56,.94);color:#fff;font-size:14px;padding:12px 22px;
    border-radius:14px;max-width:78vw;text-align:center;
    box-shadow:0 10px 30px rgba(74,38,56,.3);animation:fadeIn .18s;
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* ---------- 页脚 ---------- */
.site-footer{text-align:center;font-size:11.5px;color:var(--text-3);padding:20px 0 8px}

/* ---------- 加载中 ---------- */
.loading-inline{display:inline-block;width:15px;height:15px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;vertical-align:-2px;margin-right:6px}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- 模式切换 ---------- */
.mode-tabs{
    display:flex;gap:6px;background:#fff;padding:6px;border-radius:var(--radius);
    box-shadow:var(--shadow);border:1px solid #fdf2f7;margin-bottom:14px;
}
.mode-tab{
    flex:1;padding:10px 6px;border-radius:var(--radius-pill);font-size:14px;font-weight:600;
    color:var(--text-3);transition:all .18s;
}
.mode-tab.active{
    background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;
    box-shadow:0 5px 14px rgba(214,65,127,.28);
}

/* ---------- 图层拆分 ---------- */
.split-note{font-size:12.5px;color:var(--text-2);background:var(--surface);border-radius:var(--radius-sm);padding:10px 12px;margin-bottom:10px;line-height:1.7}
.split-note b{color:var(--primary-dark)}
.split-cost{font-size:12.5px;color:var(--text-2)}
.split-cost b{color:var(--gold-ink);font-weight:700;font-variant-numeric:tabular-nums}
.layer-count{font-size:12.5px;color:var(--primary-dark);background:var(--primary-soft);border:1px solid var(--primary-tint);padding:3px 11px;border-radius:var(--radius-pill);font-weight:600}
.layer-hint{font-size:12px;color:var(--text-3);margin-bottom:10px;line-height:1.6}
.layer-base{position:relative;border-radius:var(--radius-sm);overflow:hidden;background:#faf1f6;margin-bottom:12px;min-height:80px}
.layer-base img{width:100%;max-height:340px;object-fit:contain}
.layer-badge{position:absolute;left:8px;top:8px;font-size:11px;color:#fff;background:rgba(61,43,52,.72);padding:2px 9px;border-radius:var(--radius-pill)}
.layer-badge.base{background:rgba(214,65,127,.94)}
.layer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.layer-item{border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;background:#fff}
.layer-thumb{
    aspect-ratio:1/1;cursor:zoom-in;display:flex;align-items:center;justify-content:center;
    /* 透明图层要看得出"透"，棋盘格保持中性但偏暖 */
    background:repeating-conic-gradient(#f8f0f4 0% 25%,#ffffff 0% 50%) 50% / 16px 16px;
}
.layer-thumb img{width:100%;height:100%;object-fit:contain}
.layer-meta{display:flex;align-items:center;justify-content:space-between;gap:4px;padding:5px 7px;font-size:11px}
.layer-name{color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.layer-z{color:var(--text-3);flex:none}
.layer-dl{display:block;text-align:center;font-size:11.5px;color:var(--primary-dark);padding:6px;border-top:1px solid var(--line);background:var(--surface-2);text-decoration:none}
.layer-dl:active{background:var(--primary-soft)}
.layer-tip{font-size:12px;color:var(--text-3);text-align:center;margin-top:8px;line-height:1.6}

/* ---------- 图片放大 ---------- */
.lightbox{position:fixed;inset:0;z-index:180;background:rgba(61,43,52,.92);display:flex;align-items:center;justify-content:center;padding:16px}
.lightbox img{max-width:94vw;max-height:90vh;object-fit:contain}

/* ---------- 尺寸档位说明 ---------- */
.size-note{font-size:11.5px;color:var(--text-3);margin-top:8px;line-height:1.6}

/* ---------- 保存到相册浮层（微信 / QQ 内置浏览器） ---------- */
.save-overlay{position:fixed;inset:0;z-index:220;background:rgba(45,26,35,.95);display:flex;flex-direction:column}
.save-bar{
    flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:calc(12px + env(safe-area-inset-top)) 16px 12px;color:#fff;
}
.save-tip{font-size:13.5px;line-height:1.5}
.save-tip em{display:block;font-style:normal;font-size:11.5px;color:rgba(255,255,255,.62);margin-top:3px}
.save-done{flex:none;font-size:13px;font-weight:600;color:#fff;padding:8px 18px;border-radius:var(--radius-pill);background:rgba(255,255,255,.16)}
.save-body{
    flex:1;min-height:0;display:flex;align-items:center;justify-content:center;
    padding:0 12px calc(20px + env(safe-area-inset-bottom));
}
.save-body img{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px}

/* ---------- 微信内无法下载文件的引导 ---------- */
.wx-title{font-size:16.5px;font-weight:700;margin-bottom:8px}
.wx-desc{font-size:13px;color:var(--text-2);line-height:1.7;margin-bottom:12px}
.wx-steps{margin:0;padding-left:20px;font-size:13.5px;color:var(--text-2);line-height:2}
.wx-steps b{color:var(--primary)}

/* hidden 优先级修正（避免被 display:flex 覆盖） */
.modal[hidden],
.lightbox[hidden],
.toast[hidden],
.up-list[hidden],
.mk-wrap[hidden],
.adv-box[hidden],
.stream-state[hidden]{display:none}
[hidden]{display:none !important}

/* ---------- 上传列表（多图） ---------- */
.up-hint{font-size:11.5px;color:var(--text-2);background:var(--surface);border:1px solid var(--line);padding:3px 10px;border-radius:var(--radius-pill)}
.dropzone.has-file{min-height:88px;border-style:solid;border-color:var(--line);background:var(--surface-2)}
.dropzone.has-file .dz-empty{display:none}
.up-list{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px}
.up-item{position:relative;border-radius:12px;overflow:hidden;background:#faf1f6;aspect-ratio:1/1}
.up-item img{width:100%;height:100%;object-fit:cover;cursor:zoom-in}
.up-del{
    position:absolute;right:4px;top:4px;width:20px;height:20px;border-radius:50%;
    background:rgba(74,38,56,.58);color:#fff;font-size:13px;line-height:1;
    display:flex;align-items:center;justify-content:center;
}
/* 上传后识别到的原图尺寸 */
.up-meta{
    position:absolute;left:0;right:0;bottom:0;padding:3px 4px;
    background:linear-gradient(to top,rgba(61,43,52,.74),rgba(61,43,52,0));
    color:#fff;font-size:10.5px;line-height:1.3;text-align:center;
    font-variant-numeric:tabular-nums;letter-spacing:.2px;
}
.up-meta.warn{background:linear-gradient(to top,rgba(190,72,58,.88),rgba(190,72,58,.05));font-size:10px}

/* ---------- 通用说明块 ---------- */
.alert-err{background:#fff2f4;color:#a32d3f;border:1px solid #ffd9e0}
.alert-err code{background:#fff;padding:1px 5px;border-radius:4px;font-size:12.5px}
.pane-note{font-size:12.5px;color:var(--text-2);background:var(--surface);border-radius:var(--radius-sm);padding:11px 13px;margin-bottom:11px;line-height:1.7}
.pane-note b{color:var(--primary-dark)}

/* ---------- 开关 ---------- */
.sw-row{
    display:flex;align-items:flex-start;gap:11px;padding:12px 13px;border-radius:var(--radius-sm);
    background:var(--surface);border:1px solid var(--line);margin-bottom:10px;cursor:pointer;
}
.sw-row input{position:absolute;opacity:0;pointer-events:none}
.sw-box{
    flex:none;width:40px;height:23px;border-radius:var(--radius-pill);
    background:#ead8e1;position:relative;transition:background .2s;margin-top:1px;
}
.sw-box::after{
    content:'';position:absolute;left:2px;top:2px;width:19px;height:19px;border-radius:50%;
    background:#fff;transition:transform .2s;box-shadow:0 1px 4px rgba(74,38,56,.22);
}
.sw-row input:checked+.sw-box{background:linear-gradient(135deg,var(--primary),var(--accent));box-shadow:0 2px 8px rgba(214,65,127,.24)}
.sw-row input:checked+.sw-box::after{transform:translateX(17px)}
.sw-text{min-width:0}
.sw-text b{display:block;font-size:13.5px;font-weight:600;color:var(--text)}
.sw-text em{display:block;font-style:normal;font-size:11.5px;color:var(--text-3);line-height:1.5;margin-top:1px}
.sw-compact{margin-bottom:0;background:transparent;border-color:transparent;padding:8px 0}

/* ---------- 交互编辑画布 ---------- */
.mk-wrap{border:1px solid var(--line);border-radius:var(--radius-sm);padding:10px;margin-bottom:10px;background:var(--surface-2)}
.mk-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.mk-tools{display:flex;gap:6px;align-items:center;min-width:0}
.mk-hint{font-size:11.5px;color:var(--text-3);line-height:1.4}
.mk-acts{display:flex;gap:2px;flex:none}
.mk-tool{
    font-size:12.5px;padding:6px 15px;border-radius:var(--radius-pill);
    background:var(--surface);color:var(--text-2);font-weight:600;border:1.5px solid transparent;
    transition:all .15s;
}
.mk-tool.active{background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;box-shadow:0 3px 10px rgba(214,65,127,.24)}
.mk-stage{position:relative;line-height:0;border-radius:12px;overflow:hidden;background:#faf1f6;touch-action:none}
.mk-stage img{width:100%;display:block;pointer-events:none}
.mk-stage canvas{position:absolute;left:0;top:0;width:100%;height:100%;cursor:crosshair;touch-action:none}
.mk-tip{font-size:11.5px;color:var(--text-3);margin-top:8px;line-height:1.6}

/* ---------- 进阶选项 ---------- */
.adv-box{border:1.5px dashed var(--primary-tint);border-radius:var(--radius-sm);padding:11px 13px;margin-bottom:10px;background:linear-gradient(180deg,#fffafc,#fdf5f9)}
.adv-head{font-size:11.5px;font-weight:700;color:var(--primary);letter-spacing:.6px;margin-bottom:8px}
.adv-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0}
.adv-label{min-width:0}
.adv-label b{display:block;font-size:13.5px;font-weight:600}
.adv-label em{display:block;font-style:normal;font-size:11.5px;color:var(--text-3);line-height:1.5;margin-top:1px}
.adv-select{
    flex:none;border:1.5px solid var(--line);border-radius:var(--radius-sm);padding:8px 10px;
    background:#fff;font-size:13.5px;color:var(--text);outline:none;
}
.adv-select:focus{border-color:var(--primary);box-shadow:var(--ring)}

/* ---------- 多图结果 / 流式 ---------- */
.stream-state{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--primary-dark);background:var(--primary-soft);border:1px solid var(--primary-tint);padding:3px 11px;border-radius:var(--radius-pill);font-weight:600}
.stream-state i{width:9px;height:9px;border-radius:50%;background:var(--primary);animation:pulse 1s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.3;transform:scale(.85)}50%{opacity:1;transform:scale(1)}}
.out-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.out-item{position:relative;border-radius:var(--radius-sm);overflow:hidden;background:#faf1f6;aspect-ratio:1/1}
.out-item img{width:100%;height:100%;object-fit:cover;cursor:zoom-in}
.out-idx{
    position:absolute;left:6px;top:6px;font-size:11px;color:#fff;font-weight:600;
    background:rgba(61,43,52,.6);padding:1px 9px;border-radius:var(--radius-pill);
}
.out-dl{
    position:absolute;right:6px;bottom:6px;font-size:11.5px;color:#fff;text-decoration:none;
    background:rgba(214,65,127,.94);padding:3px 11px;border-radius:var(--radius-pill);
}
.out-fail{display:flex;align-items:center;justify-content:center;padding:14px;background:#fff6f8;border:1px dashed #f6cdd7}
.out-fail-txt{font-size:12px;color:#a32d3f;text-align:center;line-height:1.6}
.out-tip{font-size:12px;color:var(--text-3);margin-top:10px;line-height:1.6}

/* ---------- 历史标签 ---------- */
.his-tags{position:absolute;right:4px;top:4px;display:flex;gap:3px;flex-wrap:wrap;justify-content:flex-end;max-width:80%}
.his-tag{font-size:9.5px;color:#fff;background:rgba(214,65,127,.88);padding:1px 6px;border-radius:var(--radius-pill)}

/* ---------- 脸部精修面板 ---------- */
.pane-badge{
    font-size:12px;font-weight:600;color:var(--primary-dark);background:var(--primary-soft);
    border:1px solid var(--primary-tint);
    padding:3px 11px;border-radius:var(--radius-pill);white-space:nowrap;
}
.pane-badge.warn{color:#a3590a;background:#fff3e0;border-color:#ffe0b8}

.face-group{margin-bottom:14px}
.face-group-head{
    font-size:12px;font-weight:700;color:var(--text-3);
    margin:0 0 8px;display:flex;align-items:center;gap:6px;
}
.face-group-head::before{
    content:'';width:3px;height:12px;border-radius:2px;
    background:linear-gradient(180deg,var(--accent),var(--primary));opacity:.8;
}
.face-chips{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.face-chip{
    display:flex;flex-direction:column;align-items:flex-start;gap:2px;
    padding:10px 9px;border-radius:12px;border:1.5px solid var(--line);
    background:#fff;text-align:left;transition:all .14s;min-height:52px;
}
.face-chip:active{transform:scale(.97)}
.face-chip .fc-name{font-size:13px;font-weight:600;color:var(--text);line-height:1.25}
.face-chip .fc-tip{font-size:10px;color:var(--text-3);line-height:1.3}
.face-chip.active{
    border-color:rgba(214,65,127,.45);
    background:linear-gradient(180deg,var(--primary-soft),var(--primary-tint));
    box-shadow:0 3px 10px rgba(214,65,127,.12);
}
.face-chip.active .fc-name{color:var(--primary-dark)}
.face-chip.active .fc-tip{color:#b06a8e}

.face-sec{margin-bottom:12px}
.face-sec-head{font-size:12px;font-weight:700;color:var(--text-3);margin:0 0 8px}

/* ---------- 人脸识别（脸部精修） ---------- */
.fd-row{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.btn-detect{
    display:inline-flex;align-items:center;gap:7px;flex:none;
    font-size:13px;font-weight:600;color:#fff;
    background:linear-gradient(135deg,var(--primary),var(--accent));
    padding:9px 17px;border-radius:var(--radius-pill);line-height:1;
    box-shadow:0 4px 12px rgba(214,65,127,.26);
}
.btn-detect:active{opacity:.88;transform:scale(.98)}
.fd-dot{width:7px;height:7px;border-radius:50%;background:#fff;flex:none}
.fd-state{font-size:11.5px;color:var(--text-3);line-height:1.5;min-width:0}
.fd-state.busy{color:var(--primary)}
.fd-state.ok{color:#157f4e}
.fd-state.warn{color:#a3590a}
.fd-note{margin-bottom:10px}
.fd-warn{margin-bottom:0;background:#fff4e9;color:#8a5a1f;border:1px solid #fbe0c6}
.face-strength{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.fs-opt{display:block;cursor:pointer}
.fs-opt input{position:absolute;opacity:0;pointer-events:none}
.fs-box{
    display:block;padding:10px 9px;border-radius:12px;border:1.5px solid var(--line);
    background:#fff;transition:all .14s;height:100%;
}
.fs-box b{display:block;font-size:13px;font-weight:700;color:var(--text)}
.fs-box em{display:block;font-style:normal;font-size:10.5px;color:var(--text-3);line-height:1.4;margin-top:2px}
.fs-opt input:checked+.fs-box{
    border-color:rgba(214,65,127,.45);
    background:linear-gradient(180deg,var(--primary-soft),var(--primary-tint));
    box-shadow:0 3px 10px rgba(214,65,127,.12);
}
.fs-opt input:checked+.fs-box b{color:var(--primary-dark)}

/* ---------- 精修前后对比滑块 ---------- */
.cmp{margin-bottom:12px}
.cmp-stage{
    position:relative;width:100%;aspect-ratio:4/3;max-height:72vh;
    border-radius:16px;overflow:hidden;background:#faf1f6;
    touch-action:none;cursor:ew-resize;user-select:none;
}
.cmp-img{
    position:absolute;left:0;top:0;width:100%;height:100%;
    object-fit:contain;pointer-events:none;
}
.cmp-clip{
    position:absolute;left:0;top:0;width:100%;height:100%;
    clip-path:inset(0 50% 0 0);-webkit-clip-path:inset(0 50% 0 0);
}
.cmp-line{
    position:absolute;top:0;left:50%;width:2px;height:100%;
    background:rgba(255,255,255,.94);box-shadow:0 0 8px rgba(74,38,56,.4);
    transform:translateX(-1px);pointer-events:none;
}
.cmp-knob{
    position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    width:36px;height:36px;border-radius:50%;
    background:linear-gradient(135deg,#fff,#fff5f9);
    display:flex;align-items:center;justify-content:center;
    font-size:15px;font-style:normal;color:var(--primary);
    box-shadow:0 3px 12px rgba(74,38,56,.32);
}
.cmp-label{
    position:absolute;top:8px;font-size:11px;color:#fff;
    background:rgba(61,43,52,.58);backdrop-filter:blur(4px);
    padding:2px 9px;border-radius:var(--radius-pill);pointer-events:none;
}
.cmp-left{left:8px}
.cmp-right{right:8px}
.cmp-range{
    width:100%;margin:10px 0 0;-webkit-appearance:none;appearance:none;
    height:4px;border-radius:4px;background:var(--primary-tint);outline:none;
}
.cmp-range::-webkit-slider-thumb{
    -webkit-appearance:none;width:22px;height:22px;border-radius:50%;
    background:linear-gradient(135deg,var(--primary),var(--accent));
    box-shadow:0 2px 8px rgba(214,65,127,.5);cursor:ew-resize;
}
.cmp-range::-moz-range-thumb{
    width:22px;height:22px;border:none;border-radius:50%;
    background:var(--primary);box-shadow:0 2px 8px rgba(214,65,127,.5);cursor:ew-resize;
}
.cmp-hint{font-size:11.5px;color:var(--text-3);margin-top:6px;text-align:center}

/* ---------- 连续修图（编辑链） ---------- */
.chain-bar{
    margin-top:12px;padding:13px;border-radius:14px;
    background:linear-gradient(180deg,#fffafc,#fdf4f8);
    border:1px solid var(--line);
}
.chain-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.chain-state{font-size:13px;color:var(--text-2)}
.chain-state b{color:var(--primary-dark);font-weight:700}
.chain-count{
    font-size:11.5px;color:var(--primary-dark);background:var(--primary-soft);
    border:1px solid var(--primary-tint);
    padding:2px 10px;border-radius:var(--radius-pill);font-weight:600;white-space:nowrap;
}
.chain-acts{display:flex;gap:8px}
.chain-btn{flex:1;padding:10px 8px;font-size:13.5px;border-radius:var(--radius-pill)}
.chain-main{
    border-color:transparent;color:#fff;
    background:linear-gradient(135deg,var(--primary),var(--accent));
    box-shadow:0 5px 14px rgba(214,65,127,.26);
}
.chain-main:active{background:var(--primary-dark);transform:scale(.985)}
.chain-main:disabled{opacity:.6;box-shadow:none}
.chain-tip{font-size:11.5px;color:var(--text-3);line-height:1.65;margin-top:9px}
/* 上传区左上角：这张是原图还是某一轮的结果 */
.up-src{
    position:absolute;left:4px;top:4px;font-size:10px;line-height:1.5;
    color:#fff;background:rgba(214,65,127,.94);padding:1px 7px;border-radius:var(--radius-pill);
}
.up-src-origin{background:rgba(61,43,52,.6)}

@media (max-width:639px){
    /* 移动端是底部弹出，加一根抓手条提示"可下拉/上滑" */
    .modal-panel::before{
        content:'';position:absolute;left:50%;top:9px;transform:translateX(-50%);
        width:38px;height:4px;border-radius:2px;background:var(--primary-tint);
    }
    .auth-tabs{margin-top:4px}
}

@media (max-width:420px){
    .adv-row{flex-wrap:wrap}
    .face-chips{grid-template-columns:repeat(2,1fr)}
}

@media (min-width:640px){
    .tpl-grid{grid-template-columns:repeat(4,1fr)}
    .his-grid{grid-template-columns:repeat(4,1fr)}
    .layer-grid{grid-template-columns:repeat(4,1fr)}
    .up-list{grid-template-columns:repeat(6,1fr)}
    .out-grid{grid-template-columns:repeat(3,1fr)}
    .face-chips{grid-template-columns:repeat(4,1fr)}
    .modal{align-items:center}
    .modal-panel{border-radius:24px;padding-bottom:22px}
}

/* 尊重「减少动态效果」的系统设置 */
@media (prefers-reduced-motion:reduce){
    *,*::before,*::after{
        animation-duration:.001ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.001ms !important;
    }
}