/* CoverNice — 我的封面：直角、1px 描边、克制的悬浮光 */

.mine{padding:44px 0 76px}
.mine .kicker{margin:0 0 10px;font-size:11px;font-weight:700;letter-spacing:.18em;color:var(--primary);text-transform:uppercase}
.mine h1{margin:0 0 12px;font-size:clamp(28px,3.6vw,42px);line-height:1.1;letter-spacing:-.03em}
.mine-lede{margin:0 0 26px;max-width:66ch;color:var(--ink70);font-size:15px}

.mine-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.mine-count{font-size:12px;color:var(--ink50);font-variant-numeric:tabular-nums}

/* 两类分开摆：各自一行、缩略图小一点，一屏能同时看到 */
.mine-sec{margin-top:20px}
.mine-sec + .mine-sec{margin-top:26px}
.mine-h{display:flex;align-items:baseline;gap:8px;margin:0 0 10px;font-size:11px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink50)}
.mine-h b{font-weight:600;letter-spacing:0;color:var(--ink70);font-variant-numeric:tabular-nums}
.mine-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:12px 10px;margin-top:0}
/* 副本行用 flex 而不是网格：整张包封宽、老副本窄，卡片各自贴着自己的宽度，
   不用网格就不会出现「格子 200 宽、图只有 88 宽」那种空档 */
.mine-grid-wrap{display:flex;flex-wrap:wrap;align-items:flex-start;gap:12px 14px}
.mine-grid-wrap .mine-card{flex:0 0 auto;width:176px}
/* 整张包封按固定高度摆（contain，不裁），一行不会被撑得老高 */
.mine-card.is-wrap .mine-thumb{height:130px}
.mine-card.is-wrap .mine-thumb img{height:100%;object-fit:contain;background:var(--bg2)}
/* 老副本只存了前封：图缩到和包封一样高，卡片宽度跟着名字走（名字不截断） */
.mine-grid-wrap .mine-card:not(.is-wrap){width:auto;max-width:170px}
.mine-grid-wrap .mine-card:not(.is-wrap) .mine-thumb{width:88px}
/* 展开/收起放在小标题右端：一行放不下时才出现 */
.mine-h .mine-more{margin-left:auto;padding:0;border:0;background:none;cursor:pointer;
  font-family:inherit;font-size:11px;font-weight:600;letter-spacing:normal;text-transform:none;
  color:var(--ink50)}
.mine-h .mine-more:hover{color:var(--primary)}
.mine-card{margin:0}
.mine-thumb{position:relative;display:block;width:100%;padding:0;border:1px solid var(--line);
  background:#fff;cursor:pointer;overflow:hidden;
  box-shadow:0 1px 2px rgba(15,46,61,.06),0 10px 24px -18px rgba(15,46,61,.35)}
.mine-thumb img{width:100%;aspect-ratio:2/3;object-fit:cover;transition:transform .4s ease}
.mine-thumb:hover img{transform:scale(1.015)}
/* 老记录只有底图（生成时没存合好字的成品），用一层压暗 + 书名把文案补回去，
   否则列表里是一排「没有文字的插画」，看着不像封面。 */
.mine-thumb.is-flat img{transform:none}
/* 字跟着卡片宽度缩：缩略图 90–190px、弹层 260px，同一个字号在小卡上像标题、
   在弹层里才正常。改成按容器宽度算，两边比例就一致了。 */
.mine-thumb,.mc-art{container-type:inline-size}
.mine-type{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  padding:13% 11% 0;text-align:center;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,12,16,.56) 0%,rgba(8,12,16,.14) 36%,rgba(8,12,16,.04) 64%,rgba(8,12,16,.46) 100%)}
.mine-type b{font-size:max(6px,5.8cqw);line-height:1.16;font-weight:600;letter-spacing:.01em;color:#fff;
  text-shadow:0 1px 12px rgba(0,0,0,.5);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.mine-type em{margin-top:auto;padding-bottom:9%;font-style:normal;font-size:max(5px,3.6cqw);letter-spacing:.18em;
  text-transform:uppercase;color:rgba(255,255,255,.86);text-shadow:0 1px 10px rgba(0,0,0,.55)}

.mine-card figcaption{margin-top:9px}
.mine-card figcaption b{display:block;font-size:12px;font-weight:600;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mine-card figcaption span{display:block;margin-top:2px;font-size:12px;color:var(--ink50);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* KDP 包封副本：左下角一个记号，跟 AI 生成的封面区分开 */
.mine-kind{position:absolute;left:0;bottom:0;padding:2px 6px;background:rgba(8,28,38,.8);
  color:#fff;font-size:9.5px;font-weight:700;letter-spacing:.12em;pointer-events:none}

.mine-empty{margin-top:26px;padding:44px 24px;border:1px dashed var(--line2);background:#fff;text-align:center}
.mine-empty p{margin:0 0 14px;color:var(--ink70);font-size:14px}

/* ---------- 放大弹层 ---------- */
.mc-modal{width:min(880px,94vw);max-height:90vh;padding:0;border:1px solid var(--line2);background:#fff;overflow:auto}
.mc-modal::backdrop{background:rgba(8,28,38,.55)}
.mc-x{position:absolute;top:8px;right:10px;z-index:2;width:32px;height:32px;border:1px solid var(--line2);
  background:#fff;color:var(--ink70);font-size:18px;line-height:1;cursor:pointer}
.mc-body{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:26px;padding:22px}
.mc-art{position:relative;margin:0;border:1px solid var(--line);background:var(--bg2)}
.mc-art img{width:100%;aspect-ratio:2/3;object-fit:cover}
/* 整张包封是横的：弹层改成上图下文，260px 一栏会把包封压成邮票 */
.mc-modal.is-wrap .mc-body{grid-template-columns:1fr}
.mc-modal.is-wrap .mc-art{max-width:none;background:#fff}
.mc-modal.is-wrap .mc-art img{object-fit:contain;background:#fff;max-height:38vh}
.mc-info{display:flex;flex-direction:column;min-width:0}
.mc-kicker{margin:2px 0 6px;font-size:11px;font-weight:700;letter-spacing:.16em;color:var(--ink50)}
.mc-info h2{margin:0 0 6px;font-size:24px;letter-spacing:-.02em;line-height:1.2}
.mc-meta{margin:0 0 20px;font-size:13px;color:var(--ink50)}
/* 副本名字：保存时自动起，打开弹层就能改 */
/* 副本名就在标题上改：双击进编辑，或者 hover title 右侧冒出来的小铅笔 */
.mc-title-row{display:flex;align-items:center;gap:8px;min-width:0}
.mc-title-row h2{min-width:0}
.mc-edit{flex:none;width:26px;height:26px;padding:0;border:1px solid var(--line2);border-radius:50%;
  background:#fff;color:var(--ink50);font-size:12px;line-height:1;cursor:pointer;
  opacity:0;transition:opacity .15s,color .15s,border-color .15s}
.mc-title-row:hover .mc-edit,.mc-edit:focus-visible{opacity:1}
.mc-edit:hover{color:var(--primary);border-color:var(--primary)}
#mcTitle[contenteditable="true"]{outline:2px solid var(--primary);outline-offset:3px;border-radius:2px}
.mc-spec{margin:0 0 18px;padding:10px 0 0;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:2px 16px}
.mc-spec div{display:flex;gap:6px;align-items:baseline}
.mc-spec dt{font-size:12px;color:var(--ink50)}
.mc-spec dd{margin:0;font-size:13px;color:var(--ink70);line-height:1.45}
.mc-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}
.btn-quiet{color:var(--accent2);border-color:rgba(180,83,58,.35)}
.btn-quiet:hover{background:rgba(180,83,58,.07)}

/* 生成进度条 + 正在生成的占位卡：点了「生成」人就在这页，
   卡片先占位再一张张变成真的，用户不用对着空白等。 */
.mine-gen{margin:0 0 18px;padding:9px 12px;border:1px solid var(--line);border-radius:2px;
  background:#fff;font-size:12.5px;line-height:1.4;color:var(--ink70)}
.mine-gen b{font-weight:600;color:var(--ink)}
.mine-gen a{color:var(--primary);text-decoration:underline}
.mine-card.is-gen .mine-thumb{aspect-ratio:2/3;display:flex;align-items:center;justify-content:center;
  background:#eef3f6;background-image:linear-gradient(100deg,#eef3f6 30%,#f8fbfc 45%,#eef3f6 60%);
  background-size:220% 100%;animation:mineShimmer 1.6s linear infinite}
.mine-card.is-gen .mine-thumb:hover{transform:none}
.mine-card.is-gen.is-fail .mine-thumb{animation:none;background:#f4f1ee}
@keyframes mineShimmer{from{background-position:120% 0}to{background-position:-20% 0}}
.mine-gen-lab{position:relative;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink50)}

@media(max-width:720px){
  .mc-body{grid-template-columns:1fr;gap:16px;padding:16px}
  .mc-art{max-width:200px}
  .mc-modal.is-wrap .mc-art{max-width:none}
  .mine-grid{grid-template-columns:repeat(auto-fill,minmax(82px,1fr));gap:12px 8px}
  .mine-grid-wrap .mine-card{width:132px}
  .mine-card.is-wrap .mine-thumb{height:110px}
  .mine-grid-wrap .mine-card:not(.is-wrap){width:auto;max-width:130px}
  .mine-grid-wrap .mine-card:not(.is-wrap) .mine-thumb{width:80px}
}