/* ============================================================================
   前台站点通用样式
   设计语言：LOGO 黑底 + 黄色点缀（取自 .jarvis/knowledge/反馈3_LOGO黑底.jpg 的实际像素：
   底 #0f0f0f、字黄 #fcf004）。全站强调色一律引用下方 :root 里的品牌变量，
   禁止在具体规则里再写死主色色值，换主题时只需改这一处。
   ============================================================================ */

:root {
    /* ── 品牌主题（LOGO 黑底 + 黄色点缀）──────────────────────────────────
       --brand-accent        LOGO 亮黄，全站唯一强调色（按钮/选中态/标签/链接/焦点环）
       --brand-accent-strong 高亮一档，用于 hover 与深色底上的文字链接
       --brand-accent-dark   深一档，用于渐变收尾与 pressed 态
       --brand-accent-ink    黄色「面」上的文字色（即 LOGO 黑），黄底黑字对比度约 16.8:1
       --brand-accent-soft   深色底上当「字」用的浅黄，避免大段纯黄文字过于刺眼
       --brand-accent-rgb    供 rgba() 调透明度用的三元组，写法 rgba(var(--brand-accent-rgb), .16)
       ────────────────────────────────────────────────────────────────── */
    --brand-accent: #fcf004;
    --brand-accent-strong: #fff84d;
    --brand-accent-dark: #d9ce00;
    --brand-accent-ink: #0f0f0f;
    --brand-accent-soft: #f4ec8f;
    --brand-accent-rgb: 252, 240, 4;
    --brand-black: #0f0f0f;

    /* 下面这组 --site-* 是历史命名，全站规则都在引用它们，统一指向上面的品牌色，
       这样既完成换色又不必逐条改写引用；语义色（失败红 / 成功绿）保持原样不换。 */
    --site-primary: var(--brand-accent);
    --site-primary-dark: var(--brand-accent-dark);
    --site-primary-light: var(--brand-accent-strong);
    --site-accent: var(--brand-accent-dark);
    --site-points: #ffc93d;
    --site-points-rgb: 255, 201, 61;
    --site-bg: #0d0d0f;
    --site-bg-rgb: 13, 13, 15;
    --site-bg-deep-rgb: 6, 6, 7;
    --site-bg-soft: #141416;
    --site-bg-soft-rgb: 20, 20, 22;
    --site-panel: #1a1a1e;
    --site-panel-rgb: 26, 26, 30;
    --site-panel-border: rgba(255, 255, 255, 0.08);
    --site-text: #f4f4f2;
    --site-text-muted: #9b9ba2;
    /* 最暗的一档正文色，用在输入框 placeholder 与「0 / 2000」这类小号字数计数上。
       原值 #6e6e76 压在一体化输入条(#17171b)与个人中心留言卡(#141416)这些
       比页面底色更亮的面板上只有 3.5:1，达不到 WCAG AA 的 4.5:1；提到 #8a8a92 后
       两处分别是 5.22:1 / 5.37:1，同时仍比 --site-text-muted 暗一档，层级不变。 */
    --site-text-faint: #8a8a92;
    --site-danger: #f24957;
    --site-success: #2bb673;
    --site-radius: 16px;

    /* ── 全站滚动条（细样式，与黑底融合）─────────────────────────────────
       浏览器默认滚动条在黑底页面上是一条白色宽条，用户实测反馈「旁边的滚动条要换样式，
       跟整体融合点，原来的有点突兀」「不会有那个白色的滚动条太突兀，一个模块一个模块
       被分割开了」，所以全站统一收成 8px 细条：

         --scrollbar-track        轨道透明，绝不出现白色块，直接透出页面/卡片底色
         --scrollbar-thumb        滑块常态色。用半透明中性灰而不是纯深色，是因为压在
                                  #0d0d0f 的黑底上实际合成出来就是深灰（约 #38383d），
                                  既符合「深色半透明」又不会在黑底上彻底看不见
         --scrollbar-thumb-hover  hover 提亮一档，让用户知道这条可以拖
         --scrollbar-thumb-active 拖动中带一点品牌黄，呼应「黑底 + 黄色点缀」

       深色/浅色容器如需另配色，覆盖这几个变量即可（后台 admin.css 就是这么做的），
       具体规则里不要再写死滚动条色值。
       ────────────────────────────────────────────────────────────────── */
    --scrollbar-size: 8px;
    --scrollbar-track: transparent;
    --scrollbar-thumb: rgba(150, 150, 160, 0.32);
    --scrollbar-thumb-hover: rgba(205, 205, 215, 0.58);
    --scrollbar-thumb-active: rgba(var(--brand-accent-rgb), 0.5);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
    color: var(--site-text);
    background: var(--site-bg);
    -webkit-font-smoothing: antialiased;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
    display: block;
}

/* ---------------------------------------------------------------------- */
/* 全站滚动条                                                                */
/*                                                                        */
/* 写在 * 上而不是逐个容器列举，是为了一次覆盖到所有会滚的地方：页面主滚动条、    */
/* 自由创意生成页的提示词输入框内部滚动条、结果流、模型侧栏、各参数弹出面板、      */
/* 表格横向滚动条，以及以后新增的任何滚动容器（不必再回来补规则）。             */
/*                                                                        */
/* 需要局部关掉的地方用更高优先级的类选择器覆盖即可，例如窄屏顶部导航条那段就用     */
/* `.site-header-nav::-webkit-scrollbar { display: none }` 把滚动条整条藏掉。   */
/* ---------------------------------------------------------------------- */

/* Firefox / 标准属性兜底：thin 只有「细 / 正常 / 无」三档，颜色由 scrollbar-color
   指定（前者滑块、后者轨道）。

   ⚠️ 必须包在 @supports not selector(::-webkit-scrollbar) 里，不能无条件写：
   Chrome 121 起也认这两个标准属性，并且规定「标准属性一旦出现，就整体忽略
   ::-webkit-scrollbar 那套规则」。无条件写的话 Chrome 会走标准分支，下面精心定的
   8px 宽度、999px 圆角、输入框里收窄到 6px 全部作废，只剩浏览器自己的 thin 样式。
   加了这层判断后：
     Chrome / Edge          → 支持 selector() 且认得 ::-webkit-scrollbar，条件为假，
                              跳过本块，完整走下面的 ::-webkit-* 规则
     Firefox                → 不认 ::-webkit-scrollbar，条件为真，用这里的标准属性
     Safari 16.4 以下        → 连 selector() 查询本身都不支持，整条 @supports 条件非法
                              按假处理，同样跳过本块 —— 正好，它本来就支持 ::-webkit-* */
@supports not selector(::-webkit-scrollbar) {
    * {
        scrollbar-width: thin;
        scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
    }
}

/* WebKit / Blink（Chrome、Edge、Safari）分支 */
*::-webkit-scrollbar {
    width: var(--scrollbar-size);
    height: var(--scrollbar-size);
}

*::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
    border-radius: 999px;
}

*::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb);
    /* 1px 透明边 + background-clip:padding-box 让滑块比轨道再窄一圈（实际可见 6px），
       看起来像浮在内容上的一条细线，而不是把模块切开的一道边框 */
    border: 1px solid transparent;
    background-clip: padding-box;
    border-radius: 999px;
}

*::-webkit-scrollbar-thumb:hover {
    background-color: var(--scrollbar-thumb-hover);
}

*::-webkit-scrollbar-thumb:active {
    background-color: var(--scrollbar-thumb-active);
}

/* 纵横滚动条交汇处的直角，默认会露出一块浅色小方块，一并抹平 */
*::-webkit-scrollbar-corner {
    background: transparent;
}

/* 滚动条两端的上下/左右箭头按钮：系统设置为「始终显示滚动条」时（用户反馈截图里的提示词
   输入框就是这种情况）会在细滚动条两头各画一个浅色方块箭头，比滚动条本身还突兀，整体去掉 */
*::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
}

/* 提示词输入框内部：它本身是底部输入卡片里的一小块区域，滚动条再收窄一档，
   避免在这么小的范围内还占掉 8px 宽度（用户反馈截图里圈的就是这条白色小滚动条）。 */
.gen-prompt-input::-webkit-scrollbar,
.gen-popover::-webkit-scrollbar,
.gen-popover-list::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

/* ---------------------------------------------------------------------- */
/* 顶部导航栏                                                                */
/* ---------------------------------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 32px;
    background: rgba(var(--site-bg-rgb), 0.88);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--site-panel-border);
}

.site-header-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 16px;
}

.site-header-brand .logo-mark {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--site-primary) 0%, var(--site-accent) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-accent-ink);
    font-weight: 700;
    font-size: 15px;
    flex-shrink: 0;
}

/* 品牌区只剩副标「新一代AI创意图设计工具」一行（用户第五轮反馈把站点名那一行整行划掉，
   批注「只保留 新一代Ai创意图设计工具，这行就行，字顺便放大到合适大小」）。
   它现在是品牌主文案，字号/字重要吃下原来站点名那一档的视觉分量，并与 LOGO 垂直居中。 */
.site-header-brand .brand-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.25;
    min-width: 0;
}

.site-header-brand .brand-slogan {
    /* 原副标 11px 次要小字 → 提到 18px（原站点名那行是 16px），是品牌区唯一一行文案 */
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.3px;
    /* 浅黄 #f4ec8f 压在页头底色（#0d0d0f）上实测 15.94:1，远超 WCAG AA 的 4.5:1 */
    color: var(--brand-accent-soft);
    white-space: nowrap;
}

.site-header-nav {
    display: flex;
    align-items: center;
    gap: 6px;
}

.site-header-nav a {
    padding: 8px 14px;
    /* 品牌区放大后中等宽度下这一行会被挤窄，没有 nowrap 会把「自由创意生成」
       逐字竖排成一列。导航文案是固定的四项，任何宽度下都必须整词一行。 */
    white-space: nowrap;
    border-radius: 8px;
    font-size: 14px;
    color: var(--site-text-muted);
    transition: background 0.15s ease, color 0.15s ease;
}

.site-header-nav a:hover {
    background: var(--site-bg-soft);
    color: #fff;
}

.site-header-nav a.active {
    background: var(--brand-accent);
    color: var(--brand-accent-ink);
    font-weight: 600;
}

.site-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.site-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 18px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease, background 0.15s ease;
    white-space: nowrap;
}

.site-btn-primary {
    background: linear-gradient(135deg, var(--site-primary) 0%, var(--site-primary-dark) 100%);
    color: var(--brand-accent-ink);
    box-shadow: 0 10px 22px -10px rgba(var(--brand-accent-rgb), 0.75);
}

.site-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 26px -10px rgba(var(--brand-accent-rgb), 0.85);
}

.site-btn-ghost {
    background: transparent;
    color: var(--site-text);
    border: 1.5px solid var(--site-panel-border);
}

.site-btn-ghost:hover {
    border-color: var(--site-primary);
    color: #fff;
}

.site-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
}

.site-header-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px 6px 6px;
    border-radius: 999px;
    background: var(--site-bg-soft);
}

.site-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--site-primary) 0%, var(--site-accent) 100%);
    color: var(--brand-accent-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    flex-shrink: 0;
}

.site-header-user .user-name {
    font-size: 13px;
    font-weight: 600;
    max-width: 96px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.site-header-user .user-points {
    font-size: 12px;
    color: var(--site-points);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 2px;
}

.site-logout-link {
    font-size: 12px;
    color: var(--site-text-muted);
    padding: 4px 8px;
}

.site-logout-link:hover {
    color: var(--site-danger);
}

/* ---------------------------------------------------------------------- */
/* 左下角积分悬浮角标（参考主流 AI 绘图工具界面样式）                              */
/* ---------------------------------------------------------------------- */
.points-float-widget {
    position: fixed;
    left: 18px;
    bottom: 18px;
    z-index: 60;
    /* 悬浮角标固定在左下角，页面滚动时会盖住下方内容（如模板卡片的“开始批量生成”区域）。
       整体不接收点击事件，让点击穿透到被盖住的内容上，只有“充值”按钮本身可点。 */
    pointer-events: none;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px 8px 8px;
    border-radius: 999px;
    background: rgba(var(--site-panel-rgb), 0.96);
    border: 1px solid var(--site-panel-border);
    box-shadow: 0 16px 34px -16px rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(10px);
}

.points-float-widget .site-avatar {
    width: 34px;
    height: 34px;
    font-size: 14px;
}

.points-float-widget .points-user-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.2;
}

.points-float-widget .points-user-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--site-text);
    max-width: 96px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.points-float-widget .points-user-balance {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 13px;
    font-weight: 700;
    color: var(--site-points);
}

.points-float-widget .points-recharge-btn {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(var(--site-points-rgb), 0.16);
    color: var(--site-points);
    font-size: 12px;
    font-weight: 700;
    border: 1px solid rgba(var(--site-points-rgb), 0.35);
    white-space: nowrap;
}

.points-float-widget .points-recharge-btn:hover {
    background: rgba(var(--site-points-rgb), 0.28);
}

/* ---------------------------------------------------------------------- */
/* 右下角联系方式常驻悬浮卡片（后台未配置二维码时不渲染，见 layout_footer.php）      */
/* 用户第三轮反馈：「联系方式直接改成固定悬浮出现，不要折叠起来，更直观点」，        */
/* 因此二维码直接露出，没有任何「先点开才显示」的折叠交互；点击二维码看清晰大图。    */
/* 尺寸统一走下面这组自定义属性，窄屏 / 生成工作台页只需覆盖变量即可整体缩小，      */
/* 不必把卡片样式重写一遍。                                                     */
/* ---------------------------------------------------------------------- */
.contact-qrcode-widget {
    --contact-qr-size: 122px;
    --contact-card-pad: 12px;
    --contact-title-display: block;
    --contact-title-size: 12px;
    --contact-tip-size: 11px;

    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 60;
    /* 与左下角积分角标同样的处理：容器整体不接收点击，让点击穿透到被盖住的页面内容上，
       只有卡片本身可点，绝不挡住生成按钮 / 结果卡片等操作区 */
    pointer-events: none;
}

.contact-qrcode-card {
    pointer-events: auto;
    width: calc(var(--contact-qr-size) + var(--contact-card-pad) * 2);
    padding: var(--contact-card-pad);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    border-radius: var(--site-radius);
    background: rgba(var(--site-panel-rgb), 0.97);
    border: 1px solid rgba(var(--brand-accent-rgb), 0.28);
    box-shadow: 0 20px 40px -16px rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(10px);
    text-align: center;
}

.contact-qrcode-title {
    display: var(--contact-title-display);
    font-size: var(--contact-title-size);
    font-weight: 700;
    line-height: 1.3;
    color: var(--brand-accent-soft);
}

.contact-qrcode-figure {
    position: relative;
    display: block;
    width: var(--contact-qr-size);
    height: var(--contact-qr-size);
    padding: 0;
    border: none;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    cursor: zoom-in;
}

.contact-qrcode-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #fff;
}

.contact-qrcode-zoom-hint {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 3px 0;
    font-size: 10px;
    color: #fff;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    transition: opacity 0.15s ease;
}

.contact-qrcode-figure:hover .contact-qrcode-zoom-hint,
.contact-qrcode-figure:focus .contact-qrcode-zoom-hint {
    opacity: 1;
}

/* 二维码加载失败（后台图被删 / 路径失效）时不留白块：二维码位换成警示图标，
   完整的失败说明由 contact_widget.js 写进下方文案位（小尺寸卡片里也读得清） */
.contact-qrcode-fallback {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    line-height: 1;
    color: var(--site-danger);
    background: var(--site-bg-soft);
}

.contact-qrcode-widget.is-error .contact-qrcode-tip {
    color: var(--site-danger);
}

.contact-qrcode-widget.is-error .contact-qrcode-figure {
    cursor: default;
    background: var(--site-bg-soft);
}

.contact-qrcode-widget.is-error .contact-qrcode-img,
.contact-qrcode-widget.is-error .contact-qrcode-zoom-hint {
    display: none;
}

.contact-qrcode-widget.is-error .contact-qrcode-fallback {
    display: flex;
}

.contact-qrcode-tip {
    margin: 0;
    font-size: var(--contact-tip-size);
    line-height: 1.45;
    color: var(--site-text-muted);
}

/* ---- 二维码放大层：点击常驻卡片里的二维码看清晰大图，关闭后回到常驻小卡片 ---- */
.contact-qrcode-zoom-layer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 130;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 28px;
    background: rgba(0, 0, 0, 0.84);
    backdrop-filter: blur(6px);
}

.contact-qrcode-zoom-layer.is-open {
    display: flex;
}

.contact-qrcode-zoom-panel {
    position: relative;
    max-width: 100%;
    padding: 18px;
    border-radius: var(--site-radius);
    background: var(--site-panel);
    border: 1px solid rgba(var(--brand-accent-rgb), 0.3);
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.9);
    text-align: center;
}

.contact-qrcode-zoom-img {
    width: min(70vw, 320px);
    height: min(70vw, 320px);
    object-fit: contain;
    border-radius: 12px;
    background: #fff;
}

.contact-qrcode-zoom-caption {
    margin: 12px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--site-text);
}

.contact-qrcode-zoom-close {
    position: absolute;
    top: -14px;
    right: -14px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--site-panel-border);
    background: var(--brand-accent);
    color: var(--brand-accent-ink);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

body.contact-qrcode-zoom-lock {
    overflow: hidden;
}

/* 放大层打开时收起常驻卡片，避免小卡片压在大图外圈显得重复 */
body.contact-qrcode-zoom-lock .contact-qrcode-widget {
    display: none;
}

/* ---- 窄屏：卡片自动缩小成「二维码在左、文案在右」的横版 ----
   竖版在 375 宽下有 114px 高，会整块压住页面底部的主操作按钮（如个人中心的「立即兑换」）；
   改成横版后高度只剩 ~58px，占的是与左下角积分角标同一条底边，两者左右分开互不重叠，
   页面也不会产生横向滚动。 */
@media (max-width: 640px) {
    .contact-qrcode-widget {
        --contact-qr-size: 44px;
        --contact-card-pad: 6px;
        --contact-title-display: none;
        --contact-tip-size: 9.5px;
        right: 10px;
        bottom: 12px;
    }

    .contact-qrcode-card {
        flex-direction: row;
        align-items: center;
        gap: 6px;
        width: auto;
        text-align: left;
    }

    .contact-qrcode-tip {
        width: 62px;
    }
}

/* ---------------------------------------------------------------------- */
/* 通用表单卡片（注册 / 登录）                                                 */
/* ---------------------------------------------------------------------- */
.site-auth-page {
    min-height: calc(100vh - 65px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    position: relative;
    overflow: hidden;
}

.site-auth-page::before,
.site-auth-page::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: 0.28;
    pointer-events: none;
}

.site-auth-page::before {
    width: 420px;
    height: 420px;
    background: var(--site-primary);
    top: -120px;
    left: -100px;
}

.site-auth-page::after {
    width: 360px;
    height: 360px;
    background: var(--site-accent);
    bottom: -140px;
    right: -80px;
}

.site-auth-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 400px;
    background: var(--site-panel);
    border: 1px solid var(--site-panel-border);
    border-radius: 20px;
    box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.6);
    padding: 36px 32px 30px;
}

.site-auth-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 24px;
    text-align: center;
}

.site-auth-brand .logo-mark {
    width: 50px;
    height: 50px;
    border-radius: 15px;
    background: linear-gradient(135deg, var(--site-primary) 0%, var(--site-accent) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-accent-ink);
    font-size: 21px;
    font-weight: 700;
    margin-bottom: 14px;
    box-shadow: 0 10px 24px -8px rgba(var(--brand-accent-rgb), 0.6);
}

/* 登录/注册页品牌区的副标。这两页不走通用页头，历史上漏过公共片段，
   所以这里单独补一行，与页头保持同一文案、同样不出现站点名。 */
.site-auth-brand .site-auth-slogan {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: var(--brand-accent-soft);
    margin-bottom: 12px;
    white-space: nowrap;
}

.site-auth-brand h1 {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 4px;
    color: #fff;
}

.site-auth-brand p {
    margin: 0;
    font-size: 12.5px;
    color: var(--site-text-muted);
}

.site-tab-switch {
    display: flex;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    padding: 4px;
    margin-bottom: 20px;
}

.site-tab-switch label {
    flex: 1;
    text-align: center;
    padding: 8px 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--site-text-muted);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.site-tab-switch input {
    display: none;
}

.site-tab-switch input:checked + label {
    background: linear-gradient(135deg, var(--site-primary) 0%, var(--site-primary-dark) 100%);
    color: var(--brand-accent-ink);
}

.site-form-group {
    margin-bottom: 16px;
}

.site-form-group label {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--site-text-muted);
    margin-bottom: 7px;
}

.site-input {
    width: 100%;
    padding: 12px 14px;
    font-size: 14px;
    border: 1.5px solid var(--site-panel-border);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--site-text);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.site-input::placeholder {
    color: var(--site-text-faint);
}

.site-input:focus {
    outline: none;
    border-color: var(--site-primary);
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 0 0 3px rgba(var(--brand-accent-rgb), 0.2);
}

.site-btn-block {
    width: 100%;
    padding: 12px 14px;
    font-size: 15px;
    margin-top: 6px;
}

.site-alert {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 14px;
    border-radius: 10px;
    font-size: 13px;
    margin-bottom: 18px;
    line-height: 1.5;
}

.site-alert-error {
    background: rgba(242, 73, 87, 0.12);
    color: #ff8b93;
    border: 1px solid rgba(242, 73, 87, 0.35);
}

.site-alert-success {
    background: rgba(43, 182, 115, 0.12);
    color: #5fe0a4;
    border: 1px solid rgba(43, 182, 115, 0.35);
}

/* 进行中提示（如模型出图较慢、正在后台继续生成） */
.site-alert-info {
    background: rgba(var(--brand-accent-rgb), 0.14);
    color: var(--brand-accent-soft);
    border: 1px solid rgba(var(--brand-accent-rgb), 0.4);
}

.site-auth-switch {
    margin-top: 20px;
    text-align: center;
    font-size: 13px;
    color: var(--site-text-muted);
}

.site-auth-switch a {
    color: var(--site-primary-light, var(--brand-accent-strong));
    font-weight: 600;
}

.site-auth-switch a:hover {
    text-decoration: underline;
}

/* ---------------------------------------------------------------------- */
/* 登录门禁弹层（未登录点击「一键出图/开始生成」时弹出，不整页跳转）              */
/* 复用 .site-auth-card / .site-tab-switch / .site-form-group / .site-input   */
/* 等登录注册页已有的表单样式，这里只补「浮层」本身的定位与遮罩。                */
/* ---------------------------------------------------------------------- */
body.auth-gate-lock {
    overflow: hidden;
}

.auth-gate-overlay {
    position: fixed;
    inset: 0;
    z-index: 3200;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.auth-gate-overlay.is-open {
    display: flex;
}

.auth-gate-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(var(--site-bg-deep-rgb), 0.82);
    backdrop-filter: blur(4px);
    cursor: pointer;
}

.auth-gate-modal {
    position: relative;
    z-index: 1;
    max-width: 380px;
    width: 100%;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    animation: authGatePopIn 0.18s ease;
}

@keyframes authGatePopIn {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.auth-gate-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    color: var(--site-text-muted);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, color 0.15s ease;
}

.auth-gate-close:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--site-text);
}

.auth-gate-form.is-submitting {
    opacity: 0.7;
    pointer-events: none;
}

/* ---------------------------------------------------------------------- */
/* 首页 Hero                                                                */
/* ---------------------------------------------------------------------- */
/* 用户第五轮反馈把 Hero 区的徽章 / 主标题 / 两行副标 / 描述段四段文案全部划掉
   （.jarvis/knowledge/反馈5_首页文案精简与去遮罩.png，原话「这些字直接去掉好了，
   我直接想在图片上传就好了，顺便把遮罩去掉」），这块现在只剩「背景图 + 三个入口按钮」。
   文案没了就再没有内容能把高度撑起来，因此必须显式给 min-height，否则 Hero 会塌成
   一条只有按钮那么高的窄边、后台辛苦传的背景图根本看不清。 */
.site-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* 没配背景图时只是一块渐变底 + 按钮，给一个不显空的适中高度即可 */
    min-height: 240px;
    padding: 64px 24px 72px;
    text-align: center;
    overflow: hidden;
}

.site-hero::before {
    content: "";
    position: absolute;
    top: -160px;
    left: 50%;
    transform: translateX(-50%);
    width: 720px;
    height: 480px;
    background: radial-gradient(circle, rgba(var(--brand-accent-rgb), 0.16) 0%, rgba(var(--brand-accent-rgb), 0) 70%);
    pointer-events: none;
}

/* 配了背景图时，径向光晕会在图上糊一层黄雾，等于变相的遮罩，一并关掉 */
.site-hero.has-hero-image::before {
    display: none;
}

/* ── 首页 Hero 背景图（后台上传，未配置时不加 .has-hero-image，完全走上面的内置渐变）──
   用户第四轮反馈标注：「背景直接在后台预留，我自己去后台上传即可」。

   ⚠️ 第五轮反馈明确要求「顺便把遮罩去掉」：这里原本有一层 0.72 的深色渐变遮罩
   （.site-hero.has-hero-image::after），是当初为了保证叠在图上的标题/副标达到 WCAG AA
   才加的。文案已整体删除，遮罩失去了存在理由，且它会把管理员上传的背景图整体压暗、
   跟原图对不上。现已删除，**不要以对比度为由把它加回来** —— 现在唯一需要保证可读性的
   只有三个入口按钮，改由按钮自身的实心底色/描边解决（见下方 .site-hero-actions 规则）。

   background-size: cover 保证等比裁切铺满、不变形；no-repeat 保证不会平铺重复。 */
.site-hero.has-hero-image {
    background-image: var(--home-hero-bg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* 背景图是横幅大图，高度跟着视口宽度走，1440 档约 490px、1024 档约 348px，
       小屏兜底 320px，既能把图看清又不会把首屏整个占满 */
    min-height: clamp(320px, 34vw, 500px);
    justify-content: flex-end;
}

/* Hero 内的子元素统一抬一层，保证按钮永远压在背景之上可点 */
.site-hero > * {
    position: relative;
    z-index: 1;
}

.site-hero-actions {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

.site-hero-actions .site-btn {
    padding: 13px 28px;
    font-size: 14px;
}

/* 遮罩拿掉后，按钮底下可能是管理员上传的任意亮度画面（甚至纯白），所以按钮自己必须
   自带足够的底色对比：
   - 主按钮本就是实心品牌黄 + 黑字（16.07:1），只补一圈深色描边把它从亮背景里切出来；
   - 次按钮原本是全透明 + 亮边框，压在白色背景上白字几乎不可读，改成近乎不透明的深色底
     （最坏情况纯白底图合成后约 #353535，白字约 10.5:1，远超 AA）。 */
.site-hero-actions .site-btn-primary {
    border: 1.5px solid rgba(9, 9, 11, 0.55);
    box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.75);
}

.site-hero-actions .site-btn-ghost {
    background: rgba(9, 9, 11, 0.82);
    border-color: rgba(255, 255, 255, 0.32);
    color: #ffffff;
    box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.8);
}

.site-hero-actions .site-btn-ghost:hover {
    background: rgba(9, 9, 11, 0.92);
    border-color: var(--brand-accent);
    color: var(--brand-accent);
}

.site-section {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 24px 80px;
}

.site-mode-switch {
    display: inline-flex;
    background: var(--site-panel);
    border: 1px solid var(--site-panel-border);
    border-radius: 12px;
    padding: 4px;
    margin: 0 auto 26px;
}

.site-mode-switch button {
    padding: 9px 22px;
    border: none;
    background: transparent;
    color: var(--site-text-muted);
    font-size: 13px;
    font-weight: 600;
    border-radius: 9px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.site-mode-switch button.active {
    background: linear-gradient(135deg, var(--site-primary) 0%, var(--site-primary-dark) 100%);
    color: var(--brand-accent-ink);
}

.site-feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 20px;
}

.site-feature-card {
    background: var(--site-panel);
    border: 1px solid var(--site-panel-border);
    border-radius: var(--site-radius);
    padding: 24px 22px;
}

.site-feature-card .feature-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--site-primary) 0%, var(--site-accent) 100%);
    color: var(--brand-accent-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    margin-bottom: 14px;
    overflow: hidden;
    flex-shrink: 0;
}

/* 后台上传了自定义图标时：撤掉品牌黄底（管理员传的图自带配色，压在黄底上会脏），
   图片等比铺满这个 42×42 的圆角位；未配置时不加这个类，保持原来的黄底 emoji 样式。 */
.site-feature-card .feature-icon.has-image {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--site-panel-border);
    padding: 0;
}

.site-feature-card .feature-icon.has-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

.site-feature-card h3 {
    margin: 0 0 8px;
    font-size: 15px;
    color: #fff;
}

.site-feature-card p {
    margin: 0;
    font-size: 13px;
    color: var(--site-text-muted);
    line-height: 1.65;
}

/* ---------------------------------------------------------------------- */
/* 个人中心 / 生成占位页 通用容器                                              */
/* ---------------------------------------------------------------------- */
.site-page-wrap {
    max-width: 960px;
    margin: 0 auto;
    padding: 40px 24px 100px;
}

.site-page-title {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 22px;
}

.site-card {
    background: var(--site-panel);
    border: 1px solid var(--site-panel-border);
    border-radius: var(--site-radius);
    padding: 26px 28px;
    margin-bottom: 20px;
}

.site-profile-head {
    display: flex;
    align-items: center;
    gap: 16px;
}

.site-profile-head .site-avatar {
    width: 56px;
    height: 56px;
    font-size: 22px;
}

.site-profile-head .profile-name {
    font-size: 17px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 4px;
}

.site-profile-head .profile-meta {
    font-size: 12.5px;
    color: var(--site-text-muted);
}

.site-points-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, rgba(var(--brand-accent-rgb), 0.18) 0%, rgba(var(--brand-accent-rgb), 0.12) 100%);
    border: 1px solid rgba(var(--brand-accent-rgb), 0.35);
    border-radius: 14px;
    padding: 18px 22px;
    margin-top: 18px;
}

.site-points-banner .points-label {
    font-size: 12.5px;
    color: var(--site-text-muted);
    margin-bottom: 6px;
}

.site-points-banner .points-value {
    font-size: 28px;
    font-weight: 800;
    color: var(--site-points);
}

.site-placeholder-card {
    text-align: center;
    padding: 50px 24px;
    color: var(--site-text-muted);
}

.site-placeholder-card .placeholder-icon {
    font-size: 34px;
    margin-bottom: 12px;
}

.site-placeholder-card h3 {
    color: #fff;
    margin: 0 0 8px;
    font-size: 16px;
}

.site-placeholder-card p {
    margin: 0;
    font-size: 13px;
}

/* ---------------------------------------------------------------------- */
/* 积分流水表格 / 分页                                                        */
/* ---------------------------------------------------------------------- */
.site-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 18px;
}

.site-card-title {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    margin: 0;
}

.site-card-sub {
    font-size: 12.5px;
    color: var(--site-text-muted);
}

.site-table-wrap {
    overflow-x: auto;
}

.site-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    white-space: nowrap;
}

.site-table th,
.site-table td {
    padding: 12px 14px;
    text-align: left;
    border-bottom: 1px solid var(--site-panel-border);
}

.site-table th {
    color: var(--site-text-muted);
    font-weight: 600;
    font-size: 12.5px;
}

.site-table td {
    color: var(--site-text);
}

.site-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.03);
}

.site-table-remark {
    color: var(--site-text-muted);
    white-space: normal;
    max-width: 240px;
}

.points-change-positive {
    color: var(--site-success);
    font-weight: 700;
}

.points-change-negative {
    color: var(--site-danger);
    font-weight: 700;
}

.site-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.site-badge-card_redeem {
    background: rgba(43, 182, 115, 0.14);
    color: #5fe0a4;
}

.site-badge-generate_consume {
    background: rgba(var(--brand-accent-rgb), 0.16);
    color: var(--brand-accent-soft);
}

.site-badge-admin_adjust {
    background: rgba(var(--site-points-rgb), 0.16);
    color: var(--site-points);
}

.site-badge-refund {
    background: rgba(var(--brand-accent-rgb), 0.16);
    color: var(--site-accent);
}

.site-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 20px;
}

.site-pagination-btn {
    padding: 8px 16px;
    border-radius: 8px;
    background: var(--site-bg-soft);
    border: 1px solid var(--site-panel-border);
    font-size: 13px;
    color: var(--site-text);
    transition: border-color 0.15s ease, color 0.15s ease;
}

.site-pagination-btn:hover {
    border-color: var(--site-primary);
    color: #fff;
}

.site-pagination-btn.disabled {
    pointer-events: none;
    opacity: 0.4;
}

.site-pagination-info {
    font-size: 13px;
    color: var(--site-text-muted);
}

.site-redeem-row {
    display: flex;
    align-items: stretch;
    gap: 10px;
}

.site-redeem-row .site-input {
    flex: 1;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.site-redeem-row .site-btn {
    flex-shrink: 0;
    padding: 0 22px;
}

@media (max-width: 480px) {
    .site-redeem-row {
        flex-direction: column;
    }

    .site-redeem-row .site-btn {
        width: 100%;
    }
}

/* ---------------------------------------------------------------------- */
/* 个人中心 - 充值联系方式 + 在线留言                                          */
/* 用户实测反馈：「充值界面要添加联系方式，这样才能找到人充值发卡密，或者就是添加  */
/* 在线留言或者在线客服类型的也行，主要目的是要联系」——因此这一块直接挂在「卡密  */
/* 兑换」表单下方，左二维码右留言，两条路都能找到人。                            */
/* ---------------------------------------------------------------------- */
.member-contact-block {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px dashed var(--site-panel-border);
}

.member-contact-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.member-contact-title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
}

.member-contact-sub {
    font-size: 12.5px;
    color: var(--site-text-muted);
}

.member-contact-body {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}

/* 后台没配二维码（或图片文件已丢失）时只剩留言，让它占满整行而不是缩在左半边 */
.member-contact-body.no-qrcode {
    grid-template-columns: minmax(0, 1fr);
}

.member-contact-qrcode {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 16px 14px;
    border-radius: 14px;
    background: rgba(var(--brand-accent-rgb), 0.06);
    border: 1px solid rgba(var(--brand-accent-rgb), 0.28);
}

.member-qrcode-figure {
    position: relative;
    display: block;
    width: 148px;
    height: 148px;
    padding: 8px;
    border: none;
    border-radius: 12px;
    background: #fff;
    cursor: zoom-in;
    overflow: hidden;
}

.member-qrcode-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.member-qrcode-zoom-hint {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 5px 0;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--brand-accent-soft);
    background: rgba(15, 15, 15, 0.82);
    opacity: 0;
    transition: opacity 0.15s ease;
}

.member-qrcode-figure:hover .member-qrcode-zoom-hint,
.member-qrcode-figure:focus .member-qrcode-zoom-hint {
    opacity: 1;
}

.member-qrcode-figure:focus-visible {
    outline: 2px solid var(--brand-accent);
    outline-offset: 3px;
}

.member-qrcode-tip {
    margin: 0;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
    color: var(--brand-accent-soft);
}

.member-message-panel {
    min-width: 0;
    padding: 16px 18px;
    border-radius: 14px;
    background: var(--site-bg-soft);
    border: 1px solid var(--site-panel-border);
}

.member-message-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.member-message-title {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
}

.member-message-sub {
    font-size: 12px;
    color: var(--site-text-muted);
}

.member-message-form .site-form-group {
    margin-bottom: 12px;
}

.member-message-textarea {
    resize: vertical;
    min-height: 84px;
    line-height: 1.6;
    font-family: inherit;
}

.member-message-counter {
    margin-top: 6px;
    text-align: right;
    font-size: 11.5px;
    color: var(--site-text-faint);
}

.member-message-counter .is-near-limit {
    color: var(--site-points);
    font-weight: 700;
}

.member-message-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.member-message-actions .site-btn {
    flex-shrink: 0;
    padding: 10px 26px;
}

/* 提交中：置灰并禁点，避免连点造成重复留言（服务端还有频率限制兜底） */
.member-message-actions .site-btn.is-submitting {
    opacity: 0.6;
    pointer-events: none;
}

.member-message-hint {
    font-size: 12px;
    color: var(--site-text-muted);
}

@media (max-width: 720px) {
    .member-contact-body {
        grid-template-columns: minmax(0, 1fr);
    }

    .member-contact-qrcode {
        padding: 14px 12px;
    }
}

/* ---------------------------------------------------------------------- */
/* 个人中心 - 生成记录                                                        */
/* ---------------------------------------------------------------------- */
.record-filter-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.record-filter-tab {
    padding: 7px 16px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: var(--site-text-muted);
    background: var(--site-bg-soft);
    border: 1px solid var(--site-panel-border);
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.record-filter-tab:hover {
    color: #fff;
    border-color: var(--site-primary);
}

.record-filter-tab.active {
    color: var(--brand-accent-ink);
    background: linear-gradient(135deg, var(--site-primary) 0%, var(--site-primary-dark) 100%);
    border-color: transparent;
}

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

.record-card {
    display: flex;
    flex-direction: column;
    background: var(--site-bg-soft);
    border: 1px solid var(--site-panel-border);
    border-radius: 14px;
    overflow: hidden;
}

.record-thumb-wrap {
    aspect-ratio: 4 / 3;
    background: rgba(255, 255, 255, 0.03);
}

.record-thumb-grid {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 2px;
}

.record-thumb-grid.record-thumb-count-2,
.record-thumb-grid.record-thumb-count-3,
.record-thumb-grid.record-thumb-count-4 {
    grid-template-columns: 1fr 1fr;
}

.record-thumb-grid a {
    display: block;
    height: 100%;
    overflow: hidden;
}

.record-thumb-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.2s ease;
}

.record-thumb-grid a:hover img {
    transform: scale(1.04);
}

.record-thumb-failed,
.record-thumb-pending {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--site-text-muted);
}

.record-thumb-failed {
    color: var(--site-danger);
}

.record-thumb-failed-icon,
.record-thumb-pending-icon {
    font-size: 22px;
}

.record-body {
    padding: 14px 14px 4px;
    flex: 1;
}

.record-tags {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.record-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    background: rgba(255, 255, 255, 0.08);
    color: var(--site-text-muted);
}

.record-status-success {
    background: rgba(43, 182, 115, 0.14);
    color: #5fe0a4;
}

.record-status-failed {
    background: rgba(242, 73, 87, 0.14);
    color: #ff8790;
}

.record-status-processing,
.record-status-pending {
    background: rgba(var(--site-points-rgb), 0.14);
    color: var(--site-points);
}

.record-meta-line {
    font-size: 13px;
    color: var(--site-text);
    margin-bottom: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.record-meta-sub {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--site-text-muted);
    white-space: normal;
}

.record-fail-reason {
    font-size: 12px;
    color: var(--site-danger);
    background: rgba(242, 73, 87, 0.08);
    border-radius: 8px;
    padding: 6px 8px;
    margin-bottom: 8px;
    word-break: break-all;
}

.record-actions {
    display: flex;
    gap: 8px;
    padding: 10px 14px 14px;
}

.record-action-btn {
    flex: 1;
    padding: 8px 0;
    font-size: 12.5px;
    text-align: center;
}

.record-delete-form {
    flex: 1;
    display: flex;
}

.record-delete-btn {
    width: 100%;
    color: var(--site-danger);
    border-color: rgba(242, 73, 87, 0.35);
}

.record-delete-btn:hover {
    border-color: var(--site-danger);
    color: #fff;
    background: rgba(242, 73, 87, 0.16);
}

.site-footer {
    text-align: center;
    padding: 26px 20px 90px;
    color: var(--site-text-muted);
    font-size: 12.5px;
    border-top: 1px solid var(--site-panel-border);
}

/* 中等宽度（平板/小笔记本）：品牌区副标放大后，「品牌 + 四项导航 + 用户信息」挤不进一行了
   （实测 768 宽下导航被压到逐字竖排）。这里把 ≤640 的「导航独占第二行」策略提前到 ≤900，
   品牌与用户信息留在第一行，导航整行横向排列、必要时横向滚动，四个入口始终可达。 */
@media (max-width: 900px) {
    .site-header {
        flex-wrap: wrap;
        row-gap: 8px;
    }

    .site-header-brand {
        min-width: 0;
    }

    .site-header-nav {
        order: 3;
        width: 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .site-header-nav::-webkit-scrollbar {
        display: none;
    }

    .site-header-nav a {
        flex-shrink: 0;
    }
}

@media (max-width: 640px) {
    .site-header {
        padding: 10px 14px;
        /* 窄屏把导航挪到第二行：品牌 + 用户信息一行，四个入口独占一行横向滚动。
           早期实现是直接 display:none 把导航整条藏掉，窄屏用户在生成页就再也回不到
           首页 / 创意图模板生成 / 详情模板生成，等于断了移动端的主路径。 */
        flex-wrap: wrap;
        row-gap: 8px;
    }

    .site-header-brand {
        font-size: 14px;
        gap: 8px;
        min-width: 0;
        /* 品牌区是这一行里的可压缩项：右侧用户信息/登录按钮宽度固定，
           375 宽下由品牌区先让出空间，避免整行撑出横向滚动条 */
        flex: 0 1 auto;
        overflow: hidden;
    }

    .site-header-brand .logo-mark {
        width: 30px;
        height: 30px;
    }

    /* 窄屏仍明显大于改版前（原 10px），但压到 15px 才能与右侧用户区共处一行不折行 */
    .site-header-brand .brand-slogan {
        font-size: 15px;
        letter-spacing: 0;
    }

    .site-header-nav {
        order: 3;
        width: 100%;
        gap: 4px;
        overflow-x: auto;
        overflow-y: hidden;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .site-header-nav::-webkit-scrollbar {
        display: none;
    }

    .site-header-nav a {
        padding: 7px 10px;
        font-size: 13px;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .site-hero {
        min-height: 180px;
        padding: 40px 18px 48px;
    }

    /* 375 档下背景图按 260px 高展示：够看清画面，又不至于把整个首屏都占掉 */
    .site-hero.has-hero-image {
        min-height: 260px;
    }

    .site-hero-actions {
        gap: 10px;
    }

    .site-hero-actions .site-btn {
        padding: 11px 18px;
        font-size: 13px;
    }

    .points-float-widget .points-user-info {
        display: none;
    }
}

/* ---------------------------------------------------------------------- */
/* 生成工作台（自由生成）                                                     */
/* ---------------------------------------------------------------------- */
.gen-workbench {
    display: flex;
    align-items: stretch;
    min-height: calc(100vh - 65px);
}

.gen-sidebar {
    width: 280px;
    flex-shrink: 0;
    padding: 20px 14px;
    border-right: 1px solid var(--site-panel-border);
    position: sticky;
    top: 65px;
    align-self: flex-start;
    max-height: calc(100vh - 65px);
    overflow-y: auto;
}

.gen-sidebar-head {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--site-text-muted);
    padding: 0 6px;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.gen-model-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.gen-model-empty {
    padding: 40px 12px;
    text-align: center;
    color: var(--site-text-muted);
    font-size: 13px;
    line-height: 1.6;
}

.gen-model-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 12px;
    border: 1.5px solid transparent;
    background: var(--site-bg-soft);
    cursor: pointer;
    text-align: left;
    color: var(--site-text);
    width: 100%;
    font-family: inherit;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.gen-model-item:hover {
    border-color: rgba(var(--brand-accent-rgb), 0.4);
}

.gen-model-item.active {
    border-color: var(--site-primary);
    background: rgba(var(--brand-accent-rgb), 0.14);
}

.gen-model-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--site-primary) 0%, var(--site-accent) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
    overflow: hidden;
    color: var(--brand-accent-ink);
}

.gen-model-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 模型项按用户要求只保留「图标 + 名称 + 选中勾选」，不再出现任何积分数字，
   所以这里只需单行名称纵向居中，价格统一由底部操作条的分辨率区承载 */
.gen-model-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    flex: 1;
}

.gen-model-name {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gen-model-check {
    color: var(--site-primary);
    font-weight: 700;
    opacity: 0;
    flex-shrink: 0;
}

.gen-model-item.active .gen-model-check {
    opacity: 1;
}

.gen-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 20px 28px 28px;
}

.gen-preview {
    flex: 1;
    min-height: 380px;
    background: var(--site-panel);
    border: 1px solid var(--site-panel-border);
    border-radius: var(--site-radius);
    padding: 24px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
}

.gen-empty-state {
    text-align: center;
    color: var(--site-text-muted);
    max-width: 320px;
}

.gen-empty-icon {
    font-size: 38px;
    margin-bottom: 12px;
}

.gen-empty-state h3 {
    color: #fff;
    font-size: 15px;
    margin: 0 0 6px;
}

.gen-empty-state p {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
}

.gen-result-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    width: 100%;
}

.gen-result-item {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: var(--site-bg-soft);
    border: 1px solid var(--site-panel-border);
}

.gen-result-item img {
    width: 100%;
    display: block;
}

.gen-result-item.is-skeleton {
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(100deg, var(--site-bg-soft) 30%, rgba(255, 255, 255, 0.06) 50%, var(--site-bg-soft) 70%);
    background-size: 200% 100%;
    animation: gen-shimmer 1.4s ease-in-out infinite;
    color: var(--site-text-muted);
    font-size: 12.5px;
    flex-direction: column;
    gap: 8px;
}

.gen-result-item.is-skeleton .gen-skeleton-spinner {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2.5px solid rgba(255, 255, 255, 0.2);
    border-top-color: var(--site-primary);
    animation: gen-spin 0.8s linear infinite;
}

@keyframes gen-shimmer {
    0% { background-position: 0% 0; }
    100% { background-position: -200% 0; }
}

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

.gen-result-actions {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 10px 8px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
    opacity: 0;
    transition: opacity 0.15s ease;
}

.gen-result-item:hover .gen-result-actions {
    opacity: 1;
}

.gen-result-actions a {
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
}

.gen-result-actions a:hover {
    background: rgba(255, 255, 255, 0.28);
}

.gen-alert-bar {
    margin-bottom: 14px;
}

/* 底部一体化输入卡片：整个操作区（预计消耗 + 产品图 + 提示词 + 参数胶囊 + 发送）只有这
   一张深色圆角卡片，内部各段之间不再画边框、不再用浅色底，视觉上连成一体。
   用户第三轮反馈原话：「用这种，看起来整体性强，不会有那个白色的滚动条太突兀，
   一个模块一个模块的被分割开了」，视觉基准是
   .jarvis/knowledge/反馈3_自由创意生成页与后台风格预设.png 下半部分那张深色输入条。
   自由创意生成页与创意图模板生成页共用这张卡片。 */
.gen-input-bar {
    background: linear-gradient(180deg, #17171b 0%, #111113 100%);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 22px;
    padding: 12px 14px 12px;
    box-shadow: 0 20px 44px -26px rgba(0, 0, 0, 0.95);
}

/* 产品图（左）+ 提示词（右）同处一行，两者之间不加分割线，靠间距区分；
   顶对齐，让产品图按钮与提示词首行齐平（对齐参考图里虚线框与描述文字的关系） */
.gen-compose-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 10px;
}

.gen-compose-row .gen-ref-row {
    margin-bottom: 0;
    flex: 0 0 auto;
    max-width: 210px;
}

.gen-ref-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.gen-ref-thumbs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.gen-ref-thumb {
    position: relative;
    width: 56px;
    height: 56px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--site-panel-border);
    flex-shrink: 0;
    cursor: grab;
    transition: opacity 0.15s ease, outline-color 0.15s ease;
}

.gen-ref-thumb.is-dragging {
    opacity: 0.35;
    cursor: grabbing;
}

.gen-ref-thumb.is-drag-over {
    outline: 2px dashed var(--brand-accent);
    outline-offset: 2px;
}

.gen-ref-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 拖拽排序后的当前序号角标，让「图1/图2」的对应关系一眼可见 */
.gen-ref-thumb .gen-ref-order {
    position: absolute;
    top: 2px;
    left: 2px;
    min-width: 14px;
    height: 14px;
    padding: 0 3px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 14px;
    text-align: center;
    pointer-events: none;
}

.gen-ref-thumb .gen-ref-remove {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    line-height: 1;
}

.gen-ref-add {
    width: 62px;
    height: 62px;
    border-radius: 12px;
    border: 1.5px dashed rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.03);
    color: var(--site-text-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    cursor: pointer;
    font-size: 10px;
    line-height: 1.3;
    text-align: center;
    flex-shrink: 0;
    font-family: inherit;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.gen-ref-add:hover {
    border-color: rgba(var(--brand-accent-rgb), 0.55);
    background: rgba(var(--brand-accent-rgb), 0.08);
    color: #fff;
}

.gen-ref-add-icon {
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
}

.gen-control-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.gen-control-group {
    position: relative;
}

/* 参数胶囊按钮（生成数量 / 图片比例 / 分辨率）：深色半透明胶囊，压在一体化卡片上不额外
   制造「小方块」的分割感；hover / 展开态用品牌黄点缀，与黑黄主题一致 */
.gen-control-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(255, 255, 255, 0.075);
    color: var(--site-text);
    font-size: 12.5px;
    cursor: pointer;
    white-space: nowrap;
    font-family: inherit;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.gen-control-btn:hover,
.gen-control-btn.is-open {
    background: rgba(var(--brand-accent-rgb), 0.12);
    border-color: rgba(var(--brand-accent-rgb), 0.42);
    color: #fff;
}

.ctrl-arrow {
    color: var(--site-text-muted);
    font-size: 10px;
}

/* 分辨率选择器旁的当前单价胶囊：模型侧栏去掉价格后，单价提示落在这里，
   与右上角的「本次预计消耗」共同承担全部积分信息；余额不足时整枚标红 */
.gen-control-cost {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: var(--site-points);
    background: rgba(var(--brand-accent-rgb), 0.12);
    border: 1px solid rgba(var(--brand-accent-rgb), 0.3);
    white-space: nowrap;
}

.gen-control-cost.is-insufficient {
    color: #ff6b6b;
    background: rgba(242, 73, 87, 0.12);
    border-color: rgba(242, 73, 87, 0.45);
}

.gen-control-spacer {
    flex: 1;
}

.gen-send-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--site-primary) 0%, var(--site-primary-dark) 100%);
    border: none;
    color: var(--brand-accent-ink);
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 22px -10px rgba(var(--brand-accent-rgb), 0.75);
    flex-shrink: 0;
}

.gen-send-btn:hover:not(:disabled) {
    transform: translateY(-1px);
}

.gen-send-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.gen-send-spinner {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    animation: gen-spin 0.7s linear infinite;
}

.gen-popover {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    min-width: 190px;
    background: var(--site-panel);
    border: 1px solid var(--site-panel-border);
    border-radius: 12px;
    box-shadow: 0 20px 44px -16px rgba(0, 0, 0, 0.65);
    padding: 8px;
    display: none;
    z-index: 80;
    max-height: 340px;
    overflow-y: auto;
}

.gen-popover.open {
    display: block;
}

.gen-popover-title {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    padding: 6px 8px 2px;
}

.gen-popover-subtitle {
    font-size: 11.5px;
    color: var(--site-text-muted);
    padding: 0 8px 8px;
}

.gen-popover-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 8px;
    border-radius: 8px;
    font-size: 13px;
    color: var(--site-text);
    cursor: pointer;
}

.gen-popover-option:hover {
    background: var(--site-bg-soft);
}

.gen-popover-option.active {
    color: var(--brand-accent-soft);
    font-weight: 600;
}

.gen-popover-option .gen-popover-check {
    margin-left: auto;
    opacity: 0;
    color: var(--site-primary);
    font-weight: 700;
}

.gen-popover-option.active .gen-popover-check {
    opacity: 1;
}

.gen-popover-option-icon {
    font-size: 12px;
    opacity: 0.7;
}

/* 分辨率下拉多了一列价格，给足宽度并让档位名不换行，避免「标准清晰度」被挤成两行 */
#genResolutionPopover {
    min-width: 234px;
}

.gen-popover-option-label {
    white-space: nowrap;
}

/* 分辨率下拉里逐档标注的该档单价：靠右贴在勾选标记前面，方便直接对比标准/2K/4K 的差价 */
.gen-popover-cost {
    margin-left: auto;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--site-points);
    white-space: nowrap;
}

/* 有价签时勾选标记紧跟其后，不再各自抢占剩余空间 */
.gen-popover-option .gen-popover-cost + .gen-popover-check {
    margin-left: 6px;
}

@media (max-width: 900px) {
    .gen-workbench {
        flex-direction: column;
    }

    .gen-sidebar {
        width: 100%;
        max-height: none;
        position: relative;
        top: 0;
        border-right: none;
        border-bottom: 1px solid var(--site-panel-border);
    }

    .gen-model-list {
        flex-direction: row;
        overflow-x: auto;
        padding-bottom: 4px;
    }

    .gen-model-item {
        min-width: 220px;
        flex-shrink: 0;
    }

    .gen-main {
        padding: 16px 16px 24px;
    }
}

/* ---------------------------------------------------------------------- */
/* 模板选择列表（前台「详情模板一键批量生成」入口）                                    */
/* ---------------------------------------------------------------------- */
.tpl-gallery-sub {
    color: var(--site-text-muted);
    font-size: 13.5px;
    margin: -12px 0 24px;
}

.tpl-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
}

.tpl-gallery-card {
    display: flex;
    flex-direction: column;
    background: var(--site-panel);
    border: 1px solid var(--site-panel-border);
    border-radius: var(--site-radius);
    overflow: hidden;
    transition: transform 0.15s ease, border-color 0.15s ease;
}

.tpl-gallery-card:hover {
    transform: translateY(-3px);
    border-color: var(--site-primary);
}

.tpl-gallery-cover {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    background: var(--site-bg-soft);
    overflow: hidden;
}

.tpl-gallery-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tpl-gallery-cover-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    color: var(--site-text-muted);
}

.tpl-gallery-screen-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(var(--site-bg-rgb), 0.72);
    color: #fff;
    font-size: 11px;
    padding: 4px 9px;
    border-radius: 999px;
    backdrop-filter: blur(4px);
}

/* 创意图模板缺少「效果示例图」（= 出图时的参考图一）：卡片上直接标出暂不可用，
   点进去也会被运行页与服务端一致地拦下，不会白扣积分 */
.tpl-gallery-unavailable-badge {
    position: absolute;
    left: 10px;
    bottom: 10px;
    max-width: calc(100% - 20px);
    background: rgba(220, 38, 38, 0.92);
    color: #fff;
    font-size: 11px;
    line-height: 1.4;
    padding: 4px 9px;
    border-radius: 999px;
}

.creative-gallery-card-unavailable .tpl-gallery-cover img,
.creative-gallery-card-unavailable .tpl-gallery-cover-placeholder {
    opacity: 0.45;
}

.creative-gallery-card-unavailable .tpl-gallery-cta {
    color: var(--site-text-muted);
}

.tpl-gallery-body {
    padding: 14px 16px 6px;
    flex: 1;
}

.tpl-gallery-body h3 {
    margin: 0 0 6px;
    font-size: 15px;
    color: #fff;
}

.tpl-gallery-body p {
    margin: 0;
    font-size: 12.5px;
    color: var(--site-text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tpl-gallery-cta {
    padding: 12px 16px 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--brand-accent-soft);
}

/* ---------------------------------------------------------------------- */
/* 模板批量生成工作台                                                          */
/* ---------------------------------------------------------------------- */
.tpl-run-wrap {
    max-width: 1080px;
    margin: 0 auto;
    padding: 28px 24px 100px;
}

.tpl-run-back {
    display: inline-block;
    font-size: 12.5px;
    color: var(--site-text-muted);
    margin-bottom: 14px;
}

.tpl-run-back:hover {
    color: #fff;
}

.tpl-run-head-main {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 22px;
}

.tpl-run-cover {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid var(--site-panel-border);
}

.tpl-run-head-main h1 {
    margin: 0 0 4px;
    font-size: 19px;
    color: #fff;
}

.tpl-run-head-main p {
    margin: 0;
    font-size: 12.5px;
    color: var(--site-text-muted);
}

.tpl-run-alert {
    margin-bottom: 16px;
}

.tpl-run-upload-card {
    background: var(--site-panel);
    border: 1px solid var(--site-panel-border);
    border-radius: var(--site-radius);
    padding: 22px 24px;
    margin-bottom: 24px;
}

.tpl-run-upload-label {
    font-size: 13.5px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 12px;
}

.tpl-run-upload-subtip {
    font-size: 12px;
    font-weight: 400;
    color: var(--site-text-muted);
}

/* 分屏勾选工具条：显示已勾选数量 + 全选/全不选，位于分屏卡片网格上方 */
.tpl-screens-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}

.tpl-screens-toolbar-label {
    font-size: 12.5px;
    color: var(--site-text-muted);
}

.tpl-screens-toolbar-actions {
    display: flex;
    gap: 8px;
}

.tpl-screens-toolbar-actions .tpl-screen-btn {
    flex: none;
    padding: 5px 14px;
}

.tpl-run-action-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--site-panel-border);
}

.tpl-run-action-hint {
    font-size: 12.5px;
    color: var(--site-text-muted);
}

/* 批量生成前的积分预估提示 */
.tpl-run-cost-hint {
    display: inline-block;
    margin-top: 6px;
    color: var(--site-points);
}

.tpl-run-action-buttons {
    display: flex;
    gap: 10px;
}

.tpl-run-screens {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 18px;
}

.tpl-screen-card {
    background: var(--site-panel);
    border: 1px solid var(--site-panel-border);
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color 0.15s ease;
}

.tpl-screen-card.is-generating {
    border-color: rgba(var(--brand-accent-rgb), 0.55);
}

.tpl-screen-card.is-success {
    border-color: rgba(43, 182, 115, 0.55);
}

.tpl-screen-card.is-failed {
    border-color: rgba(242, 73, 87, 0.55);
}

.tpl-screen-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px 0;
}

.tpl-screen-check {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    flex-shrink: 0;
}

.tpl-screen-checkbox {
    width: 15px;
    height: 15px;
    accent-color: var(--brand-accent);
    cursor: pointer;
}

.tpl-screen-checkbox:disabled {
    cursor: not-allowed;
    opacity: 0.4;
}

.tpl-screen-no {
    font-size: 11px;
    color: var(--brand-accent-ink);
    background: var(--site-primary);
    padding: 2px 8px;
    border-radius: 999px;
    flex-shrink: 0;
}

.tpl-screen-name {
    font-size: 13px;
    color: var(--site-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tpl-screen-body {
    aspect-ratio: 3 / 4;
    margin: 10px 14px 0;
    border-radius: 10px;
    background: var(--site-bg-soft);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tpl-screen-body img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tpl-screen-placeholder,
.tpl-screen-loading,
.tpl-screen-failed {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--site-text-muted);
    font-size: 12px;
    padding: 12px;
    text-align: center;
}

.tpl-screen-placeholder-icon {
    font-size: 26px;
    opacity: 0.6;
}

.tpl-screen-loading .gen-skeleton-spinner {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2.5px solid rgba(255, 255, 255, 0.2);
    border-top-color: var(--site-primary);
    animation: gen-spin 0.8s linear infinite;
}

.tpl-screen-failed {
    color: var(--site-danger);
}

.tpl-screen-failed-icon {
    font-size: 20px;
}

/* ---------------------------------------------------------------------------
 * 分屏卡片「状态提示条」：与效果示例图完全分离的独立展示位。
 * 用户反馈「生成过的图一直在这显示，不是模板的那张图」——修复后 .tpl-screen-body 的
 * 效果示例图/占位图永远保持 PHP 首屏渲染的原样，生成中/成功/失败只在这条状态提示里
 * 用文字+图标呈现，真正的生成结果图只出现在下方「本模板的历史生成记录」列表。
 * ------------------------------------------------------------------------ */
.tpl-screen-status {
    display: none;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    padding: 8px 14px 0;
}

.tpl-screen-status:empty {
    display: none;
}

.tpl-screen-status.is-generating,
.tpl-screen-status.is-success,
.tpl-screen-status.is-failed {
    display: flex;
}

.tpl-screen-status.is-generating {
    color: var(--site-text-muted);
}

.tpl-screen-status.is-generating .gen-skeleton-spinner {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-top-color: var(--site-primary);
    animation: gen-spin 0.8s linear infinite;
    flex-shrink: 0;
}

.tpl-screen-status.is-success {
    color: #2bb673;
}

.tpl-screen-status.is-failed {
    color: var(--site-danger);
}

.tpl-screen-status-icon {
    flex-shrink: 0;
}

.tpl-screen-spec {
    font-size: 11px;
    color: var(--site-text-muted);
    padding: 8px 14px 0;
}

.tpl-screen-actions {
    display: flex;
    gap: 8px;
    padding: 10px 14px 14px;
}

.tpl-screen-btn {
    flex: 1;
    text-align: center;
    font-size: 12px;
    padding: 7px 0;
    border-radius: 8px;
    background: var(--site-bg-soft);
    border: 1px solid var(--site-panel-border);
    color: var(--site-text);
    cursor: pointer;
    font-family: inherit;
}

.tpl-screen-btn:hover {
    border-color: var(--site-primary);
    color: #fff;
}

@media (max-width: 640px) {
    .tpl-run-action-row {
        flex-direction: column;
        align-items: stretch;
    }

    .tpl-run-action-buttons {
        justify-content: stretch;
    }

    .tpl-run-action-buttons .site-btn {
        flex: 1;
        text-align: center;
    }
}

/* ---------------------------------------------------------------------------
 * 模板每屏「效果示例图」：后台上传的那张图，前台待生成状态下直接展示，
 * 生成时同一张图会由服务端作为「参考图一」传给模型。
 * ------------------------------------------------------------------------ */
.tpl-screen-example {
    position: relative;
    width: 100%;
    height: 100%;
}

.tpl-screen-example img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.92;
}

.tpl-screen-example-tag {
    position: absolute;
    left: 8px;
    top: 8px;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 11px;
    line-height: 1.4;
    color: #fff;
    background: rgba(var(--site-bg-soft-rgb), 0.62);
    backdrop-filter: blur(4px);
}

/* 自由生成：提示词输入框（用户自己输入想要的画面描述）
   它是一体化输入卡片里的一段，因此**不能**有自己的边框/浅色底/焦点描边——那正是用户说的
   「一个模块一个模块的被分割开了」。这里做成完全透明、无边框的文本域，只靠卡片本身承托。 */
.gen-prompt-row {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    flex: 1;
    min-width: 0;
    padding: 0;
}

.gen-prompt-input {
    flex: 1;
    min-width: 0;
    min-height: 62px;
    max-height: 160px;
    padding: 6px 2px 4px;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--site-text);
    font-size: 14px;
    line-height: 1.6;
    resize: none;
    outline: none;
    font-family: inherit;
}

.gen-prompt-input::placeholder {
    color: var(--site-text-faint);
}

/* 焦点态不画描边框（会重新把这块切成一个独立模块），只把文字提亮一点作为反馈 */
.gen-prompt-input:focus {
    border: none;
    box-shadow: none;
    color: #fff;
}

.gen-prompt-counter {
    font-size: 11px;
    color: var(--site-text-faint);
    padding-bottom: 6px;
    white-space: nowrap;
}

/* 模板列表卡片上的「各屏效果示例」缩略条 */
.tpl-gallery-examples {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
}

.tpl-gallery-examples img {
    width: 40px;
    height: 52px;
    border-radius: 6px;
    object-fit: cover;
    border: 1px solid var(--site-panel-border);
}

.tpl-gallery-examples-more {
    font-size: 11px;
    color: var(--site-text-muted);
}

/* 自由创意生成：底部操作栏上的「本次预计消耗」提示（随模型/分辨率/张数实时变化） */
.gen-cost-estimate {
    font-size: 12.5px;
    color: var(--site-text-muted);
    line-height: 1.5;
    text-align: right;
    margin-right: 6px;
    max-width: 340px;
}

.gen-cost-estimate strong {
    color: var(--site-primary);
    font-size: 14px;
}

.gen-cost-estimate-detail {
    display: block;
}

.gen-cost-estimate.is-insufficient strong {
    color: #ff6b6b;
}

.gen-cost-estimate.is-insufficient .gen-cost-estimate-detail {
    color: #ff6b6b;
}

/* ---------------------------------------------------------------------- */
/* 创意图模板生成（顶部导航第三项）                                              */
/* 列表页复用 .tpl-gallery-* 骨架，这里只补它与「详情模板」不同的部分；            */
/* 运行页复用 .gen-* 工作台骨架，额外钉一个「当前创意图模板」卡片，保证用户在      */
/* 生成前/生成中/出图后都能看到自己按的是哪个效果。                               */
/* ---------------------------------------------------------------------- */
.creative-gallery-card .tpl-gallery-cover {
    /* 创意图是单张成品图，用 1:1 更贴近实际出图效果，不像详情模板那样偏竖长 */
    aspect-ratio: 1 / 1;
}

.creative-gallery-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.creative-tag {
    font-size: 11px;
    color: var(--site-text-muted);
    background: var(--site-bg-soft);
    border: 1px solid var(--site-panel-border);
    border-radius: 999px;
    padding: 3px 9px;
}

.creative-run-back {
    display: block;
    font-size: 12.5px;
    color: var(--site-text-muted);
    padding: 14px 16px 0;
    text-decoration: none;
}

.creative-run-back:hover {
    color: #fff;
}

.creative-current-card {
    margin: 12px 14px 16px;
    padding: 12px;
    background: var(--site-bg-soft);
    border: 1px solid var(--site-panel-border);
    border-radius: 12px;
}

.creative-current-label {
    font-size: 11px;
    letter-spacing: 1px;
    color: var(--site-text-muted);
    margin-bottom: 8px;
}

.creative-current-cover {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.04);
    display: flex;
    align-items: center;
    justify-content: center;
}

.creative-current-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.creative-current-cover-tag {
    position: absolute;
    left: 8px;
    bottom: 8px;
    font-size: 10.5px;
    color: #fff;
    background: rgba(var(--site-bg-rgb), 0.72);
    padding: 3px 8px;
    border-radius: 999px;
    backdrop-filter: blur(4px);
}

.creative-current-cover-placeholder {
    font-size: 34px;
    color: var(--site-text-muted);
}

.creative-current-name {
    margin-top: 10px;
    font-size: 14.5px;
    font-weight: 600;
    color: #fff;
}

.creative-current-desc {
    margin-top: 5px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--site-text-muted);
}

/* 左侧「分辨率与积分」：出图模型由后台按模板固定，前台只展示各档位对应的积分消耗 */
.creative-price-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.creative-price-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1.5px solid transparent;
    background: var(--site-bg-soft);
}

.creative-price-item.active {
    border-color: var(--site-primary);
    background: rgba(var(--brand-accent-rgb), 0.14);
}

.creative-price-name {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
}

.creative-price-cost {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--site-points);
    white-space: nowrap;
}

.creative-price-tip {
    margin: 10px 2px 0;
    font-size: 11.5px;
    line-height: 1.6;
    color: var(--site-text-muted);
}

/* 后台配置的模型不可用/未配置时的提示条（红=拦截、蓝=仅告知） */
.creative-billing-block,
.creative-billing-notice {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 14px;
    margin-bottom: 12px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.6;
}

.creative-billing-block {
    background: rgba(233, 84, 84, 0.14);
    border: 1px solid rgba(233, 84, 84, 0.45);
    color: #ffb3b3;
}

.creative-billing-notice {
    background: rgba(var(--brand-accent-rgb), 0.12);
    border: 1px solid rgba(var(--brand-accent-rgb), 0.35);
    color: var(--brand-accent-soft);
}

.creative-billing-block-icon {
    flex-shrink: 0;
    font-weight: 700;
}

/* 结果区顶部的模板横幅：页面右侧滚动时也始终能看到当前模板名 */
.creative-run-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    margin-bottom: 12px;
    background: var(--site-panel);
    border: 1px solid var(--site-panel-border);
    border-radius: 12px;
}

.creative-run-banner-thumb {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}

.creative-run-banner-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.creative-run-banner-title {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}

.creative-run-banner-sub {
    font-size: 12px;
    color: var(--site-text-muted);
    margin-top: 2px;
}

.creative-ref-hint {
    font-size: 12px;
    color: var(--site-text-muted);
    margin-left: 4px;
}

/* 底部操作栏上指向「创意图模板生成」的入口按钮（自由创意生成页用） */
a.gen-control-link {
    text-decoration: none;
}

/* 生成中骨架卡片 / 结果卡片上的「创意图模板：XXX」标注 */
.creative-result-item {
    position: relative;
}

.creative-result-badge {
    position: absolute;
    left: 8px;
    top: 8px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: calc(100% - 16px);
    padding: 4px 9px 4px 4px;
    border-radius: 999px;
    background: rgba(var(--site-bg-rgb), 0.78);
    backdrop-filter: blur(6px);
    color: #fff;
    font-size: 11.5px;
    line-height: 1.3;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.creative-result-badge img {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.creative-result-badge-icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    flex-shrink: 0;
}

/* 个人中心生成记录卡片上的「创意图模板：XXX」标注 */
.record-creative-tag {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 6px;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(var(--brand-accent-rgb), 0.16);
    border: 1px solid rgba(var(--brand-accent-rgb), 0.42);
    color: var(--brand-accent-soft);
    font-size: 11.5px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* 首页三张功能卡片现在是可点击入口 */
a.site-feature-card {
    display: block;
    text-decoration: none;
    transition: transform 0.15s ease, border-color 0.15s ease;
}

a.site-feature-card:hover {
    transform: translateY(-3px);
    border-color: var(--site-primary);
}

/* 创意图模板运行页的结果区：生成 1 张时也保持缩略图尺寸靠左排布，
   不像默认的 auto-fit 那样被单张结果撑满整个预览区（用户反馈"生成时图不要怼太大"）。
   缩略图点开即可看原图，符合"小图 + 点击看大图"的期望。 */
.creative-result-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    align-content: start;
    align-self: stretch;
}

.creative-result-grid .gen-result-item {
    max-width: 320px;
}

/* 创意图模板运行页的结果区（页面上唯一的那个）：
   用户反馈「记录如果上面有就不用重复出现」后，本次生成与历史记录合并成同一条结果流，
   卡片自上而下按「新→旧」排，所以容器改成纵向排布 + 顶部对齐；
   一条记录都没有时，空状态仍然靠 margin:auto 在容器里居中。 */
.creative-feed {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 14px;
}

.creative-feed .gen-empty-state {
    margin: auto;
}

.creative-feed-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.creative-feed-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--site-text);
}

.creative-feed .gen-history-list,
.creative-feed .gen-feed-history-bar {
    flex-shrink: 0;
}

/* 运行页底部「上传参考图」按钮：文案比自由生成页长，给足宽度避免挤成三行 */
#creativeRefAddBtn {
    width: auto;
    min-width: 84px;
    padding-left: 10px;
    padding-right: 10px;
}

/* ====================================================================== */
/* 自由创意生成页改版（顶部导航第二项）                                       */
/* 视觉基准：.jarvis/knowledge/反馈2_自由创意生成UI参考.png                    */
/*   左：可折叠模型侧栏 / 中：自上而下的生成结果流 / 底：固定输入操作条        */
/* 只作用于挂了 .gen-workbench-feed 的页面，创意图模板运行页（creative_run.php）*/
/* 仍沿用上面那套 .gen-* 原始骨架，互不影响。                                  */
/* ====================================================================== */

/* ---- 整体：桌面端占满视口，页面本身不滚动，滚动交给结果流 ---- */
.gen-workbench-feed {
    height: calc(100vh - 65px);
    min-height: 0;
    overflow: hidden;
    position: relative;
}

@media (min-width: 901px) {
    /* 结果流自带滚动，页脚在这种「应用式」布局里没有位置，隐藏以免把操作条顶出屏幕 */
    body:has(.gen-workbench-feed) {
        overflow: hidden;
    }

    body:has(.gen-workbench-feed) .site-footer {
        display: none;
    }

    /* 右下角常驻的联系方式卡片会压在发送按钮上，给操作区留出右侧过道（与参考图一致）。
       两个工作台页面横向空间都金贵，卡片按下面这组变量整体缩一档，过道宽度随之减小。
         - 自由创意生成（.gen-workbench-feed）：操作条吸在视口底部，给它和结果流留过道
         - 创意图模板生成（.gen-workbench，操作条在文档流里）：直接给整个主列留过道 */
    body:has(.gen-workbench) .contact-qrcode-widget {
        --contact-qr-size: 96px;
        --contact-card-pad: 10px;
        --contact-title-size: 10.5px;
        --contact-tip-size: 10.5px;
    }

    body:has(.contact-qrcode-widget) .gen-workbench-feed .gen-input-dock,
    body:has(.contact-qrcode-widget) .gen-workbench-feed .gen-feed {
        padding-right: 152px;
    }

    body:has(.contact-qrcode-widget) .gen-workbench:not(.gen-workbench-feed) .gen-main {
        padding-right: 152px;
    }
}

/* ---- 左侧模型侧栏 ---- */
.gen-workbench-feed .gen-sidebar {
    position: relative;
    top: 0;
    height: 100%;
    max-height: none;
    align-self: stretch;
    /* 左下角固定的积分角标高度约 52px，留出空间避免盖住最后一个模型 */
    padding-bottom: 92px;
}

.gen-sidebar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.gen-sidebar-head-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gen-sidebar-toggle {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    border-radius: 8px;
    border: 1px solid var(--site-panel-border);
    background: var(--site-bg-soft);
    color: var(--site-text-muted);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.gen-sidebar-toggle:hover {
    color: #fff;
    border-color: var(--site-primary);
}

/* 收起后贴在左边缘的展开手柄 */
.gen-sidebar-reopen {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    margin: 18px 0 0 10px;
    padding: 12px 7px;
    border-radius: 999px;
    border: 1px solid var(--site-panel-border);
    background: var(--site-bg-soft);
    color: var(--site-text-muted);
    font-size: 11.5px;
    cursor: pointer;
    font-family: inherit;
    flex-shrink: 0;
}

.gen-sidebar-reopen:hover {
    color: #fff;
    border-color: var(--site-primary);
}

.gen-sidebar-reopen-icon {
    font-size: 15px;
    line-height: 1;
}

.gen-sidebar-reopen-text {
    writing-mode: vertical-rl;
    letter-spacing: 2px;
}

.gen-workbench.sidebar-collapsed .gen-sidebar {
    display: none;
}

.gen-workbench.sidebar-collapsed .gen-sidebar-reopen {
    display: flex;
}

/* ---- 中部主区：结果流 + 底部操作条 ---- */
.gen-workbench-feed .gen-main {
    height: 100%;
    min-height: 0;
    padding: 0;
}

.gen-feed {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: 22px 28px 4px;
}

/* 空状态：结果流为空时居中展示引导文案 */
.gen-feed .gen-empty-state {
    margin: auto;
    max-width: 380px;
}

/* ---- 结果流单条记录 ---- */
.gen-feed-item {
    background: var(--site-panel);
    border: 1px solid var(--site-panel-border);
    border-radius: var(--site-radius);
    padding: 14px 16px 12px;
    flex-shrink: 0;
}

.gen-feed-item.is-failed {
    border-color: rgba(242, 73, 87, 0.45);
}

.gen-feed-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.gen-feed-refs {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.gen-feed-refs img {
    width: 56px;
    height: 56px;
    border-radius: 10px;
    object-fit: cover;
    border: 1px solid var(--site-panel-border);
    background: var(--site-bg-soft);
}

.gen-feed-meta {
    flex: 1;
    min-width: 0;
}

.gen-feed-prompt {
    margin: 0 0 8px;
    font-size: 13.5px;
    line-height: 1.6;
    color: #fff;
    word-break: break-word;
}

.gen-feed-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.gen-feed-tag {
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--site-text-muted);
    background: var(--site-bg-soft);
    border: 1px solid var(--site-panel-border);
    border-radius: 999px;
    padding: 3px 9px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 创意图模板标签高亮：用户全程都能看到这条记录是按哪个效果出的 */
.gen-feed-tag.is-template {
    color: var(--brand-accent-soft);
    background: rgba(var(--brand-accent-rgb), 0.16);
    border-color: rgba(var(--brand-accent-rgb), 0.42);
}

.gen-feed-body {
    margin-top: 12px;
}

/* 结果图保持小图排布（点击看大图），不把单张结果撑满整行 */
.gen-feed .gen-result-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    align-content: start;
}

.gen-feed .gen-result-item {
    max-width: 300px;
}

.gen-feed .gen-result-item.is-skeleton {
    max-width: 300px;
    padding: 10px;
    text-align: center;
}

.gen-feed-failed {
    padding: 14px 16px;
    border-radius: 12px;
    background: rgba(242, 73, 87, 0.12);
    border: 1px solid rgba(242, 73, 87, 0.38);
    color: #ffb3ba;
    font-size: 13px;
    line-height: 1.6;
}

/* 部分失败提示：整体成功但模型少出了几张图，用琥珀色与「整条失败」的红色区分开 */
.gen-feed-partial {
    margin-bottom: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.38);
    color: #ffd79a;
    font-size: 13px;
    line-height: 1.6;
}

.gen-result-broken {
    padding: 26px 10px;
    text-align: center;
    font-size: 12px;
    line-height: 1.7;
    color: var(--site-text-muted);
}

.gen-result-broken a {
    color: var(--brand-accent-soft);
    text-decoration: underline;
}

.gen-feed-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.gen-feed-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.gen-feed-action {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 13px;
    border-radius: 9px;
    border: 1px solid var(--site-panel-border);
    background: var(--site-bg-soft);
    color: var(--site-text);
    font-size: 12.5px;
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.gen-feed-action:hover:not(:disabled) {
    border-color: var(--site-primary);
    color: #fff;
}

.gen-feed-action.is-danger:hover:not(:disabled) {
    border-color: var(--site-danger);
    color: #ffb3ba;
}

.gen-feed-action:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.gen-feed-time {
    font-size: 12px;
    color: var(--site-text-muted);
    white-space: nowrap;
}

/* ---- 底部固定输入操作条 ---- */
.gen-input-dock {
    flex-shrink: 0;
    padding: 0 28px 18px;
    background: var(--site-bg);
}

.gen-input-dock .gen-alert-bar {
    margin-bottom: 10px;
}

/* 「本次预计消耗」落在一体化输入卡片内部的右上角（对应参考图输入条右上角的价格标签），
   它是卡片里的一枚徽章而不是一个独立模块，所以只用极淡的琥珀底，不用面板色+面板边框 */
.gen-dock-topline {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 2px;
}

.gen-dock-topline .gen-cost-estimate {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
    max-width: 100%;
    margin-right: 0;
    padding: 5px 13px;
    border-radius: 999px;
    background: rgba(var(--site-points-rgb), 0.09);
    border: 1px solid rgba(var(--site-points-rgb), 0.2);
    text-align: right;
}

.gen-dock-topline .gen-cost-main {
    font-size: 12.5px;
    color: var(--site-text);
}

.gen-dock-topline .gen-cost-main strong {
    color: var(--site-points);
    font-size: 14px;
    margin: 0 2px;
}

.gen-dock-topline .gen-cost-estimate-detail {
    font-size: 11px;
    color: var(--site-text-muted);
}

.gen-dock-topline .gen-cost-estimate.is-insufficient {
    border-color: rgba(242, 73, 87, 0.5);
}

.gen-dock-topline .gen-cost-estimate.is-insufficient .gen-cost-main strong,
.gen-dock-topline .gen-cost-estimate.is-insufficient .gen-cost-estimate-detail {
    color: #ff6b6b;
}

.gen-prompt-counter.is-limit {
    color: var(--site-danger);
}

.gen-control-btn .ctrl-label {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---- 窄屏（含 375 宽手机）---- */
@media (max-width: 900px) {
    .gen-workbench-feed {
        height: auto;
        overflow: visible;
        flex-direction: column;
    }

    .gen-workbench-feed .gen-sidebar {
        height: auto;
        padding-bottom: 14px;
    }

    .gen-workbench-feed .gen-main {
        height: auto;
        padding: 0;
    }

    .gen-feed {
        overflow: visible;
        padding: 14px 14px 4px;
        gap: 16px;
    }

    /* 侧栏收起时的展开手柄在窄屏改成一条横向按钮，不占用侧边空间 */
    .gen-workbench.sidebar-collapsed .gen-sidebar-reopen {
        flex-direction: row;
        justify-content: center;
        align-self: stretch;
        width: auto;
        margin: 12px 14px 0;
        padding: 9px 14px;
        border-radius: 10px;
    }

    .gen-sidebar-reopen-text {
        writing-mode: horizontal-tb;
        letter-spacing: 0;
    }

    /* 操作条吸底：它本身仍在文档流内，滚到底部时不会遮挡最后一条记录 */
    .gen-input-dock {
        position: sticky;
        bottom: 0;
        z-index: 45;
        padding: 0 14px 14px;
        background: linear-gradient(to top, var(--site-bg) 76%, rgba(var(--site-bg-rgb), 0.92));
    }

    /* 左下角积分角标 / 右下角二维码按钮会压住吸底操作条，这个页面挪开它们 */
    body:has(.gen-workbench-feed) .points-float-widget {
        display: none;
    }

    /* 联系方式卡片必须在每个前台页面都常驻（用户第三轮反馈「主要目的是要联系」），
       所以这个工作台页面不能像积分角标那样直接隐藏。但手机上底部操作条是吸底的、
       高度还占了大半屏，任何贴着底边的浮标都会压住输入框和发送按钮，因此这里：
         1) 卡片改成「二维码在左、文案在右」的横版，高度压到 ~56px；
         2) 挂在吸底页头正下方（页头 sticky，任何滚动位置都在顶部），落在结果流上方的
            空白带里，既不碰操作条也不碰页头。具体距离由 contact_widget.js 按页头
            实测高度写入 --contact-top-offset（页头会随视口宽度换行，写死会失准），
            脚本未生效时兜底 154px（375 宽下页头三行的高度）。 */
    body:has(.gen-workbench-feed) .contact-qrcode-widget {
        --contact-qr-size: 44px;
        --contact-card-pad: 6px;
        --contact-title-display: none;
        --contact-tip-size: 9.5px;
        top: var(--contact-top-offset, 154px);
        bottom: auto;
        right: 8px;
    }

    body:has(.gen-workbench-feed) .contact-qrcode-card {
        flex-direction: row;
        align-items: center;
        gap: 6px;
        width: auto;
        text-align: left;
    }

    body:has(.gen-workbench-feed) .contact-qrcode-tip {
        width: 62px;
    }

    .gen-feed .gen-result-grid {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    }
}

@media (max-width: 640px) {
    .gen-feed-head {
        flex-direction: column;
    }

    .gen-feed-refs img {
        width: 46px;
        height: 46px;
    }

    .gen-input-bar {
        padding: 10px 10px 12px;
        border-radius: 18px;
    }

    /* 375 宽下产品图按钮与提示词并排会把输入区挤成一条窄缝，改成上下两段——
       依旧同处一张卡片内，段间不加边框，整体感不变 */
    .gen-compose-row {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }

    .gen-compose-row .gen-ref-row {
        max-width: none;
    }

    .gen-control-row {
        gap: 8px;
    }

    .gen-control-btn {
        padding: 8px 10px;
        font-size: 12px;
    }

    .gen-control-btn .ctrl-label {
        max-width: 130px;
    }

    .gen-dock-topline .gen-cost-estimate {
        width: 100%;
        border-radius: 12px;
    }

    .gen-feed-foot {
        gap: 8px;
    }

    .gen-feed-time {
        font-size: 11px;
    }

    /* 控制行在 375 宽下会换行，发送按钮独占一行右对齐，避免被挤成两半 */
    .gen-control-spacer {
        flex-basis: 100%;
        height: 0;
    }

    .gen-send-btn {
        margin-left: auto;
    }
}

/* 侧栏展开时，左下角积分角标正好落在侧栏底部（与参考图里侧栏底部的用户卡片位置一致，
   侧栏已预留 92px 底部内边距不会遮挡模型）；侧栏收起后那块区域变成了底部操作条的
   左半边，角标会压住「生成数量」等按钮，因此跟着侧栏一起隐藏。 */
body:has(.gen-workbench-feed.sidebar-collapsed) .points-float-widget {
    display: none;
}

/* =====================================================================
   结果小图（缩略图）+ 点击看大图（全屏灯箱）
   用户实测反馈「生成的时候图不要怼太大，小图，点击看大图就行」，
   自由创意生成 / 创意图模板生成 / 详情模板生成 / 个人中心生成记录 四处统一用这套样式。
   ===================================================================== */

.site-thumb {
    position: relative;
    display: block;
    border-radius: 12px;
    overflow: hidden;
    background: var(--site-bg-soft);
    border: 1px solid var(--site-panel-border);
    cursor: zoom-in;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

.site-thumb:focus-visible {
    border-color: var(--site-primary);
    box-shadow: 0 0 0 2px rgba(var(--brand-accent-rgb), 0.4);
}

.site-thumb-img {
    width: 100%;
    display: block;
    /* 缩略图统一按 1:1 裁切展示，避免竖图把结果流撑得老长；原图在灯箱里完整看 */
    aspect-ratio: 1 / 1;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.22s ease, transform 0.2s ease;
}

.site-thumb.is-loaded .site-thumb-img {
    opacity: 1;
}

.site-thumb.is-loaded:hover .site-thumb-img {
    transform: scale(1.04);
}

/* 骨架占位：图片未加载完成前撑住位置，避免布局跳动 */
.site-thumb-ph {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 12px;
    color: var(--site-text-muted);
    text-align: center;
    padding: 10px;
    background: linear-gradient(100deg, var(--site-bg-soft) 30%, rgba(255, 255, 255, 0.07) 50%, var(--site-bg-soft) 70%);
    background-size: 200% 100%;
    animation: gen-shimmer 1.4s ease-in-out infinite;
}

.site-thumb.is-loaded .site-thumb-ph {
    display: none;
}

.site-thumb.is-error {
    cursor: default;
}

/* 加载失败时一律展示可重试的占位，而不是浏览器的裂图图标 */
.site-thumb.is-error .site-thumb-ph {
    display: flex;
    animation: none;
    background: rgba(242, 73, 87, 0.08);
    color: var(--site-danger);
}

.site-thumb.is-error .site-thumb-img,
.site-thumb.is-error .site-thumb-zoom,
.site-thumb.is-error .site-thumb-dl {
    /* 图片加载失败时不留下载入口，避免用户点出一个 404 / 0 字节文件 */
    display: none;
}

.site-thumb-spinner {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2.5px solid rgba(255, 255, 255, 0.2);
    border-top-color: var(--site-primary);
    animation: gen-spin 0.8s linear infinite;
    flex-shrink: 0;
}

.site-thumb-error-icon {
    font-size: 22px;
    opacity: 0.75;
}

.site-thumb-retry {
    border: 1px solid rgba(242, 73, 87, 0.5);
    background: rgba(242, 73, 87, 0.14);
    color: #ffb3ba;
    font-size: 12px;
    padding: 4px 12px;
    border-radius: 999px;
    cursor: pointer;
}

.site-thumb-retry:hover {
    background: rgba(242, 73, 87, 0.26);
}

/* 悬停时右下角的「查看大图」提示，明确告诉用户小图是可以点开的 */
.site-thumb-zoom {
    position: absolute;
    right: 8px;
    bottom: 8px;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(var(--site-bg-rgb), 0.72);
    color: #fff;
    font-size: 11px;
    line-height: 1.5;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.15s ease, transform 0.15s ease;
    pointer-events: none;
}

.site-thumb.is-loaded:hover .site-thumb-zoom,
.site-thumb.is-loaded:focus-visible .site-thumb-zoom {
    opacity: 1;
    transform: translateY(0);
}

/* 小图右上角的「下载」直下入口：结果图是用户自己生成的内容，必须始终能一键下到本地
   （后台上传的素材图才受防盗保护，两者在同一页共存互不影响） */
.site-thumb-dl {
    position: absolute;
    /* 放左下角：左上角留给创意图模板角标、右下角留给「查看大图」提示，三者互不遮挡 */
    left: 8px;
    bottom: 8px;
    z-index: 3;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(var(--site-bg-rgb), 0.78);
    border: 1px solid rgba(var(--brand-accent-rgb), 0.42);
    color: var(--brand-accent-soft);
    font-size: 11px;
    line-height: 1.5;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.site-thumb-dl:hover,
.site-thumb-dl:focus-visible {
    background: var(--brand-accent);
    border-color: var(--brand-accent);
    color: var(--brand-accent-ink);
    text-decoration: none;
}

.site-thumb.is-loading .site-thumb-dl {
    /* 图还没加载出来时先不给下载入口，避免点到还没渲染好的空图 */
    display: none;
}

/* 结果小图统一尺寸上限：无论一张还是多张，都不会撑满整个展示区 */
.site-thumb-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 14px;
    align-content: start;
    width: 100%;
}

.site-thumb-grid .site-thumb {
    max-width: 260px;
}

/* ---------- 全屏灯箱 ---------- */
body.site-lightbox-lock {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
    overflow: hidden;
}

.site-lightbox {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: none;
    align-items: center;
    justify-content: center;
}

.site-lightbox.is-open {
    display: flex;
}

.site-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(var(--site-bg-deep-rgb), 0.92);
    backdrop-filter: blur(4px);
    cursor: zoom-out;
}

.site-lightbox-topbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.65), transparent);
}

.site-lightbox-counter {
    color: rgba(255, 255, 255, 0.8);
    font-size: 13px;
    font-weight: 600;
}

.site-lightbox-tools {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

.site-lightbox-btn {
    border: 1px solid rgba(255, 255, 255, 0.26);
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 7px 14px;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.site-lightbox-btn:hover {
    background: rgba(255, 255, 255, 0.28);
}

.site-lightbox-btn.is-close {
    background: rgba(242, 73, 87, 0.22);
    border-color: rgba(242, 73, 87, 0.5);
}

.site-lightbox-btn.is-close:hover {
    background: rgba(242, 73, 87, 0.4);
}

.site-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.24);
    background: rgba(var(--site-bg-soft-rgb), 0.72);
    color: #fff;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}

.site-lightbox-nav:hover {
    background: rgba(var(--brand-accent-rgb), 0.7);
    color: var(--brand-accent-ink);
    border-color: var(--brand-accent);
}

.site-lightbox-nav.is-prev { left: 18px; }
.site-lightbox-nav.is-next { right: 18px; }

.site-lightbox-stage {
    position: relative;
    z-index: 1;
    max-width: min(92vw, 1200px);
    max-height: 82vh;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.site-lightbox-img {
    max-width: min(92vw, 1200px);
    max-height: 82vh;
    width: auto;
    height: auto;
    display: block;
    border-radius: 10px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.site-lightbox-stage.is-loaded .site-lightbox-img {
    opacity: 1;
}

.site-lightbox-stage.is-error .site-lightbox-img {
    display: none;
}

.site-lightbox-loading {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 13px;
    pointer-events: auto;
}

.site-lightbox-stage.is-loaded .site-lightbox-loading {
    display: none;
}

.site-lightbox-stage.is-error .site-lightbox-loading {
    position: static;
    min-width: 260px;
    min-height: 180px;
}

.site-lightbox-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 16px 20px;
    text-align: center;
    color: rgba(255, 255, 255, 0.86);
    font-size: 13px;
    line-height: 1.6;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
}

@media (max-width: 768px) {
    .site-lightbox-stage,
    .site-lightbox-img {
        max-width: 94vw;
        max-height: 70vh;
    }

    .site-lightbox-nav {
        width: 38px;
        height: 38px;
        font-size: 22px;
    }

    .site-lightbox-nav.is-prev { left: 8px; }
    .site-lightbox-nav.is-next { right: 8px; }

    .site-lightbox-topbar {
        padding: 10px 12px;
    }

    .site-lightbox-btn {
        font-size: 12px;
        padding: 6px 11px;
    }

    .site-thumb-grid {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
        gap: 10px;
    }

    /* 移动端灯箱打开时，页面上的浮标不能盖在大图上面 */
    body.site-lightbox-lock .points-float-widget,
    body.site-lightbox-lock .contact-qrcode-widget {
        display: none;
    }
}

/* ---------- 缩略图组件在各页面容器内的尺寸适配 ---------- */

/* 个人中心生成记录卡片：缩略图要填满固定比例的缩略区，不用组件默认的 1:1 自撑高 */
.record-thumb-wrap {
    /* 卡片列宽已受 record-grid 限制，这里再压一道高度上限，保证「小图」观感 */
    max-height: 240px;
}

.record-thumb-grid .site-thumb {
    height: 100%;
    border: none;
    border-radius: 0;
    background: transparent;
}

.record-thumb-grid .site-thumb-img {
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
}

.record-thumb-grid .site-thumb-zoom {
    right: 6px;
    bottom: 6px;
    font-size: 10.5px;
    padding: 2px 7px;
}

/* 多图时每格更小，别再叠一层「查看大图」角标把画面糊住 */
.record-thumb-grid.record-thumb-count-3 .site-thumb-zoom,
.record-thumb-grid.record-thumb-count-4 .site-thumb-zoom {
    display: none;
}

/* AI 无限画布的视频记录：产物是 mp4，用 <video> 而不是缩略图组件渲染。
   与图片缩略图占同一块区域，因此高度约束一致（受 .record-thumb-wrap 的 max-height 限制），
   区别是要留出底部控制条的空间，否则播放按钮会被裁掉。 */
.record-video-thumb {
    width: 100%;
    height: 100%;
    max-height: 240px;
    object-fit: contain;
    background: #000;
    border-radius: 0;
    display: block;
}

/* 详情模板生成：每屏卡片的结果区本身就是固定比例的小图容器 */
.tpl-screen-body .site-thumb {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 0;
    background: transparent;
}

.tpl-screen-body .site-thumb-img {
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
}

/* 自由创意生成 / 创意图模板生成：生成中的骨架卡片与结果小图保持同宽，避免出图瞬间跳尺寸 */
.site-thumb-grid .gen-result-item.is-skeleton {
    max-width: 260px;
}

/* ==========================================================================
   结果流持久化（历史记录翻页条 / 历史卡片 / 失败提示补充说明）
   用户实测反馈：「在生成的过程返回能不能看到，测试了是点去其他界面回来就没有了」，
   现在三个生成页进来都会把数据库里属于自己的历史结果渲染成结果流，
   顶部这条是「继续往前加载更早记录」的操作条。
   ========================================================================== */
.gen-feed-history-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    flex-shrink: 0;
    padding: 2px 0 0;
}

.gen-feed-loadmore {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border-radius: 999px;
    border: 1px solid var(--site-panel-border);
    background: var(--site-panel);
    color: var(--site-text-muted);
    font-size: 12px;
    cursor: pointer;
    transition: color .2s, border-color .2s, background .2s;
}

.gen-feed-loadmore:hover:not(:disabled) {
    color: #fff;
    border-color: rgba(var(--brand-accent-rgb), 0.6);
    background: rgba(var(--brand-accent-rgb), 0.14);
}

.gen-feed-loadmore:disabled {
    opacity: .6;
    cursor: not-allowed;
}

.gen-feed-history-hint {
    font-size: 12px;
    color: var(--site-text-muted);
}

/* 从数据库还原出来的历史卡片：左侧留一道淡色标记，和本次新生成的区分开 */
.gen-feed-item.is-history {
    border-left: 2px solid rgba(var(--brand-accent-rgb), 0.35);
}

.gen-feed-failed-tip {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--site-text-muted);
}

/* 创意图模板生成页 / 详情模板生成页的历史结果区 */
.gen-history-panel {
    margin-top: 18px;
    background: var(--site-panel);
    border: 1px solid var(--site-panel-border);
    border-radius: var(--site-radius);
    padding: 16px 18px;
}

.gen-history-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.gen-history-panel-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--site-text);
}

.gen-history-panel-empty {
    padding: 18px 10px;
    text-align: center;
    font-size: 13px;
    color: var(--site-text-muted);
}

.gen-history-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.gen-history-card {
    border: 1px solid var(--site-panel-border);
    border-radius: 12px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.02);
}

.gen-history-card.is-processing {
    border-color: rgba(var(--brand-accent-rgb), 0.5);
}

.gen-history-card.is-failed {
    border-color: rgba(242, 73, 87, 0.45);
}

.gen-history-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.gen-history-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 11px;
    background: rgba(var(--brand-accent-rgb), 0.16);
    border: 1px solid rgba(var(--brand-accent-rgb), 0.4);
    color: var(--brand-accent-soft);
}

.gen-history-badge.is-success {
    background: rgba(45, 190, 130, 0.14);
    border-color: rgba(45, 190, 130, 0.42);
    color: #7ee2b8;
}

.gen-history-badge.is-failed {
    background: rgba(242, 73, 87, 0.14);
    border-color: rgba(242, 73, 87, 0.42);
    color: #ffb3ba;
}

.gen-history-card-time {
    font-size: 11px;
    color: var(--site-text-muted);
    margin-left: auto;
}

.gen-history-card-fail {
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(242, 73, 87, 0.12);
    border: 1px solid rgba(242, 73, 87, 0.34);
    color: #ffb3ba;
    font-size: 12px;
    line-height: 1.6;
}

.gen-history-card-loading {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 12px;
    border-radius: 10px;
    background: rgba(var(--brand-accent-rgb), 0.08);
    border: 1px dashed rgba(var(--brand-accent-rgb), 0.45);
    color: var(--brand-accent-soft);
    font-size: 12px;
}

.gen-history-card-actions {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    flex-wrap: wrap;
}

/* ==========================================================================
   站点 LOGO（图片版）
   顶部导航与登录/注册页原本用的是渐变底色 + 「AI」文字的占位方块，现已换成用户提供的
   「新星 PHOTO!」LOGO 图（后台可自助更换）。图片版需要去掉占位方块的渐变底与文字居中，
   并统一用 object-fit: contain，这样管理员上传任意长宽比的 LOGO 都不会被拉伸变形；
   深色导航底上保持原生像素直接渲染，不加滤镜，保证清晰不糊。
   ========================================================================== */
.site-header-brand img.logo-mark,
.site-auth-brand img.logo-mark {
    background: none;
    padding: 0;
    object-fit: contain;
    display: block;
    -webkit-user-drag: none;
    user-select: none;
}

.site-auth-brand img.logo-mark {
    box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.55);
}

/* LOGO 文件缺失 / 路径写错时的占位。
   system_config_site_logo_img_tag() 的 onerror 会摘掉 src 并挂上 .is-missing，
   浏览器因此不再画「碎图」小图标；这里把它渲染成与 LOGO 同尺寸、同圆角的品牌黑方块
   （描一圈品牌黄，能一眼看出是「图没加载出来」而不是设计如此），页面布局不塌不白屏。
   alt 文案用 font-size:0 收掉，避免占位方块里挤出一行小字。 */
.site-header-brand img.logo-mark.is-missing,
.site-auth-brand img.logo-mark.is-missing {
    background: var(--brand-black);
    border: 1px solid rgba(var(--brand-accent-rgb), 0.55);
    border-radius: 22%;
    box-sizing: border-box;
    font-size: 0;
    color: transparent;
}

/* ============================================================================
   后台上传类图片的防盗样式（用户第四轮反馈：「图片要进行一个限制，不能在网页右键下载
   （后台上传的图片），只能是生成的图片在下载按钮下载」）

   这里只负责「浏览器原生的保存入口」这一层：
     - -webkit-touch-callout:none  关掉 iOS/移动端长按弹出的「存储图像」菜单
     - -webkit-user-drag:none      关掉图片拖拽（拖到桌面 = 另存一份）
     - user-select:none            避免长按选中图片后走系统分享/保存
   右键菜单与拖拽事件的拦截在 public/assets/js/protected_media.js，
   真正拦住「把图片地址复制到新标签页」的服务端那一层在 api/protected_image.php。

   ⚠ 作用域必须严格限定在 [data-protected-img] / [data-protected-media]：
   用户自己生成的结果图（结果卡片、灯箱大图）不带这些属性，下载按钮照常可用；
   输入框、文本域等区域也完全不受影响。
   ============================================================================ */
[data-protected-img],
[data-protected-media] img {
    -webkit-touch-callout: none;
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    user-drag: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: auto;
}

/* Hero 背景这类「以 CSS 背景呈现的受保护素材」：容器本身也关掉长按菜单，
   但容器里的按钮/链接要保持可点、文字要保持可选，所以只压容器自身一层。 */
[data-protected-media] {
    -webkit-touch-callout: none;
}
[data-protected-media] a,
[data-protected-media] button,
[data-protected-media] input,
[data-protected-media] textarea {
    -webkit-touch-callout: default;
    -webkit-user-select: auto;
    -moz-user-select: auto;
    -ms-user-select: auto;
    user-select: auto;
}