/* ============================================================
   base.css — 智能背景移除全站共享样式（蓝紫主题）
   布局体系取自 demo_2.html，全站前台页面引用
   依赖：/static/theme-light.css + /static/proto.css（先引入）
   ============================================================ */

/* ── 主题变量（bigmodel.cn 基调：靛蓝主色 / 近白底 / 黑色胶囊按钮，全站生效） ── */
:root {
    --bg: #F7F8FA;           /* 页面底色（覆盖 theme-light 的 #F5F5F5，取齐 bigmodel） */
    --primary: #5567F1;      /* 主色调 - 靛蓝（bigmodel 紫蓝横幅色） */
    --primary-h: #6E7CF4;    /* 悬停 */
    --primary-bg: #EEF1FE;   /* 背景 */
    --primary-bd: #C9D0FB;   /* 边框 */
    --primary-tx: #4353E0;   /* 文字 */
    --accent-cyan: #0F9FE8;  /* 辅助强调 - 天蓝（bigmodel GLM 卡渐变色），仅用于图标渐变等点缀 */
}
.inp:focus-within,
.inp:focus { box-shadow: 0 0 0 2px rgba(85, 103, 241, .12); }
.btn.primary:active { background: #4353E0; border-color: #4353E0; }
.btn.link:active,
.lnk:active { color: #4353E0; }
.topnav.underline .tn-links a.on {
    color: var(--primary);
    box-shadow: inset 0 -2px 0 var(--primary);
}
.topnav.underline .tn-links a:hover { color: var(--primary); }

/* ══════════ 页面骨架 ══════════ */

body { margin: 0; padding-top: 56px; background: var(--bg); }

.navbar-fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    /* bigmodel 式浅色导航：与页面同底色，黑字 + 黑色胶囊按钮，无重投影 */
    background: var(--bg);
    border-bottom: 1px solid var(--stroke);
    height: 56px;
    display: flex;
    align-items: center;
    padding: 0 24px;
    gap: 24px;
    box-shadow: none;
}

/* 导航内登录 / 注册：黑色胶囊（bigmodel chrome 风格） */
.navbar-fixed .btn.primary {
    background: #16161A;
    border-color: #16161A;
    color: #fff;
    border-radius: 999px;
}
.navbar-fixed .logo-ai { background: #16161A; color: #fff; }

/* main 背景：近白底 + 首屏顶部一抹极淡的蓝 / 紫极光（bigmodel hero 手法），快速落回底色 */
main {
    margin: 0;
    padding: 0;
    background:
        radial-gradient(620px 320px at 16% -80px, #E3ECFB 0%, transparent 68%),
        radial-gradient(620px 320px at 84% -80px, #F1EBFA 0%, transparent 68%),
        var(--bg);
    min-height: calc(100vh - 56px);
}

/* 内容容器：居中限宽（顶部与导航留出空白）
   全站统一宽度 1460px（与用户中心一致），新页面不得另设容器宽度 */
.main-inner {
    max-width: 1460px;
    margin: 0 auto;
    padding: 22px 24px 28px;
}

/* 品牌 Logo */
.logo-ai {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: linear-gradient(140deg, #5567F1, #4353E0);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 800;
    font-size: 13px;
    flex: none;
}

/* ══════════ Hero 区域 ══════════ */

.hero {
    padding: 26px 0 34px;
    text-align: center;
    margin-bottom: 8px;
}
.hero h1 {
    font-size: 38px;
    font-weight: 700;
    letter-spacing: -.5px;
    color: var(--t1);
    margin: 0 0 12px;
}
.hero h1 span { color: var(--primary); }
.hero .sub {
    font-size: 16px;
    color: var(--t2);
    max-width: 640px;
    margin: 0 auto 24px;
    line-height: 1.6;
}
.hero .btn {
    font-size: 15px;
    height: 40px;
    padding: 0 28px;
}

/* ══════════ 区块标题 ══════════ */

.sec-h {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}
.sec-h h2 {
    font-size: 20px;
    font-weight: 600;
    color: var(--t1);
    margin: 0;
}
.sec-h .desc { font-size: 13px; color: var(--t3); }

/* ══════════ 功能卡片网格（首页） ══════════ */

.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 20px;
    margin-top: 8px;
}
.feature-card {
    background: var(--bg2);
    border: 1px solid var(--stroke);
    border-radius: var(--r);
    padding: 24px 20px 22px;
    transition: border-color .2s, box-shadow .2s;
    text-align: center;
    cursor: pointer;
}
.feature-card:hover {
    border-color: var(--primary-bd);
    box-shadow: 0 4px 14px rgba(28, 35, 51, .06);
}
.feature-card .ic {
    width: 48px;
    height: 48px;
    border-radius: var(--r-sm);
    background: linear-gradient(135deg, var(--accent-cyan), var(--primary));
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}
.feature-card h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--t1);
    margin: 0 0 6px;
}
.feature-card p {
    font-size: 13px;
    color: var(--t2);
    line-height: 1.6;
    margin: 0;
}

/* ══════════ 底部 ══════════ */

.footer {
    padding: 24px 0 16px;
    border-top: 1px solid var(--stroke);
    font-size: 13px;
    color: var(--t3);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 40px;
}

/* ══════════ 价格页 ══════════ */

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
    align-items: stretch;
}
.pricing-card {
    position: relative;
    background: var(--bg2);
    border: 1px solid var(--stroke);
    border-radius: var(--r);
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    transition: border-color .2s, box-shadow .2s;
}
.pricing-card:hover {
    border-color: var(--primary-bd);
    box-shadow: 0 4px 14px rgba(28, 35, 51, .06);
}
.pricing-card.featured {
    border-color: var(--primary);
    box-shadow: 0 8px 24px rgba(85, 103, 241, .15);
}
.pricing-card .badge-hot {
    position: absolute;
    top: -12px;
    right: 20px;
    background: var(--primary);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 12px;
    border-radius: 999px;
}
.pricing-card h3 {
    font-size: 17px;
    font-weight: 600;
    color: var(--t1);
    margin: 0 0 16px;
}
.pricing-card .price {
    display: flex;
    align-items: baseline;
    gap: 2px;
    margin-bottom: 20px;
}
.pricing-card .price .cur { font-size: 18px; color: var(--t2); }
.pricing-card .price .amt {
    font-size: 40px;
    font-weight: 700;
    color: var(--t1);
    line-height: 1;
}
.pricing-card.featured .price .amt { color: var(--primary); }
.pricing-card .price .period { font-size: 13px; color: var(--t3); }
.pricing-card ul {
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
    flex: 1;
}
.pricing-card ul li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--t2);
    padding: 6px 0;
}
.pricing-card ul li svg { color: var(--green); flex: none; }
.pricing-card ul li.no { color: var(--t3); }
.pricing-card ul li.no svg { color: var(--t3); }

/* 快速充值 */
.recharge-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}
.recharge-card {
    background: var(--bg2);
    border: 1px solid var(--stroke);
    border-radius: var(--r);
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: border-color .2s, box-shadow .2s;
}
.recharge-card:hover {
    border-color: var(--primary-bd);
    box-shadow: 0 4px 14px rgba(28, 35, 51, .06);
}
.recharge-card .amt {
    font-size: 28px;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 4px;
}
.recharge-card .gift {
    font-size: 13px;
    color: var(--t2);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--primary-bg);
    color: var(--primary-tx);
    padding: 2px 10px;
    border-radius: 999px;
    margin-bottom: 16px;
}

/* ══════════ 历史记录页 ══════════ */

.filter-bar {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 12px;
    background: var(--bg2);
    border: 1px solid var(--stroke);
    border-radius: var(--r);
    padding: 16px;
    margin-bottom: 16px;
}
.filter-bar .fg { display: flex; flex-direction: column; gap: 6px; }
.filter-bar .fg label { font-size: 12px; color: var(--t3); }
.filter-bar .fg .inp { min-width: 150px; }

.history-table-wrap {
    background: var(--bg2);
    border: 1px solid var(--stroke);
    border-radius: var(--r);
    overflow-x: auto;
}
table.history-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
    min-width: 860px;
}
.history-table th {
    text-align: left;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--t3);
    padding: 12px 16px;
    border-bottom: 1px solid var(--stroke);
    background: var(--bg);
    white-space: nowrap;
}
.history-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--stroke);
    color: var(--t2);
    vertical-align: middle;
    white-space: nowrap;
}
.history-table tr:last-child td { border-bottom: none; }
.history-table tbody tr:hover td { background: var(--hover); }
.history-table .thumb {
    width: 48px;
    height: 48px;
    border-radius: var(--r-sm);
    object-fit: cover;
    border: 1px solid var(--stroke);
    display: block;
}
.history-table .fname { color: var(--t1); font-weight: 500; }
.history-table .fsub { font-size: 12px; color: var(--t3); margin-top: 2px; }
.history-table .row-ops { display: flex; gap: 6px; }

/* 分页 */
.pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;
    font-size: 13px;
    color: var(--t2);
}
.pagination .pages { display: flex; gap: 6px; }
.pagination .pg-btn {
    min-width: 32px;
    height: 32px;
    padding: 0 10px;
    border-radius: var(--r-sm);
    border: 1px solid var(--stroke);
    background: var(--bg2);
    color: var(--t2);
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .15s;
}
.pagination .pg-btn:hover { border-color: var(--primary-bd); color: var(--primary); }
.pagination .pg-btn.on {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

/* ══════════ 上传页 ══════════ */

.upload-area {
    border: 2px dashed var(--primary-bd);
    border-radius: var(--r);
    background: var(--bg2);
    padding: 48px 24px;
    text-align: center;
    cursor: pointer;
    transition: border-color .2s, background .2s;
}
.upload-area:hover,
.upload-area.dragover {
    border-color: var(--primary);
    background: var(--primary-bg);
}
.upload-area svg { color: var(--primary); margin-bottom: 12px; }
.upload-area .t { font-size: 15px; color: var(--t1); margin: 0 0 6px; }
.upload-area .s { font-size: 13px; color: var(--t3); margin: 0; }
.upload-area input[type="file"] {
    /* 视觉隐藏但保留可编程 click（display:none 在 Safari 无法唤起文件选择器） */
    position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;
}

.image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
}
.image-item {
    background: var(--bg2);
    border: 1px solid var(--stroke);
    border-radius: var(--r);
    overflow: hidden;
}
.image-item .preview {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--bg);
}
.image-item .preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.image-item .preview .del {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity .15s;
}
.image-item:hover .preview .del { opacity: 1; }
.image-item .meta {
    padding: 10px 12px;
    font-size: 12.5px;
    color: var(--t3);
    display: flex;
    justify-content: space-between;
    gap: 8px;
}
.image-item .meta .nm {
    color: var(--t2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 功能选择（步骤卡片） */
.fn-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 14px;
}
.fn-card {
    background: var(--bg2);
    border: 1px solid var(--stroke);
    border-radius: var(--r);
    padding: 18px 14px;
    text-align: center;
    cursor: pointer;
    transition: border-color .2s, box-shadow .2s;
}
.fn-card:hover { border-color: var(--primary-bd); }
.fn-card.selected {
    border-color: var(--primary);
    background: var(--primary-bg);
    box-shadow: 0 0 0 1px var(--primary);
}
.fn-card .ic {
    color: var(--primary);
    margin-bottom: 8px;
    display: inline-flex;
}
.fn-card .nm { font-size: 14px; font-weight: 600; color: var(--t1); margin-bottom: 4px; }
.fn-card .ds { font-size: 12px; color: var(--t3); }

/* 参数设置行 */
.settings-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

/* ══════════ 结果页 ══════════ */

.compare-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.compare-item .lab {
    font-size: 13px;
    color: var(--t3);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.compare-item .imgbox {
    background:
        linear-gradient(45deg, var(--hover) 25%, transparent 25%, transparent 75%, var(--hover) 75%),
        linear-gradient(45deg, var(--hover) 25%, transparent 25%, transparent 75%, var(--hover) 75%);
    background-size: 16px 16px;
    background-position: 0 0, 8px 8px;
    border: 1px solid var(--stroke);
    border-radius: var(--r);
    overflow: hidden;
    aspect-ratio: 4 / 3;
}
.compare-item .imgbox img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* 详情键值对 */
.kv-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
}
.kv-item {
    background: var(--bg);
    border: 1px solid var(--stroke);
    border-radius: var(--r-sm);
    padding: 12px 14px;
}
.kv-item .k { font-size: 12px; color: var(--t3); margin-bottom: 4px; }
.kv-item .v { font-size: 15px; font-weight: 600; color: var(--t1); }

/* 批量结果 */
.batch-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 14px;
}
.batch-item {
    background: var(--bg2);
    border: 1px solid var(--stroke);
    border-radius: var(--r);
    overflow: hidden;
}
.batch-item .im { aspect-ratio: 4 / 3; background: var(--bg); }
.batch-item .im img { width: 100%; height: 100%; object-fit: cover; display: block; }
.batch-item .mt {
    padding: 10px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 12.5px;
}
.batch-item .mt .nm {
    color: var(--t2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ══════════ 登录页 ══════════ */

.login-wrap {
    min-height: calc(100vh - 56px - 28px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 0;
}
.login-card {
    width: 420px;
    max-width: 100%;
    background: var(--bg2);
    border: 1px solid var(--stroke);
    border-radius: var(--r);
    box-shadow: var(--shadow2);
    padding: 36px 32px 28px;
}
.login-card .brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
    text-align: center;
    /* 重置 theme-light.css 全局 .brand（后台侧栏品牌栏）的冲突样式 */
    height: auto;
    padding: 0;
    border-bottom: 0;
}
.login-card .brand .logo-ai { width: 44px; height: 44px; border-radius: 12px; font-size: 18px; }
.login-card .brand .tt { font-size: 20px; font-weight: 700; color: var(--t1); margin: 0; }
.login-card .brand p { font-size: 13px; color: var(--t3); margin: 0; }

/* 登录方式切换 */
.login-tabs {
    display: flex;
    border-bottom: 1px solid var(--stroke);
    margin-bottom: 24px;
}
.login-tabs .tab {
    flex: 1;
    text-align: center;
    padding: 10px 0;
    font-size: 14px;
    color: var(--t2);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.login-tabs .tab.on {
    color: var(--primary);
    font-weight: 600;
    border-bottom-color: var(--primary);
}

/* 微信二维码 */
.qr-box {
    text-align: center;
    padding: 8px 0 4px;
}
.qr-box .qr-frame {
    display: inline-block;
    background: #fff;
    padding: 10px;
    border-radius: var(--r-sm);
    border: 1px solid var(--stroke);
    margin-bottom: 14px;
}
.qr-box .qr-frame img {
    display: block;
    width: 180px;
    height: 180px;
}
.qr-box .tip { font-size: 13.5px; color: var(--t2); margin: 0 0 6px; }
.qr-box .tip b { color: #09BB07; }
.qr-box .sub { font-size: 12px; color: var(--t3); margin: 0; }

/* ══════════ 支付页 ══════════ */

.pay-layout {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 24px;
    align-items: start;
}
@media (max-width: 900px) {
    .pay-layout { grid-template-columns: 1fr; }
}

.panel {
    background: var(--bg2);
    border: 1px solid var(--stroke);
    border-radius: var(--r);
}
.panel .panel-h {
    padding: 14px 20px;
    border-bottom: 1px solid var(--stroke);
    font-size: 15px;
    font-weight: 600;
    color: var(--t1);
    display: flex;
    align-items: center;
    gap: 8px;
}
.panel .panel-b { padding: 20px; }

/* 账户统计 */
.stat-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.stat-cell {
    background: var(--bg);
    border: 1px solid var(--stroke);
    border-radius: var(--r-sm);
    padding: 14px 16px;
    text-align: center;
}
.stat-cell .k { font-size: 12px; color: var(--t3); margin-bottom: 6px; }
.stat-cell .v { font-size: 20px; font-weight: 700; color: var(--t1); }
.stat-cell .v.hl { color: var(--primary); }

/* 支付方式 */
.pm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
}
.pm-item {
    border: 1px solid var(--stroke);
    border-radius: var(--r);
    padding: 16px 12px;
    text-align: center;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
    background: var(--bg);
}
.pm-item:hover { border-color: var(--primary-bd); }
.pm-item.selected {
    border-color: var(--primary);
    box-shadow: 0 0 0 1px var(--primary);
    background: var(--primary-bg);
}
.pm-item .pm-ic {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 8px;
}
.pm-item .pm-ic.wechat { background: #09BB07; }
.pm-item .pm-ic.alipay { background: #1677FF; }
.pm-item .pm-ic.bank { background: var(--primary); }
.pm-item .pm-ic.balance { background: var(--amber); }
.pm-item .nm { font-size: 14px; font-weight: 500; color: var(--t1); }
.pm-item .ds { font-size: 12px; color: var(--t3); margin-top: 2px; }

/* 充值金额选择 */
.amt-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}
.amt-item {
    position: relative;
    border: 1px solid var(--stroke);
    border-radius: var(--r);
    padding: 16px 10px 12px;
    text-align: center;
    cursor: pointer;
    background: var(--bg);
    transition: border-color .15s, box-shadow .15s;
}
.amt-item:hover { border-color: var(--primary-bd); }
.amt-item.selected {
    border-color: var(--primary);
    box-shadow: 0 0 0 1px var(--primary);
    background: var(--primary-bg);
}
.amt-item .a { font-size: 22px; font-weight: 700; color: var(--t1); }
.amt-item.selected .a { color: var(--primary); }
.amt-item .g {
    font-size: 12px;
    color: var(--primary-tx);
    background: var(--primary-bg);
    border-radius: 999px;
    display: inline-block;
    padding: 1px 10px;
    margin-top: 6px;
}

/* 订单摘要 */
.order-list { list-style: none; margin: 0; padding: 0; }
.order-list li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 13.5px;
    color: var(--t2);
    padding: 8px 0;
}
.order-list li .ov { color: var(--t1); font-weight: 500; text-align: right; }
.order-list li.total {
    border-top: 1px dashed var(--stroke);
    margin-top: 8px;
    padding-top: 14px;
    font-size: 15px;
}
.order-list li.total .ov { color: var(--primary); font-size: 24px; font-weight: 700; }

/* ══════════ 步骤条（上传/支付流程） ══════════ */

.steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.steps .st {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--t3);
}
.steps .st .n {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid var(--stroke);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    background: var(--bg2);
}
.steps .st.on { color: var(--primary); font-weight: 600; }
.steps .st.on .n {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}
.steps .st.done { color: var(--t2); }
.steps .st.done .n {
    background: var(--primary-bg);
    border-color: var(--primary-bd);
    color: var(--primary-tx);
}
.steps .sep { color: var(--t3); font-size: 12px; }

/* ══════════ 通用卡片区块间距 ══════════ */

.stack > * + * { margin-top: 20px; }

/* ══════════ 响应式 ══════════ */

@media (max-width: 767px) {
    .hero { padding: 32px 0 28px; }
    .hero h1 { font-size: 26px; }
    .hero .sub { font-size: 14px; }
    .feature-grid { grid-template-columns: 1fr 1fr; }
    .compare-grid { grid-template-columns: 1fr; }
    .footer { flex-direction: column; text-align: center; }
    .navbar-fixed { padding: 0 14px; gap: 12px; }
    .navbar-fixed .tn-links a { padding: 0 10px; font-size: 13px; }
    .main-inner { padding: 0 14px 20px; }
    .login-card { padding: 28px 20px 22px; }
}
@media (max-width: 480px) {
    .feature-grid { grid-template-columns: 1fr; }
    .fn-grid { grid-template-columns: 1fr 1fr; }
    .navbar-fixed .tn-links { gap: 2px; }
    .navbar-fixed .tn-links a { padding: 0 6px; font-size: 12px; }
    .stat-row { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════
   v2 追加：创作工作台 / 用户中心 / 芯片 / 紧凑支付卡
   ════════════════════════════════════════════════════════════ */

/* ── 创作工作台（功能页双栏：左 上传+参数 / 右 提示+结果） ── */
.studio {
    display: grid;
    grid-template-columns: 400px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}
.studio-side {
    position: sticky;
    top: 72px;
    max-height: calc(100vh - 88px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 2px;
}
.studio-side::-webkit-scrollbar { width: 6px; }
.studio-side::-webkit-scrollbar-thumb { background: var(--stroke); border-radius: 3px; }

/* 结果区顶栏：提示语 + 开始按钮 */
.result-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
}
.result-bar .rb-ic {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--primary-bg);
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
}
.result-bar .rb-txt {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    color: var(--t2);
    line-height: 1.6;
}
.result-bar .btn { height: 42px; font-size: 15px; padding: 0 30px; flex: none; }

/* 空态 / 生成中 */
.result-empty {
    border: 2px dashed var(--stroke);
    border-radius: var(--r);
    padding: 76px 24px;
    text-align: center;
    color: var(--t3);
}
.result-empty .ic { color: var(--stroke3); margin-bottom: 12px; }
.result-empty .t { font-size: 15px; color: var(--t2); margin: 0 0 6px; }
.result-empty .s { font-size: 13px; margin: 0; }
.result-loading {
    border: 1px solid var(--stroke);
    border-radius: var(--r);
    padding: 64px 24px;
    text-align: center;
    color: var(--t3);
    font-size: 14px;
}
.spinner {
    width: 34px;
    height: 34px;
    border: 3px solid var(--primary-bg);
    border-top-color: var(--primary);
    border-radius: 50%;
    margin: 0 auto 14px;
    animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* 结果操作按钮排 */
.result-ops {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 18px;
}

/* ── 参数行（label + 控件） ── */
.pr { display: flex; flex-direction: column; gap: 8px; }
.pr + .pr { margin-top: 16px; }
.pr > .lb {
    font-size: 13px;
    font-weight: 600;
    color: var(--t1);
    display: flex;
    align-items: center;
    gap: 6px;
}
.pr > .lb .sub { font-weight: 400; font-size: 12px; color: var(--t3); }

/* 选项芯片（角度 / 风格 / 负面内容等快捷选择） */
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
    height: 30px;
    padding: 0 14px;
    border: 1px solid var(--stroke);
    border-radius: 999px;
    background: var(--bg);
    font-size: 12.5px;
    color: var(--t2);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
    user-select: none;
}
.chip:hover { border-color: var(--primary-bd); color: var(--primary); }
.chip.on {
    background: var(--primary-bg);
    border-color: var(--primary);
    color: var(--primary-tx);
    font-weight: 500;
}

/* 开关行（细节增强 / 水印 等） */
.sw-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--stroke);
    border-radius: var(--r-sm);
    background: var(--bg);
}
.sw-row .tx { flex: 1; min-width: 0; }
.sw-row .tx .nm { font-size: 13.5px; font-weight: 500; color: var(--t1); }
.sw-row .tx .ds { font-size: 12px; color: var(--t3); margin-top: 1px; }
.sw-row + .sw-row,
.sw-row + .pr,
.pr + .sw-row { margin-top: 12px; }

/* 尺寸选择：宽 × 高 */
.size-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 8px;
    align-items: center;
}
.size-row .x { color: var(--t3); font-size: 13px; text-align: center; }

/* 批量结果：单张重新生成 */
.batch-item { position: relative; }
.batch-item .re-gen {
    position: absolute;
    inset: 0;
    background: rgba(127, 127, 127, .35);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
}
.icbtn {
    width: 28px;
    height: 28px;
    border: 1px solid var(--stroke);
    border-radius: var(--r-sm);
    background: var(--bg2);
    color: var(--t2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex: none;
    transition: border-color .15s, color .15s;
}
.icbtn:hover { border-color: var(--primary); color: var(--primary); }

/* ── 用户中心（col-3 / col-9 双栏） ── */
.ucenter {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}
/* 左侧不吸顶：与右侧内容始终保持同一水平线 */
.uc-side {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.uc-user { padding: 20px 16px; text-align: center; }
.uc-user .avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(140deg, #5567F1, #4353E0);
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
}
.uc-user .nm { font-size: 15px; font-weight: 600; color: var(--t1); }
.uc-user .id { font-size: 12px; color: var(--t3); margin-top: 2px; }
.uc-user .quota {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--stroke);
    font-size: 12px;
    color: var(--t3);
}
.uc-user .quota b {
    display: block;
    font-size: 20px;
    color: var(--primary);
    margin-top: 2px;
}
.uc-menu { padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.uc-menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 42px;
    padding: 0 14px;
    border-radius: var(--r-sm);
    font-size: 14px;
    color: var(--t2);
    cursor: pointer;
    transition: background .15s, color .15s;
}
.uc-menu a:hover { background: var(--hover); color: var(--t1); }
.uc-menu a.on { background: var(--primary-bg); color: var(--primary-tx); font-weight: 600; }

/* 页面切换 */
.uc-page { display: none; }
.uc-page.on { display: block; }

/* 页签容器（styleguide .tabs 白底承载） */
.tabs-wrap .tabs { padding: 0 8px; }

/* 时间范围筛选 */
.dt-range { display: flex; align-items: center; gap: 6px; }
.dt-range .x { color: var(--t3); font-size: 12px; }
.dt-range .inp { min-width: 186px; }
.inp input[type="datetime-local"] { font-size: 12.5px; }

/* 任务ID列：复制按钮 */
.tid { display: inline-flex; align-items: center; gap: 6px; }
.tid .mono { font-size: 12px; }
.tid .icbtn { width: 22px; height: 22px; border-radius: 5px; }

/* 紧凑支付方式卡（充值中心 · 仅微信/支付宝） */
.pmc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 12px;
}
.pm-compact {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--stroke);
    border-radius: var(--r-sm);
    background: var(--bg);
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s, background .15s;
    min-width: 0;
}
.pm-compact:hover { border-color: var(--primary-bd); }
.pm-compact.selected {
    border-color: var(--primary);
    box-shadow: 0 0 0 1px var(--primary);
    background: var(--primary-bg);
}
.pm-compact .pm-ic { width: 34px; height: 34px; border-radius: 8px; font-size: 15px; margin: 0; }
.pm-compact .tx { flex: 1; min-width: 0; }
.pm-compact .tx .nm { font-size: 13.5px; font-weight: 600; color: var(--t1); }
.pm-compact .tx .ds {
    font-size: 11.5px;
    color: var(--t3);
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pm-compact .ck { color: var(--primary); opacity: 0; flex: none; transition: opacity .15s; }
.pm-compact.selected .ck { opacity: 1; }

/* ── v2 响应式补充 ── */
@media (max-width: 960px) {
    .studio { grid-template-columns: 1fr; }
    .studio-side { position: static; max-height: none; overflow: visible; }
    .ucenter { grid-template-columns: 1fr; }
    .uc-side { position: static; flex-direction: row; align-items: stretch; }
    .uc-user { flex: 1; text-align: left; display: flex; align-items: center; gap: 14px; }
    .uc-user .avatar { margin: 0; }
    .uc-user .quota { margin: 0; padding: 0 0 0 14px; border-top: 0; border-left: 1px solid var(--stroke); }
    .uc-menu { flex: 1.6; flex-direction: row; overflow-x: auto; }
}
@media (max-width: 600px) {
    .result-bar { flex-wrap: wrap; }
    .result-bar .btn { width: 100%; }
    .dt-range { flex-direction: column; align-items: stretch; }
    .dt-range .x { text-align: center; }
}

/* ════════════════════════════════════════════════════════════
   v3 追加：纵向工作台 / 紧凑模式 / 小上传区 / 灯箱 / 右侧抽屉 / 任务汇总
   ════════════════════════════════════════════════════════════ */

/* ── 纵向工作台（背景移除 / 智能修图：col-12 纵向排布） ── */
.vflow .upload-area { padding: 22px 16px; }
.vflow .image-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }

/* ── 工作台紧凑模式（多图融合 / 批量生图） ── */
.studio { grid-template-columns: 380px minmax(0, 1fr); gap: 20px; }
.studio .panel .panel-h { padding: 10px 16px; font-size: 14px; }
.studio .panel .panel-b { padding: 14px 16px; }
.studio .stack > * + * { margin-top: 12px; }
.studio .pr + .pr { margin-top: 10px; }
.studio .sw-row + .sw-row,
.studio .sw-row + .pr,
.studio .pr + .sw-row { margin-top: 8px; }
.studio .image-grid { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.studio .image-item .meta { padding: 6px 8px; font-size: 11.5px; }
.studio .batch-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.studio .result-empty { padding: 56px 24px; }

/* 小号上传区（融合 / 批量） */
.upload-area.sm { padding: 14px 12px; }
.upload-area.sm svg { margin-bottom: 6px; }
.upload-area.sm .t { font-size: 13px; margin-bottom: 2px; }
.upload-area.sm .s { font-size: 12px; }

/* ── 图片放大查看（灯箱） ── */
.image-item .preview img,
.batch-item .im img,
.history-table .thumb,
.compare-item .imgbox img { cursor: zoom-in; }
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 300;
    background: rgba(13, 20, 28, .85);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 48px 56px;
    opacity: 0;
    transition: opacity .2s;
}
.lightbox.show { opacity: 1; }
/* 定位锚容器：跟随图片尺寸，X / 图注相对它排布（而非相对全屏视口） */
.lightbox .lb-inner {
    position: relative;
    max-width: 100%;
}
.lightbox img {
    max-width: min(94vw, 1280px);
    max-height: 82vh;
    border-radius: var(--r);
    box-shadow: 0 24px 64px rgba(0, 0, 0, .55);
}
.lightbox .lb-x {
    position: absolute;
    top: -46px;
    right: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.lightbox .lb-x:hover { background: rgba(255, 255, 255, .25); }
.lightbox .lb-cap {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding-top: 14px;
    text-align: center;
    color: rgba(255, 255, 255, .85);
    font-size: 13px;
}

/* ── 右侧抽屉（充值详情等） ── */
.drawer-mask {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(13, 20, 28, .45);
    opacity: 0;
    transition: opacity .22s;
}
.drawer-mask.show { opacity: 1; }
.drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 201;
    width: 420px;
    max-width: 92vw;
    background: var(--bg2);
    border-left: 1px solid var(--stroke);
    box-shadow: -16px 0 48px rgba(0, 0, 0, .14);
    transform: translateX(102%);
    transition: transform .25s;
    display: flex;
    flex-direction: column;
}
.drawer.show { transform: none; }
.drawer .dw-h {
    padding: 16px 20px;
    border-bottom: 1px solid var(--stroke);
    font-size: 15px;
    font-weight: 600;
    color: var(--t1);
    display: flex;
    align-items: center;
    gap: 8px;
}
.drawer .dw-h .dw-x {
    margin-left: auto;
    color: var(--t3);
    cursor: pointer;
    display: inline-flex;
}
.drawer .dw-h .dw-x:hover { color: var(--t1); }
.drawer .dw-b { padding: 6px 20px 20px; overflow-y: auto; flex: 1; }
.dw-kv {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px dashed var(--stroke);
    font-size: 13.5px;
    color: var(--t3);
}
.dw-kv .v { color: var(--t1); font-weight: 500; text-align: right; }
.dw-kv .v.hl { color: var(--primary); font-weight: 700; font-size: 16px; }

/* ── 任务汇总条（批量结果同属一个 Task） ── */
.task-bar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 14px 18px; }
.task-bar .tk-ic {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--primary-bg);
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
}
.task-bar .tk-id .k { font-size: 11.5px; color: var(--t3); margin-bottom: 2px; }
.task-bar .tk-meta {
    margin-left: auto;
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    font-size: 12.5px;
    color: var(--t3);
}
.task-bar .tk-meta b { color: var(--t1); font-weight: 600; }

/* 充值历史：整行可点击查看详情 */
#rcTbl tbody tr { cursor: pointer; }
/* 状态标签不换行不被压缩截断（如「失败（已退款）」） */
.history-table .tag { white-space: nowrap; }

/* ══════════ v4：remove / retouch 上传区与参数区分栏（col-3 / col-9） ══════════ */
.up-split { display: grid; grid-template-columns: minmax(170px, 1fr) minmax(0, 3fr); gap: 14px; align-items: stretch; }
.up-split .upload-area { margin: 0; height: 100%; min-height: 170px; display: flex; flex-direction: column; justify-content: center; }
.up-right { border: 1px dashed var(--stroke2); border-radius: var(--r); padding: 12px; min-height: 170px; }
.up-right .image-grid { margin: 0; }
.up-empty { min-height: 146px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--t3); font-size: 12.5px; text-align: center; line-height: 1.7; }
.up-empty svg { opacity: .45; }

.pm-split { display: grid; grid-template-columns: minmax(170px, 1fr) minmax(0, 3fr); gap: 14px; align-items: start; }
.mode-list { display: flex; flex-direction: column; gap: 10px; }
.mode-item { border: 1px solid var(--stroke2); border-radius: var(--r); padding: 12px; cursor: pointer; display: flex; gap: 10px; align-items: flex-start; transition: border-color .15s, background .15s; }
.mode-item:hover { border-color: var(--primary-bd); }
.mode-item.on { border-color: var(--primary); background: var(--primary-bg); }
.mode-item .mi-ic { width: 34px; height: 34px; border-radius: var(--r-sm); background: var(--primary-bg); color: var(--primary-tx); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.mode-item.on .mi-ic { background: var(--primary); color: #fff; }
.mode-item .mi-tx { display: flex; flex-direction: column; min-width: 0; }
.mode-item .nm { display: block; font-size: 14px; font-weight: 600; color: var(--t1); }
.mode-item .ds { display: block; font-size: 12px; color: var(--t3); margin-top: 2px; line-height: 1.5; }
.mode-quota { font-size: 12px; color: var(--t3); line-height: 1.7; padding: 0 2px; }

/* retouch：修改描述 + 参数设置 两栏并排（col-6 / col-6 平均分开） */
.duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: stretch; }

@media (max-width: 980px) {
    .up-split, .pm-split, .duo { grid-template-columns: 1fr; }
    .up-split .upload-area, .up-right { min-height: 130px; }
}

/* ══════════ v5：参数行横排（参数名与参数值同一行，值向左紧贴参数名） ══════════ */
.pr.pr-row { flex-direction: row; align-items: center; gap: 12px; flex-wrap: wrap; }
.pr.pr-row > .lb { flex: none; }
.pr.pr-row > .size-row { flex: 1 1 200px; min-width: 0; }
.pr.pr-row .vl { font-size: 13.5px; font-weight: 500; color: var(--t1); }

/* ══════════ v6：处理面板并排（remove：模式+参数｜开始处理 col-6 双栏；retouch：描述｜参数｜开始修改 col-4 三栏） ══════════ */
.mode-list.h2 { flex-direction: row; }
.mode-list.h2 .mode-item { flex: 1 1 0; }
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.start-tip { font-size: 12.5px; color: var(--t3); line-height: 1.7; margin: 0; }
.start-panel .btn.primary { width: 100%; height: 46px; font-size: 15px; margin-top: 16px; }
@media (max-width: 1080px) { .trio { grid-template-columns: 1fr; } }

/* ══════════ v7：右栏上传缩略图（开始按钮下方 · 小尺寸）+ 紧凑数字分段器 ══════════ */
.studio-main .image-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.studio-main .image-item .meta { padding: 5px 8px; font-size: 11px; }
.seg.dense .s { padding: 0 9px; }
/* up-split 上传区：图标与文案水平居中（纵向已由 justify-content:center 居中） */
.up-split .upload-area { align-items: center; }

/* 拖拽上传反馈 */
.upload-area.dragover { border-color: var(--primary) !important; background: var(--primary-bg) !important; }