/* ============================================================
   光影包视图（复刻自 FileManager.vue 的 scoped 样式）
   所有选择器以 .view-shaders 开头；颜色/阴影仅使用 CSS 变量
   ============================================================ */

.view-shaders .page {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 940px;
  margin: 0 auto;
}

/* ---------------- 标题行与操作条 ---------------- */
.view-shaders .fm-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: nowrap; /* 头部永不换行，按钮组位置固定 */
}
.view-shaders .fm-head-left {
  flex: 1;
  min-width: 0; /* 允许文本收缩，把空间让给按钮组 */
}
.view-shaders .fm-path {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.15s ease;
}
.view-shaders .fm-path:hover {
  color: var(--accent-2);
}
.view-shaders .fm-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0; /* 按钮组固定尺寸，永不因文本长度移位 */
}
.view-shaders .fm-ver-select {
  max-width: 240px;
}

/* ---------------- 光影包列表 ---------------- */
.view-shaders .fm-card {
  padding: 8px;
  backdrop-filter: blur(var(--glass-blur)) saturate(130%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(130%);
}
.view-shaders .fm-list {
  display: flex;
  flex-direction: column;
}
.view-shaders .fm-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  transition: background 0.15s ease, opacity 0.2s ease;
}
.view-shaders .fm-row:hover {
  background: var(--card-2);
}
/* 未启用的光影包行整体变淡 */
.view-shaders .fm-row:has(.switch input:not(:checked)) {
  opacity: 0.55;
}
.view-shaders .fm-cover {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 9px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--card-2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.view-shaders .fm-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.view-shaders .fm-mod-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.view-shaders .fm-name {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  user-select: text;
}
.view-shaders .fm-mod-sub {
  font-size: 11.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  user-select: text;
}
.view-shaders .fm-meta {
  font-size: 12px;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.view-shaders .fm-date {
  width: 86px;
  text-align: right;
}
.view-shaders .fm-remove {
  flex-shrink: 0;
}
.view-shaders .spin[hidden] {
  display: none;
}

/* ---------------- 删除确认弹窗 ---------------- */
.view-shaders .modal-mask[hidden] {
  display: none;
}
.view-shaders .modal-title {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 16px;
}
.view-shaders .confirm-text {
  font-size: 13.5px;
  line-height: 1.7;
  word-break: break-all;
}
.view-shaders .modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}