/* ==================== 任务书 #23 WP2：数据公示页（免登录公开） ==================== */
/* 独立版式：居中窄版，不套主应用框架；配色复用 main.css 暗色变量体系 */
.data-public-body {
  background: var(--bg-primary);
  color: var(--text-primary);
  min-height: 100vh;
  font-family: inherit;
}

.dp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 20px 16px;
  border-bottom: 1px solid var(--border-color);
  flex-wrap: wrap;
}
.dp-brand { display: flex; align-items: center; gap: 12px; }
.dp-logo { width: 48px; height: 48px; border-radius: 8px; }
.dp-title { font-size: 22px; font-weight: 700; color: var(--gold); }
.dp-subtitle { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.dp-season { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-secondary); }
.dp-season .form-select { width: 200px; }

.dp-filterbar {
  display: flex;
  gap: 8px; /* 筛选规范 §2：组与组之间固定 8px 行距 */
  max-width: 1100px;
  margin: 0 auto;
  padding: 14px 20px;
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  background: var(--bg-primary);
  z-index: 10;
  border-bottom: 1px solid var(--border-color);
}
.dp-filterbar .search-input { flex: 1; min-width: 200px; }

/* 筛选规范 v2.0 §2（任务书 #28 WP2）：首行 = 搜索（置顶加宽 flex:1）+ 重置筛选按钮（不放任何 chip）；
   小类别自第二行起，每组 = 区头标题（独占一行）+ chips 行；部位/类型细粒度取消；「排除杂项」整块删除 */
/* 任务书 #43（REQ-098）：首行追加 命中计数（恒显）+「筛选 ▾」折叠钮；两态一套 DOM */
.dp-filter-rows { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.dp-top-row { display: flex; gap: 10px; align-items: center; width: 100%; flex-wrap: wrap; }
.dp-search-wrap { flex: 1; min-width: 200px; }
.dp-top-row .search-input { width: 100%; box-sizing: border-box; padding-right: 36px; /* REQ-084：清除钮让位 */ }
.dp-reset-btn { flex: none; }
.dp-panel-title { display: none; /* 折叠顶栏态不显示（「筛选 ▾」钮承担）；≥1400 面板态显示 */ }
.dp-group { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.dp-group-head { font-size: 12px; font-weight: 600; color: var(--text-secondary); letter-spacing: 0.02em; }
.dp-group-note { font-size: 11px; font-weight: 400; color: var(--text-muted); margin-left: 6px; user-select: none; }

/* 折叠顶栏态（<1400px）「筛选 ▾」按钮（#43 断点自 ≤768 上调至 <1400）；≥1400 面板态恒展开不显示 */
.dp-filter-toggle { display: none; flex: none; }

/* 筛选 chips（规范 v2 §4.3 + 筛选规范 v2.0 §3：24px 恒定高、12px 圆角、12px/500、line-height:1 中文光学居中
   （BUG-054 定稿）、深底；选中态金描边+金文字+10% 金底——多选/单选同一样式；chip 间 6px、
   来源行「全部」与四值间 1px 竖分隔线 16px 高） */
.dp-chips { display: flex; flex-wrap: wrap; column-gap: 0; row-gap: 6px; align-items: center; flex: 1; min-width: 0; }
.dp-chip-sub { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; row-gap: 6px; min-width: 0; }
.dp-chip-divider { width: 1px; height: 16px; background: var(--border-color); margin: 0 8px; flex: none; align-self: center; }
.dp-chip {
  display: inline-flex;
  align-items: center;
  flex: none;
  white-space: nowrap;
  height: 24px;
  padding: 0 10px;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
  line-height: 1; /* BUG-054（任务书 #23-补丁6）：中文无西文降部，normal 行盒内字形偏上；line-height:1 光学居中 */
  cursor: pointer;
  user-select: none;
}
.dp-chip.active {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(240, 192, 96, 0.1);
}

/* ==================== 任务书 #28 WP6：过滤器二期（2026-08-09） ====================
   F1 分类三级过滤组：二级 tab 复用 chip 体系、加粗与三级 chips 区分；
   F2 来源实例行：来源组内第二行，chip 内计数角标沿用 .dp-count 组标题计数样式；
   F3 平铺态头：命中计数行 + 0 命中空态重置引导 */
.dp-cat-tabs { display: flex; gap: 6px; flex-wrap: wrap; row-gap: 6px; }
.dp-cat-tab { font-weight: 600; letter-spacing: 0.02em; }
.dp-instance-row { margin-top: 2px; }
.dp-chip-inst .dp-count { margin-left: 5px; }
/* 任务书 #43（REQ-098）：命中计数恒显——浏览态「共 N 件」/ 筛选态「命中 X 件 · N 项生效」；
   移入首行（两态同行：面板态随首行 wrap、折叠顶栏态恒可见不随折叠隐藏） */
.dp-flat-head { font-size: 13px; color: var(--text-secondary); padding: 0 2px; user-select: none; white-space: nowrap; flex: none; }
.dp-empty-actions { margin-top: 12px; }

/* 任务书 #43（REQ-098）：折叠顶栏态（<1400px）——首行恒显（搜索+重置+命中计数+筛选▾），
   筛选组行折叠/展开双向 + sessionStorage 记忆（js/dataPublic.js） */
@media (max-width: 1399px) {
  .dp-filter-toggle { display: inline-flex; align-items: center; }
  .dp-filterbar:not(.filters-open) .dp-filter-rows { display: none; }
  /* 筛选规范 v2.0 §7：展开收起动画 150–250ms ease-out，只动 transform/opacity */
  .dp-filterbar.filters-open .dp-filter-rows { animation: dpRowsIn 0.2s ease-out; }
  .dp-filter-rows.closing { opacity: 0; transform: translateY(-6px); transition: opacity 0.2s ease-out, transform 0.2s ease-out; }
}
@keyframes dpRowsIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* 任务书 #43（REQ-098）：右栏悬浮筛选面板态（≥1400px）——框体完整四边闭合（四边框+底色+圆角+阴影），
   面板内控件矩形零裁切；面板独立纵向滚动（深色细滚动条）；顶部偏移壳级变量 --dp-panel-top
   （公开壳=.dp-header 页头高 / 登录壳=topbar 56+赛季行高，JS 实测写入）；
   层级规约：面板 z=10 ＞ hover 展开卡 z=5 ＞ 普通卡（#dpChipToast z=2000 独立层不动）；
   REQ-091 预留：组列表纵向天然可扩展（职业/专精组将来直接追加） */
@media (min-width: 1400px) {
  .dp-filterbar {
    position: fixed;
    top: calc(var(--dp-panel-top, 0px) + 12px);
    right: 12px;
    left: auto;
    width: 264px;
    max-width: none;
    height: auto; /* REQ-115（任务书 #44 WP3）：面板减重——高度随内容收缩，不再 bottom 拉满全高 */
    max-height: calc(100vh - var(--dp-panel-top, 0px) - 24px); /* 顶部偏移+上 12 间距+下 12 底部余量，超出才内部滚动 */
    margin: 0;
    padding: 14px;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 10px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    overflow-y: auto;
    z-index: 10;
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
  }
  .dp-filterbar::-webkit-scrollbar { width: 8px; }
  .dp-filterbar::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 4px; }
  .dp-filterbar::-webkit-scrollbar-track { background: transparent; }
  .dp-panel-title { display: block; font-size: 15px; font-weight: 600; color: var(--text-primary); flex: none; }
  .dp-filter-toggle { display: none; } /* 面板态无折叠钮（恒展开） */
  .dp-top-row { flex-wrap: wrap; }
  .dp-search-wrap { flex: 1 1 100%; min-width: 0; }
  .dp-flat-head { flex: 1; text-align: right; }
  /* 卡片区让位：内容容器 margin-right = 面板宽 + 间隙，卡片列数自适应重排
     （提权压 .dp-main 的 margin:0 auto 基线规则——auto 左距吸收余量，右距恒定 292） */
  .data-public-body .dp-main, #page-lootdrop .dp-main { margin-right: 292px; }
  /* 任务书 #47 WP3（BUG-081）：赛季选择器右缘与卡片区右缘对齐归位——面板态卡片区右让 292，
     赛季行（公开壳在页头内 / 登录壳独立行）留在 1100 版心致右缘悬空未对齐；
     修法=两壳赛季行所在轨道并入卡片区同一右偏移（margin-left auto 吸收余量，与 .dp-main 同机制）；
     登录壳赛季行规则见文件尾登录壳作用域段（层叠须晚于 #page-lootdrop .dp-season 基线规则） */
  .data-public-body .dp-header { margin-right: 292px; }
}

/* 筛选规范 v2.0 §7：筛选/搜索触发卡片重渲染入场 fade+轻微上浮（只动 transform/opacity，出场不做） */
.dp-item.dp-enter { animation: dpCardIn 0.2s ease-out both; }
@keyframes dpCardIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* 任务书 #23-补丁 修正项②：套装三维筛选条 */
.dp-tier-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.dp-tier-filters .form-select { width: 130px; height: 28px; padding: 0 8px; font-size: 12px; }

.dp-main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px;
}
.dp-loading { text-align: center; color: var(--text-muted); padding: 60px 0; }

.dp-section { margin-bottom: 32px; }
.dp-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
/* 任务书 #23-补丁5 字级回归：对齐规范 v2 §3 注册尺度（标题 18/600） */
.dp-section-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--gold);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 任务书 #23-补丁5 徽标并轨：三套徽标几何规格对齐全站 .tag 体系（main.css:3962，#22-WP1 定稿
   高 20px / 字重 600 / 圆角 5px / padding 0 8px / line-height 1 / 不换行），类名保留作断言钩子 */
.dp-badge {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;
}
.dp-badge-mplus { background: rgba(88, 166, 255, 0.15); color: var(--info); }
.dp-badge-new { background: rgba(63, 185, 80, 0.15); color: var(--success); margin-left: 6px; }
.dp-badge-lair { background: rgba(210, 153, 34, 0.15); color: var(--warning); margin-left: 6px; }

.dp-view-toggle { display: flex; gap: 6px; }
.dp-toggle {
  height: 26px;
  padding: 0 12px;
  border-radius: 5px;
  border: 1px solid var(--border-color);
  background: transparent;
  color: var(--text-secondary);
  font-size: 12px;
  cursor: pointer;
}
.dp-toggle.active {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(240, 192, 96, 0.1);
}

.dp-raid { margin-bottom: 20px; }
.dp-raid-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  padding: 8px 0;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.dp-boss { margin-bottom: 14px; }
.dp-boss-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
/* 件数徽标同并轨：几何同 .tag，语义色同 .tag-grey（弱化灰）；
   WP4-F3（2026-08-10 追加，运营拍板）：文字色 var(--text-secondary)=rgb(139,148,158) → rgb(165,173,185)
   ——与 WP4-F2 灰 tag 同值同坑（合成对比度 3.99 不达 4.5）；徽标底色不动；选择器级落地（:root 变量不动） */
.dp-count {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  color: rgb(165, 173, 185);
  background: rgba(139, 148, 158, 0.15);
  border-radius: 5px;
}

.dp-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
}
.dp-item {
  position: relative; /* P1（WP6 补丁）：生长定位锚点；卡盒样式迁 .dp-item-inner */
}
/* P1（WP6 补丁，运营 2026-08-09 体验终审）：hover 形态重构——卡片本体（含边框）向下生长，
   外层 .dp-item 仅作网格占位（JS 对溢出卡预设折叠态 minHeight，hover 时 inner 转 absolute 不塌网格） */
.dp-item-inner {
  position: relative; /* REQ-092（任务书 #46 WP3）：图标 absolute 定位锚点；has-effect 卡 :417 改 absolute 时仍是定位祖先后代锚定不变，叠加默认值不冲突 */
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 10px 12px;
  /* WP3-v4 R11：flex 列布局——内容行顶部堆叠，来源行 margin-top:auto 锚定卡片底部不动 */
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
}
/* REQ-092（任务书 #46 WP3）：装备图标——inner 右上角，随卡 hover 生长一并移动；
   空值/加载失败由渲染层保证不渲染/隐藏，此处无占位态 */
.dp-item-icon {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  border-radius: 4px;
}
/* 任务书 #28 WP3-v3（R3）：名称行单行截断、内容驱动（废恒占行高）；
   REQ-092（任务书 #46 WP3）：padding-right 给右上角图标留位，防长名压图 */
.dp-item-name { font-size: 13px; font-weight: 600; color: var(--gold); margin-bottom: 6px; line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 26px; }
/* meta 行单行（部位/类型，溢出隐藏不换行；无星标，overflow 保留） */
.dp-item-meta { display: flex; flex-wrap: nowrap; overflow: hidden; gap: 4px; }
/* 装备/套装 meta 标签同并轨：几何同 .tag（字重 400→600、圆角 4→5、高 18→20），
   语义色与 main.css .tag-grey/.tag-blue/.tag-green 同值 */
/* WP4（2026-08-09 灰色系对比度整改）：灰 tag 文字色 var(--text-secondary)=rgb(139,148,158) → rgb(165,173,185)
   ——15% 灰合成底色对比度 3.98→5.41（WCAG AA 4.5 实测）；底色 rgba(139,148,158,.15) 不动；
   选择器级落地（不改 :root 变量——--text-secondary 主应用全站 60+ 处在用，变量级改动超出本补丁范围） */
.dp-tag {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  background: rgba(139, 148, 158, 0.15);
  color: rgb(165, 173, 185);
}
.dp-tag-primary { background: rgba(88, 166, 255, 0.15); color: var(--info); }
.dp-tag-secondary { background: rgba(63, 185, 80, 0.15); color: var(--success); }
/* REQ-110（任务书 #37）：毒咒徽标——仅 venomcurse 非空时渲染；绿色调与特效行 #1eff00 同族（运营裁定绿） */
.dp-tag-venom { background: rgba(30, 255, 0, 0.12); color: #1eff00; }
/* 任务书 #28 WP3-v3：主/副属性各占一行（有才渲染，R2 占位行废止）；
   R1 星标裁切修复：根因 = 行容器 overflow:hidden 把角部外溢的⭐SVG 切半——放开 overflow，
   并加 margin-top 6px 给星标 5px 上溢留出净空间，任何缩放下完整可见 */
.dp-item-stats { display: flex; flex-wrap: nowrap; gap: 4px; margin-top: 6px; }
/* 主属性色板（§4.11 注册，#28-WP3 落地）：力量红 / 敏捷绿 / 智力蓝 */
.dp-tag-p1 { color: #ff6b6b; background: rgba(255, 107, 107, .12); }
.dp-tag-p2 { color: #40c057; background: rgba(64, 192, 87, .12); }
.dp-tag-p3 { color: #4dabf7; background: rgba(77, 171, 247, .12); }
/* 金星变体（§4.2 已注册）：副属性唯一最大者——右上角金色五角星 SVG + 金色描边（裁定 H） */
.dp-tag-star { position: relative; border: 1px solid var(--gold); padding-right: 12px; }
.dp-tag-star svg { position: absolute; top: -5px; right: -4px; width: 10px; height: 10px; }
/* 来源行（单行截断）：R11（WP3-v4）锚定卡片底部——margin-top:auto 吸收短卡空白，padding-top 保底 6px 间距；
   WP4（2026-08-09 灰色系对比度整改）：文字色 var(--text-muted)=rgb(110,118,129) → rgb(150,158,170)
   ——卡片底色合成对比度 3.36→5.71（WCAG AA 4.5 实测）；选择器级落地（--text-muted 主应用全站在用，不动变量） */
.dp-item-src { margin-top: auto; padding-top: 6px; line-height: 16px; font-size: 11px; color: rgb(150, 158, 170); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 大米对标手册档小注（2026-08-16 运营终裁，sql/28）：仅 dungeon 卡且 ilvl 非空渲染（JS 侧条件），
   灰色小字一行、可换行（注文较长不截断）；颜色同 .dp-item-src 整改后口径（WCAG AA 实测 5.71） */
.dp-item-note { margin-top: 4px; line-height: 15px; font-size: 10.5px; color: rgb(150, 158, 170); }
.dp-item-effect { margin-top: 6px; font-size: 12px; color: #1eff00; }

.dp-tiers { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; }
.dp-tier {
  background: var(--bg-card);
  border: 1px solid color-mix(in srgb, var(--cc, #8b949e) 35%, transparent);
  border-radius: 8px;
  padding: 10px 12px;
}
.dp-tier-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.dp-tier-icon { width: 18px; height: 18px; border-radius: 3px; }
.dp-tier-class { font-size: 13px; font-weight: 600; color: var(--cc, var(--text-primary)); }
.dp-tier-name { font-size: 12px; color: var(--text-secondary); }
/* 修正项④（任务书 #23-补丁）：徽标固定不压缩独立占位，长文本独占剩余宽度，杜绝重叠/挤压 */
.dp-tier-bonus { font-size: 12px; color: var(--text-secondary); margin-top: 4px; display: flex; gap: 6px; align-items: flex-start; }
.dp-tier-bonus .dp-tag { flex-shrink: 0; margin-top: 1px; }
.dp-tier-bonus-text { flex: 1; min-width: 0; }

.dp-empty {
  text-align: center;
  color: var(--text-muted);
  padding: 28px 0;
  font-size: 13px;
  border: 1px dashed var(--border-color);
  border-radius: 8px;
}

/* ==================== 任务书 #23-补丁3：公示页交互优化 ==================== */
/* （任务书 #28 WP2：「排除杂项」开关与问号帮助整块删除——杂项改数据层排除零渲染，
    .dp-misc-toggle/.dp-help/.dp-help-pop 样式随 DOM 一并移除） */

/* 折叠（区块/副本/BOSS 三级，任务书 #23-补丁4 修正项②：24×24 热区 + 2px 描边箭头，
   常态次要色、悬浮提亮，三级同规格；默认展开=向下，折叠=向右旋转 -90°） */
.dp-collapse-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; flex: none;
  color: var(--text-secondary);
  border-radius: 6px;
}
.dp-boss-name:hover .dp-collapse-btn,
.dp-raid-name:hover .dp-collapse-btn,
.dp-section-collapser:hover .dp-collapse-btn { color: var(--gold); }
.dp-collapse-btn svg { transition: transform .2s ease; }
.dp-boss.collapsed > .dp-boss-name .dp-collapse-btn svg,
.dp-raid.collapsed > .dp-raid-name .dp-collapse-btn svg,
.dp-section-collapser.collapsed .dp-collapse-btn svg { transform: rotate(-90deg); }
.dp-boss-name[data-collapse], .dp-raid-name[data-collapse], .dp-section-collapser { cursor: pointer; user-select: none; }
.dp-boss.collapsed > .dp-items { display: none; }
.dp-raid.collapsed > .dp-raid-body { display: none; }

/* 修正项③：特效悬浮展开 + 可展开高亮边框（WP3-v2 起卡片零点击）；
   P1（WP6 补丁）：独立浮层遮盖废止——hover 时卡片本体（含边框）经 max-height 动画向下生长，
   特效全文在框内展开，来源行随 flex 锚至新底部、全程可见不被遮盖；生长部分 z-index 提升覆盖
   下方卡片、不推挤网格；离开动画收回（200ms ease-out；§6 白名单例外已注册，2026-08-09，
   理由：整卡高度生长是运营终审指定形态，transform/opacity 无法实现框内全文展开）。
   P1-补（WP6 补丁二轮，2026-08-09 生长防抖）：废弃 line-clamp 截断（动画中 clamp 释放导致文本
   逐行重排抖动）——特效文本恒一次性完整排版、永不重排；折叠态 = 容器 2 行高 overflow:hidden
   纯视口裁剪；hover 动画只作用于容器高度（视口扩大），文本 top 偏移恒 0。
   P1-再补（WP6 补丁三轮，2026-08-09 覆盖式生长，B2 修复）：溢出卡 inner 常驻 absolute 脱离
   文档流（不再仅 hover 才 absolute）——根因 = 旧实现鼠标移出瞬间 inner 回文档流而 wrap 收缩
   动画仍在进行，200ms 内 in-flow inner 被撑高牵连整行、动画结束行高回落；现生长/收回全程
   不入流，网格占位由外层 .dp-item 的 JS 预设 minHeight（= 折叠态高度）恒定承担，行高全程不变 */
/* 特效容器：折叠态 max-height=2 行（2×17px 行高）+ overflow 纯视口裁剪；hover 展开至逐卡实测全文高
   （--fx-full，260px 仅兜底；不挂 overflow-y:auto——滚动条出现会改宽度引起重排，违背零位移口径；
   S1 最长特效远未及 260px）。
   BUG-066（WP6 补丁三轮）：padding-right 18px（≈1.5em）为省略号预留占位带——
   文本自然提前换行，省略号落在带内零压字；hover 展开/收回宽度不变，零重排红线不破。
   BUG-067（WP6 补丁四轮）：占位带从全卡恒定改溢出卡专属（基础态无带）——带缩窄文本宽曾使
   差 1 字的卡被迫溢出；溢出判定改按无 padding 宽度镜像排版（≤2 行恰好放下=不加带不标溢出） */
.dp-item-effect-wrap { position: relative; margin-top: 6px; overflow: hidden; max-height: 34px; transition: max-height .2s ease-out; box-sizing: border-box; }
/* BUG-067（四轮）：占位带仅溢出卡加（has-effect）；未溢出卡全宽无带、无省略号、无 hover 展开（R7） */
.dp-item.has-effect .dp-item-effect-wrap { padding-right: 18px; }
/* 特效预览：恒为特效全文、一次性完整排版（无 line-clamp、无高度约束——裁剪全部由容器视口承担） */
.dp-item-effect-preview { line-height: 17px; font-size: 12px; color: #1eff00; white-space: normal; }
/* 折叠态省略观感（仅溢出卡）：右下「…」伪元素落在 padding 预留带内、纯色底收窄至带范围
   （BUG-066：渐变遮罩废除——旧渐变带压盖行末字形）；hover 展开即隐去；未溢出卡无此层（R7） */
.dp-item.has-effect .dp-item-effect-wrap::after {
  content: '…';
  position: absolute; right: 0; bottom: 0;
  width: 18px; text-align: center;
  background: var(--bg-card);
  color: #1eff00; font-size: 12px; line-height: 17px;
  pointer-events: none;
}
.dp-item.has-effect:hover .dp-item-effect-wrap::after { content: none; }
/* 特效溢出卡片：边框高亮（金色微光引导「可 hover 读全文」；未溢出卡无此类——R7 无 … 无 hover） */
.dp-item.has-effect .dp-item-inner {
  border-color: rgba(240, 192, 96, 0.55);
  box-shadow: 0 0 6px rgba(240, 192, 96, 0.12);
}
/* P1-再补（WP6 补丁三轮）：溢出卡 inner 常驻 absolute（覆盖式生长）——折叠态高度=外层占位高
   （内容即折叠态），hover 时向下溢出生长遮盖下一行（运营已认可此形态），收回对称；
   全程不入文档流，网格行高零变化；z-index 仅 hover 抬升（外层 stacking 覆盖邻卡） */
.dp-item.has-effect .dp-item-inner {
  position: absolute; top: 0; left: 0; right: 0;
  height: auto;
}
/* BUG-069（WP6 补丁五轮）层级规约：sticky 筛选条(10) ＞ hover 展开卡(5) ＞ 普通卡(auto)——
   旧值 30 越过吸顶筛选条（滚动后展开卡上半压住条）；降 5 后卡上半被条正常遮挡、
   向下展开部分仍覆盖下一行卡（auto 同级），「遮盖下一行」形态不破；#dpChipToast(2000) 独立层不动 */
.dp-item.has-effect:hover { z-index: 5; }
/* hover 生长：投影覆盖下方卡片；高度生长由 .dp-item-effect-wrap max-height 动画驱动（inner 高度
   内容驱动自动跟随）；外层 .dp-item 由 JS 预设折叠态 minHeight，网格行高不变 */
.dp-item.has-effect:hover .dp-item-inner {
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.55);
}
/* BUG-068（WP6 补丁四轮）：hover 目标值 260 恒定封顶 → 逐卡实测全文高 --fx-full（JS 镜像按加带宽度
   量得，260 仅兜底）——旧恒定封顶使插值行程（34↔260）远大于可视行程（34↔内容高 ≈51-68px）：
   展开前段触顶观感瞬时、收回前段静止末段急降观感双段；改后插值行程=可视行程，
   双向 200ms ease-out 严格对称，同一 CSS 驱动路径、零 JS 事件 */
.dp-item.has-effect:hover .dp-item-effect-wrap { max-height: var(--fx-full, 260px); }

/* ==================== 任务书 #28 WP3-v2/v3：全信息装备卡（方向修正版 + 体验修订） ====================
   v1 点击详情覆盖层（.dp-item-detail 与 .dp-detail-＊/.dp-detail-open 族）已整族拆除——
   运营 2026-08-08 方向修正：卡片零点击交互；v3（R2/R3）占位行与恒占行高废止，内容驱动行内等高；
   WP3-v3~v5 的独立浮层续文展开（.dp-item-effect-overlay）经 WP6 补丁 P1 废止拆除（2026-08-09），
   改为整卡生长（规则见上方 .dp-item-inner/.dp-item-effect-wrap/hover 生长段）。 */

/* P4（WP6 补丁）：筛选联动置灰——当前筛选组合下 0 命中的未选 chip（已选恒不置灰，不自动清除） */
.dp-chip.dp-chip-disabled { opacity: .4; cursor: not-allowed; border-style: dashed; }
/* P4-补（WP6 补丁二轮，2026-08-09）：置灰点击反馈——①cursor:not-allowed（上行）②chip 抖动 200ms
   （transform，§6 白名单内）+ 原因提示 ③title 保留。
   P4-再补①（WP6 补丁三轮，2026-08-09）：提示改 fixed 定位 toast（复用主应用通知形态：不透明底 +
   3px 左边线 + 投影）——旧 .dp-chip-hint absolute 贴筛选条下缘浮出会遮挡「命中 X 件」，已废；
   toast 置视口底部居中、pointer-events:none 不挡交互、2s 渐隐 */
.dp-chip-shake { animation: dpChipShake 0.2s ease-out; }
@keyframes dpChipShake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
.dp-chip-toast {
  position: fixed; left: 50%; bottom: 24px;
  transform: translate(-50%, 8px);
  padding: 12px 20px;
  background: var(--bg-secondary);
  border: 1px solid var(--warning); border-left: 3px solid var(--warning);
  border-radius: 6px;
  color: var(--warning);
  font-size: 13px; line-height: 18px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.55);
  max-width: min(560px, 92vw);
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease-out, transform .25s ease-out;
  z-index: 2000;
}
.dp-chip-toast.show { opacity: 1; transform: translate(-50%, 0); }
.dp-error { text-align: center; padding: 60px 0; }
.dp-error-icon { font-size: 36px; margin-bottom: 12px; }
.dp-error-text { color: var(--text-secondary); margin-bottom: 16px; }

.dp-footer {
  max-width: 1100px;
  margin: 0 auto;
  /* P1-再补 边界（WP6 补丁三轮）：底部 200px 缓冲带——池末行溢出卡 hover 向下生长（≤260px 封顶）
     的 absolute 溢出被页末预留空间吸收，不撑出额外滚动区、滚动条零抖动 */
  padding: 16px 20px 200px;
  font-size: 12px;
  color: var(--text-muted);
  border-top: 1px solid var(--border-color);
}

/* 规范 v2 §6：尊重 prefers-reduced-motion（公示页全部过渡/动画降级为瞬时） */
@media (prefers-reduced-motion: reduce) {
  .dp-item-effect-wrap, .dp-collapse-btn svg, .dp-chip-toast { transition: none; }
  .dp-chip-shake { animation: none; }
  .dp-item.dp-enter, .dp-filterbar.filters-open .dp-filter-rows { animation: none; }
  .dp-filter-rows.closing { transition: none; }
}

@media (max-width: 768px) {
  .dp-header { padding: 16px 14px 12px; }
  .dp-main { padding: 14px; }
  .dp-filterbar { padding: 10px 14px; }
  .dp-items { grid-template-columns: 1fr; }
  .dp-tiers { grid-template-columns: 1fr; }
}

/* ==================== 任务书 #28 WP5：双壳嵌入——登录壳 tab（#page-lootdrop）作用域覆盖 ====================
   全部 #page-lootdrop 作用域，公开壳（data.html）零影响：
   ① 吸顶让位——主应用 topbar sticky top:0 高 56px z-50，tab 内筛选条吸顶点上移 56px 免于压盖
      （公开壳无 topbar，top:0 不动）；层级规约不变：筛选条/面板(10)＞hover卡(5)＜topbar(50)，无越层；
   ② 池末缓冲——登录壳无 .dp-footer 的 200px 底部缓冲带，由 .dp-main 自补（末行溢出卡 hover
      向下生长 ≤260px 的 absolute 溢出被吸收，不撑滚动区）；
   ③ 赛季行对齐——登录壳无 .dp-header，赛季行与筛选条/主内容同 1100px 版心对齐。
   任务书 #43：top 让位按两态拆分——折叠顶栏态（<1400）吸顶 56px；面板态（≥1400）走壳级变量
   --dp-panel-top（= topbar 56 + 赛季行高，js/dataPublic.js syncPanelTop 实测写入） */
@media (max-width: 1399px) {
  #page-lootdrop .dp-filterbar { top: 56px; }
}
@media (min-width: 1400px) {
  /* REQ-115：登录壳 max-height 回退值同步（var 未写入前按 topbar 56 兜底，JS 实测写入后两壳同一条公式） */
  #page-lootdrop .dp-filterbar { top: calc(var(--dp-panel-top, 56px) + 12px); max-height: calc(100vh - var(--dp-panel-top, 56px) - 24px); }
}
#page-lootdrop .dp-main { padding-bottom: 200px; }
#page-lootdrop .dp-season { max-width: 1100px; margin: 0 auto 4px; padding: 0 20px; justify-content: flex-end; }
/* 任务书 #47 WP3（BUG-081）：面板态（≥1400）赛季行右缘并入卡片区右偏移轨道（须在上方基线规则之后层叠） */
@media (min-width: 1400px) {
  #page-lootdrop .dp-season { margin-right: 292px; }
}