/* ==========================================================================
   置顶推荐卡 + 双端下载区（2026-10-25）
   --------------------------------------------------------------------------
   加载页面：list.php（置顶卡）、detail.php（下载区）
   色彩**全部走语义 token**（--bg / --surface / --txt-* / --line / --brand-*），
   深色为默认态、浅色由 theme-light.css 重定义 token 自动跟随，
   所以本文件里**不要**出现写死的深色背景或浅色文字。

   ⚠️ 本层的元素不由 motion.js 接管（它只管 .art-item / .cat-item / .page-item 等），
     入场动画在文件末尾用纯 CSS 给，prefers-reduced-motion 下自动关闭。
   ========================================================================== */

/* =========================  1. 置顶推荐卡（列表页）  ========================= */

.pin-card {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 14px;
  /* 🔴 中轴（2026-10-25 修「桌面端不和谐」）：
     原来写死 `margin: 16px 16px 4px`，桌面下这条卡就贴着屏幕边缘铺开
     （实测 1920 宽：卡片 x=16 w=1888，而下方网格 x=340 w=1240），
     全页只有它跑出中轴，视觉上像一条失控的横幅。
     这里跟 style-v2.css §1 用同一套算法，只是**卡片自身有底色 →
     必须用 margin 而不是 padding**（padding 会把底色一起铺到边）：
       手机 <640px → max(16px, 0)      = 16px，与改动前的 16px 逐像素一致
       桌面        → max(24px,(100%-1120)/2) → 与 .section / 网格严格对齐
     ⚠️ --gutter / --container 定义在 style-v2.css :root；本文件在其后加载，
        且 list.php / detail.php 都引了 style-v2.css，故此处可直接用。 */
  margin: 16px max(var(--gutter), calc((100% - var(--container)) / 2)) 4px;
  padding: 14px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--brand-line);
  box-shadow: 0 8px 26px -16px rgba(99, 102, 241, 0.7);
  text-decoration: none;
  overflow: hidden;
}

/* 左上角品牌光晕：让「置顶」在列表里一眼可辨，又不至于像广告位 */
.pin-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(130% 150% at 0% 0%, var(--brand-soft), transparent 62%);
  pointer-events: none;
}

.pin-card.is-hidden { display: none; }

.pin-cover-wrap {
  flex: none;
  display: block;
  width: 84px;
  height: 84px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--img-bg);
  border: 1px solid var(--line);
}

.pin-cover {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pin-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.pin-top {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.pin-badge {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  color: #fff;
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  box-shadow: 0 4px 12px -5px var(--brand-2);
}

.pin-badge::before {
  content: '★';
  font-size: 10px;
  line-height: 1;
}

.pin-cat {
  font-size: 11px;
  color: var(--txt-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pin-title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--txt-1);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pin-desc {
  font-size: 12px;
  line-height: 1.5;
  color: var(--txt-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pin-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}

.pin-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border-radius: 7px;
  font-size: 10px;
  line-height: 1;
  color: var(--txt-2);
  background: var(--bg-soft);
  border: 1px solid var(--line);
}

.pin-tag::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
}

/* ---- 右侧动作区：把「一条卡 + 大片空白」收成一个有重心的横条 ----
   ⚠️ 默认 display:none —— 手机端（<768px）与旧版**逐像素一致**，不挤占正文宽度。
   只在有富余横向空间的档位出现，让左右各有一个视觉锚点（封面 / 按钮）。 */
.pin-go {
  display: none;
  position: relative;
  flex: none;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  color: #fff;
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  box-shadow: 0 10px 24px -12px var(--brand-2);
}

/* 按钮左侧的分隔线：正文与按钮之间本来是一条空带，加一道两端渐隐的细线
   后，构图读作「内容 | 动作」而不是「内容 ……… 按钮」。
   放在 gap 里（不在按钮盒内），不占布局宽度；偏移 10px < 最小 gap(14px)，不会压到正文 */
.pin-go::before {
  content: '';
  position: absolute;
  top: 50%;
  right: calc(100% + 10px);
  width: 1px;
  height: 30px;
  transform: translateY(-50%);
  background: linear-gradient(180deg, transparent, var(--line-strong), transparent);
}

.pin-go::after {
  content: '';
  width: 6px;
  height: 6px;
  border-top: 1.6px solid currentColor;
  border-right: 1.6px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.22s ease;
}

/* 桌面悬停：只做轻微上浮，别抢列表卡的 hover 观感 */
@media (hover: hover) and (pointer: fine) {
  .pin-card {
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  }
  .pin-card:hover {
    transform: translateY(-2px);
    border-color: var(--brand-2);
    box-shadow: 0 12px 30px -16px rgba(139, 92, 246, 0.85);
  }
  /* 按钮内的箭头右移一点，暗示「点进去」；transform 里必须带 rotate，
     否则覆盖掉基础样式的 45°，箭头会变成一个方块 */
  .pin-card:hover .pin-go::after {
    transform: translateX(3px) rotate(45deg);
  }
}

/* ---- 布局自适应：按可用宽度分档，不再用一套尺寸硬撑 ----
   768 起横向已有富余 → 放出右侧按钮，并把描述限宽（否则长描述会横跨整屏）
   1024 起是真正的桌面中轴（1120px）→ 封面/字号整体放大一档，撑住卡片体积 */
@media (min-width: 768px) {
  .pin-go { display: inline-flex; }
  .pin-desc { max-width: 620px; }
}

@media (min-width: 1024px) {
  .pin-card { padding: 16px 20px; gap: 18px; border-radius: 16px; }
  .pin-cover-wrap { width: 100px; height: 100px; border-radius: 14px; }
  .pin-body { gap: 6px; }
  .pin-badge { font-size: 12px; padding: 6px 11px; }
  .pin-cat { font-size: 12px; }
  .pin-title { font-size: 17px; }
  .pin-desc { font-size: 13px; max-width: 720px; }
  .pin-tag { font-size: 11px; padding: 5px 9px; }
  .pin-go { padding: 11px 20px; font-size: 13px; }

  /* 右侧补一道与左上角对称的淡品牌光：桌面端卡很宽，只在左边发光会「一头沉」，
     右边（按钮那一端）有一点底色呼应，整条才站得住。纯装饰，不占布局。 */
  .pin-card::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(58% 130% at 100% 50%, var(--brand-soft), transparent 72%);
    pointer-events: none;
  }
}

@media (min-width: 1600px) {
  /* 中轴涨到 1240 后横向更空，封面再大一档，别让左侧显得单薄 */
  .pin-cover-wrap { width: 112px; height: 112px; }
  .pin-title { font-size: 18px; }
}

/* =========================  2. 下载区（详情页）  ========================= */

.dl-card {
  position: relative;
  isolation: isolate;
  margin: 4px 0 18px;
  padding: 14px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--brand-line);
  box-shadow: 0 10px 30px -20px rgba(99, 102, 241, 0.75);
  overflow: hidden;
}

.dl-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(125% 130% at 100% 0%, var(--brand-soft), transparent 62%);
  pointer-events: none;
}

.dl-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.dl-hd-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 600;
  color: var(--txt-1);
}

.dl-hd-title::before {
  content: '';
  width: 3px;
  height: 14px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--brand-1), var(--brand-2));
}

.dl-hd-tag {
  flex: none;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 10px;
  line-height: 1;
  color: var(--txt-2);
  background: var(--bg-soft);
  border: 1px solid var(--line);
}

.dl-btns {
  display: flex;
  gap: 10px;
}

.dl-btn {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  background: var(--bg-soft);
  text-decoration: none;
  transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.dl-btn:active { transform: scale(0.98); }

@media (hover: hover) and (pointer: fine) {
  .dl-btn:hover {
    border-color: var(--brand-2);
    background: var(--brand-soft);
  }
}

.dl-btn-ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  color: #fff;
}

.dl-btn-ico svg {
  width: 19px;
  height: 19px;
}

.dl-btn-ios .dl-btn-ico { background: linear-gradient(135deg, var(--brand-1), var(--brand-2)); }
.dl-btn-apk .dl-btn-ico { background: linear-gradient(135deg, #10b981, #059669); }

.dl-btn-txt {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dl-btn-txt b {
  font-size: 14px;
  font-weight: 600;
  color: var(--txt-1);
  white-space: nowrap;
}

.dl-btn-txt small {
  font-size: 11px;
  color: var(--txt-3);
  white-space: nowrap;
}

/* 完整链接文本 —— 「贴出来」的核心，允许长按整段选中 */
.dl-urls {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.dl-url {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border-radius: 10px;
  background: var(--bg-soft);
  border: 1px dashed var(--line-strong);
}

.dl-url-label {
  flex: none;
  font-size: 11px;
  color: var(--txt-3);
}

.dl-url-text {
  flex: 1;
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  line-height: 1.55;
  color: var(--txt-2);
  word-break: break-all;
  user-select: all;
  /* 🔴 不做行数截断：「贴出来」就是要把链接完整露在页面上，
     截成两行 + 省略号会让用户没法直接读 / 抄。长链自然会换 3~4 行，可接受。 */
}

.dl-copy {
  flex: none;
  padding: 6px 10px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  color: var(--link);
  background: var(--brand-soft);
  border: 1px solid var(--brand-line);
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.dl-copy.done {
  color: #fff;
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  border-color: transparent;
}

/* =========================  3. 窄屏与动效  ========================= */

@media (max-width: 380px) {
  .dl-btns { flex-direction: column; }
  .pin-cover-wrap { width: 68px; height: 68px; }
  .pin-title { font-size: 14px; }
}

@keyframes lmw-dl-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.pin-card,
.dl-card {
  animation: lmw-dl-in 0.45s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  .pin-card,
  .dl-card {
    animation: none;
  }
  .pin-card,
  .dl-btn,
  .dl-copy {
    transition: none;
  }
}