/* =============================================================
   五岔 · 云匣子 · 文件区（v4 石墨极简）
   列表 / 网格 / 瀑布流 / 分享 / 回收站
   -------------------------------------------------------------
   · 表格式列表：50px 行、**可见的发丝行线**（v4 反馈：线条要有存在感）、
     hover 浅灰、选中石墨浅底 + 左侧 3px 墨条；
   · 文件类型图标改为**单色体系**：灰底墨色字形，悬停反白成墨块；
   · 入场动画 fill: backwards（保住 hover 位移与 FLIP 平滑搬家）。
   ============================================================= */

/* =============================================================
   列表视图
   ============================================================= */
.filelist {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.filelist-head,
.filerow {
  display: grid;
  /* 三列信息（类型/大小/时间）间距拉宽：gap 22 + 加宽列 */
  grid-template-columns: 34px minmax(0, 1fr) 118px 150px;
  align-items: center;
  gap: 22px;
  padding: 0 14px;
}

/* 文件空间用 6 列（多一个"类型"列 + 行内操作区） */
.filelist.cols-wide .filelist-head,
.filelist.cols-wide .filerow {
  grid-template-columns: 34px minmax(220px, 1fr) 112px 104px 168px 210px;
}

/* 三列信息整体靠右（右对齐，往右挪） */
.filelist .fcell {
  text-align: right;
}

.filelist-head .th:nth-child(n + 3) {
  justify-content: flex-end;
}

.filelist-head {
  flex: 0 0 auto;
  height: 40px;
  padding: 0 22px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-4);
  background: transparent;
  position: sticky;
  top: 0;
  z-index: 2;
}

/* ★ 勾选框显隐：默认不显示，悬停该行或已勾选才出现。
   2026-10-23 修复：opacity:0 的隐形控件仍可点/可 Tab 聚焦 → 补 visibility:hidden；
   隐藏方向延迟到淡出结束再生效（淡出动画保留），显示方向立即生效。 */
.filerow .check {
  opacity: 0;
  visibility: hidden;
  transform: scale(0.86);
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease-back),
    visibility 0s linear var(--dur-2);
}

.filerow:hover .check,
.filerow.is-selected .check {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease-back),
    visibility 0s;
}

.filelist-head .check {
  opacity: 0;
  visibility: hidden;
  transform: scale(0.86);
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease-back),
    visibility 0s linear var(--dur-2);
}

.filelist-head:hover .check,
.filelist-head .check.is-on,
.filelist-head .check.is-partial {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease-back),
    visibility 0s;
}

.filelist-head .th {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  user-select: none;
  transition: color var(--dur-1) var(--ease), transform var(--dur-2) var(--ease);
  white-space: nowrap;
}

.filelist-head .th:hover {
  color: var(--text-1);
  transform: translateY(-1px);
}

.filelist-head .th:active {
  transform: translateY(0) scale(0.96);
  transition-duration: var(--dur-instant);
}

.filelist-head .th svg {
  width: 12px;
  height: 12px;
  transition: transform var(--dur-2) var(--ease-spring), opacity var(--dur-2) var(--ease);
}

.filelist-head .th:hover svg {
  transform: translateY(1px);
}

.filelist-head .th.is-desc svg {
  transform: rotate(180deg);
}

.filelist-head .th.is-desc:hover svg {
  transform: rotate(180deg) translateY(1px);
}

.filelist-head .th.is-off svg {
  opacity: 0.25;
}

.filelist-body {
  flex: 1 1 auto;
  min-height: 0;
}

/* ---------- 列表骨架（加载态）---------- */
.list-skeleton {
  flex: 1 1 auto;
  min-height: 0;
  padding: 12px 14px;
}

.list-skeleton .sk-row {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 54px;
  margin: 2px 8px;
  padding: 0 14px;
  border-radius: 12px;
}

.list-skeleton .sk-box {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: var(--r-s);
}

.list-skeleton .sk-lines {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.list-skeleton .sk-l1 {
  width: 34%;
  height: 11px;
}

.list-skeleton .sk-l2 {
  width: 18%;
  height: 9px;
}

/* ---------- 行（无横线：圆角悬浮行） ----------
   ★ hover 与勾选是两套完全不同的样式：
     · hover  = 中性浅灰填充 + 柔阴影 + 轻浮起（不带任何蓝色）
     · 勾选   = 蓝色浅底 + 左侧渐变蓝条 + 蓝色内环
   ★ 所有可过渡属性统一用 background-color / box-shadow / transform
     （绝不用渐变 background-image —— 图片不可过渡，会"瞬现瞬灭"割裂），
     同一时长同一曲线 → 显示与消失都是完整过渡，不会底色先走框后走。 */
.filerow {
  position: relative;
  height: 54px;
  margin: 2px 8px;
  padding: 0 14px;
  border-radius: 12px;
  user-select: none;
  -webkit-user-select: none;
  cursor: default;
  background-color: transparent;
  animation: rise-in var(--dur-3) var(--ease) backwards;
  animation-delay: calc(var(--i, 0) * 16ms);
  transition: background-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease),
    transform var(--dur-2) var(--ease);
}

/* 左侧渐变条：只在勾选时亮起 */
.filerow::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 0 4px 4px 0;
  background: var(--grad-brand);
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease);
  pointer-events: none;
}

/* 鼠标焦点：中性灰，绝不带蓝 */
.filerow:hover {
  background-color: var(--surface-2);
  box-shadow: var(--shadow-s);
  transform: translateY(-1px);
}

.filerow:active {
  transform: translateY(0) scale(0.995);
  transition-duration: var(--dur-instant);
}

/* 勾选：蓝色系（和 hover 明显区分） */
.filerow.is-selected {
  background-color: var(--brand-soft);
  box-shadow: inset 0 0 0 1.5px rgba(91, 108, 255, 0.35);
}

.filerow.is-selected::before {
  opacity: 1;
}

/* 勾选 + 悬停：蓝底轻微加深 + 浮起 */
.filerow.is-selected:hover {
  background-color: rgba(91, 108, 255, 0.16);
  box-shadow: inset 0 0 0 1.5px rgba(91, 108, 255, 0.45), var(--shadow-s);
  transform: translateY(-1px);
}

.filerow > * {
  position: relative;
  z-index: 1;
}

/* ---------- 文件名单元格 ---------- */
.fname {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

/* 类型图标：★ 文件夹=百度网盘式亮黄块（一眼区分）；文件=糖果浅底彩字形 */
.fico {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid transparent;
  display: grid;
  place-items: center;
  transition: transform var(--dur-2) var(--ease-back), box-shadow var(--dur-2) var(--ease);
  overflow: hidden;
}

.filerow:hover .fico,
.card:hover .fico {
  transform: scale(1.1) rotate(-3deg);
}

.fico svg {
  width: 17px;
  height: 17px;
}

/* 文件夹：亮黄渐变块 + 暖色投影 —— 和文件完全不同物种 */
.fico.folder {
  background: linear-gradient(180deg, var(--folder-1), var(--folder-2));
  color: #fff;
  box-shadow: var(--shadow-folder), inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.filerow:hover .fico.folder,
.card:hover .fico.folder {
  box-shadow: 0 6px 16px rgba(255, 179, 46, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

/* 文件：糖果浅底 + 彩色字形 */
.fico.image { background: #e8f0ff; color: #3b82f6; }
.fico.video { background: #f3e8ff; color: #a855f7; }
.fico.doc   { background: #e5f6ee; color: #10b981; }
.fico.pdf   { background: #fdeaea; color: #f43f5e; }
.fico.zip   { background: #eceeff; color: #6366f1; }
.fico.audio { background: #fff1e0; color: #f97316; }
.fico.other { background: #eef0f7; color: #8a90a3; }

.fname-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.fname-main {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.fname-title {
  font-size: 13.2px;
  font-weight: 600;
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color var(--dur-1) var(--ease);
}

.filerow:hover .fname-title {
  color: var(--brand-ink);
}

/* 文件夹名加粗一档（配合亮黄图标，一眼认出） */
.fico.folder + .fname-text .fname-title {
  font-weight: 750;
}

.fname-title .hl {
  background: rgba(91, 108, 255, 0.18);
  border-radius: 3px;
  padding: 0 1px;
}

.fname-sub {
  font-size: 10.8px;
  color: var(--text-4);
  display: flex;
  align-items: center;
  gap: 6px;
}

.fcell {
  font-size: 12.2px;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
  transition: color var(--dur-1) var(--ease);
}

.filerow:hover .fcell {
  color: var(--text-2);
}

/* 行内快捷操作：下载 / 生成分享链接 / 更多（悬停滑入）
   2026-10-23 修复：opacity:0 时里面的按钮仍可点/可聚焦 → 补 visibility:hidden（同上：隐藏等淡出完） */
.row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  transform: translateX(8px);
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease),
    visibility 0s linear var(--dur-2);
}

.filerow:hover .row-actions,
.filerow.is-selected .row-actions {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease),
    visibility 0s;
}

.row-actions .icon-btn {
  width: 28px;
  height: 28px;
}

.row-actions .icon-btn svg {
  width: 15px;
  height: 15px;
}

.row-act {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 9px;
  border-radius: var(--r-xs);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-3);
  white-space: nowrap;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease),
    transform var(--dur-2) var(--ease);
}

.row-act svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  transition: transform var(--dur-2) var(--ease);
}

.row-act:hover {
  background: var(--surface-3);
  color: var(--text-1);
  transform: translateY(-1px);
}

.row-act:hover svg {
  transform: scale(1.08);
}

.row-act:active {
  transform: translateY(0) scale(0.95);
  transition-duration: var(--dur-instant);
}

/* 文件夹卡（瀑布流里） */
.wf-folder-box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  aspect-ratio: 4 / 3;
  padding: 12px 10px;
  background: linear-gradient(180deg, rgba(255, 215, 94, 0.18), rgba(255, 179, 46, 0.1));
  transition: background var(--dur-1) var(--ease);
}

.wf-folder-ico {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(180deg, var(--folder-1), var(--folder-2));
  box-shadow: var(--shadow-folder), inset 0 1px 0 rgba(255, 255, 255, 0.55);
  transition: transform var(--dur-2) var(--ease-back), box-shadow var(--dur-2) var(--ease);
}

.wf-item:hover .wf-folder-ico {
  transform: scale(1.1) rotate(-4deg);
  box-shadow: 0 6px 16px rgba(255, 179, 46, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.wf-folder-ico svg {
  width: 17px;
  height: 17px;
}

.wf-folder-title {
  max-width: 100%;
  font-size: 11.5px;
  font-weight: 650;
  color: var(--text-1);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wf-item.is-folder .card-check.is-on {
  background: var(--ink);
}

/* =============================================================
   网格视图
   ============================================================= */
.grid-area {
  flex: 1 1 auto;
  min-height: 0;
  padding: 14px;
}

.cardgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(188px, 1fr));
  gap: 12px;
}

.card {
  position: relative;
  border-radius: var(--r-m);
  background: var(--surface);
  border: 1px solid transparent;
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  cursor: default;
  transition: opacity var(--dur-4) var(--ease), transform var(--dur-3) var(--ease),
    box-shadow var(--dur-2) var(--ease);
}

.card:not(.is-in) {
  opacity: 0;
  transform: translate3d(0, 12px, 0) scale(0.985);
}

.card.is-in {
  animation: rise-in var(--dur-4) var(--ease) backwards;
  animation-delay: calc(min(var(--i, 0), 12) * 26ms);
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-m);
}

.card:active {
  transform: translateY(-1px) scale(0.99);
  transition-duration: var(--dur-instant);
}

/* 勾选：蓝色系（与 hover 的中性阴影区分） */
.card.is-selected {
  box-shadow: 0 0 0 2px rgba(91, 108, 255, 0.4), var(--shadow-xs);
}

.card-thumb {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--surface-2);
  overflow: hidden;
}

.card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.03);
  transition: opacity var(--dur-5) var(--ease), transform var(--dur-5) var(--ease);
}

.card-thumb img.is-loaded {
  opacity: 1;
  transform: scale(1);
}

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

.card-thumb.placeholder {
  background: var(--surface-2);
}

.card-thumb .sk {
  position: absolute;
  inset: 0;
}

.card-check {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 3;
  opacity: 0;
  /* 2026-10-23 修复：opacity:0 的隐形勾选框仍可点 → 补 visibility:hidden（隐藏等淡出完） */
  visibility: hidden;
  transform: scale(0.8);
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease-back),
    visibility 0s linear var(--dur-2);
}

.card:hover .card-check,
.card.is-selected .card-check,
.wf-item:hover .card-check,
.wf-item.is-selected .card-check {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease-back),
    visibility 0s;
}

.card-dur {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 3;
  height: 19px;
  padding: 0 7px;
  border-radius: var(--r-xs);
  background: rgba(23, 24, 28, 0.78);
  color: #fff;
  font-size: 10.5px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-variant-numeric: tabular-nums;
  transition: transform var(--dur-2) var(--ease);
}

.card:hover .card-dur {
  transform: translateY(-2px);
}

.card-play {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  opacity: 0;
  /* 2026-10-23 修复：opacity:0 的播放遮罩补 visibility:hidden（隐藏等淡出完） */
  visibility: hidden;
  transition: opacity var(--dur-2) var(--ease), visibility 0s linear var(--dur-2);
}

.card:hover .card-play {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur-2) var(--ease), visibility 0s;
}

.card-play i {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid var(--line);
  color: var(--text-1);
  box-shadow: var(--shadow-m);
  transform: scale(0.88);
  transition: transform var(--dur-2) var(--ease-back);
}

.card:hover .card-play i {
  transform: scale(1);
}

.card-play svg {
  width: 18px;
  height: 18px;
  margin-left: 2px;
}

.card-body {
  padding: 8px 10px 9px;
  border-top: 1px solid var(--line-soft);
}

.card-name {
  font-size: 11.8px;
  font-weight: 600;
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-meta {
  margin-top: 2px;
  font-size: 10.2px;
  color: var(--text-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  font-variant-numeric: tabular-nums;
}

/* 文件夹卡片 */
.card.is-folder .card-thumb {
  display: grid;
  place-items: center;
  background: var(--surface-2);
}

.card.is-folder .card-thumb .fico {
  width: 38px;
  height: 38px;
  border-radius: var(--r-s);
}

.card.is-folder .card-thumb .fico svg {
  width: 18px;
  height: 18px;
}

/* =============================================================
   瀑布流（图片视频空间）
   ============================================================= */
.waterfall {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.wf-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.wf-item {
  position: relative;
  user-select: none;
  -webkit-user-select: none;
  border-radius: var(--r-m);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid transparent;
  box-shadow: var(--shadow-xs);
  cursor: pointer;
  transition: opacity var(--dur-4) var(--ease), transform var(--dur-3) var(--ease),
    box-shadow var(--dur-2) var(--ease);
  /* ★ 绝不能加 will-change：100+ 图块会爆显存 */
}

.wf-item:not(.is-in) {
  opacity: 0;
  transform: translate3d(0, 14px, 0) scale(0.985);
}

.wf-item.is-in {
  animation: rise-in var(--dur-4) var(--ease) backwards;
  animation-delay: calc(min(var(--i, 0), 12) * 26ms);
}

.wf-item:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-m);
  z-index: 2;
}

.wf-item:active {
  transform: translateY(-1px) scale(0.995);
  transition-duration: var(--dur-instant);
}

.wf-item.is-selected {
  box-shadow: 0 0 0 2px rgba(91, 108, 255, 0.4), var(--shadow-xs);
}

.wf-media {
  position: relative;
  width: 100%;
  background-size: cover;
  background-position: center;
}

.wf-media img {
  -webkit-user-drag: none;
  user-drag: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.03);
  transition: opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease);
}

.wf-media img.is-loaded {
  opacity: 1;
  transform: scale(1);
}

.wf-item:hover .wf-media img.is-loaded {
  transform: scale(1.035);
}

/* 未加载时的微光骨架 */
.wf-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 80%);
  background-size: 300px 100%;
  animation: shimmer 2.8s linear infinite;
  opacity: 1;
  transition: opacity var(--dur-4) var(--ease);
  pointer-events: none;
}

.wf-media.is-ready::after {
  opacity: 0;
}

.wf-overlay {
  position: absolute;
  inset: auto 0 0 0;
  padding: 24px 10px 9px;
  background: linear-gradient(to top, rgba(12, 13, 16, 0.8), rgba(12, 13, 16, 0));
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
  pointer-events: none;
}

.wf-item:hover .wf-overlay {
  opacity: 1;
  transform: translateY(0);
}

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

.wf-sub {
  margin-top: 2px;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.78);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-variant-numeric: tabular-nums;
}

.wf-item .card-check {
  top: 8px;
  left: 8px;
}

/* =============================================================
   回收站（完整管理页 · 右栏「管理全部」进入）
   ============================================================= */
.trash-notice {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 14px;
  padding: 10px 14px;
  border-radius: var(--r-m);
  background: var(--warn-soft);
  border: 1px solid rgba(183, 121, 31, 0.3);
  animation: rise-in var(--dur-3) var(--ease) backwards;
  transition: transform var(--dur-2) var(--ease);
}

.trash-notice:hover {
  transform: translateY(-1px);
}

.trash-notice .n-ico {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: var(--r-s);
  display: grid;
  place-items: center;
  color: var(--warn);
  background: var(--surface);
  border: 1px solid rgba(183, 121, 31, 0.3);
  transition: transform var(--dur-2) var(--ease);
}

.trash-notice:hover .n-ico {
  transform: rotate(-5deg) scale(1.06);
}

.trash-notice .n-ico svg {
  width: 16px;
  height: 16px;
}

.trash-notice .n-txt {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12.2px;
  line-height: 1.55;
  color: var(--text-2);
}

.trash-notice .n-txt b {
  color: var(--text-1);
  font-weight: 750;
}

.remain {
  display: flex;
  align-items: center;
  /* ★ 必须右对齐：表头「剩余保留时间」是右对齐的（.th:nth-child(n+3) 用 flex-end），
     而这一格原来是默认左对齐 → 表头和它下面的时间值对不上（用户报的"错位"）。 */
  justify-content: flex-end;
  gap: 9px;
  min-width: 0;
  white-space: nowrap;
}

/* =============================================================
   ★ 触屏设备（没有鼠标悬停）：把"悬停才出现"的操作按钮**常显**
   ---------------------------------------------------------------
   桌面上 .row-actions / .card-check / .card-play / 勾选框 这些平时是透明的、
   鼠标移上去才浮现 —— 对鼠标很优雅，但**手机没有 hover**：
   用户根本看不到、也点不到这些按钮（第一次触摸只是把 hover 状态激活，
   常常要"点两下"才有反应）。
   用 @media (hover: none) 精确命中触屏设备，**桌面端行为完全不变**。
   ============================================================= */
@media (hover: none) {
  .filerow .row-actions,
  .filerow .check,
  .filelist .card-check,
  .filelist .card-play,
  .wf-overlay {
    opacity: 1 !important;
    /* 2026-10-23 修复：桌面端给这些控件补了 visibility:hidden，
       触屏常显规则必须一并置回 visible，否则手机上会整块消失 */
    visibility: visible !important;
  }

  /* 触摸目标加大：手指比鼠标指针粗得多，小按钮点不准 */
  .row-act,
  .icon-btn,
  .seg-btn {
    min-width: 40px;
    min-height: 40px;
  }

  /* 行内操作按钮之间留出间距，避免误触相邻按钮 */
  .row-actions {
    gap: 6px;
  }
}

.countdown-ring {
  flex: 0 0 auto;
  display: block;
  width: 24px;
  height: 24px;
}

.countdown-ring svg {
  width: 24px;
  height: 24px;
  transform: rotate(-90deg);
}

.countdown-ring circle {
  fill: none;
  stroke-width: 2.4;
}

.countdown-ring .bg {
  stroke: var(--surface-3);
}

.countdown-ring .fg {
  stroke: var(--text-2);
  stroke-linecap: round;
  transition: stroke-dashoffset 1s linear, stroke var(--dur-3) var(--ease);
}

.countdown {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.8px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-3);
  white-space: nowrap;
}

.countdown svg {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  opacity: 0.8;
}

.countdown.is-urgent {
  color: var(--danger);
  font-weight: 700;
}

.countdown.is-urgent svg {
  animation: urgent-pulse 1.5s var(--ease) infinite;
}

@keyframes urgent-pulse {
  0%,
  100% {
    opacity: 0.95;
  }
  50% {
    opacity: 0.35;
  }
}

/* =============================================================
   我的分享（完整管理页 · 右栏「管理全部」进入）
   ============================================================= */
.share-list {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
}

.share-row {
  position: relative;
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto auto 34px;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  border-radius: var(--r-m);
  background: var(--surface);
  border: 1px solid transparent;
  box-shadow: var(--shadow-xs);
  animation: rise-in var(--dur-3) var(--ease) backwards;
  animation-delay: calc(var(--i, 0) * 22ms);
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}

.share-row:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-m);
}

.share-row .fico {
  width: 38px;
  height: 38px;
  border-radius: var(--r-s);
}

.share-row .fico svg {
  width: 17px;
  height: 17px;
}

.share-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.share-name {
  font-size: 13.5px;
  font-weight: 650;
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color var(--dur-1) var(--ease);
}

.share-row:hover .share-name {
  color: var(--text-1);
}

.share-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
  font-size: 11.5px;
  color: var(--text-3);
}

.share-meta .m {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  transition: color var(--dur-1) var(--ease), transform var(--dur-2) var(--ease);
}

.share-meta .m:hover {
  color: var(--text-1);
  transform: translateY(-1px);
}

.share-meta .m svg {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  opacity: 0.7;
}

/* 分享链接芯片：点一下复制 */
.share-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 250px;
  height: 28px;
  padding: 0 10px;
  border-radius: var(--r-xs);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-2);
  background: var(--surface-2);
  border: 1px solid var(--line);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  transition: color var(--dur-1) var(--ease), background var(--dur-1) var(--ease),
    border-color var(--dur-1) var(--ease), transform var(--dur-2) var(--ease);
}

.share-link:hover {
  color: var(--text-1);
  background: var(--surface-3);
  border-color: var(--line-strong);
  transform: translateY(-1px);
}

.share-link:active {
  transform: translateY(0) scale(0.97);
  transition-duration: var(--dur-instant);
}

.share-link svg {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  opacity: 0.8;
  transition: transform var(--dur-2) var(--ease);
}

.share-link:hover svg {
  transform: scale(1.1);
}

/* 提取码芯片 */
.share-code {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  min-width: 56px;
  padding: 0 8px 0 10px;
  border-radius: var(--r-xs);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--text-1);
  background: var(--surface-2);
  border: 1px solid var(--line);
  transition: transform var(--dur-2) var(--ease), border-color var(--dur-1) var(--ease);
}

.share-code:hover {
  transform: translateY(-1px) scale(1.03);
  border-color: var(--line-strong);
}

.share-row > .icon-btn {
  justify-self: end;
}

/* 动作栏里的计数图标：显式定尺 */
.toolbar .ab-sel svg {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
}

/* =============================================================
   ★★ 窄屏列表布局（2026-10-06）
   ---------------------------------------------------------------
   用浏览器级审计（tools/audit.mjs --mobile，390x844）量出来的**真实重叠**：
     · 回收站列表  40 处重叠（.fico ∩ .fcell / .remain ∩ .filerow …）
     · 我的分享     5 处重叠（.m ∩ .share-link）
   而桌面（1680）下这两个页面都是 0 重叠 —— 所以是**移动端特有的**：
   表格是固定宽度的多列网格（回收站 34+1fr+118+150 + 间距 66 ≈ 368+），
   390px 屏幕装不下，列被挤到互相压住。

   修法：窄屏把列数减到必需的那几列，其余隐藏；表头文字标签在手机上没有意义
   （一行只有一个文件，图标已经说明了），直接隐藏 —— 但**保留表头的全选
   勾选框**，否则手机上没法全选。
   ============================================================= */
@media (max-width: 860px) {
  /* ---------- 主文件列表（.cols-wide，6 列）---------- */
  .filelist.cols-wide .filelist-head,
  .filelist.cols-wide .filerow {
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 10px;
    padding: 0 10px;
  }
  .filelist.cols-wide .filerow {
    height: auto;
    min-height: 56px;
    padding-top: 10px;
    padding-bottom: 10px;
    row-gap: 6px;
  }
  /* 隐藏次要列（类型/大小/时间） */
  .filelist.cols-wide .filerow .fcell {
    display: none;
  }
  /* 表头只留全选勾选框 */
  .filelist.cols-wide .filelist-head .th {
    display: none;
  }
  /* 行内操作换到第二行、左对齐（原来在最后一列，窄屏放不下） */
  .filelist.cols-wide .filerow .row-actions {
    grid-column: 2 / -1;
    justify-content: flex-start;
    opacity: 1;
    /* 2026-10-23 修复：配合 visibility:hidden，窄屏常显规则补 visibility:visible */
    visibility: visible;
  }

  /* ---------- 回收站列表（4 列）---------- */
  .filelist:not(.cols-wide) .filelist-head,
  .filelist:not(.cols-wide) .filerow {
    grid-template-columns: 26px minmax(0, 1fr) auto;
    gap: 10px;
    padding: 0 10px;
  }
  .filelist:not(.cols-wide) .filerow {
    height: auto;
    min-height: 56px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .filelist:not(.cols-wide) .filerow .fcell {
    display: none;
  }
  .filelist:not(.cols-wide) .filelist-head .th {
    display: none;
  }

  /* ---------- 我的分享（5 列 → 两行）----------
     原来：图标 | 信息 | 链接 | 提取码 | 取消
     窄屏：图标 + 信息 + 取消 在上一行；链接 + 提取码 换到下一行。
     否则两个 "auto" 列（链接很长）会把行撑爆、和 .m 元信息压在一起。 */
  .share-row {
    grid-template-columns: 34px minmax(0, 1fr) 44px;
    row-gap: 8px;
    gap: 10px;
    padding: 12px;
  }
  .share-row > .fico {
    grid-column: 1;
    grid-row: 1;
  }
  .share-row > .share-info {
    grid-column: 2;
    grid-row: 1;
  }
  .share-row > .icon-btn {
    grid-column: 3;
    grid-row: 1;
    width: 44px;
    height: 44px;
  }
  .share-row > .share-link {
    grid-column: 1 / 3;
    grid-row: 2;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* 提取码放到第二行最右（那 44px 列刚好装得下 4 位码）。
     之前放在第一列（34px）比码本身窄 → 会向右溢出 12px 压住链接
     （审计量到 .share-link ∩ .share-code = 12x28）。 */
  .share-row > .share-code {
    grid-column: 3;
    grid-row: 2;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: right;
  }
  /* 元信息在窄屏收紧一点，避免挤成一条 */
  .share-meta {
    gap: 4px 10px;
  }

  /* ---------- 视频封面的播放按钮 ----------
     审计量到 .vplay-btn 实际可点只有 18x18px，手机上点不准 →
     视觉不变，用一个透明 ::after 把可点区域撑到 44px。 */
  .vplay-btn::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
  }
}