/* ==========================================================
   sjz_ui.css —— 站点页面共享设计系统（ui- 前缀）
   用法：公共 header 已全局引入，无需重复 link；页面内容区套
   <div class="ui-wrap"> 获得 1180 中栏布局（不套也能用组件，
   变量挂在 :root）。暗色主题由 html[data-theme="dark"] 驱动。
   规范文档：doc/frontend_conventions.md
   ========================================================== */

/* ---------- 设计 Token ----------
   变量挂在 :root：ui- 组件不依赖 .ui-wrap 祖先也能用（如 ss_pay 共享子模板）；
   .ui-wrap 只负责页面中栏布局。暗色由 html[data-theme="dark"] 覆盖。 */
:root {
    --ui-accent: #3b6ef6;
    --ui-accent-2: #7c3aed;
    --ui-up: #e0342c;          /* 涨/正收益：红（中国约定，用户指定 2026-09-21） */
    --ui-down: #12a35c;        /* 跌/负收益：绿 */
    --ui-hot: #e0342c;         /* 装饰强调红：警告、价格胶囊等非涨跌场景专用 */
    --ui-ok: #12a35c;          /* 状态绿（非涨跌语义）：解锁/可开始等正向状态专用，禁止借用 --ui-up */
    --ui-card: #ffffff;
    --ui-soft: #f5f7fb;
    --ui-border: #e8ebf2;
    --ui-text: #1f2430;
    --ui-muted: #6b7280;
    --ui-faint: #9aa1ad;
    --ui-shadow: 0 2px 10px rgba(24, 39, 75, .06);
    --ui-shadow-lg: 0 10px 28px rgba(24, 39, 75, .12);
}
html[data-theme="dark"] {
    --ui-card: #171a24;
    --ui-soft: #1e2230;
    --ui-border: #2b3040;
    --ui-text: #e6e8ee;
    --ui-muted: #9aa3b2;
    --ui-faint: #6f7889;
    --ui-shadow: 0 2px 10px rgba(0, 0, 0, .30);
    --ui-shadow-lg: 0 10px 28px rgba(0, 0, 0, .42);
}
.ui-wrap {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 16px 40px;
    color: var(--ui-text);
    font-size: 14px;
}
/* :where() 把特异度压到 0，避免盖掉按钮类上的 color（白底白字坑） */
.ui-wrap :where(a) { color: inherit; text-decoration: none; }
.ui-wrap h1, .ui-wrap h2, .ui-wrap h3 { margin: 0; }

/* 物品图：公共脚本靠 orzice-item-pic + data-grade 加品质描边，别删类名 */
.orzice-item-pic { object-fit: contain; }

/* ---------- 板块头 ---------- */
.ui-sec { margin-top: 18px; }
.ui-sec-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.ui-sec-head h2 { font-size: 18px; font-weight: 800; letter-spacing: .3px; }
.ui-sec-head .ui-bar {
    width: 4px; height: 18px; border-radius: 3px;
    background: linear-gradient(180deg, var(--ui-accent), var(--ui-accent-2));
}
.ui-sec-head .ui-desc { font-size: 12px; color: var(--ui-faint); }
.ui-sec-head .ui-warn { font-size: 12px; color: var(--ui-hot); }
.ui-sec-head .ui-more { margin-left: auto; font-size: 13px; color: var(--ui-accent); font-weight: 600; }
.ui-sec-head .ui-more:hover { text-decoration: underline; }

/* ---------- 筛选栏 / 表单控件 ---------- */
.ui-filter {
    display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
    background: var(--ui-card); border: 1px solid var(--ui-border); border-radius: 14px;
    padding: 12px 14px; box-shadow: var(--ui-shadow);
}
.ui-filter-label { font-size: 13px; color: var(--ui-muted); font-weight: 600; }
.ui-select {
    height: 34px; padding: 0 32px 0 12px; border-radius: 999px; font-size: 13px;
    border: 1px solid var(--ui-border); background-color: var(--ui-soft); color: var(--ui-text);
    outline: none; cursor: pointer; appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--ui-faint) 50%),
                      linear-gradient(135deg, var(--ui-faint) 50%, transparent 50%);
    background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
    background-size: 5px 5px; background-repeat: no-repeat;
    transition: border-color .15s;
}
.ui-select:hover, .ui-select:focus { border-color: var(--ui-accent); }
.ui-input {
    height: 34px; padding: 0 12px; border-radius: 999px; font-size: 13px;
    border: 1px solid var(--ui-border); background-color: var(--ui-soft); color: var(--ui-text);
    outline: none; transition: border-color .15s;
}
.ui-input:hover, .ui-input:focus { border-color: var(--ui-accent); }
.ui-input::placeholder { color: var(--ui-faint); }
.ui-btn {
    height: 34px; padding: 0 18px; border: none; border-radius: 999px;
    font-size: 13px; font-weight: 700; cursor: pointer;
    transition: transform .15s, opacity .15s;
}
.ui-btn:hover { transform: translateY(-1px); opacity: .92; }
.ui-btn-main { background: linear-gradient(135deg, var(--ui-accent), var(--ui-accent-2)); color: #fff; }
.ui-btn-ghost { background: var(--ui-soft); color: var(--ui-muted); border: 1px solid var(--ui-border); }

/* ---------- 面板 / 表格 ---------- */
.ui-panel {
    background: var(--ui-card); border: 1px solid var(--ui-border);
    border-radius: 14px; box-shadow: var(--ui-shadow); overflow: hidden;
}
.ui-sec .ui-panel, .ui-wrap .ui-panel + .ui-panel { margin-top: 12px; }
.ui-table { width: 100%; border-collapse: collapse; }
.ui-table th, .ui-table td { padding: 10px 14px; font-size: 13px; text-align: left; }
.ui-table thead th { font-size: 12px; font-weight: 600; color: var(--ui-faint); background: var(--ui-soft); }
.ui-table tbody tr + tr { border-top: 1px solid var(--ui-border); }
.ui-table tbody tr { transition: background .15s; }
.ui-table tbody tr:hover { background: var(--ui-soft); }
/* 小时表的第一列 */
.ui-table tbody th { width: 80px; text-align: center; white-space: nowrap; font-weight: 800; color: var(--ui-text); }
/* 可排序表头 */
.ui-table th.ui-sort { cursor: pointer; user-select: none; }
.ui-table th.ui-sort:hover { color: var(--ui-accent); }
/* 主+副两行单元格 */
.ui-tname { font-size: 13px; font-weight: 600; color: var(--ui-text); }
.ui-tsub { margin-top: 2px; font-size: 12px; color: var(--ui-faint); }
.ui-empty { padding: 22px; text-align: center; color: var(--ui-faint); font-size: 13px; }
/* 物品头像（表格/列表通用） */
.ui-avatar { display: block; width: 44px; height: 44px; flex-shrink: 0; }
.ui-avatar img { width: 100%; height: 100%; }

/* ---------- 涨跌徽标 / 数值胶囊 ---------- */
.ui-up { color: var(--ui-up) !important; }
.ui-down { color: var(--ui-down) !important; }
.ui-badge {
    display: inline-block; padding: 4px 12px; border-radius: 999px;
    font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums;
    color: #fff; text-align: center; min-width: 56px;
}
.ui-badge-up { background: linear-gradient(135deg, #ef5f52, #c2261d); }
.ui-badge-down { background: linear-gradient(135deg, #2fbf71, #0d8a4c); }
.ui-change {
    display: inline-block; padding: 3px 11px; border-radius: 999px;
    font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.ui-change.is-pos { color: var(--ui-up); background: color-mix(in srgb, var(--ui-up) 12%, transparent); }
.ui-change.is-neg { color: var(--ui-down); background: color-mix(in srgb, var(--ui-down) 12%, transparent); }
/* 渐变价格胶囊（列表右侧主价格） */
.ui-price {
    flex-shrink: 0; padding: 4px 12px; border-radius: 999px;
    font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums;
    color: #fff; background: linear-gradient(135deg, var(--ui-accent), var(--ui-accent-2));
}
/* 软 chip（生产时长、当前价格等辅助信息） */
.ui-chip {
    display: inline-block; margin: 2px 6px 2px 0;
    padding: 1px 8px; border-radius: 999px; font-size: 11px;
    background: var(--ui-soft); border: 1px solid var(--ui-border); color: var(--ui-muted);
}
.ui-chip b, .ui-chip span { font-weight: 600; color: var(--ui-text); }

/* ---------- 补卡小卡（88px 竖排） ---------- */
.ui-key-list { display: flex; flex-wrap: wrap; gap: 8px; }
.ui-key {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    width: 88px; padding: 10px 6px; border-radius: 12px; cursor: pointer;
    background: var(--ui-soft); border: 1px solid transparent;
    transition: border-color .15s, transform .15s;
}
.ui-key:hover { border-color: color-mix(in srgb, var(--ui-accent) 40%, transparent); transform: translateY(-2px); }
.ui-key-pic { width: 44px; height: 44px; }
.ui-key-pic img { width: 100%; height: 100%; }
.ui-key-name {
    max-width: 100%; font-size: 12px; color: var(--ui-muted); text-align: center;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ui-key-price {
    padding: 1px 9px; border-radius: 999px; font-size: 12px; font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--ui-hot); border: 1px solid color-mix(in srgb, var(--ui-hot) 45%, transparent);
}

/* ---------- 物品卡网格（低价预测大卡） ---------- */
.ui-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin-top: 12px; }
.ui-card {
    position: relative; overflow: hidden; cursor: pointer; text-align: center;
    background: var(--ui-card); border: 1px solid var(--ui-border); border-radius: 14px;
    padding: 16px 12px 14px; box-shadow: var(--ui-shadow);
    transition: transform .15s, border-color .15s, box-shadow .15s;
}
.ui-card::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
    background: linear-gradient(90deg, var(--ui-accent), var(--ui-accent-2));
    opacity: 0; transition: opacity .2s;
}
.ui-card:hover { transform: translateY(-3px); box-shadow: var(--ui-shadow-lg);
    border-color: color-mix(in srgb, var(--ui-accent) 40%, var(--ui-border)); }
.ui-card:hover::before { opacity: 1; }
.ui-card-pic { width: 64px; height: 64px; margin: 0 auto; }
.ui-card-pic img { width: 100%; height: 100%; }
.ui-card-name {
    margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--ui-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ui-card-price {
    display: inline-block; margin-top: 6px; padding: 2px 12px; border-radius: 999px;
    font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums;
    color: #fff; background: linear-gradient(135deg, var(--ui-accent), var(--ui-accent-2));
}
.ui-card-times { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.ui-time {
    padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 600;
    background: color-mix(in srgb, var(--ui-accent) 12%, transparent); color: var(--ui-accent);
}

/* ---------- 部门面板 + 物品行 ---------- */
.ui-depts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 12px; }
.ui-dept {
    background: var(--ui-card); border: 1px solid var(--ui-border); border-radius: 14px;
    box-shadow: var(--ui-shadow); overflow: hidden;
}
.ui-dept-head {
    display: flex; align-items: center; gap: 8px;
    padding: 12px 16px; font-size: 14px; font-weight: 800;
    background: var(--ui-soft); border-bottom: 1px solid var(--ui-border);
}
.ui-dept-ico {
    width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-size: 12px;
    background: linear-gradient(135deg, var(--ui-accent), var(--ui-accent-2));
}
.ui-dept.is-green .ui-dept-ico { background: linear-gradient(135deg, #10b981, #0ea5e9); }
.ui-dept.is-orange .ui-dept-ico { background: linear-gradient(135deg, #f59e0b, #ef4444); }
.ui-dept.is-purple .ui-dept-ico { background: linear-gradient(135deg, #8b5cf6, #ec4899); }
.ui-dept.is-red .ui-dept-ico { background: linear-gradient(135deg, #ef5f52, #c2261d); }
.ui-dept-tip { margin-left: auto; font-size: 11px; font-weight: 500; color: var(--ui-faint); }

.ui-li {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 16px; cursor: pointer; transition: background .15s;
}
.ui-li + .ui-li { border-top: 1px solid var(--ui-border); }
.ui-li:hover { background: var(--ui-soft); }
.ui-li-pic { width: 44px; height: 44px; flex-shrink: 0; }
.ui-li-pic img { width: 100%; height: 100%; }
.ui-li-main { flex: 1; min-width: 0; }
.ui-li-name {
    font-size: 13px; font-weight: 600; color: var(--ui-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ui-li-sub { margin-top: 4px; font-size: 12px; color: var(--ui-faint); }
.ui-li-right { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
/* 列表头（子弹收益表那种“列名行”） */
.ui-li-head { display: flex; justify-content: space-between; padding: 10px 16px;
    font-size: 12px; color: var(--ui-faint); background: var(--ui-soft);
    border-bottom: 1px solid var(--ui-border); }

/* ---------- 统计卡（玩家趋势等） ---------- */
.ui-stats { display: flex; flex-wrap: wrap; gap: 12px; }
.ui-stat {
    flex: 1; min-width: 150px; text-align: center;
    background: var(--ui-card); border: 1px solid var(--ui-border); border-radius: 14px;
    padding: 16px 14px; box-shadow: var(--ui-shadow);
}
.ui-stat-title { font-size: 12px; color: var(--ui-faint); }
.ui-stat-val { margin-top: 6px; font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ui-stat-sub { margin-top: 2px; font-size: 12px; color: var(--ui-muted); }

/* ---------- 选项卡（卡战备排行榜，JS 依赖 .tabs-lift label[data-id]，类名勿改） ---------- */
.tabs-lift { display: flex; flex-wrap: wrap; gap: 6px; }
.tabs-lift label {
    cursor: pointer; user-select: none;
    padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 600;
    color: var(--ui-muted); background: var(--ui-soft); border: 1px solid transparent;
    transition: all .15s;
}
.tabs-lift label:hover { color: var(--ui-accent); }
.tabs-lift label.is-active {
    color: #fff; background: linear-gradient(135deg, var(--ui-accent), var(--ui-accent-2));
}
#tips {
    position: sticky; top: 8px; z-index: 9;
    background: var(--ui-card); border: 1px solid var(--ui-border); border-radius: 14px;
    padding: 8px 10px; box-shadow: var(--ui-shadow); margin-bottom: 12px;
}
#tips2 {
    display: none; position: sticky; top: 8px; z-index: 9;
    background: var(--ui-card); border: 1px solid var(--ui-border); border-radius: 14px;
    padding: 8px 10px; box-shadow: var(--ui-shadow); margin: 8px 12px 0;
}
/* .section-title / .main-container 也是 top.html 的 JS 选择器钩子，类名勿改 */
.section-title {
    font-size: 15px; font-weight: 800; display: flex; align-items: center; gap: 8px;
    margin-bottom: 12px; color: var(--ui-text);
}
.section-title::before {
    content: ""; width: 4px; height: 16px; border-radius: 3px;
    background: linear-gradient(180deg, var(--ui-accent), var(--ui-accent-2));
}
.main-container { width: 100%; }

/* ---------- 响应式（全站统一两档） ---------- */
@media (max-width: 1000px) {
    .ui-depts { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .ui-wrap { padding: 0 10px 30px; }
    .ui-cards { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
    .ui-stat { min-width: 120px; }
    .ui-stat-val { font-size: 20px; }
}
@media (max-width: 480px) {
    #tips { display: none; }
    #tips2 { display: block; }
}

/* ---------- 实时价格表扩展（follow / ss_pay 系列） ---------- */
/* 数字居中变体：ui-table is-center（物品列仍左对齐） */
.ui-table.is-center th, .ui-table.is-center td { text-align: center; }
.ui-table.is-center th:first-child, .ui-table.is-center td:first-child { text-align: left; }
/* 不换行 + 横向滚动容器（10 列价格表窄屏用） */
.ui-table-scroll { overflow-x: auto; }
.ui-table.is-nowrap th, .ui-table.is-nowrap td { white-space: nowrap; }
/* 表格内物品单元格：头像 + 名称 + 推荐方式 */
.ui-item { display: flex; align-items: center; gap: 12px; min-width: 200px; }
.ui-item-main { min-width: 0; }
/* 推荐卖出方式标签：深底（亮绿色 ShopSellType-2/3 文字在浅底上看不清，勿改浅底） */
.ui-sell { display: inline-block; padding: 1px 10px; border-radius: 6px; font-size: 11px; background: #2e333d; }
/* 等宽数字价格 */
.ui-num { font-variant-numeric: tabular-nums; font-weight: 700; }
/* 金币图标在居中单元格里真正居中（icon-gold 系列是 common.css 的 flex） */
.ui-cell-gold { display: flex; justify-content: center; }
.ui-cell-gold .icon-gold, .ui-cell-gold .icon-gold-jb, .ui-cell-gold .icon-gold-yzj { display: inline-flex; align-items: center; }
/* 危险操作按钮（删除关注等） */
.ui-btn-danger { background: linear-gradient(135deg, #ef5f52, #c2261d); color: #fff; }
.ui-btn-sm { height: 28px; padding: 0 14px; font-size: 12px; }
/* 金本位双行（金条/鱼子酱换算） */
.ui-jb { display: flex; flex-direction: column; gap: 4px; align-items: center; font-size: 12px; color: var(--ui-muted); }
@media (max-width: 640px) {
    .ui-item { min-width: 150px; }
}

/* ==========================================================
   任务链流程（task/task_s11.html 专用，tk11- 前缀）
   ⚠️ 页面 JS 选择器依赖 .tk11-item / .tk11-node-n / .tk11-state /
   .tk11-state-t / .tk11-block-c.is-hl，类名勿改
   ========================================================== */
[v-cloak] { display: none; }
.tk11 { font-size: 14px; }

/* 筛选区：阶段 / 任务组 分段按钮 + 关键字 */
.tk11-filter {
    background: var(--ui-card); border: 1px solid var(--ui-border); border-radius: 14px;
    padding: 6px 16px 12px; box-shadow: var(--ui-shadow);
}
.tk11-row { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-top: 1px dashed var(--ui-border); }
.tk11-row:first-child { border-top: 0; }
.tk11-label { flex: none; width: 46px; padding-top: 6px; font-size: 13px; font-weight: 700; color: var(--ui-muted); }
.tk11-seg { display: flex; flex-wrap: wrap; gap: 8px; flex: 1; min-width: 0; }
.tk11-seg button {
    border: 1px solid var(--ui-border); background: transparent; color: var(--ui-text);
    padding: 6px 15px; border-radius: 999px; font-size: 13px; line-height: 1.5;
    cursor: pointer; transition: all .18s ease;
}
.tk11-seg button:hover { border-color: var(--ui-accent); color: var(--ui-accent); }
.tk11-seg button.is-on {
    background: linear-gradient(135deg, var(--ui-accent), var(--ui-accent-2));
    border-color: transparent; color: #fff; font-weight: 700;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--ui-accent) 28%, transparent);
}
.tk11-search { flex: none; position: relative; display: flex; align-items: center; }
.tk11-search i { position: absolute; left: 11px; font-size: 12px; color: var(--ui-muted); pointer-events: none; }
.tk11-search input {
    width: 190px; height: 34px; padding: 0 12px 0 30px;
    border: 1px solid var(--ui-border); border-radius: 999px;
    background: var(--ui-soft); color: var(--ui-text); font-size: 13px;
    outline: none; transition: border-color .18s ease;
}
.tk11-search input:focus { border-color: var(--ui-accent); }

/* 结果统计条 */
.tk11-bar { display: flex; align-items: center; gap: 8px; margin: 16px 2px 12px; font-size: 13px; color: var(--ui-muted); }
.tk11-bar b { color: var(--ui-accent); font-size: 15px; }
.tk11-bar-tip { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; }

/* 任务链：同一任务组内按顺序解锁（完成上一个才解锁下一个） */
.tk11-flow { display: flex; flex-direction: column; }
.tk11-item { display: flex; gap: 14px; padding-bottom: 16px; }
.tk11-item.is-last { padding-bottom: 0; }

/* 左侧节点：序号 + 向下延伸的连接线 */
.tk11-node { flex: none; display: flex; flex-direction: column; align-items: center; }
.tk11-node-n {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 50%;
    background: linear-gradient(135deg, var(--ui-accent), var(--ui-accent-2));
    color: #fff; font-size: 14px; font-weight: 700;
    box-shadow: 0 3px 10px color-mix(in srgb, var(--ui-accent) 30%, transparent);
}
.tk11-item:not(.is-last) .tk11-node::after {
    content: ""; width: 2px; flex: 1; margin-top: 6px;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--ui-accent-2) 55%, transparent),
        color-mix(in srgb, var(--ui-muted) 30%, transparent));
}
/* 未解锁：节点灰化，连接线变淡 */
.tk11-item.is-lock .tk11-node-n { background: var(--ui-faint); box-shadow: none; }
.tk11-item.is-lock .tk11-node::after { background: color-mix(in srgb, var(--ui-muted) 28%, transparent); }

.tk11-card {
    flex: 1; min-width: 0; position: relative; overflow: hidden;
    background: var(--ui-card); border: 1px solid var(--ui-border); border-radius: 14px;
    padding: 14px 18px 16px; box-shadow: var(--ui-shadow);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.tk11-card:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--ui-accent) 45%, transparent);
    box-shadow: var(--ui-shadow-lg);
}
.tk11-item.is-lock .tk11-card { border-style: dashed; box-shadow: none; }

.tk11-hd { display: flex; align-items: baseline; gap: 9px; }
.tk11-title { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.5; color: var(--ui-text); }
/* 解锁状态标签：第 1 步「可开始」，其余「完成第 N 步后解锁」 */
.tk11-state {
    flex: none; margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap;
}
.tk11-state.is-open { background: color-mix(in srgb, var(--ui-ok) 13%, transparent); color: var(--ui-ok); }
.tk11-state.is-lock { background: color-mix(in srgb, var(--ui-muted) 13%, transparent); color: var(--ui-muted); }
[data-theme="dark"] .tk11-state.is-open { color: #6ee7b7; }

/* 高亮：与小程序 S11.vue 的 highlightGold 同一套规则（浅色装饰红 / 深色金） */
.tk11-hl { color: var(--ui-hot); font-weight: 600; }
[data-theme="dark"] .tk11-hl { color: #f5c842; }

/* 内容区：任务要求整行，说明与奖励并排 */
.tk11-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.tk11-cols .tk11-block.is-req { grid-column: 1 / -1; }

.tk11-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.tk11-tag {
    padding: 3px 10px; border-radius: 6px; border: 1px solid transparent;
    font-size: 12px; line-height: 1.7; white-space: nowrap;
}
.tk11-tag.is-lx {
    background: color-mix(in srgb, var(--ui-ok) 12%, transparent);
    border-color: color-mix(in srgb, var(--ui-ok) 25%, transparent); color: var(--ui-ok);
}
.tk11-tag.is-lx[data-v="主线"] {
    background: color-mix(in srgb, var(--ui-hot) 12%, transparent);
    border-color: color-mix(in srgb, var(--ui-hot) 25%, transparent); color: var(--ui-hot);
}
.tk11-tag.is-group {
    background: color-mix(in srgb, var(--ui-accent-2) 12%, transparent);
    border-color: color-mix(in srgb, var(--ui-accent-2) 25%, transparent); color: var(--ui-accent-2);
}
[data-theme="dark"] .tk11-tag.is-lx { color: #6ee7b7; }
[data-theme="dark"] .tk11-tag.is-lx[data-v="主线"] { color: #fca5a5; }
[data-theme="dark"] .tk11-tag.is-group { color: #c4b5fd; }

.tk11-block { padding: 10px 12px; border: 1px solid var(--ui-border); border-radius: 10px; background: var(--ui-soft); }
.tk11-block-t {
    display: flex; align-items: center; gap: 6px; margin-bottom: 6px;
    font-size: 12px; font-weight: 700; letter-spacing: .5px; color: var(--ui-muted);
}
.tk11-block-t i { font-size: 11px; }
.tk11-block-c { font-size: 13.5px; line-height: 1.85; color: var(--ui-text); word-break: break-word; }
.tk11-block.is-req {
    background: color-mix(in srgb, var(--ui-hot) 7%, transparent);
    border-color: color-mix(in srgb, var(--ui-hot) 22%, transparent);
}
.tk11-block.is-req .tk11-block-t { color: var(--ui-hot); }
.tk11-block.is-reward { background: rgba(245, 158, 11, .08); border-color: rgba(245, 158, 11, .26); }
.tk11-block.is-reward .tk11-block-t { color: #b45309; }
[data-theme="dark"] .tk11-block.is-req .tk11-block-t { color: #fca5a5; }
[data-theme="dark"] .tk11-block.is-reward .tk11-block-t { color: #fcd34d; }

.tk11-empty {
    padding: 48px 20px; text-align: center; color: var(--ui-muted); font-size: 14px;
    border: 1px dashed var(--ui-border); border-radius: 14px;
}
.tk11-empty i { display: block; font-size: 26px; margin-bottom: 10px; opacity: .6; }

/* 移动端引导去小程序 */
.tk11-mobile { text-align: center; padding: 28px 20px; border-radius: 14px; background: var(--ui-card); border: 1px solid var(--ui-border); }
.tk11-mobile img { display: block; margin: 0 auto; width: 220px; height: 220px; border-radius: 12px; }
.tk11-mobile .t1 { margin-top: 16px; font-size: 15px; font-weight: 700; color: var(--ui-hot); }
.tk11-mobile .t2 { margin-top: 6px; font-size: 13px; color: var(--ui-muted); }

@media (max-width: 768px) {
    .tk11-cols { grid-template-columns: 1fr; }
    .tk11-item { gap: 10px; padding-bottom: 12px; }
    .tk11-node-n { width: 27px; height: 27px; font-size: 13px; }
    .tk11-card { padding: 12px 14px 14px; }
    .tk11-hd { flex-wrap: wrap; }
    .tk11-state { margin-left: 0; }
    .tk11-row { flex-direction: column; gap: 8px; }
    .tk11-label { width: auto; padding-top: 0; }
    .tk11-search, .tk11-search input { width: 100%; }
}

/* ==========================================================
   折线趋势分析面板（ui-ana-*；价格折线 home/info.html 与
   zbV3/broken_line_v3.html 共用，两页都是命令式 Highcharts、
   没有 Vue，渲染由 static/func/base_base.js 的
   FuncAnaPanelRender() 负责纯 DOM 拼装）
   宿主页只需放 <div id="anaPanel" class="ui-ana-panel"></div>；
   无分析数据时该函数会把容器 display:none，不会留空白块。
   涨跌色遵守中国约定：红涨绿跌（--ui-up / --ui-down）。
   勿改类名——JS 里是硬编码字符串。
   ========================================================== */
.ui-ana-panel {
    margin-top: 14px;
    background: var(--ui-card);
    border: 1px solid var(--ui-border);
    border-radius: 12px;
    padding: 16px 20px;
    text-align: left;
}
.ui-ana-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.ui-ana-title { font-size: 15px; font-weight: 600; color: var(--ui-text); }
.ui-ana-dir {
    padding: 3px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    background: var(--ui-soft);
    color: var(--ui-muted);
}
.ui-ana-dir.is-up { color: var(--ui-up); background: color-mix(in srgb, var(--ui-up) 12%, transparent); }
.ui-ana-dir.is-down { color: var(--ui-down); background: color-mix(in srgb, var(--ui-down) 12%, transparent); }
.ui-ana-sub { font-size: 12px; color: var(--ui-faint); margin-left: auto; }
.ui-ana-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(146px, 1fr));
    gap: 8px;
}
.ui-ana-cell { background: var(--ui-soft); border-radius: 8px; padding: 8px 12px; }
.ui-ana-cell .k { font-size: 11px; color: var(--ui-faint); }
.ui-ana-cell .v {
    font-size: 14px;
    font-weight: 600;
    color: var(--ui-text);
    font-variant-numeric: tabular-nums;
    margin-top: 2px;
}
.ui-ana-cell .v.up { color: var(--ui-up); }
.ui-ana-cell .v.down { color: var(--ui-down); }
.ui-ana-cell .v .t { font-size: 11px; font-weight: 400; color: var(--ui-faint); margin-left: 4px; }
.ui-ana-tip { font-size: 11px; color: var(--ui-faint); line-height: 1.8; margin-top: 12px; }

@media (max-width: 640px) {
    .ui-ana-panel { padding: 12px 14px; margin-top: 10px; }
    .ui-ana-grid { grid-template-columns: repeat(auto-fill, minmax(122px, 1fr)); }
    .ui-ana-sub { margin-left: 0; width: 100%; }
    .ui-ana-cell { padding: 7px 10px; }
}

/* ==========================================================
   折线图弹窗 + 折线区通用组件（ui-line-*；2026-09-22 UI 重构）
   zbV3/broken_line_v3.html 被 25 个页面 include，样式集中放这里，
   宿主页一定加载了本文件；home/info.html 页内折线区复用同一套。
   JS 钩子（勿改）：#LinesDataV3 / #zxt-tips a[data-id] + .is-current /
   #container / #average / #lineAnaPanel。
   图表辅助线配色遵守 doc/frontend_conventions.md §7.2：
   最高红 #ef4444 / 最低绿 #22c55e（图表约定，与涨跌色无关）。
   ========================================================== */

/* --- 弹窗外观 --- */
#LinesDataV3 .modal-background { background: rgba(15, 18, 30, .58); backdrop-filter: blur(4px); }
#LinesDataV3 .modal-card {
    width: min(1180px, 94vw);
    background: var(--ui-card);
    border: 1px solid var(--ui-border);
    border-radius: 18px;
    box-shadow: var(--ui-shadow-lg);
    overflow: hidden;
}
#LinesDataV3 .modal-card-body { padding: 18px 22px 10px; }
#LinesDataV3 .modal-card-foot {
    justify-content: center;
    border-top: 1px solid var(--ui-border);
    background: var(--ui-card);
    padding: 12px 20px;
}
#LinesDataV3 .modal-card-foot .button {
    border: 1px solid var(--ui-border);
    border-radius: 999px;
    height: 36px;
    padding: 0 30px;
    font-size: 13px;
    font-weight: 700;
    color: var(--ui-muted);
    background: var(--ui-soft);
    box-shadow: none;
    transition: color .15s, border-color .15s, transform .15s;
}
#LinesDataV3 .modal-card-foot .button:hover {
    color: var(--ui-hot);
    border-color: color-mix(in srgb, var(--ui-hot) 40%, transparent);
    transform: translateY(-1px);
}
#LinesDataV3 .highcharts-figure { margin: 0; }
#LinesDataV3 #container { height: 70vh; min-height: 380px; }

/* --- 周期切换：胶囊分段控件（弹窗与详情页共用） --- */
.ui-line-tabs {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 4px;
    width: fit-content; max-width: 100%; margin: 0 auto 14px;
    padding: 4px;
    background: var(--ui-soft);
    border: 1px solid var(--ui-border);
    border-radius: 999px;
}
.ui-line-tabs .pagination-link {
    min-width: 0; width: auto; height: auto;
    margin: 0; padding: 5px 15px;
    border: none; border-radius: 999px;
    font-size: 13px; font-weight: 600; line-height: 1.55;
    color: var(--ui-muted); background: transparent;
    transition: color .15s, background .15s, box-shadow .15s;
}
.ui-line-tabs .pagination-link:hover {
    color: var(--ui-accent);
    background: var(--ui-card);
    border-color: transparent;
}
.ui-line-tabs .pagination-link.is-current {
    color: #fff;
    background: linear-gradient(135deg, var(--ui-accent), var(--ui-accent-2));
    box-shadow: 0 3px 10px color-mix(in srgb, var(--ui-accent) 30%, transparent);
}
/* 关注 / 详情页 等动作链接（data-id=zxd）：弱化区分，不参与分段高亮 */
.ui-line-tabs .pagination-link[data-id="zxd"] { color: var(--ui-accent); }
.ui-line-tabs .pagination-link[data-id="zxd"]:hover {
    background: color-mix(in srgb, var(--ui-accent) 12%, transparent);
}

/* --- 图表提示条（原红色加粗整行 → 弱化提示框） --- */
.ui-line-tips {
    display: flex; align-items: flex-start; gap: 8px;
    margin: 10px 2px 2px; padding: 9px 13px;
    background: var(--ui-soft);
    border: 1px solid var(--ui-border);
    border-radius: 10px;
    color: var(--ui-muted);
    font-size: 12px; font-weight: 500; line-height: 1.75;
    text-align: left;
}
.ui-line-tips i { margin-top: 3px; color: var(--ui-faint); font-size: 12px; }

/* --- 悬停读数（最高/最低出现时间） --- */
.ui-line-avg {
    display: flex; justify-content: center; align-items: center;
    gap: 10px; flex-wrap: wrap;
    margin-top: 10px; min-height: 0;
}
.ui-line-avg-cell {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-width: 130px; padding: 5px 14px;
    border-radius: 8px;
    color: #fff; font-size: 13px; font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.ui-line-avg-cell .lb { opacity: .85; font-size: 12px; font-weight: 500; }
.ui-line-avg-cell.is-max { background: linear-gradient(135deg, #ef5f52, #c2261d); }
.ui-line-avg-cell.is-min { background: linear-gradient(135deg, #2fbf71, #0d8a4c); }

@media (max-width: 640px) {
    #LinesDataV3 .modal-card { width: 96vw; }
    #LinesDataV3 #container { height: 56vh; }
    .ui-line-tabs { border-radius: 14px; }
    .ui-line-tabs .pagination-link { padding: 4px 12px; font-size: 12px; }
    .ui-line-tips { line-height: 1.65; }
}

/* ==========================================================
   黑潮爆破改枪码（gun_gq/bd_gqm.html 专用，ui-gqm- 前缀）
   ⚠️ 页面 Vue 模板绑定 .ui-gqm-* 类名，rename 必须同步改模板

   UI 复刻 PC 版改枪码页（gun_gq/gqm.html）的**固定深色卡片**体系：
     卡片底 #2e333d / 标题栏与次级按钮 #3f4653 / 描边 #334b69 / 属性格底 #262a33
     强调金 #eed177（图标、选中 tab、价格）/ 选中绿 #28a745 / 危险红 #dc3545
     灰阶 #fff → #ccc → #999 → #9b9d9d → #888
   属性着色沿用 gqm.html 口径：**提升=绿 #48c78e、下降=红 #ff637d**
   （是深底上的可读版本，别改回 Bulma 的 has-text-*；也属「状态色」，
   不借用 --ui-up/--ui-down 那套行情涨跌语义，见 MEMORY.md）。

   ⚠️ 这些是**固定深色值、不跟 light/dark 主题走**（与 gqm.html 一致）。
   页头 / 卡片 / 分页一律照抄 PC 版；只有页面级空态、加载态用 ui-empty
   （它们落在页面底色上，跟主题变量才在两种主题下都可读）。
   ⚠️ 类名刻意与 .orz-item-info 等**全站共享类隔离**：那是物品主卡样式
   （用户点名不动），照搬它的规则进来会污染其它页面。
   ========================================================== */

/* ---------- 页头（复刻 .page-header） ---------- */
.ui-gqm-ph {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 10px; padding: 10px 16px;
    background: #2e333d; border-radius: 8px; margin: 14px 0 12px;
}
.ui-gqm-phl { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.ui-gqm-phi { font-size: 24px; color: #eed177; }
.ui-gqm-pht { font-size: 18px; font-weight: 700; color: #fff; }
.ui-gqm-phs { font-size: 12px; color: #999; }
.ui-gqm-phr { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ui-gqm-flabel { font-size: 13px; color: #999; margin-right: 2px; }

/* 页头徽章（排序 / 重置，复刻 .change-badge） */
.ui-gqm-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 6px 16px; border-radius: 8px;
    background: #3f4653; color: #ccc;
    font-size: 14px; font-weight: 500; cursor: pointer; user-select: none;
    transition: opacity .2s, background .2s, color .2s;
}
.ui-gqm-badge:hover { opacity: .85; }
.ui-gqm-badge.is-on { background: #28a745; color: #fff; }
.ui-gqm-badge.is-danger { background: #dc3545; color: #fff; }
.ui-gqm-badge i { font-size: 12px; }

/* ---------- 分组切换（复刻 .mode-tabs） ---------- */
/* 四档各带档次色：手枪/标准 = 灰、精锐 = 紫、特种 = 金。
   色值取自物品品质色板 `unpackage/static/sjzV3/common.css` 的 `img[data-grade]`
   （0 灰 #949595 / 4 紫 #9b61c8 / 5 金 #e8a64e）——与物品品质同一套语言，
   别自己调一个紫，否则同一屏里会出现两种「精锐紫」。
   ⚠️ tab 上**绝不能加 `data-grade` 属性**：全局有 `div[data-grade="N"]{background-color:…}`，
   它（0,0,1,1）比 `.ui-gqm-tab`（0,0,1,0）优先级高，会把整块 tab 底色刷成品质色。
   所以走 `is-gray / is-purple / is-gold` 类名。
   品质色直接当字色太暗（紫 #9b61c8 对 #2e333d 只有 2.98:1），故字色用亮化版、底边留原色。 */
.ui-gqm-tabs { display: flex; background: #2e333d; border-radius: 8px; overflow: hidden; margin: 0 0 10px; }
.ui-gqm-tab {
    flex: 1; text-align: center; padding: 10px 0; cursor: pointer; user-select: none;
    font-size: 14px; font-weight: 500;
    border-bottom: 2px solid transparent; transition: all .2s;
    /* 默认灰档；下面 .is-* 覆盖（必须排在本条之后 —— 同优先级后声明者胜） */
    --tab-c: #9aa0a6;      /* 常态字色 */
    --tab-c-on: #dde2e7;   /* hover / 选中字色 */
    --tab-line: #949595;   /* 底边 + 选中底色，用品质原色 */
    color: var(--tab-c);
}
.ui-gqm-tab:hover { color: var(--tab-c-on); }
.ui-gqm-tab.is-gray { --tab-c: #9aa0a6; --tab-c-on: #dde2e7; --tab-line: #949595; }
.ui-gqm-tab.is-purple { --tab-c: #b98ade; --tab-c-on: #d5b3f2; --tab-line: #9b61c8; }
.ui-gqm-tab.is-gold { --tab-c: #e8a64e; --tab-c-on: #f5cb84; --tab-line: #e8a64e; }
.ui-gqm-tab.is-active {
    color: var(--tab-c-on); border-bottom-color: var(--tab-line);
    background: #3f4653;                                                     /* 老浏览器降级 */
    background: color-mix(in srgb, var(--tab-line) 24%, #2e333d);            /* 选中染上本档色 */
}

/* ---------- 枪械筛选（深底容器包裹住胶囊，底色与页头 / 分组栏同一体系） ---------- */
/* 不加容器的话胶囊 `#3f4653` 直接落在页面底色上，像散落的碎片；
   套一层 `#2e333d` 圆角框后「页头 → 分组 → 枪械」三级区块视觉连贯 */
.ui-gqm-guns {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    padding: 10px 12px; margin: 0 0 10px;
    background: #2e333d; border-radius: 8px;
}
/* 容器左侧的功能标签，跟页头的 .ui-gqm-flabel 同一档字色 */
.ui-gqm-guns-label {
    display: inline-flex; align-items: center; gap: 5px;
    margin-right: 4px; font-size: 13px; color: #999; user-select: none;
}
.ui-gqm-guns-label i { font-size: 12px; color: #eed177; }
.ui-gqm-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 12px; border-radius: 6px; cursor: pointer; user-select: none;
    background: #3f4653; color: #ccc; font-size: 13px;
    transition: background .15s, color .15s;
}
.ui-gqm-chip:hover { background: #4a5260; color: #fff; }
.ui-gqm-chip.is-active { background: #eed177; color: #2e333d; font-weight: 700; }
.ui-gqm-chip-num { font-size: 11px; font-weight: 700; opacity: .7; font-variant-numeric: tabular-nums; }

/* ---------- 卡片 ---------- */
/* 每页 9 个 → 3 列 × 3 行（PC 版也是三列，宽度算法等价） */
.ui-gqm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ui-gqm {
    position: relative; overflow: hidden;
    background: #2e333d; border: 1px solid #334b69; border-radius: 4px; color: #fff;
}
.ui-gqm-hd {
    display: flex; align-items: center; height: 32px; padding: 0 10px;
    background: #3f4653; font-size: 14px;
}
.ui-gqm-hd i { flex: none; margin-right: 6px; font-size: 12px; color: #eed177; }
.ui-gqm-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 卡片标题栏右端的「所属分类」胶囊（如「精锐」）——每张卡都标出自己属于哪一档。
   色板与上方分组选项卡 .ui-gqm-tab.is-* **完全同一套**
   （物品品质色板灰 #949595 / 紫 #9b61c8 / 金 #e8a64e），
   不然同一屏里会出现两种「精锐紫」。
   ⚠️ 同样**不能加 `data-grade` 属性**：全局有 `div[data-grade="N"]{background-color:…}`，
   优先级（0,0,1,1）高于 `.ui-gqm-cat`（0,0,1,0），会把胶囊底色直接刷成品质色。
   底色混的是标题栏底色 `#3f4653`（不是卡片底 `#2e333d`），这样嵌在标题栏里更服帖。 */
.ui-gqm-cat {
    display: inline-flex; align-items: center; gap: 5px;
    flex: none; margin-left: 6px; white-space: nowrap; user-select: none;
    padding: 2px 10px; border-radius: 999px; line-height: 1.5;
    font-size: 11px; font-weight: 700;
    /* 默认灰档；下面 .is-* 覆盖（必须排在本条之后 —— 同优先级后声明者胜） */
    --cat-c: #dde2e7; --cat-line: #949595;
    color: var(--cat-c);
    background: #4a5260;                                             /* 老浏览器降级 */
    background: color-mix(in srgb, var(--cat-line) 30%, #3f4653);
    border: 1px solid color-mix(in srgb, var(--cat-line) 55%, transparent);
}
/* 实心圆点用品质原色，档次色一眼可辨（字色那档是亮化版，对比度才够） */
.ui-gqm-cat::before {
    content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%;
    background: var(--cat-line);
}
.ui-gqm-cat.is-gray { --cat-c: #dde2e7; --cat-line: #949595; }
.ui-gqm-cat.is-purple { --cat-c: #d5b3f2; --cat-line: #9b61c8; }
.ui-gqm-cat.is-gold { --cat-c: #f5cb84; --cat-line: #e8a64e; }

.ui-gqm-img { position: relative; height: 140px; padding: 20px; }
.ui-gqm-img img { display: block; width: 100%; height: 100%; object-fit: contain; }
.ui-gqm-oinfo { position: absolute; left: 10px; top: 6px; font-size: 12px; color: #9b9d9d; }
.ui-gqm-collect {
    position: absolute; left: 10px; bottom: 6px; max-width: 58%;
    height: 20px; line-height: 20px; font-size: 12px; color: #9b9d9d;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ui-gqm-price {
    position: absolute; right: 10px; bottom: 6px;
    height: 20px; line-height: 20px; font-size: 14px; font-weight: 700;
    color: #eed177; font-variant-numeric: tabular-nums;
}

/* 属性：8 项**一行**铺开（对齐 PC 版 gun_gqm 的 .props-row），
   不换行、每格 flex:1 均分；窄屏靠 ellipsis 兜底，绝不允许折成两行把卡片顶高 */
.ui-gqm-props {
    display: flex; flex-wrap: nowrap; gap: 2px;
    padding: 8px 6px; border-top: 1px solid #3f4653;
}
.ui-gqm-prop { flex: 1 1 0; min-width: 0; text-align: center; padding: 4px 2px; background: #262a33; border-radius: 4px; }
.ui-gqm-prop-name { font-size: 11px; color: #888; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-gqm-prop-val { font-size: 13px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.ui-gqm-prop-chg { font-size: 11px; color: #888; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* 属性提升=绿、下降=红（gun_gqm 口径：数值与变化量同色）。
   必须写复合选择器 —— 单独的 .ui-gqm-prop-val{color:#fff} 在下面兜底，同优先级会被它盖掉 */
.ui-gqm-prop-val.is-plus, .ui-gqm-prop-chg.is-plus { color: #48c78e; }
.ui-gqm-prop-val.is-minus, .ui-gqm-prop-chg.is-minus { color: #ff637d; }

.ui-gqm-copy {
    display: block; width: 100%; padding: 8px 0; border: 0; cursor: pointer;
    background: #3f4653; color: #ccc; font-size: 13px;
    transition: background .2s, color .2s;
}
.ui-gqm-copy:hover { background: #28a745; color: #fff; }
.ui-gqm-copy i { margin-right: 4px; }

/* ---------- 分页（复刻 .pagination-bar） ----------
   类名虽是 ui-gqm- 前缀，但这是**通用分页条**：黑潮改枪码页与干员页共用，
   别因为换页面就复制一份（改样式要同时想到两处） */
.ui-gqm-pager {
    display: flex; align-items: center; justify-content: center; gap: 16px;
    padding: 16px 0; margin-top: 16px;
}
.ui-gqm-page-btn {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 8px 20px; border-radius: 6px;
    border: 1px solid #334b69; background: #2e333d; color: #ccc;
    font-size: 14px; cursor: pointer; transition: all .2s;
}
.ui-gqm-page-btn:hover:not(:disabled) { background: #3f4653; color: #fff; }
.ui-gqm-page-btn:disabled { opacity: .4; cursor: not-allowed; }
.ui-gqm-page-info { font-size: 14px; color: #999; font-variant-numeric: tabular-nums; }

@media (max-width: 900px) {
    .ui-gqm-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .ui-gqm-grid { grid-template-columns: 1fr; }
    .ui-gqm-img { height: 120px; padding: 16px; }
    .ui-gqm-tab { font-size: 13px; }
    .ui-gqm-ph { padding: 10px 12px; }
    .ui-gqm-guns { padding: 8px 10px; }
}

/* ==========================================================
   黑潮对局奖励（reward/bd_reward.html，ui-bdr- 前缀）
   ⚠️ 类名被 Vue 模板绑定，rename 必须同步改模板
   视觉沿用 PC 版改枪码页：容器 #2e333d / 标题栏 #3f4653 / 强调金 #eed177
   金额一律金色（与 PC 版价格同色），sum=0 的那条由前端显示「—」并转灰
   ========================================================== */

/* ---------- 页头 ---------- */
.ui-bdr-ph {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 14px 16px; margin-bottom: 10px;
    background: #2e333d; border-radius: 8px;
}
.ui-bdr-phl { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ui-bdr-phi {
    flex: none; width: 40px; height: 40px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    background: #3f4653; color: #eed177; font-size: 18px;
}
.ui-bdr-pht { font-size: 18px; font-weight: 700; color: #fff; }
.ui-bdr-phs { margin-top: 2px; font-size: 13px; color: #999; }
.ui-bdr-phr { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ui-bdr-flabel { font-size: 12px; color: #999; }
.ui-bdr-badge {
    padding: 5px 12px; border-radius: 6px; cursor: pointer; user-select: none;
    background: #3f4653; color: #ccc; font-size: 13px; transition: all .2s;
}
.ui-bdr-badge:hover { background: #4a5260; color: #fff; }
.ui-bdr-badge.is-on { background: #eed177; color: #2e333d; font-weight: 700; }
.ui-bdr-badge i { margin-right: 4px; }

/* ---------- 统计条（合计 / 最高 / 最低 / 更新） ---------- */
.ui-bdr-stat {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
    margin-bottom: 10px; padding: 12px 0;
    background: #2e333d; border-radius: 8px;
}
.ui-bdr-stat-i { text-align: center; padding: 0 8px; }
.ui-bdr-stat-k { font-size: 12px; color: #999; }
.ui-bdr-stat-v {
    margin-top: 4px; font-size: 18px; font-weight: 800; color: #eed177;
    font-variant-numeric: tabular-nums;
}
.ui-bdr-stat-v.is-plain { color: #dde2e7; font-size: 15px; font-weight: 700; }

/* ---------- 卡片网格 ---------- */
.ui-bdr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ui-bdr {
    display: flex; flex-direction: column;
    background: #2e333d; border-radius: 8px; overflow: hidden;
    transition: transform .15s;
}
.ui-bdr:hover { transform: translateY(-2px); }
.ui-bdr-hd {
    display: flex; align-items: center; gap: 8px;
    padding: 0 12px; height: 32px;
    background: #3f4653; font-size: 13px; font-weight: 700; color: #fff;
}
.ui-bdr-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-bdr-no { flex: none; font-size: 11px; color: #999; font-variant-numeric: tabular-nums; }
.ui-bdr-body { flex: 1; padding: 12px; }
.ui-bdr-sum {
    display: flex; align-items: baseline; gap: 4px;
    font-size: 26px; font-weight: 800; color: #eed177;
    font-variant-numeric: tabular-nums; line-height: 1.1;
}
.ui-bdr-sum i { font-size: 14px; }
.ui-bdr-sum.is-zero { color: #888; font-size: 20px; }
.ui-bdr-desc { margin-top: 8px; font-size: 12px; line-height: 1.6; color: #aaa; }

/* ==========================================================
   干员（角色）攻略（agent/bd_agent.html，ui-bda- 前缀）
   ⚠️ 类名被 Vue 模板绑定，rename 必须同步改模板
   类型档位色同样**取自物品品质色板**（unpackage/static/sjzV3/common.css 的 img[data-grade]）：
   突击=红 #cb464a / 支援=绿 #188D14 / 工程=蓝 #658BCE / 信息=紫 #9b61c8。
   ⚠️ 只能用色值、不能加 data-grade 属性 —— 全局 div[data-grade] 优先级更高会刷掉底色。
   字色用亮化版（品质原色在 #2e333d 上对比度不足 4.5:1），底边与圆点留原色。
   ========================================================== */

/* ---------- 页头 ---------- */
.ui-bda-ph {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px; margin-bottom: 10px;
    background: #2e333d; border-radius: 8px;
}
.ui-bda-phi {
    flex: none; width: 40px; height: 40px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    background: #3f4653; color: #eed177; font-size: 18px;
}
.ui-bda-pht { font-size: 18px; font-weight: 700; color: #fff; }
.ui-bda-phs { margin-top: 2px; font-size: 13px; color: #999; }

/* ---------- 类型切换栏 ---------- */
.ui-bda-tabs { display: flex; gap: 8px; margin-bottom: 10px; }
.ui-bda-tab {
    flex: 1; text-align: center; padding: 9px 0; cursor: pointer; user-select: none;
    background: #2e333d; border-radius: 8px; border-bottom: 2px solid transparent;
    font-size: 14px; font-weight: 600; color: #999; transition: all .2s;
    /* 默认（全部）用中性色；.is-* 覆盖，必须排在本条之后 —— 同优先级后声明者胜 */
    --tab-c: #dde2e7; --tab-line: #949595;
}
.ui-bda-tab:hover { color: var(--tab-c); }
.ui-bda-tab.is-active {
    color: var(--tab-c);
    border-bottom-color: var(--tab-line);
    background: #3f4653;                                          /* 老浏览器降级 */
    background: color-mix(in srgb, var(--tab-line) 24%, #2e333d);
}
.ui-bda-tab.is-assault { --tab-c: #f0898c; --tab-line: #cb464a; }
.ui-bda-tab.is-support { --tab-c: #4fbe4a; --tab-line: #188D14; }
.ui-bda-tab.is-engineer { --tab-c: #93b2e8; --tab-line: #658BCE; }
.ui-bda-tab.is-info { --tab-c: #b98ade; --tab-line: #9b61c8; }
.ui-bda-tab-num { margin-left: 4px; font-size: 12px; opacity: .75; font-variant-numeric: tabular-nums; }

/* ---------- 干员卡片 ---------- */
.ui-bda-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ui-bda {
    display: flex; flex-direction: column;
    background: #2e333d; border-radius: 8px; overflow: hidden;
}
.ui-bda-img {
    position: relative; height: 150px;
    /* 立绘是透明底 cut 图，垫一层由深到浅的渐变，人物才不会糊在卡片底色里 */
    background: linear-gradient(180deg, #3f4653 0%, #262a33 100%);
}
.ui-bda-img img {
    display: block; width: 100%; height: 100%; object-fit: contain;
}
.ui-bda-type {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 10px; border-radius: 999px;
    font-size: 11px; font-weight: 700; white-space: nowrap;
    background: #3f4653;                                          /* 老浏览器降级 */
    background: color-mix(in srgb, var(--type-c, #949595) 30%, #3f4653);
    border: 1px solid color-mix(in srgb, var(--type-c, #949595) 55%, transparent);
    color: var(--type-t, #dde2e7);
}
/* 浮在立绘左上角（无详情页，类型胶囊只此一处） */
.ui-bda-img .ui-bda-type { position: absolute; top: 8px; left: 8px; }
.ui-bda-type::before {
    content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%;
    background: var(--type-c, #949595);
}
/* 档位色变量挂在卡片 .ui-bda 上：类型胶囊与卡片共用一套（无详情页，只此一处） */
.ui-bda.is-assault { --type-c: #cb464a; --type-t: #f0898c; }
.ui-bda.is-support { --type-c: #188D14; --type-t: #4fbe4a; }
.ui-bda.is-engineer { --type-c: #658BCE; --type-t: #93b2e8; }
.ui-bda.is-info { --type-c: #9b61c8; --type-t: #b98ade; }

/* 卡片各区块左右内边距统一 14px（与技能区一致）：12px 时难度星与费用胶囊贴边、看着挤 */
.ui-bda-hd {
    display: flex; align-items: baseline; gap: 8px;
    padding: 10px 14px 0; color: #fff;
}
.ui-bda-name { font-size: 16px; font-weight: 700; }
.ui-bda-en { font-size: 12px; color: #999; letter-spacing: .5px; }
.ui-bda-diff { margin-left: auto; display: flex; gap: 2px; font-size: 11px; color: #eed177; }
.ui-bda-diff i.is-off { color: #555; }
.ui-bda-desc {
    padding: 8px 14px 0; font-size: 12px; line-height: 1.6; color: #aaa;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ui-bda-cost {
    display: flex; align-items: center; gap: 6px;
    margin-top: 10px; padding: 8px 14px; border-top: 1px solid #3f4653;
    font-size: 13px; color: #999;
}
.ui-bda-cost b { margin-left: auto; color: #eed177; font-size: 15px; font-variant-numeric: tabular-nums; }

/* ---------- 卡片内技能区（无详情页，技能随列表下发后直接列在卡片里） ---------- */
.ui-bda-sks {
    margin-top: 10px; padding: 8px 14px 8px;
    border-top: 1px solid #3f4653;
}
.ui-bda-sks-t { margin-bottom: 2px; font-size: 12px; color: #999; }
/* 技能列表容器：卡片只有 1/3 屏宽，一条技能占一行，不做多列网格 */
.ui-bda-skills { margin-top: 2px; }
.ui-bda-skill {
    display: flex; align-items: center; gap: 8px; padding: 4px 0;
    border-top: 1px dashed #3a404b;
}
.ui-bda-skill:first-child { border-top: none; }
.ui-bda-sk-icon {
    flex: none; width: 22px; height: 22px; border-radius: 5px;
    background: #3f4653; object-fit: cover;
}
/* 名称不压缩（实测最长 7 字），描述吃掉剩余宽度并单行截断，费用胶囊被顶到行尾成一列。
   完整描述走整行的 title 悬浮（技能名 + 描述一起，见模板）。 */
.ui-bda-sk-name {
    flex: none; max-width: 92px; font-size: 12.5px; font-weight: 700; color: #fff;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 描述与右侧费用胶囊之间再留 6px（胶囊自带 gap 8px 仍显挤，金币图标进来后更挤） */
.ui-bda-sk-desc {
    flex: 1; min-width: 0; margin-right: 6px; font-size: 11.5px; color: #9aa1aa;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ui-bda-sk-cost {
    flex: none; padding: 1px 8px; border-radius: 999px;
    font-size: 11px; font-weight: 700; white-space: nowrap;
}
/* 价格前的金币图标：颜色继承胶囊字色（购买=金），与金额之间留 8px（4px 时图标贴着数字看着挤） */
.ui-bda-sk-cost i { margin-right: 8px; font-size: 11px; }
/* 购买=金 / 充能=蓝 / 被动=绿 / 待确认=灰；与品质色板同语言，不借用行情涨跌色 */
.ui-bda-sk-cost.is-buy { color: #f5cb84; background: color-mix(in srgb, #e8a64e 22%, #2e333d); }
.ui-bda-sk-cost.is-charge { color: #93b2e8; background: color-mix(in srgb, #658BCE 22%, #2e333d); }
.ui-bda-sk-cost.is-passive { color: #7fd48a; background: color-mix(in srgb, #188D14 22%, #2e333d); }
.ui-bda-sk-cost.is-unknown { color: #b9bfc6; background: #3f4653; }

@media (max-width: 900px) {
    .ui-bdr-grid, .ui-bda-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .ui-bdr-grid, .ui-bda-grid { grid-template-columns: 1fr; }
    .ui-bdr-stat { grid-template-columns: repeat(2, 1fr); gap: 10px 1px; }
    .ui-bdr-ph, .ui-bda-ph { flex-direction: column; align-items: flex-start; }
}