/* 萝卜派 · 统一卡片规格（唯一真源 v2 · 1017）
   ============================================================
   生产记录 / 本次输出 / 视频 / 记录 四个板面共用这一份，改这里 = 全站一起变。
   一张卡 = 缩略图 + 徽标(本机/云端) + 三行信息：
     第一行：类型名 · 生成用时(橙标签) · 时间
     第二行：模型名 ……………… [📋 复制提示词] [📂 打开本地文件夹]
     第三行：提示词（两行截断，悬停看全文）
   1017 老板口径：①字号不许再"极小"（正文 12px 起、类型名 13.5px、图标 26×24/图形 14）
                 ②每张卡都要有「点一下复制提示词」③放大/播放时提示词显示在画面之外，不遮图。
   注：index.html 里那份 .gp-* / .g-* 是更早的内联拷贝；本文件在后加载，尺寸以本文件为准。 */

.gp-card{break-inside:avoid;margin:0 0 12px;border-radius:12px;border:1px solid var(--border-card,#e8ebf1);overflow:hidden;
  background:var(--bg-card,#fff);cursor:zoom-in;box-shadow:0 1px 3px rgba(15,23,42,.06);position:relative}
.gp-card:hover{border-color:var(--c-carrot,#ff6a00)}

/* 缩略图区（1017：长图不许把卡拉成几千米长条 —— 老板实报「怎么是一列」，根因就是卡高 4000+px） */
.gp-th{min-height:96px;display:flex;align-items:center;justify-content:center;background:rgba(148,163,184,.1);position:relative;overflow:hidden}
.gp-th img{width:100%;display:block;max-height:300px;object-fit:cover;object-position:top center}
.gallery-grid .g-card img,.g-card img{max-height:300px;object-fit:cover;object-position:top center}
.gp-ph{font-size:12.5px;color:var(--text-dim,#9aa3ae);padding:22px 6px;text-align:center;line-height:1.6}

/* 三行信息（规格核心，全站必须一模一样） */
.gp-meta{padding:9px 11px 10px;font-size:12px;line-height:1.6;color:#8b95a3}
.gp-meta .gp-l1{display:flex;gap:8px;align-items:center}
.gp-meta .gp-nm{font-size:13.5px;font-weight:800;color:#1f2329;flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gp-meta .gp-tm{font-size:12px;color:#8b95a3;flex:0 0 auto;margin-left:auto;font-variant-numeric:tabular-nums}
.gp-meta .gp-l2{display:flex;align-items:center;gap:6px;margin-top:4px;font-size:12px;color:#6b7280;min-height:24px}
.gp-meta .gp-md{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gp-meta .gp-pr{margin-top:4px;font-size:12.5px;line-height:1.55;color:#7b8592;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}

/* 记录页旧卡（app 自带的 .w-l1/.w-l2 与 index 的 .g-l1/.g-l2）：字号一并拉到新规格，别再"极小" */
.w-card .w-l1,.w-card .w-name,.g-card .g-name{font-size:13.5px;font-weight:800;color:#1f2329}
.w-card .w-time,.g-card .g-time{font-size:12px;color:#8b95a3;font-variant-numeric:tabular-nums}
.w-card .w-l2,.g-card .g-l2,.g-card .g-meta{font-size:12px;color:#6b7280;line-height:1.6}
.g-card .g-meta{padding:9px 11px 10px}
.g-card .g-l2{margin-top:4px;display:flex;align-items:center;gap:6px;min-height:24px}
.g-card .g-l1{display:flex;align-items:center;gap:8px}

/* 徽标：本机=深色，云端=蓝（同一枚，全站统一） */
.gp-badge{position:absolute;top:7px;left:7px;padding:3px 9px;border-radius:8px;font-size:11.5px;font-weight:800;color:#fff;background:rgba(15,23,42,.66)}
.gp-badge.cloud{background:rgba(37,99,235,.88)}
.gp-badge.rt{left:auto;right:9px}

/* 右下两枚小图标（唯一尺寸 26×24，图形 14×14）：📂 打开本地文件夹 / 📋 复制提示词 */
.gp-open,.gp-cp{display:inline-flex;align-items:center;justify-content:center;width:26px;height:24px;flex:0 0 auto;
  border-radius:7px;font-size:12px;font-weight:700;color:#4b5563;background:#fff;border:1px solid rgba(0,0,0,.09);
  cursor:pointer;vertical-align:middle;float:none;padding:0;line-height:1}
.gp-open:hover,.gp-cp:hover{background:#f6f7f9;color:#ff6a00;border-color:#ffd7b0}
.gp-open svg,.gp-cp svg{width:14px;height:14px}
.gp-cp.ok{color:#16a34a;background:#f0fdf4;border-color:#bbf7d0}

/* 生成用时（每张几秒）——全站卡片第一行那枚橙标签，老板点名"最重要的信息" */
.gp-card .gp-dur,.w-card .gp-dur,.g-card .gp-dur{flex:0 0 auto;margin:0;padding:2px 7px;border-radius:7px;
  font-size:12px;font-weight:800;line-height:1.5;color:#c2410c;background:#fff2e6;border:1px solid #ffd7b0;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.gp-card .gp-dur:first-child,.w-card .gp-dur:first-child{margin-left:0}
.gp-tm+.gp-dur,.w-time+.gp-dur{margin-left:6px}

/* ══════════ 放大查看 / 播放时的「提示词」条（1017 老板口径）══════════
   位置：永远在画面下方独立一行，绝不叠在图上。
   内容：提示词全文（可滚动）+「复制提示词」按钮。 */
.lb-prompt{display:flex;gap:10px;align-items:flex-start;box-sizing:border-box;
  margin:12px auto 0;width:min(1180px,94vw);max-height:24vh;padding:10px 12px;border-radius:12px;
  background:rgba(24,22,20,.94);border:1px solid rgba(255,255,255,.14);color:#f3f4f6;
  font-size:13px;line-height:1.6;text-align:left}
.lb-prompt.dark{background:rgba(17,24,39,.94)}
.lb-prompt .lb-pp-k{flex:0 0 auto;font-size:12.5px;font-weight:800;color:#ffb27a;padding-top:1px}
.lb-prompt .lb-pp-x{flex:1 1 auto;min-width:0;max-height:16vh;overflow:auto;white-space:pre-wrap;word-break:break-word}
.lb-prompt .lb-pp-act{flex:0 0 auto;display:flex;gap:6px;align-items:center}
.lb-prompt .gp-cp{width:auto;height:28px;padding:0 11px;gap:6px;font-size:12.5px;font-weight:800;
  color:#fff;background:#ff6a00;border-color:#ff6a00}
.lb-prompt .gp-cp:hover{background:#e85f00;color:#fff}
.lb-prompt .gp-cp.ok{color:#fff;background:#16a34a;border-color:#16a34a}
.lb-prompt .gp-cp svg{width:14px;height:14px}
/* 记录页放大层里原来那条压在画面上的提示词浮层：提示词已改到下方独立条，这里不再压图 */
#lb .lb-cap .p{display:none !important}
#lb .lb-cap{max-height:22vh;overflow:auto}

/* ══════════ 一个批次一张卡：多图不再竖着堆成长条（1017 老板实报"怎么是一列"）══════════
   根因：一张卡里塞了整批图（最多 20 张），卡高 4000+px、宽度只有 1 格 → 看着就是一列。
   现在：拼 2 列小图、最多留 4 张，其余折叠；右上角标「共 N 张」，点卡仍可放大看原图。 */
.g-card.gp-multi{position:relative}
.g-card.gp-multi img{width:50% !important;max-height:132px !important;object-fit:cover !important;object-position:top center !important;
  display:inline-block !important;vertical-align:top;box-sizing:border-box}
.g-card.gp-multi img:nth-child(even){border-left:1px solid #fff}
.g-card.gp-multi img[data-folded="1"]{display:none !important}
.g-card.gp-multi .gp-n-img{position:absolute;right:8px;top:8px;z-index:3;padding:2px 8px;border-radius:8px;
  background:rgba(15,23,42,.72);color:#fff;font-size:11.5px;font-weight:800;letter-spacing:.2px}

/* ══════════ 1017 终极覆盖（老板实报「怎么是一列」+「都是极小的 UI」的根治）══════════
   根因1：本次输出是 grid 且用默认 align-items:stretch —— 一行里只要有一张长图，整行卡都被拉到
          4000px 高，于是屏幕上一次只看得见一张卡，看着就"是一列"。
   根因2：index.html 内联 CSS 用 .g-meta{font-size:9.5px} 这类更具体的选择器把字号压得极小。
   这里全部用 !important 把规格钉死（本文件在 index.html 之后加载）。 */
.gallery-grid, #gallery-grid{align-items:start !important;align-content:start !important;grid-auto-rows:auto !important}
.gallery-grid .g-card, #gallery-grid .g-card, .g-card, .gp-card{align-self:start !important;height:auto !important;max-height:none !important;box-sizing:border-box}
/* 一张卡里的图最高 300px（长图裁顶部），不再把卡撑成几千米 */
.g-card > img, .g-card img, .gp-th img, .gp-card img{max-height:300px !important;height:auto !important;object-fit:cover !important;object-position:top center !important;min-height:0 !important}
.g-card > div:not(.g-meta):not(.gp-meta):not(.gp-n-img), .gp-th{max-height:300px !important;overflow:hidden !important}
/* 字号：统一到新规格（正文 12px 起、类型名 13.5px），不许再"极小" */
.g-meta, .g-card .g-meta, .gp-meta{padding:9px 11px 10px !important;font-size:12.5px !important;line-height:1.65 !important}
.g-l1, .g-card .g-l1, .gp-l1, .gp-meta .gp-l1{display:flex !important;align-items:center !important;gap:8px !important}
.g-name, .g-card .g-name, .gp-nm, .gp-meta .gp-nm{font-size:14.5px !important;font-weight:800 !important;color:#1f2329 !important}
.g-time, .g-card .g-time, .gp-tm, .gp-meta .gp-tm{font-size:12.5px !important;color:#8b95a3 !important;font-variant-numeric:tabular-nums}
.g-l2, .g-card .g-l2, .gp-l2, .gp-meta .gp-l2{font-size:12.5px !important;margin-top:4px !important;min-height:24px !important;
  display:flex !important;align-items:center !important;gap:6px !important;flex-wrap:nowrap !important;overflow:hidden !important;color:#6b7280 !important}
.g-model, .g-size, .gp-md{font-size:12.5px !important;overflow:hidden !important;text-overflow:ellipsis !important;white-space:nowrap !important}
.g-card .gp-dur, .gp-dur,.w-card .gp-dur{font-size:12px !important}
.gp-open, .gp-cp{width:28px !important;height:26px !important}
.gp-open svg, .gp-cp svg{width:15px !important;height:15px !important}

/* ── 1019L（老板 10-20）：「上面几张和下面好好的那几张长得不一样」──
   根因：云端卡的缩略图按原图比例铺（1536×512 的图案只有 60px 高），本机方图 173px
   → 同一面墙两行高度/形状对不上。统一裁成 1:1 方图（object-position 顶居中，图案不被裁掉重点）。 */
.gp-th{aspect-ratio:1 / 1 !important;max-height:none !important}
.gp-th>img,.gp-th>video{width:100% !important;height:100% !important;max-height:none !important;object-fit:cover !important;object-position:top center !important}
/* 云端卡（无本机文件）也占同样高度的卡体，避免一行高一行矮 */
.gp-card .gp-meta{min-height:44px}

/* ── 1026C（老板 10-26）：「为什么没有几张图有显示生成时间的呀」──
   实测（真机 8390 历史 + 真样式，卡宽 152px 一屏 8 列）：25/25 张卡的「时间」整块溢出卡右边界
   （时右 197 > 卡右 164）被 overflow 裁掉，第一行 25/25 溢出；连「图生图」三个字都被压成「图...」。
   根因：.gp-l1 不换行，名字+耗时标签+时间在 150px 级窄卡里根本放不下 → 最右边的「时间」首当其冲被切。
   口径：① 第一行永不溢出卡片，挤不下就换行，绝不把时间挤出卡外；② 时间整串显示、不缩写不换行；
        ③ 窄卡（≤220px）里「名字+时间」占第一行，「生成用时」橙标签换到第二行(整行、左对齐)；
        ④ 宽卡（4/3/2 列那种）保持规格原顺序：类型名 · 生成用时 · 时间，一个字都不动。 */
.gp-meta .gp-l1{display:flex !important;align-items:center !important;gap:8px !important;flex-wrap:wrap !important;overflow:hidden !important}
.gp-meta .gp-nm{flex:1 1 auto !important;min-width:3em !important;font-size:13px !important;overflow:hidden !important;text-overflow:ellipsis !important;white-space:nowrap !important}
.gp-meta .gp-tm{flex:0 0 auto !important;margin-left:auto !important;white-space:nowrap !important}
.w-card .gp-dur,.g-card .gp-dur,.gp-card .gp-dur{flex:0 0 auto !important;white-space:nowrap !important}