/* ==========================================================================
   无敌小猪 · 前台样式
   ========================================================================== */

:root {
    --ink: #10202a;
    --ink-2: #4a5c66;
    --ink-3: #8b9aa3;
    --line: #e6edf0;
    --bg: #f4f8f9;
    --panel: #ffffff;
    --green: #0f9d70;
    --green-2: #2ecc8f;
    --green-soft: #e8f7f1;
    --sky: #0ea5e9;
    --violet: #8b5cf6;
    --amber: #f59e0b;
    --rose: #f43f5e;
    --radius: 18px;
    --radius-sm: 12px;
    --shadow: 0 1px 2px rgba(16, 32, 42, .04), 0 16px 40px -26px rgba(16, 32, 42, .3);
    --shadow-sm: 0 1px 2px rgba(16, 32, 42, .05), 0 8px 20px -14px rgba(16, 32, 42, .26);
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
    --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.6;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
code, pre, .mono { font-family: var(--mono); }
.muted { color: var(--ink-3); }
.nowrap { white-space: nowrap; }

.ellip {
    display: inline-block;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

/* ---------- 骨架 ---------- */
.shell { display: flex; min-height: 100vh; }

.main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(900px 420px at 100% -8%, rgba(46, 204, 143, .12), transparent 62%),
        radial-gradient(760px 400px at -8% 108%, rgba(14, 165, 233, .1), transparent 60%),
        var(--bg);
}

/* ---------- 侧边栏 ---------- */
.sidebar {
    flex: 0 0 220px;
    width: 220px;
    position: sticky;
    top: 0;
    height: 100vh;
    padding: 22px 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: saturate(180%) blur(10px);
    border-right: 1px solid var(--line);
    overflow-y: auto;
}

.brand { display: flex; align-items: center; gap: 11px; padding: 4px 8px 20px; }

.brand-mark {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    color: #fff;
    /* 内页左上角图标背景：与登录/注册页同款薄荷渐变，但整体提亮降饱和（淡一档） */
    background: linear-gradient(140deg, #e8fdf5, #a5f0da 60%, #5ccfa8);
    box-shadow: 0 14px 28px -16px rgba(16, 185, 129, .62);
}

/* 品牌图标 = emoji 🐷（与页面 favicon 用的是同一个字形；
   彩色由系统 emoji 字体渲染，所以这里不再上色，只给字体栈兜底 + 定尺寸） */
.brand-emoji {
    display: block;
    font-size: 24px;
    line-height: 1;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla", sans-serif;
}

.brand-mark .brand-emoji { font-size: 19px; }            /* 侧栏 logo（42px 方块） */
.auth-panel-logo .brand-emoji { font-size: 20px; }       /* 窄屏品牌标记（40px 方块） */

.brand-text { display: flex; flex-direction: column; line-height: 1.25; }
.brand-text strong { font-size: 16px; font-weight: 700; letter-spacing: .3px; }
.brand-text em { font-style: normal; font-size: 10px; letter-spacing: 2px; color: var(--ink-3); }

.nav { flex: 1; display: flex; flex-direction: column; gap: 5px; }

.nav-label {
    padding: 14px 12px 6px;
    font-size: 11px;
    letter-spacing: 1.6px;
    color: var(--ink-3);
    text-transform: uppercase;
}

.nav-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 13px;
    border-radius: 13px;
    color: var(--ink-2);
    font-size: 14.5px;
    transition: background .18s ease, color .18s ease, transform .18s ease;
}

.nav-item svg { flex: 0 0 18px; opacity: .85; }
.nav-item:hover { background: #f4f8f9; color: var(--ink); transform: translateX(2px); }

.nav-item.active {
    color: #0b7a56;
    background: linear-gradient(90deg, rgba(46, 204, 143, .18), rgba(46, 204, 143, .05));
    box-shadow: inset 0 0 0 1px rgba(15, 157, 112, .18);
    font-weight: 600;
}

.nav-item.active::before {
    content: "";
    position: absolute;
    left: -16px;
    top: 50%;
    width: 3px;
    height: 22px;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(180deg, var(--green-2), var(--green));
    transform: translateY(-50%);
    box-shadow: 0 0 12px rgba(15, 157, 112, .7);
}

.sidebar-foot { padding-top: 14px; }

.foot-card {
    padding: 14px;
    border-radius: 15px;
    background: linear-gradient(160deg, #f2fbf7, #eef7fd);
    border: 1px solid #e2f1ea;
    font-size: 12.5px;
    color: var(--ink-2);
}

.foot-card strong { display: block; color: var(--ink); font-size: 13px; margin-bottom: 2px; }

/* ---------- 顶栏 ---------- */
.topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 20px;
    background: rgba(255, 255, 255, .94);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--line);
}

.topbar-title h1 { font-size: 19px; font-weight: 700; letter-spacing: -.2px; }

/* 顶栏标题后面的数量（「游戏账号（3）」）：略小、淡一点，像后缀 */
.topbar-count { font-size: 15px; font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.topbar-title p { font-size: 12.5px; color: var(--ink-3); }

/* 右侧组：占满剩余宽度（但内容仍靠右对齐）—— 这样页面自己插进来的东西
   （例：账号页那排状态小卡）能「吃掉」标题与按钮之间的空白，不用绝对定位。
   注意：`justify-content: flex-end` 必须保留 —— 不加的话内容会跑到左边去。 */
.topbar-right { margin-left: auto; flex: 1 1 auto; justify-content: flex-end; display: flex; align-items: center; gap: 10px; }

.user-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 13px 5px 5px;
    border-radius: 999px;
    background: #f5f8f9;
    border: 1px solid var(--line);
    font-size: 14px;
}

.avatar {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--green-2), var(--green));
    color: #fff;
    font-size: 14px;
    font-weight: 600;
}

/* ---------- 内容区 ---------- */
.content { padding: 24px 30px 20px; display: flex; flex-direction: column; gap: 20px; flex: 1 1 auto; min-height: 0; }

/* ---------- 按钮 ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 16px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
    background: #fff;
    color: var(--ink);
    font-size: 13.5px;
    font-family: inherit;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
}

.btn:hover { transform: translateY(-1px); border-color: #d8e4e8; }
.btn:active { transform: translateY(0); }

.btn.primary {
    border-color: transparent;
    color: #fff;
    background: linear-gradient(135deg, #16b981, #0b8a5f);
    box-shadow: 0 14px 30px -16px rgba(15, 157, 112, 1);
}

.btn.ghost { background: transparent; box-shadow: none; color: var(--ink-2); }
.btn.ghost:hover { background: #f2f7f8; }
.btn.danger { color: #b42318; border-color: #f7d9d5; background: #fff7f6; }
.btn.tiny { padding: 6px 11px; font-size: 12.5px; border-radius: 10px; }
.btn.block { width: 100%; padding: 13px 16px; font-size: 15px; }

.btn:disabled { cursor: not-allowed; transform: none; box-shadow: none; opacity: .78; }

/* 启停冷却期的按钮：外观跟 disabled 一样，但**能点** —— 点一下弹「还要等多久」
   （用 aria-disabled 表达，见 app.js 的 syncHangupButtons / data-hangup 处理）。 */
.btn[aria-disabled="true"] { cursor: not-allowed; transform: none; box-shadow: none; opacity: .6; }

/* 提交中：禁止点击 + 转圈动画（所有提交按钮通用，见 static/common/submit-guard.js） */
.is-loading {
    pointer-events: none;
    cursor: progress;
}

.is-loading::after {
    content: "";
    display: inline-block;
    flex: 0 0 auto;
    width: .9em;
    height: .9em;
    margin-left: .42em;
    vertical-align: -.1em;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    opacity: .85;
    animation: btn-spin .62s linear infinite;
}

/* 按钮上的转圈：**绝对定位居中、不参与排版** —— 加/去 loading 时按钮宽高一点不变。
 * 原来是 inline-block + margin-left，会把按钮撑宽，导致整排按钮跟着抖一下。
 * 文字用 -webkit-text-fill-color 隐藏（只作用于文字，不碰 border / background /
 * background-image），所以下面那些用 currentColor / 自定义色画的圈圈依然有颜色。 */
.btn.is-loading,
.rail-btn.is-loading,
button.is-loading {
    position: relative;
    -webkit-text-fill-color: transparent;
}

.btn.is-loading::after,
.rail-btn.is-loading::after,
button.is-loading::after {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -0.45em 0 0 -0.45em;
    vertical-align: baseline;
}

/* 按钮里的小图标：颜色跟随文字（currentColor），不被压扁 */
.rail-btn > svg { flex: 0 0 auto; }

/* 深色 / 主色按钮上的圈圈改成白色 */
.btn.primary.is-loading::after,
.is-loading.on-dark::after {
    border-color: rgba(255, 255, 255, .45);
    border-top-color: #fff;
}

@keyframes btn-spin {
    to { transform: rotate(360deg); }
}

.icon-btn {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--ink-2);
    cursor: pointer;
}

/* ---------- 面板 ---------- */
.panel {
    border-radius: var(--radius);
    background: var(--panel);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.panel-head {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 18px 20px;
    border-bottom: 1px solid var(--line);
}

.panel-head h2 { font-size: 15.5px; font-weight: 650; }
.panel-head p { font-size: 12.5px; color: var(--ink-3); }

.panel-body { padding: 20px; display: flex; flex-direction: column; gap: 18px; }
.head-actions { margin-left: auto; display: flex; gap: 9px; align-items: center; }

/* ---------- 搜索 ---------- */
.search { margin-left: auto; display: flex; align-items: center; gap: 9px; }

.search-box {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    min-width: 240px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
    background: #f7fafb;
    color: var(--ink-3);
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.search-box:focus-within { background: #fff; border-color: #bfe8d8; box-shadow: 0 0 0 4px rgba(46, 204, 143, .13); }

.search-box input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font-family: inherit;
    font-size: 13.5px;
    color: var(--ink);
}

/* ---------- 表格 ---------- */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: separate; border-spacing: 0; }

.table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 12px 16px;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .5px;
    color: #6b7c85;
    background: #f7fafb;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}

.table tbody td {
    padding: 13px 16px;
    border-bottom: 1px solid #f2f6f7;
    font-size: 13.5px;
    vertical-align: middle;
}

.table tbody tr { transition: background .15s ease; }
.table tbody tr:hover { background: #f8fdfb; }
.table tbody tr:last-child td { border-bottom: 0; }

.w-id { width: 70px; }
.w-act { width: 132px; }
.w-group { width: 130px; }

/* ---------- 游戏账号：左侧列表独立卡片 + 中/右合成一张卡片（两张卡之间 14px 间隔） ---------- */
.acct-grid {
    position: relative;   /* 「配置」弹层绝对定位盖住中 + 右两栏 */
    display: grid;
    grid-template-columns: 350px minmax(0, 1fr);
    align-items: stretch;
    gap: 14px;            /* 左侧卡片与右边合体卡片之间的间隔 */
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}

/* 左栏：独立卡片 */
#acctList {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    background: var(--panel);
}

/* 中 + 右：合成一张卡片（两栏贴合无缝，内部一条 1px 竖线分隔） */
.acct-pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    align-items: stretch;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    /* 关键：网格项的自动最小尺寸会把中栏顶宽（数据网格的 min-content），必须清零 */
    min-width: 0;
}

/* 合体卡片里的两栏：不要自带边框 / 圆角 / 阴影（否则衔接处会出现圆角） */
.acct-pair > .panel-col {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    min-width: 0;
}

/* ---------- 「配置」弹层：盖住中间「账号详情」+ 右侧「运行日志」两栏 ----------
 * 宽屏：绝对定位在 grid 上，left 跟左侧列表列同宽（350px）→ 正好只盖住中 + 右两栏，
 *       左边账号列表仍可点；内容区先留空（[data-cfg-body]）等配置项接入。
 * 窄屏（≤1024px）：详情 / 日志在抽屉里，所以改成整屏面板（见文件末尾的媒体查询）。 */
.cfg-layer {
    position: absolute;
    inset: 0;              /* 盖住「账号详情 + 运行日志」这张合体卡 */
    z-index: 9;
    display: flex;
    flex-direction: column;
    background: var(--panel);
    border-radius: var(--radius);
    animation: cfg-in .18s cubic-bezier(.22, 1, .36, 1);
}

/* ---------- 营业统计层（没选中账号时的默认层，盖住详情 + 日志） ----------
 * 层级：比「配置」层(9) 与详情 loading(8) 低，被它们压住；
 * 打开配置 / 取详情时不用手动让位。 */
.stats-layer {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-radius: var(--radius);
    background: var(--panel);
    overflow: hidden;
}

.stats-layer[hidden] { display: none; }

/* 统计层自己的关闭按钮：**只在窄屏（抽屉模式）出现** —— 宽屏它是默认层，没东西可关 */
.st-close { display: none; }

.st-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    min-height: 56px;
    padding: 11px 16px;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(180deg, #fbfdff, #fff);
}

.st-head-main { display: flex; align-items: baseline; gap: 10px; min-width: 0; }

.st-title {
    font-size: 15.5px;
    font-weight: 700;
    letter-spacing: .3px;
    color: var(--ink);
}

.st-sub { font-size: 12.5px; color: var(--ink-3); }
.st-sub b { margin: 0 2px; font-family: var(--mono); font-size: 13.5px; font-weight: 700; color: var(--green); }

/* 日期筛选器（复用底部详情卡那套 .day-tab 胶囊） */
.st-days {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
    padding: 3px;
    border: 1px solid #e8f0f4;
    border-radius: 11px;
    background: #fff;
}

/* 说明行：一句灰字，右侧可选「仅显示前 N 个」 */
.st-hint {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0;
    padding: 8px 16px;
    border-bottom: 1px solid #f2f7fa;
    background: #fcfdff;
    font-size: 12px;
    line-height: 1.6;
    color: var(--ink-3);
}

.st-hint em { flex: 0 0 auto; font-style: normal; color: #b25e00; }

/* 表格：整块可横竖滚动，表头吸顶 */
.st-body { flex: 1 1 auto; min-height: 0; overflow: auto; }

/* 营业统计（默认层）分页脚：表格滚动区固定在 .st-body，页脚常驻底部 */
.st-foot {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 9px 14px;
    border-top: 1px solid var(--line);
    background: #fbfdfe;
}
.st-range { font-size: 12.5px; color: var(--ink-3); }
.st-pager { margin-left: auto; }

.st-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
}

.st-table th {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 0;
    border: 0;                 /* 无横线：表头靠底色区分，不画分隔线 */
    background: #f1f6fa;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-2);
    text-align: left;
    white-space: nowrap;
}

.st-table th.is-on { background: #e4f1fb; color: #0369a1; }

.st-table th button,
.st-table th .st-hd-txt {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    height: 38px;
    padding: 0 5px;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    letter-spacing: .2px;
    text-align: left;
}

.st-table th.is-sortable button { cursor: pointer; transition: background .14s ease, color .14s ease; }
.st-table th.is-sortable button:hover { background: #e2eef8; color: #0369a1; }
.st-table th.is-on button { font-weight: 700; }

/* 数字列表头也左对齐（列头文字与下方数据同一起始线） */
.st-num-hd button,
.st-num-hd .st-hd-txt { justify-content: flex-start; }

/* 排序箭头：实心小三角，desc = 向下，asc = 旋转 180° */
.st-arrow {
    flex: 0 0 auto;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    opacity: .28;
    transition: transform .16s ease, opacity .16s ease;
}

.st-table th.is-sortable:hover .st-arrow { opacity: .6; }
.st-table th.is-on .st-arrow { opacity: 1; }
.st-table th.is-on.is-asc .st-arrow { transform: rotate(180deg); }

.st-table td {
    padding: 9px 5px;
    border: 0;                 /* 无横线（用户要求）；行间靠斑马纹 + hover 区分 */
    white-space: nowrap;
    color: var(--ink-2);
}

.st-table tbody tr:nth-child(even) { background: #fafcfe; }
.st-table tbody tr:hover { background: #f4fbff; }

/* 账号 / 昵称：这两列是表里唯一「长度不可控」的列，一个超长账号名就能把整张表
   撑宽、把其它列挤成一条缝。
   → 显示层截断在服务端 `statsContext()` 与前端 `renderStats()` 里做（各 16 / 8 字），
     这里再限宽 + 省略号兜底：万一哪条数据没截到，也顶不开表格。 */
.st-acc {
    max-width: 132px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--mono);
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
}
/* 昵称：宽度让给账号列，太长就省略号 */
.st-nick {
    max-width: 96px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--ink-2);
}
/* 内容很短的列（居民 / 顾客 / 宫廷）：自己缩到最窄，把宽度让给账号、昵称 */
.st-table .st-narrow { width: 1%; }
.st-time { font-family: var(--mono); font-size: 12px; color: var(--ink-3); }

/* 所有列（含数字列）统一左对齐 */
.st-table .st-num {
    text-align: left;
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
    color: var(--ink);
}

/* 占位 0：淡下去，等接口接入后自动「亮」起来 */
.st-table .st-num.is-zero { color: #b6c6cf; }

.st-table .st-num.is-hot { color: var(--green); font-weight: 700; }
.st-table .st-num.is-hot.is-zero { color: #a8cfc0; }

.cfg-layer[hidden] { display: none; }

/* 配置层：整套配色跟「账号详情」对齐 —— 头部=同一套深墨青渐变条（同高 58px、同下边框），
   内容底=运行日志那种极浅蓝渐变（原来是白底 + 浅灰头部，看着像另一个系统） */
.cfg-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 58px;                       /* 跟 .col-head 一致，切换时不跳高度 */
    padding: 11px 14px 11px 18px;
    border-bottom: 1px solid rgba(0, 0, 0, .45);
    /* var() 都带兜底值：窄屏 JS 会把这一层挂到 <body> 下，那时拿不到 .acct-pair 上的 `--dp-*`；
       没有兜底值的话整条渐变会失效 → 头部变白（踩过） */
    background: linear-gradient(120deg, var(--dp-ink, #0d2a35) 0%, var(--dp-ink-2, #17414f) 80%, #1d4c5d 100%);
    color: #e9f6fc;
}

.cfg-title {
    flex: 0 0 auto;
    font-size: 15.5px;
    font-weight: 700;
    letter-spacing: .3px;
    color: #cddde6;
}

/* 「← 返回」按钮：跟详情头部那排幽灵按钮同款（半透明白描边 + 浅字） */
.cfg-back {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 30px;
    padding: 0 11px 0 9px;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 9px;
    background: rgba(255, 255, 255, .06);
    color: #dbeaf3;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background .16s ease, color .16s ease, border-color .16s ease;
}

.cfg-back:hover { background: rgba(255, 255, 255, .14); color: #fff; border-color: rgba(255, 255, 255, .34); }
.cfg-back > svg { flex: 0 0 auto; }

/* 标题里的分隔竖线（配置层和详情头行共用，就是那个「丨」） */
.cfg-sep,
.v-sep { flex: 0 0 auto; width: 1px; height: 16px; margin: 0 2px; background: var(--line); }

/* 配置层头部是深底，那条「丨」要换成浅色 */
.cfg-head .cfg-sep { background: rgba(255, 255, 255, .28); }

.cfg-account {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--mono);
    font-size: 12.5px;
    color: #9fbccb;
}

.cfg-close {
    flex: 0 0 auto;
    margin-left: auto;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 9px;
    background: rgba(255, 255, 255, .1);
    color: #dceaf3;
    font-family: inherit;
    font-size: 19px;
    line-height: 1;
    cursor: pointer;
    transition: background .16s ease, color .16s ease;
}

.cfg-close:hover { background: rgba(255, 255, 255, .2); color: #fff; }

/* 右上角「保存」：原来是「×」关闭键（关闭改用左边的「返回」）。
   配色跟「批量启动」同一套浅绿（`.sel-pop .btn.start`）：浅底 + 深绿字，
   在深墨青的头部上足够显眼，但不像红色那样紧张。 */
.cfg-save {
    flex: 0 0 auto;
    /* ⚠️ 原来靠 `margin-left: auto` 把自己推到最右。
       现在这一排多了个「应用到」按钮，auto 得挪到**最左边那个**
       （`.cfg-apply-wrap`）上，否则两个按钮中间会被拉开一大段空隙 */
    margin-left: 0;
    height: 30px;
    padding: 0 14px;
    border: 0;
    border-radius: 9px;
    background: var(--green-soft, #e8f7f1);
    color: #0b7a56;
    font-family: inherit;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    transition: background .16s ease, color .16s ease;
}

.cfg-save:hover { background: #d7f1e6; }

/* 内容先留空（后续在这里接配置表单）：底色跟运行日志内容区一致 */
.cfg-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 16px;
    background: linear-gradient(180deg, #f1f7fb 0%, #f9fcfe 100%);
}

/* ==========================================================================
   「应用到」：把当前编辑的配置**批量**下发到某个分组的全部账号
   --------------------------------------------------------------------------
   按钮在「保存」左边；吸附层从按钮下方展开（`.cfg-apply-wrap` 既是右对齐的
   占位，也是浮层的定位锚点）。
   ========================================================================== */

.cfg-apply-wrap {
    position: relative;
    flex: 0 0 auto;
    margin-left: auto;      /* 见上面 .cfg-save 的注释：auto 从它那里挪到了这里 */
}

/* 描边风格：它是个「影响一批账号」的动作，别和实心的「保存」抢视觉 */
.cfg-apply {
    height: 30px;
    padding: 0 14px;
    border: 1px solid rgba(255, 255, 255, .32);
    border-radius: 9px;
    background: rgba(255, 255, 255, .08);
    color: #cde7db;
    font-family: inherit;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.cfg-apply:hover {
    background: rgba(255, 255, 255, .16);
    border-color: rgba(255, 255, 255, .5);
    color: #fff;
}

.cfg-apply[aria-expanded="true"] {
    background: var(--green-soft, #e8f7f1);
    border-color: transparent;
    color: #0b7a56;
}

/* ---------- 吸附层 ---------- */
.cfg-apply-pop {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 30;
    width: 272px;
    padding: 12px;
    border-radius: 13px;
    background: #fff;
    border: 1px solid #dbe7ee;
    box-shadow: 0 18px 40px -18px rgba(12, 42, 60, .45);
    animation: cfg-apply-in .16s cubic-bezier(.22, 1, .36, 1);
}

.cfg-apply-pop[hidden] { display: none; }

@keyframes cfg-apply-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}

.cfg-apply-step[hidden] { display: none; }

.cfg-apply-hd {
    margin-bottom: 9px;
    font-size: 12.5px;
    font-weight: 700;
    color: #4a5b66;
}

/* 分组列表：最多 5 行高，多了滚动（一个会员可能有几十个分组） */
.cfg-apply-list {
    max-height: 208px;
    overflow: auto;
    margin: 0 -4px;
}

.cfg-apply-tip {
    padding: 12px 8px;
    color: #8b9aa4;
    font-size: 12.5px;
    text-align: center;
}

.cfg-apply-opt {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 8px;
    border: 0;
    border-radius: 9px;
    background: none;
    font-family: inherit;
    font-size: 13px;
    color: #2b3b45;
    text-align: left;
    cursor: pointer;
}

.cfg-apply-opt:hover { background: #f2f8fa; }

.cfg-apply-opt.is-on {
    background: linear-gradient(135deg, rgba(46, 204, 143, .16), rgba(15, 157, 112, .1));
    color: #0b7a56;
    font-weight: 650;
}

.cfg-apply-opt-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cfg-apply-opt-n {
    flex: 0 0 auto;
    font-family: var(--mono);
    font-size: 12px;
    color: #8496a1;
}

.cfg-apply-opt.is-on .cfg-apply-opt-n { color: #0b7a56; }

/* 空分组也能选（先把配置备好，等有号了自然生效），但数字淡一档 */
.cfg-apply-opt.is-empty .cfg-apply-opt-n { color: #c2ccd3; }

.cfg-apply-ft {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 11px;
    padding-top: 11px;
    border-top: 1px solid #eef3f6;
}

.cfg-apply-btn {
    height: 30px;
    padding: 0 13px;
    border: 1px solid #dbe7ee;
    border-radius: 9px;
    background: #fff;
    color: #4a5b66;
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
}

.cfg-apply-btn:hover { border-color: #a8d8c5; color: #0b7a56; }

.cfg-apply-btn.is-primary {
    border-color: transparent;
    background: linear-gradient(135deg, #2ecc8f, #0f9d70);
    color: #fff;
    font-weight: 650;
}

.cfg-apply-btn:disabled { opacity: .45; cursor: not-allowed; }

/* 进度条 */
.cfg-apply-bar {
    height: 8px;
    border-radius: 999px;
    background: #eef3f6;
    overflow: hidden;
}

.cfg-apply-bar i {
    display: block;
    width: 0;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #2ecc8f, #0f9d70);
    transition: width .22s ease;
}

.cfg-apply-sub {
    margin-top: 8px;
    font-size: 12.5px;
    color: #7a8b95;
    text-align: center;
}

/* 进度条下方的补充说明（客户端要重启才生效）。
   刻意做得不抢眼：这是补充信息，不是警告，别跟「应用失败」的红字抢注意力。 */
.cfg-apply-note {
    margin-top: 10px;
    padding: 7px 9px;
    border-radius: 6px;
    background: #f4f8fa;
    font-size: 11.5px;
    line-height: 1.5;
    color: #7a8b95;
    text-align: center;
}

/* 窄屏：吸附层别溢出屏幕 */
@media (max-width: 640px) {
    .cfg-apply-pop { width: min(272px, calc(100vw - 32px)); }
}

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

/* ---------- 点左侧账号时的轻量 loading：盖住中栏「账号详情」+ 右栏「运行日志」 ----------
 * 定位跟 .cfg-layer 一致：宽屏绝对定位到第 2、3 列（左侧列表仍可点）；
 * 窄屏详情在抽屉里，改成整屏（见文件末尾的媒体查询）。 */
.acct-loading {
    position: absolute;
    inset: 0;              /* 盖住「账号详情 + 运行日志」这张合体卡 */
    z-index: 8;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .62);
    border-radius: var(--radius);
}

.acct-loading[hidden] { display: none; }

.acct-loading .spin {
    width: 24px;
    height: 24px;
    border: 2px solid rgba(15, 157, 112, .22);
    border-top-color: var(--green);
    border-radius: 50%;
    animation: btn-spin .62s linear infinite;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* 三栏都是 flex 列：头 / 可滚动体 / 脚（高度由外层 flex 拉伸，占满浏览器） */
.panel-col {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    background: var(--panel);
}

/* 账号页：整块工作区占满视口高度，只有列表/详情内部滚动 */
.acct-page {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-height: 0;
}

@media (min-width: 1025px) {
    /* 账号页工作区铺满：左/上贴住侧栏与顶栏，下也贴到底（负 margin 抵消 .content 的四边内边距） */
    .acct-page {
        margin: -24px 0 -20px -30px;
        /* 顶栏 87，底部不留白 → 整块从顶栏一直贴到视口底部 */
        height: calc(100vh - 87px);
        min-height: 520px;
    }
    /* 宽屏工作区网格：左列列表（通栏、贴左/上/下）+ 右列「详情 + 日志」合体卡。
       ⚠️ 必须写成 .acct-page .acc-layout：基础 .acc-layout 规则在本文件更靠后，否则 display 会被它覆盖 */
    .acct-page .acc-layout {
        display: grid;
        grid-template-columns: 350px minmax(0, 1fr);
        gap: 14px;
        flex: 1 1 auto;
        min-height: 0;
        /* 右列合体卡是固定 1100px：窗口不够宽时只让工作区内部横向滚动，
           不要连顶栏 / 侧栏一起被顶出屏幕（整页横向滚动） */
        overflow-x: auto;
    }

    /* 外壳网格在宽屏只是「透传」容器：列表与合体卡直接落在上层网格里 */
    .acct-page .acct-grid { display: contents; }

    /* 左列列表：通栏面板（直角、贴住侧栏与顶栏） */
    .acct-page #acctList {
        grid-column: 1;
        border-radius: 0;
    }

    /* 右列「详情 + 日志」合体卡：四边都留白且宽松（上 24 / 左右自动居中 / 下 30），
       宽度固定 1100px（min = max = 1100）；左列列表仍是从顶到底贴死的通栏面板
       （两者边不一致是故意的） */
    .acct-page .acct-pair {
        grid-column: 2;
        position: relative;
        justify-self: center;   /* 列比 1100px 宽时整卡居中 */
        width: 1100px;
        min-width: 1100px;
        max-width: 1100px;
        margin-top: 24px;
        margin-bottom: 30px;
        z-index: 10;
    }

    /* 勾选后：分页内容让位给操作区（操作区自己撑高，不再与分页区等高） */
    body.is-sel .col-foot { padding: 0; }

    body.is-sel .col-foot > .mini-pager,
    body.is-sel .col-foot > .pg-now { display: none; }

    .acct-page .panel-col { height: auto; max-height: none; }
}

/* 合体卡片里：中栏纯白（视觉焦点）+ 两侧极轻内阴影，右栏浅底，靠色阶与细线分层 */
.acct-pair > .panel-col + .panel-col { border-left: 1px solid var(--line); }

#acctDetail {
    background: #ffffff;
    box-shadow: inset 12px 0 18px -20px rgba(15, 23, 42, .16),
                inset -12px 0 18px -20px rgba(15, 23, 42, .16);
}

#acctLogs { background: linear-gradient(180deg, #f5f8fb 0%, #fbfcfd 100%); }

/* 栏头：中栏纯白，左栏（白卡片）与右栏给一层极浅底 */
#acctDetail .col-head { background: #fff; }
#acctList .col-head { background: linear-gradient(180deg, #fbfdfe, #f6fafc); }
#acctLogs .col-head { background: rgba(255, 255, 255, .62); }

/* 左侧表头跟随栏底色（不透明，保证 sticky 时遮住滚动数据） */
#acctList .table-acct thead th { background: #eef4f8; }

.col-head {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px 12px;
    border-bottom: 1px solid var(--line);
    background: rgba(255, 255, 255, .72);
}

/* 单行头：标题在左，按钮在右上角（不换行，标题过长就省略） */
.col-head.row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: nowrap;
    padding: 11px 12px 11px 18px;
}

.col-head.row .col-title { flex: 0 1 auto; }
.col-head.row .col-title h2 { white-space: nowrap; }
.col-head.row .col-count { display: none; }
.col-head.row .col-tools { flex: 0 0 auto; }

/* 中栏工具栏：更紧凑的一排小按钮 */
.col-head.row .col-tools { gap: 5px; }
.col-head.row .col-tools .btn.tiny { padding: 5px 9px; font-size: 12px; border-radius: 8px; }

/* 中栏头行：账号详情 丨 账号名 复制图标 状态 —— 标题后面的账号信息要显示出来 */
#acctDetail .col-head.row .col-title { flex: 0 1 auto; align-items: center; gap: 8px; min-width: 0; }
#acctDetail .col-head.row .col-count { display: block; }

#acctDetail .col-title .v-sep { flex: 0 0 auto; }
#acctDetail .col-title .copy-mini,
#acctDetail .col-title .tag-st { flex: 0 0 auto; }

/* 账号名：等宽字体、深一点，过长省略（不把右边状态挤成竖排） */
#acctDetail .col-count.is-acc {
    min-width: 0;
    font-family: var(--mono);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .2px;
    color: var(--ink);
}

.col-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
}

.col-title h2 {
    margin: 0;
    font-size: 13.5px;
    font-weight: 650;
    letter-spacing: .3px;
    color: var(--ink);
}

.col-count {
    font-size: 11.5px;
    color: var(--ink-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.col-count strong { color: var(--ink); font-weight: 650; }

.col-search { position: relative; display: flex; align-items: center; min-width: 0; }
.col-search .search-box { width: 100%; }

/* 第 1 行：分组（固定 136px）+ 搜索账号（自适应）——两者「无缝」拼成一个控件 */
.col-filter-row { display: flex; align-items: center; gap: 0; min-width: 0; }

.col-filter-row .group-rail { flex: 0 0 136px; width: 136px; }

.col-filter-row .rail-toggle {
    width: 100%;
    border-radius: 9px 0 0 9px;      /* 右侧直角，跟搜索框拼在一起 */
    box-shadow: none;
    padding-right: 10px;             /* 箭头贴右时右侧内边距小一点 */
}

/* 搜索框：左侧直角 + 去掉自己的左边框（用分组框的右边框当分隔线）→ 无缝隙 */
.col-filter-row .col-search { flex: 1 1 auto; min-width: 0; }

.col-filter-row .search-box.sm,
.col-filter-row .search-box {
    height: 32px;
    min-width: 0;
    padding: 0 11px;
    border-radius: 0 9px 9px 0;
    border-left: 0;
    background: #fff;                /* 搜索框背景要白的（原来是浅灰） */
}

.col-filter-row .search-box input { height: 32px; padding: 0; font-size: 13px; }

/* 聚焦整组：分组框 + 搜索框一起亮 */
.col-filter-row:focus-within .rail-toggle,
.col-filter-row:focus-within .search-box { border-color: #bfe8d8; }

.col-filter-row:focus-within .search-box { box-shadow: 0 0 0 3px rgba(46, 204, 143, .13); }

.col-reset {
    position: absolute;
    right: 8px;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #eef3f5;
    color: var(--ink-3);
    font-size: 15px;
    line-height: 1;
    text-decoration: none;
}

.col-reset:hover { background: #e2ebee; color: var(--ink); }

.col-tools { display: flex; gap: 6px; }
.col-tools.wrap { flex-wrap: wrap; }
.col-tools .btn { flex: 0 0 auto; }
.col-tools .btn.tiny { border-radius: 9px; }

/* ⚠️ 详情头部那排「图标键」（`.btn.tiny.btn-icon`）的规则**不在这里**，
   它必须写在文件**最末尾** —— 理由见文件末尾那一段的注释（一句话：
   这里写只有 3 个类，会被后段 `.acct-pair` 主题里 6 个类的
   `.acct-pair .col-head.row .col-tools .btn.tiny { padding: 0 13px }` 盖掉，
   结果是宽度 30px、内边距 13px，内容宽只剩 2px，图标被压扁到看不见）。 */

.col-scroll { flex: 1 1 auto; overflow: auto; min-height: 0; min-width: 0; }

.col-body { flex: 1 1 auto; overflow: auto; min-height: 0; min-width: 0; padding: 16px 18px 22px; }

.col-foot {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 15px 12px;   /* 原 10px 12px：上下各 +5 → 整条高度 +10px */
    border-top: 1px solid var(--line);
    background: #fff;     /* 跟勾选后的操作层同一底色（原 #f1f6f9） */
}

/* 勾选后的批量操作区：宽屏直接占据分页区的位置（自己撑高，不再受分页区高度约束，
   所以按钮/文字能大一号）；窄屏改成固定在屏幕底部的浮条（见文件末尾媒体查询）。
   两行：①「已选 N 个 ←→ 清空」 ②三个批量按钮（等宽均分） */
.sel-pop {
    position: relative;
    z-index: 3;
    width: 100%;      /* 父级 .col-foot 是 flex 行容器，不写会被收缩成 fit-content */
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    background: linear-gradient(180deg, #ffffff, #f6fafd);
    animation: sel-pop-in .16s cubic-bezier(.22, 1, .36, 1);
}

.sel-pop[hidden] { display: none; }

@keyframes sel-pop-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

/* 窄屏从屏幕底部升起 */
@keyframes sel-pop-up {
    from { opacity: 0; transform: translateY(100%); }
    to { opacity: 1; transform: none; }
}

/* 第一行：已选 N 个（左） + 清空（右） */
.sel-pop-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
}

.sel-pop-txt {
    flex: 0 1 auto;
    min-width: 0;
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
    font-size: 13.5px;
    color: var(--ink-2);
    white-space: nowrap;
}

.sel-pop-txt strong { color: var(--green); font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }

.sel-pop-txt em {
    max-width: 166px;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--ink-3);
    font-style: normal;
    font-size: 11px;
}

.sel-pop-clear {
    flex: 0 0 auto;
    padding: 2px 4px;
    border: 0;
    background: none;
    color: var(--ink-3);
    font-family: inherit;
    font-size: 13px;
    text-decoration: underline;
    cursor: pointer;
    white-space: nowrap;
}

.sel-pop-clear:hover { color: var(--green); }

.sel-pop-head .sel-pop-clear { flex: 0 0 auto; }

/* 第二行：三个批量按钮等宽均分（文字不加粗） */
.sel-pop-ops {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

/* 选择器带上 .tiny：否则会被后面的（移动端）.btn.tiny 字号规则盖掉 */
.sel-pop .btn.tiny {
    flex: 1 1 0;
    min-width: 0;
    height: 34px;
    padding: 0 10px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 400;
}

.sel-pop .btn.tiny > svg { width: 15px; height: 15px; }

/* 宽屏：操作区再高一点（内边距 / 行距 / 按钮同步放大） */
@media (min-width: 1025px) {
    .sel-pop { gap: 8px; padding: 13px 14px; }

    .sel-pop-txt { font-size: 14px; }
    .sel-pop-txt strong { font-size: 16px; }
    .sel-pop-clear { font-size: 13.5px; }

    .sel-pop .btn.tiny { height: 38px; font-size: 13.5px; }
    .sel-pop .btn.tiny > svg { width: 16px; height: 16px; }
}

/* 批量启动：**常驻浅绿**（与「批量停止」的琥珀成对）。
   原来是纯白底、只有 hover 才变绿 —— 四个按钮排一排时「启动」应该是第一眼
   看到的那一个。配色直接沿用项目里已有的浅绿芯片（`.badge.ok` / `.tag-st.is-online`）：
   `--green-soft` 底 + `#cdeee0` 描边 + `#0b7a56` 字。 */
.sel-pop .btn.start {
    border-color: #cdeee0;
    background: var(--green-soft);
    color: #0b7a56;
    font-weight: 400;
}

.sel-pop .btn.start:hover { border-color: #a8dcc6; background: #ddf3eb; }

/* 「导出账号」保持中性白底 —— 它不是启停操作，不该跟启动/停止抢注意力 */
.sel-pop .btn.ghost {
    border-color: #cddde4;
    background: #fff;
    color: var(--ink);
}

.sel-pop .btn.ghost:hover { border-color: #bfe8d8; background: #f7fdfa; color: var(--green); }

/* 批量停止：琥珀色（和后台「停用」、状态里的橙色同一套语义）。
   ⚠️ 别用红色 —— 红色留给紧挨着的「批量删除」，两个都红的话容易误点。 */
.sel-pop .btn.stop {
    border-color: #f0d5a4;
    background: #fffaf0;
    color: #b45309;
    font-weight: 400;
}

.sel-pop .btn.stop:hover { border-color: #e8c079; background: #fff3df; }

.sel-pop .btn.danger {
    border-color: #f2c3bb;
    background: #fff5f4;
    color: #c62a1c;
    font-weight: 400;
}

.sel-pop .btn.danger:hover { border-color: #e9a99e; background: #fdeceb; }

/* 分页：**禁止换行**（中间 5 个页码也保持一行）
   页数多时靠「…」收窄 + 允许按钮轻微压缩，绝不会掉到第二行
   （11 项 = 9×28 + 2×14 + 10×4 = 320 ≤ 栏内 326px） */
.mini-pager {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
    justify-content: center;
    min-width: 0;
}

.pg-now { font-size: 14px; color: var(--ink-2); padding: 0 6px; }

/* 分页按钮尺寸不变，只把字号抬一档（padding 收一点，保证一行仍放得下） */
.mini-pager .pg {
    flex: 0 1 auto;
    min-width: 28px;
    height: 28px;
    padding: 0 5px;
    border-radius: 8px;
    font-size: 14.5px;
    font-weight: 500;
    white-space: nowrap;
}

/* 省略号不占一个按钮的宽度，给页码腾地方 */
.mini-pager .pg.gap { min-width: 14px; padding: 0 2px; }

/* 左侧列表：350px（固定布局 + 省略号，不换行不横向滚动） */
.table-acct {
    width: 100%;
    min-width: 100%;
    table-layout: fixed;
    font-size: 13px;
}

/* 表头必须不透明：它是 sticky 的，透明会让滚动中的数据“穿透”到表头文字上 */
.table-acct thead th {
    padding: 9px 8px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .4px;
    color: var(--ink-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-bottom: 1px solid var(--line);
    background: var(--panel);
}

/* 行距收紧：上下各 6px；分隔线调深一点，行与行之间看得清 */
.table-acct tbody td {
    padding: 4px 6px;
    font-size: 13px;
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-bottom: 1px solid #e2eaee;
}

/* 账号列 15px；左边距收到 3px → 跟前面的勾选框几乎贴在一起 */
/* ⚠️ `line-height` 必须是**固定像素**：上面 `td` 用的是倍数 1.5，而这一列
   切到昵称模式时字号会从 15px 变 13.5px（用户要求「昵称小一号」）——
   倍数行高会跟着字号缩（22.5px → 20.25px），整行变矮、列表跳一下（用户 2026-10-07 报的）。
   固定 22px 后两种字号行高一致。 */
.table-acct tbody td.acct-name { font-size: 15px; line-height: 22px; font-weight: 500; padding-left: 3px; }

/* 列宽按真实数据定：勾选 22px，账号自适应剩余，等级 ≤3 位、元宝 ≤5~6 位、主线 ≤3 位，
   状态最长「被挤下线」4 字（≈51px）→ 末列右边距收到 5px 刚好放下 */
.table-acct thead th:nth-child(1) { width: 22px; }   /* 勾选 */
.table-acct thead th:nth-child(2) { width: auto; }   /* 账号（自适应） */
.table-acct thead th:nth-child(3) { width: 42px; }   /* 等级 */
.table-acct thead th:nth-child(4) { width: 56px; }   /* 元宝 */
.table-acct thead th:nth-child(5) { width: 42px; }   /* 主线 */
/* 状态：最长是「元宝异常」（12.5px × 4 字 = 50px），所以列宽收到 58px、
 * 右侧内边距让出来给它 —— 再小就装不下会溢出。省下的宽度归账号列（auto）。 */
.table-acct thead th:nth-child(6) { width: 58px; }
.table-acct tbody td:nth-child(6) { padding-right: 0; }

/* 勾选列：窄列、居中，只负责「批量勾选」，不影响当前选中的账号 */
.table-acct th.col-chk,
.table-acct td.col-chk {
    padding-left: 5px;
    padding-right: 0;
    text-align: center;
}

/* 末列右边距收紧（状态列 4 个字刚好放下） */
.table-acct th:last-child,
.table-acct td:last-child { padding-right: 5px; }

/* 勾选工具行（账号列表头上方：全选 / 反选 / 筛选 丨 批量导入 / + 新增） */
.sel-tools { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; min-width: 0; }

.sel-tools .sel-btn {
    flex: 0 0 auto;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0 9px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: #fff;
    color: var(--ink-2);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: background .16s ease, border-color .16s ease, color .16s ease;
}

.sel-tools .sel-btn:hover { background: #f6fbf9; border-color: #cfe5dc; color: var(--ink); }
.sel-tools .sel-btn.is-on { background: var(--green-soft); border-color: var(--green); color: var(--green); font-weight: 600; }

/* 分组「丨」细分隔：极淺一条竖线，把勾选工具和增删操作分开 */
.sel-sep { flex: 0 0 auto; width: 1px; height: 18px; margin: 0 4px 0 auto; background: var(--line); }

/* 右半区：「批量导入 / + 新增」比左边勾选工具大一号，且不用渐变色，改浅蓝 */
.sel-tools .btn.tiny {
    flex: 0 0 auto;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 12px;
    border-radius: 9px;
    font-size: 13px;
}

.sel-tools .btn.tiny.primary {
    border-color: #bfe0f7;
    background: #eaf5fe;
    color: #0369a1;
    box-shadow: none;
}

.sel-tools .btn.tiny.primary:hover { background: #ddefff; border-color: #a8d6f4; color: #075985; }

@media (max-width: 380px) {
    .sel-tools { gap: 5px; }
    .sel-tools .sel-btn { padding: 0 7px; font-size: 12px; }
    .sel-tools .btn.tiny { padding: 0 9px; font-size: 12px; }
}

/* 复选框：表头「全选」与行内同尺寸（都走这条），做得小而淡
   —— 未选中几乎与左侧列表底色融为一体，选中才亮品牌绿 */
.table-acct input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 13px;
    height: 13px;
    margin: 0;
    vertical-align: middle;
    border: 1px solid #bbc3c7;
    border-radius: 4px;
    background: #eef4f8;
    cursor: pointer;
    transition: background-color .14s ease, border-color .14s ease;
}

.table-acct input[type="checkbox"]:hover { border-color: #cfded6; background-color: #e7eff4; }

.table-acct input[type="checkbox"]:checked,
.table-acct input[type="checkbox"]:indeterminate {
    border-color: var(--green);
    background-color: var(--green);
}

.table-acct input[type="checkbox"]:checked {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.6 8.7l3 3 5.8-6.6'/%3E%3C/svg%3E");
    background-size: 11px 11px;
    background-position: center;
    background-repeat: no-repeat;
}

.table-acct input[type="checkbox"]:indeterminate {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M4 8h8'/%3E%3C/svg%3E");
    background-size: 11px 11px;
    background-position: center;
    background-repeat: no-repeat;
}

.table-acct input[type="checkbox"]:focus-visible { outline: 2px solid rgba(15, 157, 112, .45); outline-offset: 1px; }
.table-acct input[type="checkbox"]:disabled { cursor: not-allowed; opacity: .45; }

/* 该表单元格必须是 table-cell：通用工具类（如 .ellip）会把它变成 inline-block 而搞坏表格 */
.table-acct td,
.table-acct th { display: table-cell; }

/* 数字列左对齐（跟账号/等级/元宝/主线 数据左对齐） */
.table-acct .num { text-align: left; }

.acct-row { cursor: pointer; }
.acct-row:focus { outline: none; }
.acct-row:focus-visible { box-shadow: inset 0 0 0 2px rgba(15, 157, 112, .35); }
/* 选中行：只加底色 + 左侧色条，**不改文字颜色** */
.table tbody tr.acct-row.is-picked,
.table tbody tr.acct-row.is-picked:hover { background: var(--green-soft); }

.table tbody tr.acct-row.active,
.table tbody tr.acct-row.active:hover { background: #d6f1e6; }

.acct-row.active { box-shadow: inset 3px 0 0 var(--green); }

/* 状态色：在线绿 / 离线灰 / 封禁红 / 元宝异常橙 / 登录类告警琥珀 */
/* 列表里的状态：只靠颜色区分，**统一不加粗** ——
 * 加粗在窄列里会挤掉字宽，而且一排状态颜色已经很清楚了，再加粗反而吵。 */
.st-txt { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; }
.st-txt.is-online { color: var(--green); }
.st-txt.is-offline { color: var(--ink-3); }
/* 启动中 / 停止中：前端推的中间态，等客户端上报最终态 */
.st-txt.is-starting { color: #2563eb; }
.st-txt.is-stopping { color: #7c3aed; }
.st-txt.is-upgrading { color: #0891b2; }
/* 「失联」= 号还被占着但持有者不说话。用橙色 —— 它比离线严重（要人工处理）
 * ⚠️ 不加粗：上面已经写了「列表里的状态统一不加粗」，这里是漏改的一处。
 *    加粗会让它在窄列里比别人宽一格，一排看下去反而只有它跳出来，很吵。 */
.st-txt.is-lost { color: #e08600; }

/* 列表里的「冲突」小标：同一个号被**不同**客户端写过 = 双跑最直接的证据。
   数据早就在库里（`conflict_cnt`），之前一直没地方看。
   ⚠️ 现在**隐藏**（用户要求）—— 想恢复只需把下面这行 display 改回 inline-block；
   冲突信息本身没丢：`conflict_cnt` 字段还在接口里，这个角标的 title 仍绑 owner_tip。 */
.st-warn {
  display: none;
  margin-left: 4px;
  padding: 0 5px;
  border-radius: 4px;
  background: #fdecea;
  color: #d92d20;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
  cursor: help;
  vertical-align: 1px;
}

/* 详情面板的「归属 / 双跑诊断」一行（.dt-owner）**已按要求不再显示**，样式一并删掉。
   后端字段（owner_tip / conflict_cnt）还在，左侧列表的「⚠N」角标仍用它
   （该角标当前隐藏；账号名的 title 已按要求去掉）。 */
.st-txt.is-banned { color: #d92d20; }
.st-txt.is-dmd_abnormal { color: #e08600; }
.st-txt.is-bad_pwd,
.st-txt.is-login_limit,
.st-txt.is-login_freq,
.st-txt.is-kicked { color: #b45309; }
.st-txt.is-no_server,
.st-txt.is-no_realname,
.st-txt.is-client_refused { color: #b45309; }
.st-txt.is-other { color: #4e5e6b; }

/* 存量数据里出现的非标准状态值（手工写库 / 导入）。
   服务端现在会原样透出这些 key，这里给它们上色，免得是一行没重点的灰字。 */
.st-txt.is-running { color: var(--green); }
.st-txt.is-paused  { color: var(--ink-3); }
.st-txt.is-normal  { color: var(--green); }
.st-txt.is-error   { color: #d92d20; }
/* 完全不认识的状态：也给它一个明确的颜色，一眼能看出「这是个另外的状态」 */
.st-txt.is-unknown { color: #b45309; }
.acct-row.active .st-txt.is-online { color: var(--green); }

/* 中/右栏目里的空位占位 */
.placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 100%;
    padding: 44px 20px;
    text-align: center;
    color: var(--ink-3);
}

.placeholder svg { opacity: .32; }
.placeholder strong { font-size: 13px; font-weight: 620; letter-spacing: .3px; color: var(--ink-2); }
.placeholder span { font-size: 12px; line-height: 1.8; max-width: 280px; }
.placeholder.sm { padding: 30px 16px; }

/* 详情 */
/* 账号名过长就省略，不要把右边的状态标签挤成竖排 */
.tag-st {
    margin-left: auto;
    flex: 0 0 auto;
    padding: 3px 11px;
    border-radius: 999px;
    background: #f1f5f7;
    color: var(--ink-3);
    font-size: 11.5px;
    letter-spacing: .3px;
    white-space: nowrap;
}

.tag-st.on,
.tag-st.is-online { background: var(--green-soft); color: var(--green); font-weight: 600; }
/* 离线：明确的灰徽标 —— 默认那个 #f1f5f7 + ink-3 跟背景太接近，
 * 在详情里几乎看不出是个状态徽章 */
.tag-st.is-offline { background: #e7edf2; color: #4e5e6b; }
.tag-st.is-starting { background: #e8efff; color: #1d4ed8; font-weight: 600; }
.tag-st.is-stopping { background: #f3ecfe; color: #6d28d9; font-weight: 600; }
.tag-st.is-upgrading { background: #e2f5f9; color: #0e7490; font-weight: 600; }
.tag-st.is-lost { background: #fff4e5; color: #b25e00; font-weight: 600; }
.tag-st.is-banned { background: #fdecea; color: #d92d20; font-weight: 600; }

/* 状态徽标后面的「刷新」小按钮：无边框图标键，点了图标转圈到数据回来 */
.refresh-mini {
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--ink-3);
    cursor: pointer;
    transition: background .16s ease, color .16s ease;
}

.refresh-mini:hover { background: var(--green-soft); color: var(--green); }
.refresh-mini:active { transform: scale(.94); }
.refresh-mini.is-spin { color: var(--green); cursor: progress; }
.refresh-mini.is-spin svg { animation: rfm-spin .8s linear infinite; }

@keyframes rfm-spin { to { transform: rotate(360deg); } }
.tag-st.is-dmd_abnormal { background: #fff4e5; color: #b25e00; font-weight: 600; }
.tag-st.is-bad_pwd,
.tag-st.is-login_limit,
.tag-st.is-login_freq,
.tag-st.is-kicked { background: #fff7e8; color: #b45309; }
/* 「没跑起来的原因」（2026-10-05 新增）：不是封号，用户处理完重试就行 → 琥珀色 */
.tag-st.is-no_server,
.tag-st.is-no_realname,
.tag-st.is-client_refused { background: #fff7e8; color: #b45309; }
/* 「其他」是个筐，不表态 → 跟「离线」同一套灰，一眼能看出「这不是明确原因」 */
.tag-st.is-other { background: #e7edf2; color: #4e5e6b; }

/* ---------- 筛选勾选层：一个弹层里的两块（①按元宝 ②按状态，中间一个「或」） ----------
 * 结构：顶部 3px 渐变细线 + 固定头（标题/副标题）+ 可滚动正文（两块 step）+ 固定底
 * 质感：白底 + 极浅蓝分层、序号方块、输入框内嵌前缀、状态做成带勾选圆点的胶囊 */
.flt-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;          /* 头和底固定，只让正文滚 */
    border-radius: 20px;
}

/* 顶部渐变细线（蓝 → 品牌绿），卡片圆角靠 overflow:hidden 裁掉 */
.flt-accent {
    flex: 0 0 auto;
    height: 3px;
    background: linear-gradient(90deg, #6cc0ea, #35c9a4 62%, #16b981);
}

.flt-head {
    position: relative;
    flex: 0 0 auto;
    align-items: flex-start;
    padding: 18px 20px 14px;
    border-bottom: 1px solid #eef4f8;
    background: linear-gradient(180deg, #fbfdff, #fff);
}

.flt-head-txt { min-width: 0; }
.flt-head-txt h3 { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: .2px; color: var(--ink); }

.flt-head-txt p {
    margin: 5px 0 0;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--ink-3);
}

.flt-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 18px 20px 20px;
}

/* 每一块：序号 + 内容两栏；序号做成小方块，视觉上更像「步骤」 */
.flt-step {
    display: flex;
    gap: 12px;
    padding: 14px 15px;
    border: 1px solid #e9f2f7;
    border-radius: 14px;
    background: linear-gradient(180deg, #fcfdff, #f8fbfd);
    box-shadow: 0 1px 2px rgba(16, 32, 42, .03);
}

.flt-step-main { flex: 1 1 auto; min-width: 0; }

.flt-idx {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    border-radius: 7px;
    background: linear-gradient(180deg, #eaf6fe, #dceffc);
    color: #0369a1;
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 700;
    box-shadow: inset 0 0 0 1px #cfe8f8;
}

.flt-hd { margin: 0; font-size: 14px; font-weight: 650; color: var(--ink); letter-spacing: .2px; }

.flt-desc { margin: 4px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--ink-3); }
.flt-desc em { font-family: var(--mono); font-style: normal; font-weight: 700; color: var(--green); }

/* 中间「或」：两条渐隐细线夹一个字 */
.flt-or {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 12px 0;
    color: var(--ink-3);
    font-size: 12px;
    letter-spacing: 2px;
}

.flt-or::before,
.flt-or::after { content: ""; flex: 1 1 auto; height: 1px; }
.flt-or::before { background: linear-gradient(90deg, transparent, #e2edf3); }
.flt-or::after { background: linear-gradient(270deg, transparent, #e2edf3); }

.flt-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }

/* 区块里的主按钮：两块结构完全一致 —— 控件占满一行，动作按钮在下面全宽
   （原来「按元宝勾选」贴着输入框、而「按状态勾选」孤零零飘在右下，视觉上很不一致）
   配色：不用深绿渐变，改成「浅绿底 + 绿描边 + 绿字」，轻一点 */
.flt-step .flt-go {
    display: flex;
    width: 100%;
    height: 42px;
    margin-top: 10px;
    padding: 0 18px;
    border: 2px solid #9fdfc8;
    border-radius: 12px;
    background: #f6fdfa;
    color: #0b7a56;
    font-size: 13.5px;
    box-shadow: none;
    transition: background .16s ease, border-color .16s ease, color .16s ease;
}

.flt-step .flt-go:hover { background: #ecf9f2; border-color: #7fd3b6; color: #096a4a; }

/* loading 小圈也跟着改成绿系（.btn.primary 的白圈在这个浅底上看不见） */
.flt-step .flt-go.is-loading::after { border-color: rgba(11, 122, 86, .28); border-top-color: #0b7a56; }

/* 输入框：整块可聚焦，前缀「元宝 ≥」在内侧，数字用等宽（16px 防 iOS 放大） */
.flt-box {
    flex: 1 1 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 9px;
    height: 42px;
    padding: 0 13px;
    border: 1px solid #d7e5ec;
    border-radius: 12px;
    background: #fff;
    box-shadow: inset 0 1px 2px rgba(16, 32, 42, .045);
    transition: border-color .16s ease, box-shadow .16s ease;
}

.flt-box:focus-within {
    border-color: #8ed0f0;
    box-shadow: inset 0 1px 2px rgba(16, 32, 42, .02), 0 0 0 4px rgba(56, 189, 248, .13);
}

.flt-pre { flex: 0 0 auto; font-size: 12.5px; color: var(--ink-3); letter-spacing: .3px; }

.flt-box input {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font-family: var(--mono);
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.flt-go { flex: 0 0 auto; height: 42px; padding: 0 18px; border-radius: 12px; font-size: 13.5px; }

/* 底部：两个按钮居中，且跟上方区块留出间隔 */
.flt-card .flt-foot {
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 4px;
    padding: 16px 20px 18px;
    border-top: 1px solid #f1f7fa;
    background: linear-gradient(180deg, #fcfdff, #fff);
}

.flt-foot .btn { flex: 0 0 auto; min-width: 88px; }
.flt-reset { color: var(--ink-3); }
.flt-reset:hover { color: #b45309; background: #fff7e8; border-color: #f3e0bd; }
.flt-reset.is-done { color: var(--green); background: var(--green-soft); border-color: #bfe8d8; }

/* 状态：带勾选圆点的胶囊，**所有胶囊等宽**（网格定宽，内容居中） */
.st-picker {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(116px, 1fr));
    gap: 8px;
    margin-top: 12px;
}

.st-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;   /* 文字左对齐（勾选圆点在最左） */
    gap: 7px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid #e3edf2;
    border-radius: 10px;
    background: #fff;
    color: var(--ink-2);
    font-size: 13px;
    line-height: 1.4;
    cursor: pointer;
    transition: background .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease;
}

.st-chip input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.st-tick {
    flex: 0 0 auto;
    position: relative;
    width: 15px;
    height: 15px;
    border: 1px solid #cbd9df;
    border-radius: 50%;
    background: #fff;
    transition: background .16s ease, border-color .16s ease;
}

.st-tick::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 1.5px;
    width: 5px;
    height: 9px;
    border: 2px solid #fff;
    border-top: 0;
    border-left: 0;
    border-radius: 1px;
    transform: rotate(42deg) scale(.4);
    opacity: 0;
    transition: opacity .16s ease, transform .16s ease;
}

.st-chip:hover { border-color: #cfe5dc; box-shadow: 0 4px 12px -8px rgba(16, 157, 112, .8); }
.st-chip:focus-within { border-color: #8ed0f0; box-shadow: 0 0 0 3px rgba(56, 189, 248, .14); }

.st-chip.on {
    border-color: #9fdfc8;
    background: var(--green-soft);
    color: #0b7a56;
    font-weight: 600;
}

.st-chip.on .st-tick { border-color: var(--green); background: var(--green); }
.st-chip.on .st-tick::after { opacity: 1; transform: rotate(42deg) scale(1); }

/* 窄屏（手机）：整层再紧凑一档 —— 内外边距、行高、控件高度全部收一圈 */
@media (max-width: 460px) {
    /* 头 / 正文 / 底 */
    .flt-head { padding: 12px 14px 10px; }
    .flt-head-txt h3 { font-size: 15px; }
    .flt-head-txt p { margin-top: 3px; font-size: 11.5px; line-height: 1.5; }
    .flt-body { padding: 12px 13px 12px; }
    /* 底：要带 .flt-card 前缀，否则盖不过上面那条 .flt-card .flt-foot */
    .flt-card .flt-foot { padding: 10px 13px 12px; gap: 10px; }
    .flt-foot .btn { min-width: 76px; height: 36px; padding: 0 14px; font-size: 13px; }

    /* 两块：序号、标题、说明、输入框、按钮都收一点 */
    .flt-step { padding: 11px 12px; gap: 9px; border-radius: 12px; }
    .flt-idx { width: 19px; height: 19px; border-radius: 6px; font-size: 11px; }
    .flt-hd { font-size: 13.5px; }
    .flt-desc { margin-top: 3px; font-size: 11.5px; line-height: 1.5; }
    .flt-or { margin: 8px 0; font-size: 11px; gap: 9px; }

    .flt-row { margin-top: 9px; gap: 8px; }
    .flt-box { height: 38px; padding: 0 11px; gap: 7px; border-radius: 10px; }
    .flt-pre { font-size: 12px; }
    .flt-box input { font-size: 15px; }
    .flt-step .flt-go { height: 38px; margin-top: 8px; border-radius: 10px; font-size: 13px; }

    /* 状态胶囊：矮一点、密一点，尽量排成 3 列（8 个 = 3+3+2） */
    .st-picker { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 5px; margin-top: 9px; }
    .st-chip { height: 32px; gap: 5px; padding: 0 8px; border-radius: 9px; font-size: 12.5px; }
    .st-tick { width: 14px; height: 14px; }
    .st-tick::after { left: 3.5px; top: 1px; width: 5px; height: 8px; }
}

/* 数据网格：细线分隔 + 大数字，去掉厚重卡片感（独立类名，避开个人中心的 .kv） */
/* ---------- 账号详情：标题下的一排功能 tab（默认「营业统计」） ---------- */
.dt-tabs {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 6px 10px;
    overflow-x: auto;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(180deg, #fbfdfe, #f6fafc);
    scrollbar-width: none;
}

.dt-tabs::-webkit-scrollbar { display: none; }
/* 无数据账号会显式把它 hidden 收起（见 app.js showEmptyDetail）；
   .dt-tabs 自身是 display:flex，会盖掉浏览器默认的 [hidden]，所以这里补一条 */
.dt-tabs[hidden] { display: none; }

.dt-tab {
    flex: 0 0 auto;
    padding: 6px 11px;
    border: 0;
    border-radius: 9px;
    background: none;
    color: var(--ink-2);
    font-family: inherit;
    font-size: 12.5px;
    line-height: 1.5;
    white-space: nowrap;
    cursor: pointer;
    transition: background .16s ease, color .16s ease, box-shadow .16s ease;
}

.dt-tab:hover { color: var(--green); }

.dt-tab.is-on {
    background: #fff;
    color: var(--green);
    font-weight: 700;
    box-shadow: inset 0 0 0 1px #bfe8d8, 0 1px 2px rgba(16, 32, 42, .06);
}

.dt-panel { display: none; }
.dt-panel.is-on { display: block; }
/* 仪表盘里有多张卡片：面板上加 .is-stack 让它们竖排（间距靠 flex gap） */
.dt-panel.is-on.is-stack { display: flex; flex-direction: column; gap: 12px; }

/* 还没接入数据的 tab：一句淡淡的占位 */
.dt-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 220px;
    border: 1px dashed #e0eaee;
    border-radius: 14px;
    background: #fbfdfe;
    color: var(--ink-3);
    font-size: 12.5px;
    letter-spacing: .3px;
}

/* ---------- 营业统计卡片（账号详情正文；数据接口未接入，数字先占位 0） ----------
 * 结构：卡片 = 顶部筛选条（浅蓝底，跟正文分层）+ 正文（收益瓦片 / 活动小格）
 * 质感：顶部蓝色细线 + 标题蓝色小竖条 + 细边微阴影；数字仍用品牌绿 */
.stat-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    border: 1px solid #d5e6f4;
    border-radius: var(--radius);
    overflow: hidden;
    /* 浅色底色：左上一团淡蓝柔光 + 右下一团淡绿柔光 + 蓝到青的极浅渐变（不是纯白） */
    background:
        radial-gradient(120% 92% at 0% 0%, rgba(56, 189, 248, .13), rgba(56, 189, 248, 0) 58%),
        radial-gradient(110% 92% at 100% 100%, rgba(22, 185, 129, .11), rgba(22, 185, 129, 0) 60%),
        linear-gradient(160deg, #f8fcff 0%, #eef8ff 54%, #f1fbf8 100%);
    box-shadow: var(--shadow-sm);
}

/* 卡片顶部一条蓝色渐变细线 */
.stat-card::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    background: linear-gradient(90deg, rgba(56, 189, 248, .95), rgba(2, 132, 199, .3) 52%, rgba(2, 132, 199, 0));
}

/* 顶部条：标题 + 最近 5 天筛选（半透明白，盖在卡片浅色底上做分层） */
.stat-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    padding: 9px 14px 8px;
    border-bottom: 1px solid rgba(222, 236, 246, .9);
    background: linear-gradient(180deg, rgba(255, 255, 255, .88), rgba(250, 253, 255, .66));
}

.stat-head h3 {
    position: relative;
    padding-left: 10px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-2);
    letter-spacing: .5px;
}

/* 标题左边一小段蓝色竖条（比原来细、比原来淡） */
.stat-head h3::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 3px;
    height: 11px;
    margin-top: -5.5px;
    border-radius: 2px;
    background: linear-gradient(180deg, #a8dcf7, #6cc0ea);
}

/* 最近 5 天：浅色轨道 + 选中变成白底小胶囊；tab 之间一条细线（就是「丨」） */
.stat-days {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 3px;
    border-radius: 11px;
    background: #fff;
    border: 1px solid #e8f0f4;
}

.day-tab {
    position: relative;
    padding: 3px 11px;
    border: 0;
    background: none;
    color: var(--ink-2);
    font-family: inherit;
    font-size: 12px;
    line-height: 1.7;
    white-space: nowrap;
    cursor: pointer;
    border-radius: 8px;
    transition: background .16s ease, color .16s ease, box-shadow .16s ease;
}

.day-tab + .day-tab { border-left: 1px solid #e8f0f4; }
.day-tab:hover { color: #0284c7; }

.day-tab.is-on {
    background: linear-gradient(180deg, #f2faff, #e6f4fe);
    color: #0369a1;
    font-weight: 700;
    box-shadow: inset 0 0 0 1px #bae0f7;
}

/* 选中胶囊两侧不画分隔线，免得贴着胶囊边 */
.day-tab.is-on,
.day-tab.is-on + .day-tab { border-left-color: transparent; }

/* 正文：两块内容 */
.stat-body { display: flex; flex-direction: column; gap: 9px; padding: 11px 14px 12px; }

.stat-block { display: flex; flex-direction: column; gap: 6px; }

/* 小节标题：前面一小段绿色竖条 + 右边拖一条细线 */
.stat-sub {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;                 /* h4 默认上下 1.33em 的外边距会把间距撑大，这里清零（间距交给父容器的 gap） */
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-2);
    letter-spacing: .5px;
}

.stat-sub::before { content: ""; width: 3px; height: 12px; border-radius: 2px; background: rgba(2, 132, 199, .45); }
.stat-sub::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--line); }

/* 收益情况：白底小瓦片；宽的时候 4 列（7 项 = 4+3），窄了自动降列 */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(126px, 1fr));
    gap: 8px;
}

.stat-item {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 7px 11px;
    border: 1px solid #d5e3ea;   /* 比卡片描边深一点，瓦片更分明 */
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 32, 42, .05);
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.stat-item:hover {
    border-color: #c9e2f4;
    box-shadow: 0 8px 18px -12px rgba(2, 132, 199, .65);
    transform: translateY(-1px);
}

.stat-label { font-size: 11.5px; color: var(--ink-3); letter-spacing: .3px; }

/* 收益数字：加大加粗 + 品牌绿 */
.stat-num {
    font-family: var(--mono);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.15;
    color: var(--green);
    font-variant-numeric: tabular-nums;
}

/* 账号信息：一行文字（不是卡片）；区服·昵称 [公会]·等级 丨 资产（数字绿等宽） */
.acct-line {
    padding: 0 2px;
    font-size: 13px;
    line-height: 2;
    color: var(--ink-2);
}

/* 等级：**不加任何装饰**（原来的浅蓝徽章已去掉），样式跟区服完全一致：等宽 + 灰字 */
.al-lv {
    display: inline;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--ink-3);
    font-family: var(--mono);
    font-size: 12.5px;
    font-weight: 400;
    letter-spacing: 0;
}

/* 身份区（区服·昵称 [公会]·等级）与资产区各自绑成一个整体：
   桌面端在同一行（位置不够时整块换行），窄屏资产区换到第二行 */
.al-who { white-space: nowrap; }

/* 资产区（水滴 / 金币 / 元宝 / 主线）绑成一行：**内部禁止换行**
   （四个都放不下时整行横向滚动，而不是折成两行；滚动条隐藏，不影响观感） */
.al-assets {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    white-space: nowrap;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}

.al-assets::-webkit-scrollbar { display: none; }
.al-assets > * { flex: 0 0 auto; }

.al-server { color: var(--ink-3); font-family: var(--mono); font-size: 12.5px; }

/* 区服：客户端上报的是纯数字（如 3921），「服」字由 detail-schema.js 的
 * suffix: { server: '服' } + renderAuto 补上（那里能判断是不是已经带过，
 * 不会出现「3921服服」）。**别在这里用 ::after 再补一次。** */

/* 区服 / 公会：**有值才画分隔点**。
 * 客户端没上报时这两个 span 是空的（模板里原来写的「s4301区」「[公会]」是假数据，已拿掉），
 * 空着还留个点就是「· ·」两个空点，很丑。 */
.al-server:not(:empty)::before,
.al-guild:not(:empty)::before {
    content: "·";
    margin: 0 6px 0 5px;
    color: var(--ink-3);
}
.al-nick { font-size: 13.5px; font-weight: 600; color: var(--ink); letter-spacing: .2px; }

/* 间隔的圆点：比周围字略大 + 加粗 + 中灰，确保一眼看得见。
 * 左右各 5px —— 区服变成「3921服」之后，紧贴着的「·25级」看着像黏在一起了 */
.al-dot {
    margin: 0 5px;
    color: #8ba0ac;
    font-size: 1.15em;
    font-weight: 700;
}

.al-guild { margin-left: 5px; color: #6b8494; font-size: 12.5px; }

/* 身份区与资产区之间：不用全角冒号，改用一条细竖线（窄屏会被资产区换行替代） */
.al-div {
    display: inline-block;
    width: 1px;
    height: 12px;
    margin: 0 11px;
    background: #e2ebf1;
    vertical-align: middle;
}
.al-k { font-size: 12.5px; color: var(--ink-3); }

.al-v {
    font-family: var(--mono);
    font-size: 13.5px;
    font-weight: 700;
    color: var(--green);
    font-variant-numeric: tabular-nums;
}

.al-bar { margin: 0 8px; color: #dde7ee; }

/* 资产区（水滴 / 金币 / 元宝 / 主线 / 花卡 / 果卡）**另起一行**：
   6 项跟身份区挤在同一行会折得很难读，所以竖线 `.al-div` 弃用（display:none），
   资产区整体作为第二行；同时把分隔符两侧间距从 8px 收到 6px（整整一行更紧凑）。 */
.acct-line .al-div { display: none; }
.acct-line .al-assets { display: flex; margin-top: 3px; }
.acct-line .al-bar { margin: 0 6px; }

/* 花卡 / 果卡：值不为 0 时橙色加粗（0 是绝大多数账号的常态，不上色；
   营业统计表格里同一套类名 `is-hl` 也用它） */
.al-v.is-hl,
.st-table .st-num.is-hl { color: #e07b16; font-weight: 700; }

/* （原来资产行里的「/—」占位和它的 .stat-of 样式已按要求删掉 —— 水滴只显示当前值） */

/* 运行情况：不是卡片，就一行（图标 + 文字 + 数字） */
.run-line {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 2px;
}

.run-ico { flex: 0 0 auto; width: 20px; height: 20px; object-fit: contain; color: #0284c7; }
.run-label { font-size: 13px; color: var(--ink-2); }
.run-line .stat-num { font-size: 18px; }

/* 状态徽章（窄屏版）：放在「运行情况」那一行的最右（居右）。
   跟 .tag-st 同形，但 .tag-st 在深色头部里是「浅字 + 半透明底」，放到浅色内容区会看不清，
   所以这里单独一套浅底配色，只在窄屏显示（桌面端仍用标题行里那个 .tag-st）。 */
.run-st {
    display: none;
    flex: 0 0 auto;
    margin-left: auto;             /* 居右 */
    padding: 3px 11px;
    border-radius: 999px;
    background: #f1f5f7;
    color: var(--ink-3);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .3px;
    white-space: nowrap;
}

.run-st.on,
.run-st.is-online { background: var(--green-soft); color: var(--green); }
/* 离线：同上，窄屏这套也换成明确灰底 */
.run-st.is-offline { background: #e7edf2; color: #4e5e6b; }
.run-st.is-starting { background: #e8efff; color: #1d4ed8; }
.run-st.is-stopping { background: #f3ecfe; color: #6d28d9; }
.run-st.is-upgrading { background: #e2f5f9; color: #0e7490; }
.run-st.is-lost { background: #fff4e5; color: #b25e00; }
.run-st.is-banned { background: #fdecea; color: #d92d20; }
.run-st.is-dmd_abnormal { background: #fff4e5; color: #b25e00; }
.run-st.is-bad_pwd,
.run-st.is-login_limit,
.run-st.is-login_freq,
.run-st.is-kicked { background: #fff7e8; color: #b45309; }
.run-st.is-no_server,
.run-st.is-no_realname,
.run-st.is-client_refused { background: #fff7e8; color: #b45309; }
.run-st.is-other { background: #e7edf2; color: #4e5e6b; }

/* 日常活动总结：一行铺开的小格（标签左 / 数值右）；PC 3 列，窄了自动降列 */
.stat-rows {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.stat-rows li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 10px;
    border: 1px solid rgba(219, 233, 243, .95);
    border-radius: 10px;
    background: rgba(255, 255, 255, .74);   /* 磨砂白，坐在卡片浅色底上 */
    font-size: 12.5px;
    color: var(--ink-2);
    backdrop-filter: blur(2px);
    transition: background .16s ease, border-color .16s ease;
}

.stat-rows li:hover { background: #f4faff; border-color: #d3e6f5; }

.stat-rows strong {
    font-family: var(--mono);
    font-size: 13.5px;
    line-height: 1.3;
    font-weight: 600;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

/* 仪表盘营业统计：值为 0 的置灰 —— 一眼能看出「这天没数据」和「这天就是 0」 */
.stat-card .stat-num.is-zero,
.stat-card .stat-rows strong.is-zero { color: #b6c6cf; }

/* 「还没收到任何营业数据上报」时的醒目提示（两种位置共用一套配色） */
.st-hint .st-empty-tip,
.stat-empty {
    display: inline-block;
    padding: 8px 13px;
    border: 1px solid #f6e0bb;
    border-radius: 9px;
    background: #fff8ec;
    color: #8a5a00;
    font-size: 12.5px;
    line-height: 1.75;
}

.stat-empty { display: block; margin: 0 0 12px; }

.st-hint .st-empty-tip code,
.stat-empty code {
    padding: 1px 5px;
    border-radius: 4px;
    background: #fdeed7;
    font-size: 12px;
}

/* 工作区变成全屏铺满后中栏会很宽：宽屏把两块固定回设计好的列数（收益 4 列 = 4+3、活动 3 列），
   否则瓦片会被拉得很宽、列数碎成 6+1 */
@media (min-width: 1650px) {
    .stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .stat-rows { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- 移动端抽屉（PC 上彻底透明，不占位） ---------- */
.acct-drawer,
.acct-drawer .drawer-body { display: contents; }

.acct-drawer .drawer-mask,
.acct-drawer .drawer-grip,
.acct-drawer .drawer-head { display: none; }

.acct-drawer .drawer-sheet { display: contents; }

.num { font-variant-numeric: tabular-nums; font-family: var(--mono); }
.num.hi { color: #0b7a56; font-weight: 600; }
.num.gold { color: #b45309; }
.num.sky { color: #0369a1; }
.num.violet { color: #6d28d9; }
.num.rose { color: #be123c; }

.pwd {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--mono);
    color: var(--ink);
}

.copy-mini {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--ink-3);
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color .18s ease, background .18s ease, transform .28s cubic-bezier(.22, 1, .36, 1);
}

.copy-mini:hover { color: var(--green); background: rgba(15, 157, 112, .07); }

/* 两个图标叠在同一格里：点击时「复制」缩小旋出、对勾放大旋入 */
.copy-mini .ic {
    grid-area: 1 / 1;
    transition: opacity .2s ease, transform .32s cubic-bezier(.34, 1.56, .64, 1);
}

.copy-mini .ic-done {
    opacity: 0;
    transform: scale(.4) rotate(-35deg);
    color: var(--green);
}

.copy-mini.is-copied {
    color: var(--green);
    background: rgba(15, 157, 112, .1);
    transform: scale(1.08);
}

.copy-mini.is-copied .ic-copy { opacity: 0; transform: scale(.4) rotate(35deg); }
.copy-mini.is-copied .ic-done { opacity: 1; transform: none; }

.copy-mini.done::after {
    content: "\2713";
    position: absolute;
    top: -7px;
    right: -7px;
    display: grid;
    place-items: center;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--green);
    color: #fff;
    font-size: 9px;
    line-height: 1;
    animation: copy-pop .18s ease;
}

@keyframes copy-pop {
    from { opacity: 0; transform: scale(.6); }
    to { opacity: 1; transform: none; }
}

/* 挂机按钮组 */
.hangup-btns { flex-wrap: nowrap; }
.hangup-btns .btn.tiny { padding: 5px 10px; }

.row-actions { display: flex; gap: 7px; }
.inline-form { display: inline-flex; }

.empty { padding: 56px 16px !important; text-align: center; color: var(--ink-3); }
.empty svg { display: block; margin: 0 auto 10px; opacity: .4; }

/* ---------- 分页 ---------- */
.panel-foot {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 14px 20px;
    border-top: 1px solid var(--line);
    background: #fbfdfe;
}

.page-info { font-size: 12.5px; color: var(--ink-3); }
.pager { margin-left: auto; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.pg {
    display: inline-grid;
    place-items: center;
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--ink-2);
    font-size: 13px;
    transition: all .16s ease;
}

.pg:hover { border-color: #bfe8d8; color: var(--green); }
.pg.active { border-color: transparent; color: #fff; background: linear-gradient(135deg, #16b981, #0b8a5f); }
.pg.disabled { opacity: .45; pointer-events: none; }
.pg.gap { border: 0; background: transparent; color: var(--ink-3); }

/* ---------- 表单 ---------- */
.field { display: flex; flex-direction: column; gap: 7px; }
.field-label { font-size: 12.5px; color: var(--ink-2); }
.field-hint { font-size: 12px; color: var(--ink-3); }

.field-box {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
    background: #f7fafb;
    color: var(--ink-3);
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.field-box:focus-within { background: #fff; border-color: #bfe8d8; box-shadow: 0 0 0 4px rgba(46, 204, 143, .13); }

.field-box input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font-family: inherit;
    font-size: 14px;
    color: var(--ink);
}

/* 编辑账号时：账号输入框只读 —— 整块底色压淡、不进输入态（点了也不亮绿边） */
.field.is-locked .field-box,
.field.is-locked .field-box:focus-within {
    background: #eef3f6;
    border-color: #e4ebf0;
    box-shadow: none;
}

.field.is-locked .field-box input { color: var(--ink-2); cursor: default; }

/* 下拉框：跟输入框视觉一致（去掉系统默认外观，自画一个箭头） */
.field-box select {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    font-family: inherit;
    font-size: 14px;
    color: var(--ink);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    padding-right: 20px;
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b9aa3' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right center;
    background-size: 15px 15px;
}

.form-stack { display: flex; flex-direction: column; gap: 15px; }
.form-stack .btn { align-self: flex-start; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 15px; }

/* ---------- 提示 ---------- */
.alert {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    font-size: 13.5px;
    border: 1px solid transparent;
}

.alert.ok { background: #eefaf3; border-color: #ccefdc; color: #0b7a56; }
.alert.warn { background: #fffaf1; border-color: #f3e0bb; color: #b54708; }
.alert.err { background: #fef3f2; border-color: #fbd9d4; color: #b42318; }

/* ---------- 信息块 ---------- */
.kv-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 14px;
}

.kv {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 15px 16px;
    border-radius: var(--radius-sm);
    background: #f7fafb;
    border: 1px solid var(--line);
    min-width: 0;
}

.kv span { font-size: 12px; color: var(--ink-3); }
.kv strong { font-size: 14.5px; font-weight: 650; word-break: break-all; }

.badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    border: 1px solid transparent;
}

.badge.ok { background: var(--green-soft); color: #0b7a56; border-color: #cdeee0; }
.badge.gray { background: #f2f5f6; color: #64748b; border-color: #e6ebee; }
.badge.warn { background: #fff8ec; color: #b45309; border-color: #f6e0bb; }

.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 20px; align-items: start; }

/* 单列内容面板：宽屏下限制宽度，避免输入框被拉得过长 */
.panel-narrow { max-width: 540px; }

/* ---------- 游戏账号：左侧导航（分组 / 操作）+ 三栏工作区 ----------
   宽屏（≥1401px）：导航是左侧单独一栏 260px（80px 竖排 tab + 180px 内容），跟三栏留 16px 间隔；
   窄一点：导航自动变成横向一条放到工作区上方，把宽度让给三栏（tab 与内容完全一样） */
.acc-layout {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 0;
}

/* ---------- 分组：列表头第一行的下拉框 ---------- */
.col-group-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

/* 搜索时的提示（关键词保留在分组切换里） */
.grp-filter-note {
    flex: 0 1 auto;
    min-width: 0;
    font-size: 11.5px;
    color: var(--ink-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 宽屏：导航整块在上方（tab 横排在最上面一行、tab 内容在下方横向一行），
   导航 + 三栏一起受 1400px 限制并居中 */
@media (min-width: 1401px) {
    /* width:100% 必须显式写：父级是 column flex，若有 auto 外边距，宽高会塌成
       「刚好包住内容」而不是撑到上限；这里靠左对齐（不再居中），
       因为左列列表要贴住左侧导航菜单 */
    .acc-layout { width: 100%; max-width: 1780px; margin-left: 0; margin-right: 0; }
}

/* ---------- 分组下拉（列表头第一行） ---------- */
.group-rail { position: relative; flex: 0 1 auto; min-width: 0; }

.rail-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    height: 32px;
    padding: 0 8px 0 10px;
    border: 1px solid #cddde4;
    border-radius: 9px;
    background: #fff;
    color: var(--ink);
    font-family: inherit;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: border-color .16s ease, background .16s ease;
}

.rail-toggle:hover { border-color: #bfe8d8; background: #f7fdfa; }

/* 箭头永远贴在右边（左边是组名 + 数量） */
.rt-now { flex: 0 1 auto; min-width: 0; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rt-count { flex: 0 0 auto; font-family: var(--mono); font-size: 11.5px; font-weight: 600; color: var(--green); }
.rt-arrow { flex: 0 0 auto; margin-left: auto; color: var(--ink-3); transition: transform .18s ease; }
.group-rail.open .rt-arrow { transform: rotate(180deg); }

.rail-menu {
    position: absolute;
    left: 0;
    top: calc(100% + 6px);
    z-index: 40;
    min-width: 216px;
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 20px 44px -24px rgba(16, 32, 42, .55);
    animation: rail-in .14s cubic-bezier(.22, 1, .36, 1);
}

.rail-menu[hidden] { display: none; }

@keyframes rail-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: none; }
}

.rail-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 320px;
    overflow: auto;
}

.rail-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 9px;
    border-radius: 9px;
    color: var(--ink-2);
    font-size: 12.5px;
    text-decoration: none;
    transition: background .14s ease, color .14s ease;
}

.rail-item .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-item em { flex: 0 0 auto; font-style: normal; font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); }
.rail-item:hover { background: #f2f7f8; color: var(--ink); }
.rail-item.active { background: var(--green-soft); color: var(--green); font-weight: 700; }
.rail-item.active em { color: var(--green); }

.rail-foot {
    display: flex;
    gap: 5px;
    margin-top: 5px;
    padding: 6px 2px 2px;
    border-top: 1px dashed var(--line);
}

.rail-btn {
    flex: 1 1 0;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 28px;
    padding: 0 6px;
    border-radius: 8px;
    border: 1px solid #cddde4;
    background: #fff;
    color: var(--ink);
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 400;
    white-space: nowrap;
    cursor: pointer;
    transition: background .16s ease, border-color .16s ease, color .16s ease;
}

.rail-btn:hover:not(:disabled) { background: #f7fdfa; border-color: #bfe8d8; color: var(--green); }
.rail-btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.rail-btn.danger { color: #c62a1c; border-color: #f2c3bb; background: #fff5f4; font-weight: 400; }
.rail-btn.danger:hover:not(:disabled) { background: #fdeceb; border-color: #e9a99e; }

.chip.group { background: #f2f7f8; color: var(--ink-2); font-size: 12px; max-width: 150px; }

@media (max-width: 1024px) {
    /* 窄屏：只留左侧列表；详情 + 日志 收进抽屉，点账号才弹出 */
    .acct-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }

    /* 抽屉里「中 + 右」不是卡片，只用一条细线分隔 */
    .acct-pair {
        display: block;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background: transparent;
        overflow: visible;
    }

    .acct-pair > .panel-col + .panel-col { border-left: 0; }

    /* 窄屏：勾选后的操作条**不再占用分页区**，改成固定在屏幕底部的两行浮条 */
    .sel-pop {
        position: fixed;
        inset: auto 0 0 0;
        z-index: 90;
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
        background: #fff;
        box-shadow: 0 -20px 36px -24px rgba(16, 32, 42, .5);
        animation: sel-pop-up .2s cubic-bezier(.22, 1, .36, 1);
    }

    .sel-pop-txt em { max-width: 110px; }

    /* 浮条固定在底部，给页面留出等高空间，避免遮住最后几个账号 */
    body.is-sel .acct-page { padding-bottom: 96px; }

    /* 窄屏的「配置」弹层：详情 / 日志 在抽屉里，这里改成整屏面板（手机端同样不要弹出动效）。
       注意：JS 在窄屏打开它时会把它临时挂到 <body> 下 —— 抽屉里有 overflow:hidden / 滚动容器，
       iOS Safari 会按那个滚动层裁剪 fixed 后代，导致配置层被详情挡住；挂到 body 后 z-index 96 恒定高于抽屉 95。
       这里显式写 background，避免挪出 .acct-pair 后丢掉变量背景。 */
    .cfg-layer {
        position: fixed;
        inset: 0;
        z-index: 96;                  /* > 抽屉 95，< 弹窗 110 */
        border-left: 0;
        border-radius: 0;
        background: #fff;
        animation: none;

        /* 窄屏这一层会被 JS 挪到 <body> 下，就拿不到 .acct-pair 上那套主题变量了
           （头部渐变会失效 → 头部变白），所以在自己身上再声明一份（值跟 .acct-pair 一致） */
        --dp-ink: #0d2a35;
        --dp-ink-2: #17414f;
        --dp-line: #c7dbe8;
        --dp-line-soft: #d9e7f0;
        --dp-green: #0b8a5f;
    }

    /* 窄屏的加载遮罩：不上屏（手机端点账号不闪 loading，抽屉里内容很快就到） */
    .acct-loading {
        display: none;
    }

    .panel-col {
        height: auto;
        min-height: 0;
        max-height: none;
    }

    /* 手机端：列表不要内部滚动条，所有账号直接撑开、跟页面一起滚；表头也不吸顶 */
    .col-scroll { max-height: none; overflow: visible; }
    .col-body { overflow: visible; }
    .table-acct thead th { position: static; }

    /* ⚠️ 这里必须是 fixed：auto 布局下 width 只是「建议值」，长账号名 + nowrap
       会把整张表顶出屏幕（右边看不到、还带出横向滚动条）。
       fixed 布局下宽度才是硬约束：账号列吃剩余宽度，超出直接省略号截掉。 */
    .table-acct { font-size: 12.5px; table-layout: fixed; }
    .table-acct thead th { padding: 9px 7px; }
    .table-acct tbody td { padding: 9px 7px; font-size: 12.5px; }

    /* 手机端列宽：勾选列最窄，账号列吃剩余宽度（超长就截），
       等级/元宝/主线/状态 按真实内容给足，不让它们被压到换行或截断 */
    /* 宽度按实测给足（fixed 布局下不够就会被裁掉，所以窄列不能抠）：
       勾选 34 = 复选框 18 + 左右内边距 15；元宝 70 = 7 位数字 52 + 内边距 18；
       状态 70 = 4 字 50 + 内边距 14（末列右内边距 5px） */
    .table-acct thead th:nth-child(1) { width: 34px; }   /* 勾选 */
    .table-acct thead th:nth-child(2) { width: auto; }   /* 账号：剩余宽度，超出截掉 */
    .table-acct thead th:nth-child(3) { width: 42px; }   /* 等级 ≤3 位 */
    .table-acct thead th:nth-child(4) { width: 70px; }   /* 元宝 ≤7 位 */
    .table-acct thead th:nth-child(5) { width: 42px; }   /* 主线 ≤3 位 */
    .table-acct thead th:nth-child(6) { width: 70px; }   /* 状态 4 字 */

    /* 双保险：任何一列的内容都不许撑破单元格（fixed 下配合 ellipsis 生效） */
    .table-acct th,
    .table-acct td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    /* 手机端勾选列：靠内边距把勾选框周围撑开，别贴着边 */
    .table-acct tbody td:not(.col-chk) { padding-left: 9px; padding-right: 9px; }
    .table-acct th.col-chk,
    .table-acct td.col-chk { padding: 9px 6px 9px 9px; }
    .table-acct tbody td.acct-name { padding-left: 6px; }

    .acct-drawer { position: fixed; inset: 0; z-index: 95; display: none; }
    .acct-drawer.open { display: block; }

    .acct-drawer .drawer-mask {
        display: block;
        position: absolute;
        inset: 0;
        background: rgba(12, 22, 30, .46);
        animation: none;              /* 手机端不要动效：遮罩直接出现 */
    }

    .acct-drawer .drawer-sheet {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        flex-direction: column;
        height: 88vh;                 /* 高度固定（原来只写 max-height：内容少时会“缩上去”） */
        max-height: 88vh;
        border-radius: 20px 20px 0 0;
        overflow: hidden;             /* 让深色顶栏跟着圆角一起裁切 */
        background: #fff;
        box-shadow: 0 -30px 70px -30px rgba(0, 0, 0, .5);
        animation: none;              /* 手机端不要上滑弹出效果 */
    }

    /* 顶栏整体走深色系：手柄那一小条 + tab 栏合成一条深墨青渐变带，
       跟下面「账号详情 / 运行日志」的深色头部、以及整站深色主题呼应。
       ⚠️ `--dp-ink` 系列变量是挂在 `.acct-pair` 上的，抽屉顶栏在它外面，所以这里用字面值。 */
    .acct-drawer .drawer-grip {
        display: block;               /* 桌面那条 display:none 要覆盖掉，否则深色顶栏会缺一条 */
        flex: 0 0 auto;               /* 不能被内容长度顶得忽高忽低（否则切 tab 顶栏会抖一下） */
        position: relative;
        width: auto;
        height: 14px;
        margin: 0;
        border-radius: 0;
        background: #0d2a35;
    }

    .acct-drawer .drawer-grip::before {
        content: "";
        position: absolute;
        left: 50%;
        top: 6px;
        width: 40px;
        height: 4px;
        transform: translateX(-50%);
        border-radius: 99px;
        background: rgba(255, 255, 255, .26);
    }

    /* 顶栏 = 「账号详情 / 运行日志」两个 tab + 账号名 + 右侧关闭按钮 */
    .acct-drawer .drawer-head {
        flex: 0 0 auto;               /* 同上：顶栏高度固定（切 tab 时界面高度不跳） */
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 10px 10px 12px;
        border-bottom: 1px solid #377fa7;   /* 抽屉标题下边框（抽屉里只有这一条线） */
        background: linear-gradient(120deg, #0d2a35 0%, #17414f 78%, #1d4c5d 100%);
    }

    .acct-drawer .drawer-tabs {
        display: flex;
        gap: 3px;
        padding: 3px;
        border-radius: 10px;
        background: rgba(255, 255, 255, .09);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
    }

    .acct-drawer .drawer-tab {
        appearance: none;
        -webkit-appearance: none;
        border: 0;
        padding: 6px 13px;
        border-radius: 8px;
        background: transparent;
        color: #b9d2dd;
        font-size: 13.5px;
        font-weight: 600;
        line-height: 1.3;
        cursor: pointer;
    }

    .acct-drawer .drawer-tab.is-on {
        background: rgba(60, 224, 174, .18);
        color: #8ff0cb;
        box-shadow: inset 0 0 0 1px rgba(60, 224, 174, .42);
    }

    /* 账号名贴在关闭按钮左侧（不要各自 auto，否则会在中间留一大段空白） */
    .acct-drawer .drawer-sub {
        margin-left: auto;
        min-width: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: 12px;
        color: #9dbccb;
    }

    .acct-drawer .drawer-x {
        flex: 0 0 auto;
        display: grid;
        place-items: center;
        width: 30px;
        height: 30px;
        border: 0;
        border-radius: 9px;
        background: rgba(255, 255, 255, .1);
        color: #dceaf3;
        font-size: 18px;
        line-height: 1;
        cursor: pointer;
    }

    .acct-drawer .drawer-body {
        display: block;
        flex: 1 1 auto;
        min-height: 0;                /* 唯一允许伸缩/滚动的那一块 */
        overflow: auto;
        /* 故意不写 -webkit-overflow-scrolling: touch：iOS Safari 会把 fixed 后代按这层滚动容器裁剪，
           配置层（fixed）会被详情挡住；iOS 13+ 本身已经是惯性滚动，去掉它没损失 */
    }

    /* 抽屉里的两块不是独立卡片，只用一条细线分隔 */
    .acct-drawer .panel-col {
        height: auto;
        max-height: none;
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    /* 抽屉里详情标题行被隐掉了（.acct-drawer #acctDetail .col-title{display:none}），
       账号状态改在「当前自动执行任务数」那一行的右侧显示 */
    .acct-drawer #acctDetail .run-st { display: inline-flex; align-items: center; }

    /* 抽屉里两块改成顶部 tab 切换：默认只显示「账号详情」 */
    .acct-drawer #acctLogs { border-top: 0; }
    .acct-drawer .acct-pair > .panel-col[hidden] { display: none; }

    /* 抽屉里合体卡不要再带边框/圆角/阴影 —— 否则会跟抽屉标题的下边框叠成两条线 */
    .acct-drawer .acct-pair { border: 0; border-radius: 0; box-shadow: none; }
    .acct-drawer .col-head { background: transparent; }

    /* 抽屉头部已经写了账号名，详情标题就不再重复 */
    .acct-drawer #acctDetail .col-title { display: none; }
    .acct-drawer #acctDetail .col-head { padding-top: 12px; }
    .acct-drawer .col-body { padding: 14px 16px 20px; }

    /* 手机上一个数据网格两列，短一半长度 */
    .meta-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px 16px; }
    .meta-item { padding: 10px 0; }
}

/* 抽屉动效已按要求去掉（手机端不要弹出效果），下面两个 keyframes 保留供以后需要时用 */
@keyframes drawer-up {
    from { opacity: 0; transform: translateY(26px); }
    to { opacity: 1; transform: none; }
}

@keyframes drawer-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (max-width: 700px) {
    .acc-layout { gap: 14px; }

    /* 窄屏：分组下拉菜单放宽一点，好点 */
    .rail-menu { min-width: 232px; }
}

.only-mobile { display: none; }

/* ---------- 弹窗 ---------- */
.modal {
    position: fixed;
    inset: 0;
    /* 注意要高于移动端抽屉（95），否则弹层会被抽屉盖住 */
    z-index: 110;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(12, 30, 26, .48);
    backdrop-filter: blur(4px);
}

.modal.open { display: flex; }

/* 弹层主体：`.modal` 是 flex 居中容器，子元素的 margin 会把弹层顶偏。
   `slots.html` 的转让弹层用 `<form class="modal-card">`，浏览器默认给 form
   加了 `margin-block-end: 1em`，会整体偏上 8px —— 这里统一抹平。 */
.modal-card {
    margin: 0;
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    overflow-y: auto;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .6);
    animation: pop .24s cubic-bezier(.2, .9, .3, 1.1) both;
}

@keyframes pop {
    from { opacity: 0; transform: translateY(14px) scale(.98); }
    to { opacity: 1; transform: none; }
}

.modal-head {
    display: flex;
    align-items: center;
    padding: 20px 22px 14px;
    border-bottom: 1px solid var(--line);
}

.modal-head h3 { font-size: 16px; font-weight: 650; }
/* 关闭按钮：`.close` 是老写法，`.modal-x` 是 2026-11-01 起新弹层统一用的类名。
   ⚠️ 之前 `slots.html` / `card.html` 的弹层写了 `.modal-x` 但这里**根本没定义**，
   结果 × 紧贴标题 + 浏览器默认灰底凸起边框（用户反馈「关闭按钮有问题」）。 */
.modal-head .close,
.modal-head .modal-x {
    margin-left: auto;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 9px;
    background: transparent;
    font-size: 20px;
    line-height: 1;
    color: var(--ink-3);
    cursor: pointer;
    transition: background .15s, color .15s;
}

.modal-head .close:hover,
.modal-head .modal-x:hover {
    background: #f1f3f6;
    color: var(--ink-1, #1c2b27);
}
.modal-body { padding: 20px 22px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 0 22px 22px; }

/* ==========================================================================
   登录 / 注册页（2026-10-04 改版：深色沉浸 + 双栏「品牌栏 + 表单栏」）
   --------------------------------------------------------------------------
   结构：.auth-shell = [ .auth-brand（深色品牌栏，≤1024px 隐藏） + .auth-panel（浅色表单） ]
   表单内部继续用通用 `.field` / `.btn.primary` / `.plain-btn`，
   这里只做**作用域内**的尺寸与聚焦态定制，绝不动通用类（账号页弹层里也在用）。
   ========================================================================== */
.auth-body {
    display: grid;
    place-items: center;
    min-height: 100vh;
    padding: 40px 22px;
    /* 中间亮 / 四周暗：光晕锚点从左上角移到画面中心，并改用**百分比尺寸**，
       这样 1080p / 2K / 4K 下内容区都被托起来（原来固定在 at 12% -10% + 1200×700px，
       大分辨率时中间只剩一块死黑，卡片周围没有对比度） */
    background:
        radial-gradient(78% 66% at 50% 44%, rgba(31, 106, 94, .56) 0%, rgba(18, 62, 58, .32) 46%, transparent 74%),
        radial-gradient(132% 110% at 50% 40%, #124a44 0%, rgba(16, 58, 55, .66) 38%, transparent 72%),
        linear-gradient(168deg, #061015 0%, #0a2029 48%, #050f14 100%);
    overflow-x: hidden;
}

/* 极光：三层不同色相慢速漂移，只做氛围不抢内容 */
.auth-aurora { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.auth-aurora i { position: absolute; display: block; border-radius: 50%; filter: blur(110px); opacity: .5; }
.au-1 { width: 680px; height: 680px; top: -14%; left: 2%; background: rgba(16, 185, 129, .40); animation: auDrift 22s ease-in-out infinite; }
.au-2 { width: 560px; height: 560px; bottom: -18%; right: 5%; background: rgba(56, 189, 248, .28); animation: auDrift 26s ease-in-out infinite reverse; }
.au-3 { width: 500px; height: 500px; top: 30%; right: 26%; background: rgba(212, 175, 55, .16); animation: auDrift 32s ease-in-out infinite; }

@keyframes auDrift {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(46px, -34px, 0) scale(1.12); }
}

.auth-shell {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.04fr 1fr;
    width: 100%;
    max-width: 1000px;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 70px 130px -60px rgba(0, 0, 0, .95), 0 0 0 1px rgba(255, 255, 255, .07);
    animation: authRise .6s cubic-bezier(.21, .9, .28, 1) both;
}

@keyframes authRise {
    from { opacity: 0; transform: translateY(26px) scale(.99); }
    to { opacity: 1; transform: none; }
}

/* ---------- 左：品牌栏 ---------- */
.auth-brand {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 48px 44px 38px;
    color: #eaf6f6;
    background: linear-gradient(168deg, #071c22 0%, #0a2a33 52%, #061c26 100%);
    overflow: hidden;
}

/* 细网格 + 顶部一线高光：深色面板要有质感，不能是一块死黑 */
.auth-brand::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
    background-size: 34px 34px;
    -webkit-mask-image: radial-gradient(120% 90% at 0% 0%, #000 20%, transparent 78%);
    mask-image: radial-gradient(120% 90% at 0% 0%, #000 20%, transparent 78%);
}

.auth-brand::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(16, 185, 129, .75), rgba(212, 175, 55, .5), transparent);
}

.brand-top { position: relative; display: flex; align-items: center; gap: 12px; }

.brand-logo {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    color: #04201a;
    /* ⚠️ 登录/注册页图标保持原样（2026-10-04 复原）：浓薄荷渐变 + 绿色投影，请勿改动 */
    background: linear-gradient(140deg, #d9f7ea, #6fe3bd 60%, #16a97b);
    box-shadow: 0 16px 30px -14px rgba(16, 185, 129, .9);
}

.brand-top strong { font-size: 19px; font-weight: 700; letter-spacing: 2.4px; }

/* 品牌大标题：字号加大 + 流动渐变（银白 → 薄荷 → 翡翠 → 香槟金，8s 来回扫一遍） */
.brand-title {
    position: relative;
    margin: 44px 0 0;
    font-size: 41px;
    line-height: 1.22;
    font-weight: 800;
    letter-spacing: .6px;
    background: linear-gradient(100deg, #ffffff 0%, #d6f6e6 20%, #7ff0c4 42%, #ffd98a 66%, #ffffff 100%);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: brandShine 8s ease-in-out infinite;
}

@keyframes brandShine {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* 第二行标语：另起一行、小一号；静态渐变（跟着一起动会晃眼） */
.brand-title em {
    display: block;
    margin-top: 12px;
    font-size: 21px;
    font-weight: 600;
    font-style: normal;
    letter-spacing: 1.2px;
    background: linear-gradient(100deg, #7ff0c4 0%, #d9c07a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.brand-desc {
    position: relative;
    margin: 16px 0 0;
    max-width: 30em;
    font-size: 13.5px;
    line-height: 1.85;
    color: #9dbcbf;
}

.brand-points {
    position: relative;
    margin: 26px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.brand-points li { display: flex; align-items: center; gap: 9px; font-size: 13px; color: #b9d3d6; }

.brand-points li::before {
    content: "";
    flex: 0 0 auto;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: linear-gradient(140deg, #7ff0c4, #16a97b);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, .16);
}

.brand-copy { position: relative; margin: auto 0 0; padding-top: 30px; font-size: 12px; letter-spacing: .4px; color: #5c7d84; }

/* ---------- 右：表单栏 ---------- */
.auth-panel {
    display: flex;
    flex-direction: column;
    padding: 48px 44px 34px;
    background: linear-gradient(180deg, #ffffff 0%, #f6fafb 100%);
}

/* 窄屏藏掉品牌栏之后，用这个小标记顶上（PC 不显示） */
.auth-panel-logo { display: none; align-items: center; gap: 10px; margin-bottom: 24px; }
.auth-panel-logo .brand-logo { width: 40px; height: 40px; border-radius: 12px; }
.auth-panel-logo strong { font-size: 17px; font-weight: 700; letter-spacing: 1.6px; color: var(--ink); }

.auth-panel-head { margin-bottom: 26px; }
.auth-panel-head h2 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: .6px; color: var(--ink); }
.auth-panel-head p { margin: 8px 0 0; font-size: 13px; color: var(--ink-3); letter-spacing: .3px; }

.auth-form { display: flex; flex-direction: column; gap: 16px; }

/* 作用域内的控件微调：更方、聚焦时翡翠描边（通用 .field 保持原样） */
.auth-panel .field-label { font-size: 12.5px; letter-spacing: .4px; }
.auth-panel .field-box { border-radius: 13px; }
.auth-panel .field-box:focus-within { border-color: rgba(16, 185, 129, .55); box-shadow: 0 0 0 4px rgba(16, 185, 129, .12); }
.auth-panel .btn.primary.block { height: 48px; border-radius: 13px; font-size: 15px; letter-spacing: 3px; }

.auth-alert {
    padding: 11px 14px;
    border-radius: 12px;
    background: #fef3f2;
    border: 1px solid #fbd9d4;
    color: #b42318;
    font-size: 13px;
}

.auth-alert.ok {
    background: #effaf3;
    border-color: #cdeddc;
    color: #0b7a56;
}

/* 登录 / 注册页底部的互相切换（「还没有账号？立即注册」/「已有账号？去登录」） */
.auth-switch { margin: 4px 0 0; text-align: center; font-size: 13px; color: var(--ink-3); padding-top: 20px;}

.auth-switch a {
    color: #0b7a56;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(15, 157, 112, .35);
}

.auth-switch a:hover { border-bottom-color: var(--green); }

.auth-foot {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 26px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
    font-size: 12px;
    color: var(--ink-3);
}

.plain-btn {
    border: 0;
    background: transparent;
    color: var(--green);
    font-size: 12.5px;
    font-family: inherit;
    cursor: pointer;
    padding: 0 2px;
}

/* ---------- 面板头部按钮组 ---------- */
.panel-title { min-width: 0; }
.head-btns { display: flex; gap: 9px; }

/* ---------- 批量导入：粘贴框（不再上传文件） ----------
 * 以前这里是个 .file-field（虚线大框 + 隐藏的 input[type=file]）。
 * 现在不允许任何文件上传，用户直接在 Excel 里选中两列复制粘贴 ——
 * 框用等宽字体，列对不齐也能一眼看出粘歪了。 */
.import-text {
    display: block;
    width: 100%;
    min-height: 172px;
    padding: 11px 13px;
    border: 1px solid #d7e5ee;
    border-radius: var(--radius-sm);
    background: #fbfdff;
    color: var(--ink-2);
    font-family: var(--mono);
    font-size: 13px;
    line-height: 1.7;
    resize: vertical;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.import-text::placeholder { color: #9fb3c0; }
.import-text:hover { border-color: #bcd6e6; }

.import-text:focus {
    outline: none;
    border-color: #7fd3ae;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(46, 204, 143, .16);
}

/* 「已识别 N 行」：超过 500 行标红，提醒要拆开粘 */
.field-hint b[data-import-count] { color: #0b7a56; font-weight: 650; }
.field-hint b[data-import-count].is-over { color: #d92d20; }

/* 「N 行只有账号没密码」：粘完立刻报出来（账号和密码都不允许为空），
   单独换一行显示，不然挤在「已识别 N 行」后面看不清 */
.field-hint .import-miss {
    display: block;
    margin-top: 3px;
    color: #d92d20;
    font-weight: 600;
}

.tips { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--ink-2); line-height: 1.7; }
.tips b { color: #0b7a56; }

/* ---------- 导入结果（弹层里就地展开，列出重复 / 格式不对的账号） ---------- */
.import-result {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 13px 15px;
    border-radius: var(--radius-sm);
    border: 1px solid #cfe0e4;
    background: #f9fcfd;
    font-size: 13px;
}

.import-result.is-ok { border-color: #ccefdc; background: #f5fdf9; }
.import-result.is-warn { border-color: #f3e0bb; background: #fffaf1; }

.ir-head { font-weight: 700; font-size: 13.5px; color: var(--ink); }

.ir-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    color: var(--ink-2);
}

.ir-row .ir-num {
    min-width: 26px;
    font-size: 16px;
    font-weight: 700;
    color: #0b7a56;
    font-variant-numeric: tabular-nums;
}

.ir-row.warn .ir-num { color: #b45309; }
.ir-row.err .ir-num { color: #b42318; }

.import-result.is-warn .ir-row:first-of-type .ir-num { color: #b45309; }

/* 账号名一长串，用 flex 容器自然折行，不要撑破弹层 */
.ir-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 2px 0 2px 34px;
    max-height: 168px;
    overflow-y: auto;
}

.ir-list code {
    padding: 2px 8px;
    border-radius: 6px;
    background: #eef3f6;
    font-family: var(--mono);
    font-size: 12px;
    color: var(--ink-2);
    word-break: break-all;
}

.ir-list em { font-style: normal; font-size: 12px; color: var(--ink-3); align-self: center; }

.ir-tip { font-size: 12px; color: var(--ink-3); }

/* 字段级错误（新增 / 编辑账号弹层） */
.field-error {
    font-size: 12px;
    color: #b42318;
    margin-top: 2px;
}

.field.has-error .field-box { border-color: #f3c6c0; background: #fff8f7; }
.field.has-error .field-box input { color: #b42318; }

/* ==========================================================================
   响应式
   ========================================================================== */

/* ---------- 桌面窄屏（1025~1799px）：侧栏收成「图标条」----------
   需求：屏幕宽度低于 1800px 时把最左侧导航菜单折叠起来，只留图标。
   做法：只在这段媒体查询里覆盖宽度 / 内边距 / 文字显隐 ——
   ≥1800px 的完整侧栏、≤1024px 的离屏抽屉（下面那段）两套逻辑都不动。

   ⚠️ 用 1799.98px 而不是 1799px：媒体查询支持小数，浏览器缩放 / 非整数
      视口宽（如 1799.6px）不会掉进两段之间的 1px 空档。
   ⚠️ 文字是「视觉隐藏」不是 display:none —— 读屏软件还要靠它念出链接名，
      鼠标悬停靠 <a> 上的 title 提示（见 layout/sidebar.html）。 */
@media (min-width: 1025px) and (max-width: 1799.98px) {
    .sidebar {
        flex: 0 0 76px;
        width: 76px;
        padding: 22px 12px 18px;
    }

    /* 品牌区只留 🐷 图标 */
    .brand { justify-content: center; padding: 4px 0 18px; }
    .brand-text { display: none; }

    /* 分组小标题（总览 / 账号 / 我的）变成一条细分隔线：
       保留分组的视觉节奏，但不再占一行文字的高度和宽度 */
    .nav-label {
        height: 1px;
        margin: 9px 10px 7px;
        padding: 0;
        overflow: hidden;
        font-size: 0;
        letter-spacing: 0;
        color: transparent;
        background: var(--line);
    }

    /* 导航项：图标居中，去掉文字占的横向空间 */
    .nav-item {
        justify-content: center;
        gap: 0;
        padding: 11px 0;
    }

    .nav-item > span {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
    }

    /* 条太窄，hover 再左右位移会「晃」，只留底色变化 */
    .nav-item:hover { transform: none; background: #f4f8f9; }

    /* 选中态左侧那道光条：贴到侧栏左边缘 */
    .nav-item.active::before { left: -12px; }

    /* 底部会员卡（你好，xxx + 授权到期）76px 放不下，整块收掉 ——
       会员名在右上角 topbar 的 user-chip 里已经有了 */
    .sidebar-foot { display: none; }
}

@media (max-width: 1024px) {
    .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        z-index: 60;
        transform: translateX(-100%);
        transition: transform .26s cubic-bezier(.4, 0, .2, 1);
        box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .5);
        width: 272px;
        max-width: 84vw;
    }

    .shell.nav-open .sidebar { transform: translateX(0); }

    .sidebar-mask {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 55;
        background: rgba(10, 30, 26, .45);
        opacity: 0;
        pointer-events: none;
        transition: opacity .26s ease;
    }

    .shell.nav-open .sidebar-mask { opacity: 1; pointer-events: auto; }

    .only-mobile { display: grid; }
    .topbar { padding: 14px 18px; gap: 12px; }
    .content { padding: 18px 18px 16px; gap: 16px; }
    .grid-2 { grid-template-columns: 1fr; }

    .panel-head { flex-direction: column; align-items: stretch; gap: 12px; }
    .head-actions { margin-left: 0; width: 100%; flex-wrap: wrap; }
    .search { flex: 1 1 260px; margin-left: 0; }
    .search-box { flex: 1; min-width: 0; }
    .head-btns { flex: 0 0 auto; }
}

@media (max-width: 640px) {
    body { -webkit-tap-highlight-color: transparent; }

    .topbar { padding: 12px 14px; gap: 10px; }
    .topbar-title h1 { font-size: 17px; }
    .topbar-title p { display: none; }
    .user-chip { display: none; }
    .content { padding: 14px 12px 14px; gap: 14px; }
    .icon-btn { width: 36px; height: 36px; }

    /* 营业统计卡片：移动端再收一收；收益 2 列、活动 2 列 */
    .stat-head { padding: 9px 12px 8px; }
    .stat-body { gap: 8px; padding: 10px 12px; }
    .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stat-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* 头部操作区：搜索占一行，两个按钮并排 */
    .panel-head { padding: 15px 14px; }
    .search { flex: 1 1 100%; width: 100%; }
    .search-box { min-width: 0; width: 100%; }
    .head-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
    .head-btns .btn { width: 100%; }
    .head-actions .search .btn { padding: 9px 13px; }

    /* 表格：横向滚动 + 更紧凑（保证操作列有位置，行高不虚胖） */
    .table-wrap { -webkit-overflow-scrolling: touch; }
    .table.table-wide { min-width: 760px; }
    .table thead th { padding: 10px 12px; font-size: 11.5px; }
    .table tbody td { padding: 11px 12px; font-size: 13px; }
    .w-act { width: 134px; }
    .btn.tiny { padding: 5px 10px; font-size: 12px; }
    .row-actions { flex-wrap: nowrap; gap: 6px; }
    .empty { padding: 40px 12px !important; }

    /* 分页 */
    .panel-foot { padding: 12px 14px; }
    .pager { margin-left: 0; width: 100%; justify-content: center; }
    .pg { min-width: 32px; height: 32px; font-size: 12.5px; }

    /* 信息块 */
    .kv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .kv { padding: 12px; }
    .kv strong { font-size: 13.5px; }

    /* 弹窗：贴近全屏 */
    .modal { padding: 10px; align-items: flex-end; }
    .modal-card { max-width: 100%; max-height: 94vh; border-radius: 18px; }
    .modal-head { padding: 16px 16px 12px; }
    .modal-body { padding: 16px; }
    .modal-foot { padding: 0 16px calc(16px + env(safe-area-inset-bottom)); }
    .modal-foot .btn { flex: 1; }
    .file-face { padding: 22px 14px; }

    /* 表单：16px 避免 iOS 聚焦缩放 */
    .field-box input, .field-box select, .search-box input, .field-box { font-size: 16px; }
    .field-box { padding: 10px 13px; }
    .form-stack .btn { align-self: stretch; }

    /* 登录页 */
    /* 登录 / 注册：单栏（藏品牌栏，改用 .panel-logo），间距收一档 */
    .auth-body { padding: 18px 14px calc(18px + env(safe-area-inset-bottom)); }
    .auth-shell { grid-template-columns: 1fr; border-radius: 22px; }
    .auth-brand { display: none; }
    .auth-panel-logo { display: flex; }
    .auth-panel { padding: 30px 22px 26px; }
    .auth-panel-head { margin-bottom: 20px; }
    .auth-panel-head h2 { font-size: 22px; }
    .auth-aurora i { opacity: .32; }
}

@media (max-width: 420px) {
    .kv-grid { grid-template-columns: 1fr 1fr; }
    .kv strong { word-break: break-word; }

    /* 极窄屏隐藏次要列（给主列留空间），带 hide-xs 的列才会隐藏 */
    .table.table-wide { min-width: 700px; }
    .panel .table.table-accounts { min-width: 1120px; }
    .hide-xs { display: none; }
}

/* ==========================================================================
   详情 / 日志区整体「大一号」：区域内所有字号 +2px，按钮 / 标签 / tab / 图标同步放大
   --------------------------------------------------------------------------
   · 只作用于「账号详情 + 运行日志」合体卡（`.acct-pair`），左侧账号列表完全不受影响；
   · 想整体再调大/调小，只改这一段（每条后面的注释是原来的值，方便对照）。
   ========================================================================== */

/* 头部：标题 / 账号名 / 状态标签 / 复制按钮 */
.acct-pair .col-title h2 { font-size: 15.5px; }                       /* 原 13.5px */
.acct-pair .col-count { font-size: 13.5px; }                          /* 原 11.5px */
.acct-pair #acctDetail .col-count.is-acc { font-size: 16px; }         /* 详情里那个账号名：原 14px */
.acct-pair .tag-st { font-size: 13.5px; padding: 4px 12px; }           /* 原 11.5px / 3px 11px */
.acct-pair .copy-mini { width: 24px; height: 24px; }                   /* 原 22px */
.acct-pair .copy-mini .ic { width: 16px; height: 16px; }               /* 原 14px */

/* 头部右侧按钮（启动 / 停止 / 配置 / 编辑 / 删除） */
.acct-pair .col-head.row .col-tools .btn.tiny { font-size: 14px; padding: 6px 12px; }  /* 原 12px / 5px 9px */

/* 顶部功能 tab（仪表盘 / 花朵种植 …） */
.acct-pair .dt-tabs { padding: 7px 12px; }
.acct-pair .dt-tab { font-size: 14.5px; padding: 6px 8px; }             /* 原 12.5px / 6px 11px */

/* 卡片标题 / 小节标题 */
.acct-pair .stat-head h3 { font-size: 15px; }                          /* 原 13px */
.acct-pair .stat-sub { font-size: 14.5px; }                            /* 原 12.5px */

/* 日期胶囊（今天 / 昨天 / 具体日期） */
.acct-pair .day-tab { font-size: 14px; padding: 4px 12px; }            /* 原 12px / 3px 11px */

/* 收益瓦片 */
.acct-pair .stat-label { font-size: 13.5px; }                          /* 原 11.5px */
.acct-pair .stat-num { font-size: 21px; }                              /* 原 19px */

/* 运行情况那一行（图标 + 当前自动执行任务数） */
.acct-pair .run-ico { width: 32px; height: 32px; }                     /* 原 16px */
.acct-pair .run-label { font-size: 15px; }                             /* 原 13px */
.acct-pair .run-line .stat-num { font-size: 20px; }                    /* 原 18px */

/* 账号信息那一行（等级 / 区服.昵称 [公会] 丨 水滴 金币 元宝 主线） */
.acct-pair .acct-line { font-size: 15px; }                             /* 原 13px */
.acct-pair .al-lv { font-size: 14.5px; }                           /* 原 12.5px（现在跟区服同款：等宽灰字，无装饰） */
.acct-pair .al-server { font-size: 14.5px; }                           /* 原 12.5px */
.acct-pair .al-nick { font-size: 15.5px; }                             /* 原 13.5px */
.acct-pair .al-guild { font-size: 14.5px; }                            /* 原 12.5px */
.acct-pair .al-div { height: 14px; }                                   /* 原 12px */
.acct-pair .al-k { font-size: 14.5px; }                                /* 原 12.5px */
.acct-pair .al-v { font-size: 15.5px; }                                /* 原 13.5px */

/* 日常活动总结小格 */
.acct-pair .stat-rows li { font-size: 14.5px; padding: 7px 12px; }     /* 原 12.5px / 6px 10px */
.acct-pair .stat-rows strong { font-size: 15.5px; }                    /* 原 13.5px */

/* 空状态（详情「请选择左侧账号」/ 日志「暂无日志」/ 各 tab 占位） */
.acct-pair .placeholder svg { width: 34px; height: 34px; }             /* 原 30px */
.acct-pair .placeholder strong { font-size: 15px; }                    /* 原 13px */
.acct-pair .placeholder span { font-size: 14px; max-width: 320px; }    /* 原 12px / 280px */
.acct-pair .dt-empty { font-size: 14.5px; }                            /* 原 12.5px */

/* ---------- 窄屏（≤1024px）：账号信息换两行 ----------
   第一行「区服·昵称 [公会]·等级」，第二行「水滴 / 金币 / 元宝 / 主线」；
   竖线分隔符在换行后没有意义，直接隐掉。 */
@media (max-width: 1024px) {
    .acct-line .al-who { display: block; white-space: normal; }
    .acct-line .al-div { display: none; }

    /* 第二行是资产区：水滴 / 金币 / 元宝 / 主线 / 花卡 / 果卡。
       ⚠️ 加了两张卡之后（2026-10-04）6 项在手机上**一行放不下**了 ——
       原来「禁止换行 + 整行横向滚动」的做法要滑很久才看得到花卡 / 果卡，
       所以窄屏改成**允许折行**（两行排完，谁也不用横向滑），竖线留白也收窄。 */
    .acct-line .al-assets { display: flex; flex-wrap: wrap; overflow-x: visible; row-gap: 2px; margin-top: 2px; }
    .acct-line .al-bar { margin: 0 5px; }
}

/* ==========================================================================
   账号详情 / 运行日志区重配色：「深色头部 + 浅色内容」三段式
   --------------------------------------------------------------------------
   配色思路（加重 + 层次 + 差异化）
     ① 深墨青头部（#0d2a35 → #17414f）：两张卡的标题条统一压深，跟页面其它白底区域拉开；
     ② 中板色功能条（#edf4f9 → #e4eef6）：tab 条、日期轨道；
     ③ 内容层：中栏纯白（视觉焦点）、右栏浅板色（#e9f1f7 → #f3f8fc），营业统计卡片带青绿柔光。
   所有变量都收在 .acct-pair 上，想换色只改下面这 10 个变量即可。
   ⚠️ 这一整段可以整块删掉（详见 backups/theme-20260927-2300/RESTORE.md）
   ========================================================================== */
.acct-pair {
    /* —— 主题变量 —— */
    --dp-ink: #0d2a35;         /* 头部深色（左） */
    --dp-ink-2: #17414f;       /* 头部深色（右） */
    --dp-line: #c7dbe8;        /* 主描边 */
    --dp-line-soft: #d9e7f0;   /* 次级描边 */
    --dp-tint: #e9f1f7;        /* 浅板色 */
    --dp-tint-2: #f3f8fc;      /* 浅板色（浅端） */
    --dp-text: #0b2630;        /* 正文主色 */
    --dp-muted: #5f7b8a;       /* 次要文字 */
    --dp-green: #0b8a5f;       /* 数值绿（比原品牌绿更深一档） */
    --dp-mint: #3ce0ae;        /* 深色底上的提亮绿 */

    border: 1px solid var(--dp-line);
    background: #fff;
    box-shadow: 0 22px 48px -30px rgba(10, 37, 49, .5);
}

.acct-pair > .panel-col + .panel-col { border-left: 0; }   /* 竖线改由 #acctLogs::before 画（见下），border 会整条贯穿、标题区那段会漏出淡色 */

/* 整条分栏竖线：正文区淡色（#dceaf3），标题区那一小段由头部的 ::before 盖成深色 */
.acct-pair #acctLogs { position: relative; }

.acct-pair #acctLogs::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    background: #dceaf3;
}

/* ③ 内容层：中栏纯白 + 两侧极轻内阴影（更立体）、右栏浅板色（比原来重一档） */
.acct-pair #acctDetail {
    background: #fff;
    box-shadow: inset 16px 0 22px -26px rgba(10, 37, 49, .45),
                inset -16px 0 22px -26px rgba(10, 37, 49, .35);
}

.acct-pair #acctLogs { background: linear-gradient(180deg, #f1f7fb 0%, #f9fcfe 100%); }   /* 内容区底色比原来浅一档 */

/* 标题区那一段竖线：只在两个标题之间的高度内画 1px，颜色比两侧深头部更浅 */
.acct-pair #acctLogs .col-head { position: relative; }

.acct-pair #acctLogs .col-head::before {
    content: "";
    position: absolute;
    left: 0;                   /* 边框已去掉，直接落在分界线上 */
    top: 0;
    bottom: 0;
    width: 1px;                /* 细一点才“不明显” */
    background: #4a8698;       /* 浅一档的蓝灰：比两侧深头部亮，只是一条淡淡的线 */
}

/* ① 深色头部：两张卡统一（id 选择器要压过原有的 #acctDetail / #acctLogs .col-head） */
.acct-pair #acctDetail .col-head,
.acct-pair #acctLogs .col-head {
    min-height: 58px;              /* 两张卡的头部高度强制一致（详情里有按钮，原来会被撑到 57px） */
    padding: 11px 14px 11px 18px;
    border-bottom: 1px solid rgba(0, 0, 0, .45);   /* 标题下面那条线加深一点 */
    background: linear-gradient(120deg, var(--dp-ink) 0%, var(--dp-ink-2) 80%, #1d4c5d 100%);
    color: #e9f6fc;
}

.acct-pair .col-title h2 { color: #cddde6; font-weight: 600; }
.acct-pair .col-title .v-sep { background: rgba(255, 255, 255, .26); }
.acct-pair #acctDetail .col-count.is-acc { color: #fff; font-weight: 700; }
.acct-pair #acctLogs .col-count { color: #9dc4d4; }
.acct-pair .copy-mini { color: #a6c8d7; }
.acct-pair .copy-mini:hover { color: #fff; background: rgba(255, 255, 255, .14); }

/* 窄屏（抽屉里）：详情头部那条「启动 / 停止 / 配置 / 编辑 / 删除」行底色浅一档 */
@media (max-width: 1024px) {
    .acct-pair #acctDetail .col-head {
        background: linear-gradient(120deg, #224e5e 0%, #2d6274 80%, #38778b 100%);
    }
}

/* 状态标签：深底上重做一套 */
.acct-pair .tag-st { border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .12); color: #cfe4ee; }
.acct-pair .tag-st.on,
.acct-pair .tag-st.is-online { border-color: rgba(60, 224, 174, .42); background: rgba(60, 224, 174, .16); color: #7df0cc; }
/* 离线：深色头部里默认是半透明白（跟旁边的按钮一个色），看不出状态；
 * 换成灰蓝半透明，一眼能认出来「没在跑」 */
.acct-pair .tag-st.is-offline { border-color: rgba(148, 163, 184, .52); background: rgba(148, 163, 184, .24); color: #d6dfe7; }
.acct-pair .tag-st.is-starting { border-color: rgba(96, 165, 250, .5); background: rgba(59, 130, 246, .24); color: #bfdbfe; }
.acct-pair .tag-st.is-stopping { border-color: rgba(167, 139, 250, .5); background: rgba(139, 92, 246, .24); color: #ddd6fe; }
.acct-pair .tag-st.is-upgrading { border-color: rgba(34, 211, 238, .5); background: rgba(34, 211, 238, .22); color: #a5f3fc; }
.acct-pair .tag-st.is-lost { border-color: rgba(251, 191, 36, .5); background: rgba(245, 158, 11, .22); color: #ffd98a; }
.acct-pair .tag-st.is-banned { border-color: rgba(248, 113, 113, .42); background: rgba(248, 113, 113, .18); color: #ffc2c2; }
.acct-pair .tag-st.is-dmd_abnormal { border-color: rgba(251, 191, 36, .4); background: rgba(251, 191, 36, .16); color: #ffd98a; }
.acct-pair .tag-st.is-bad_pwd,
.acct-pair .tag-st.is-login_limit,
.acct-pair .tag-st.is-login_freq,
.acct-pair .tag-st.is-kicked { border-color: rgba(251, 146, 60, .38); background: rgba(251, 191, 36, .14); color: #ffd28a; }

/* 头部右侧 5 个按钮：深底幽灵按钮（启动 = 亮绿实心，删除 = 红调） */
.acct-pair .col-head.row .col-tools .btn.tiny {
    height: 34px;
    padding: 0 13px;
    border: 1px solid rgba(255, 255, 255, .2);
    background: rgba(255, 255, 255, .07);
    color: #e4f2f9;
    font-size: 13.5px;
    box-shadow: none;
}

.acct-pair .col-head.row .col-tools .btn.tiny:hover { border-color: rgba(255, 255, 255, .32); background: rgba(255, 255, 255, .15); color: #fff; }
.acct-pair .col-head.row .col-tools .btn.tiny:disabled { opacity: .42; }

.acct-pair .col-head.row .col-tools .btn.tiny.primary {
    border-color: transparent;
    background: #18b184;          /* 纯色，不用渐变（原来是 135deg 绿渐变 + 绿色投影） */
    color: #fff;                  /* 文字白色 */
    font-weight: 700;
    box-shadow: none;
}

.acct-pair .col-head.row .col-tools .btn.tiny.primary:hover { background: #1cc190; color: #fff; }
.acct-pair .col-head.row .col-tools .btn.tiny.primary.is-loading::after { border-color: rgba(4, 36, 26, .35); border-top-color: #04241a; }

.acct-pair .col-head.row .col-tools .btn.tiny.danger { border-color: rgba(248, 113, 113, .42); background: rgba(248, 113, 113, .14); color: #ffc9c9; }
.acct-pair .col-head.row .col-tools .btn.tiny.danger:hover { border-color: rgba(248, 113, 113, .62); background: rgba(248, 113, 113, .26); color: #fff; }

/* ② 功能 tab 条：中板色，选中项白底绿字（夹在深头部和白内容之间，形成三段层次） */
.acct-pair .dt-tabs {
    padding: 7px 12px;
    border-bottom: 1px solid var(--dp-line-soft);
    background: linear-gradient(180deg, #edf4f9, #e4eef6);
}

.acct-pair .dt-tab { color: #47657a; }
.acct-pair .dt-tab:hover { color: var(--dp-green); }
.acct-pair .dt-tab.is-on {
    background: #fff;
    color: var(--dp-green);
    font-weight: 700;
    box-shadow: inset 0 0 0 1px #b6e3d0;   /* 选中的边框（用 inset 描边画，不占尺寸、也没有投影） */
}

/* 正文：文字整体加深，数值绿深一档 */
.acct-pair .run-label { color: #1f3f4d; }
.acct-pair .run-ico { color: #0d8bbd; }
.acct-pair .run-line .stat-num { color: var(--dp-green); }
.acct-pair .acct-line { color: #34576a; }
.acct-pair .al-server,
.acct-pair .al-lv { color: var(--dp-muted); }
.acct-pair .al-nick { color: var(--dp-text); }
.acct-pair .al-dot { color: #7d97a5; }
.acct-pair .al-guild { color: #4f7488; }
.acct-pair .al-div { background: #c6d9e4; }
.acct-pair .al-k { color: var(--dp-muted); }
.acct-pair .al-v { color: var(--dp-green); }
/* 花卡 / 果卡非 0：橙色加粗。
   ⚠️ 必须写在上面两行**之后**：`.acct-pair .al-v` 与 `.al-v.is-hl` 特异性相同，
   同分时靠顺序决胜，写在前面就被主题色盖掉了（踩过）。 */
.acct-pair .al-v.is-hl { color: #e07b16; font-weight: 700; }

/* 营业统计卡片：描边加重、青绿柔光更明显、标题/瓦片都跟着沉下来 */
.acct-pair .stat-card {
    border-color: #bcd4e3;
    background:
        radial-gradient(120% 92% at 0% 0%, rgba(14, 116, 144, .055), rgba(14, 116, 144, 0) 58%),
        radial-gradient(110% 92% at 100% 100%, rgba(11, 138, 95, .05), rgba(11, 138, 95, 0) 60%),
        linear-gradient(160deg, #fafdff 0%, #f2faff 54%, #f4fcfa 100%);
    box-shadow: 0 14px 30px -24px rgba(10, 37, 49, .6);
}

.acct-pair .stat-card::before {
    height: 3px;
    background: linear-gradient(90deg, rgba(14, 116, 144, .95), rgba(11, 138, 95, .6) 55%, rgba(11, 138, 95, 0));
}

.acct-pair .stat-head {
    border-bottom-color: #d7e5ef;
    background: linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(240, 247, 252, .82));
}

.acct-pair .stat-head h3 { color: #29586e; font-weight: 600; }
.acct-pair .stat-head h3::before { width: 3px; height: 12px; margin-top: -6px; background: linear-gradient(180deg, #3ba9dd, #0d7ea9); }
.acct-pair .stat-days { border-color: #cfe1ec; background: #fff; }
.acct-pair .day-tab { color: #4a6b7e; }
.acct-pair .day-tab + .day-tab { border-left-color: #dbe8f1; }
.acct-pair .day-tab:hover { color: #0d7ea9; }
.acct-pair .day-tab.is-on { background: linear-gradient(180deg, #eaf7ff, #d9eefb); color: #085d87; box-shadow: inset 0 0 0 1px #a9d6ef; }
.acct-pair .stat-sub { color: #2f566a; }
.acct-pair .stat-sub::before { background: rgba(11, 138, 95, .65); }
.acct-pair .stat-item { border-color: #c8dae7; box-shadow: 0 1px 3px rgba(10, 37, 49, .08); }
.acct-pair .stat-label { color: #61808f; }
.acct-pair .stat-num { color: var(--dp-green); }
.acct-pair .stat-rows li { border-color: #d3e4ee; background: rgba(255, 255, 255, .94); color: #33586b; }
.acct-pair .stat-rows strong { color: var(--dp-text); }
.acct-pair .stat-rows li:hover { border-color: #bcd8ea; background: #fff; }

/* 空状态 / 占位 */
.acct-pair .placeholder { color: var(--dp-muted); }
.acct-pair .placeholder strong { color: #2b4c5c; }
.acct-pair .dt-empty { border-color: #d3e3ee; background: #f4f9fc; color: var(--dp-muted); }

/* 「营业统计」默认层：头部同样压深，表格层次加重 */
.acct-pair .st-head {
    min-height: 52px;
    padding: 10px 16px;
    border-bottom: 1px solid rgba(0, 0, 0, .26);
    background: linear-gradient(120deg, var(--dp-ink) 0%, var(--dp-ink-2) 80%, #1d4c5d 100%);
}

.acct-pair .st-title { color: #fff; }
.acct-pair .st-sub { color: #a6c9d8; }
.acct-pair .st-sub b { color: var(--dp-mint); }
.acct-pair .st-days { border-color: rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .1); }
.acct-pair .st-days .day-tab { color: #cfe4ee; }
.acct-pair .st-days .day-tab + .day-tab { border-left-color: rgba(255, 255, 255, .18); }
.acct-pair .st-days .day-tab:hover { color: #fff; }
.acct-pair .st-days .day-tab.is-on { background: #fff; color: #0b7a56; font-weight: 700; box-shadow: none; }
.acct-pair .st-hint { border-bottom-color: var(--dp-line-soft); background: #f5f9fc; color: #5d7887; }
.acct-pair .st-hint em { color: #a3580a; }
.acct-pair .st-table th { border-bottom-color: var(--dp-line); background: #e2edf5; color: #33586b; }
.acct-pair .st-table th.is-on { background: #cfe6f5; color: #075985; }
.acct-pair .st-table th.is-sortable button:hover { background: #d3e6f3; color: #075985; }
.acct-pair .st-table td { border-bottom-color: #e9f2f8; color: #33586b; }
.acct-pair .st-table tbody tr:nth-child(even) { background: #f6fafd; }
.acct-pair .st-table tbody tr:hover { background: #eef7fe; }
.acct-pair .st-acc { color: var(--dp-text); }
.acct-pair .st-table .st-num { color: #23485a; }
.acct-pair .st-table .st-num.is-zero { color: #a9bcc7; }
.acct-pair .st-table .st-num.is-hot { color: var(--dp-green); }
/* 花卡 / 果卡非 0：橙色加粗（同样要写在 `.acct-pair .st-table .st-num` 之后） */
.acct-pair .st-table .st-num.is-hl { color: #e07b16; font-weight: 700; }
.acct-pair .st-time { color: #6d8b9a; }

/* 手机端：抽屉自己的标题条也压深，否则会出现「浅色一条 + 深色一条」两层头 */
.drawer-head {
    background: linear-gradient(120deg, #0d2a35 0%, #17414f 80%, #1d4c5d 100%);
    border-bottom: 1px solid rgba(0, 0, 0, .26);
}

.drawer-title { color: #cddde6; }
.drawer-sub { color: #fff; font-weight: 700; }
.drawer-x { color: #a6c8d7; }
.drawer-x:hover { color: #fff; background: rgba(255, 255, 255, .14); }

/* 窄屏：抽屉里两栏是上下排列，标题区那条竖线没有意义，隐掉 */
@media (max-width: 1024px) {
    .acct-pair #acctLogs .col-head::before,
    .acct-pair #acctLogs::before { display: none; }
}

/* ==========================================================================
   花朵种植（账号详情 → 「花朵种植」tab）
   --------------------------------------------------------------------------
   结构：① 今日收获（一行汇总 + 一行分品种）
       ② 自动执行卡片（自动开启中 丨 下次执行时间 + 水滴 / 加速卡 / 今日水桶 / 免费水滴）
       ③ 文字说明（水桶说明、免费水滴时段）
       ④ 土地卡片（**每行 4 块**，卡片头右侧是「空地 N 块丨待浇水 N 块」）
       ⑤ 培育中（空态一行灰字）
       ⑥ 待解锁的土地（空态一行灰字）
       ⑦ 已解锁花朵（**每行 4 块**：名称 + 等级·数量 + 可升级标）
   数据接口未接入：数字全部占位 0，卡片先占位；模板里 `data-fx="xxx"` 是预留钩子，
   接接口时按钩子回填即可（土地/花朵的块数也改成按数据渲染）。
   卡片本体直接复用营业统计那套 .stat-card（浅蓝渐变底 + 描边 + 顶部渐变细线）。
   ========================================================================== */
.fx-num { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 700; color: #0b7a56; }
/* 数值之间的斜线：原来是 #c3d6e4（几乎看不见），改成 --ink-3；左右各留 1px 缝 */
.fx-slash { font-style: normal; margin: 0 1px; color: var(--ink-3, #8b9aa3); }
.fx-comma { color: #c3d6e4; }

/* 数值按指标给不同颜色（不再全是黑的）：用 data-fx 选择器打标，不用改模板 */
.fx-num[data-fx="water"],
.fx-num[data-fx="water_max"] { color: #0369a1; }                       /* 水滴 = 天蓝 */
.fx-num[data-fx="boost"] { color: #b45309; }                            /* 加速卡 = 手保 */
.fx-num[data-fx="bucket"],
.fx-num[data-fx="bucket_max"] { color: #0b7a56; }                       /* 今日水桶 = 绿 */
.fx-num[data-fx="free_water"],
.fx-num[data-fx="free_water_max"] { color: #6d28d9; }                    /* 免费水滴 = 紫 */
.fx-num[data-fx="next_h"],
.fx-num[data-fx="next_m"],
.fx-num[data-fx="next_s"] { color: #0f766e; }                            /* 下次执行时间 = 青 */
.fx-num[data-fx="today_total"] { color: #0f9d70; }                       /* 今日收获总数 = 品牌绿 */
.fx-num[data-fx="today_lily"] { color: #475569; }                        /* 白百何 = 素白灰 */
.fx-num[data-fx="today_carnation"] { color: #be123c; }                   /* 康乃馨 = 珑红 */
.fx-num[data-fx="today_violet"] { color: #6d28d9; }                      /* 紫罗兰 = 紫 */
.fx-num[data-fx="land_empty"] { color: #475569; }                        /* 空地 = 灰 */
.fx-num[data-fx="land_water"] { color: #b45309; }                        /* 待浇水 = 手保 */

/* ① 今日收获 —— 配色直接对齐「自动执行」卡片（.stat-card）：
   同款三屋渐变底（左上青柔光 + 右下绿柔光 + 蓝白斜向渐变）、同边框 #bcd4e3、
   同 18px 圆角、同投影、同顶部 3px 渐变细线 */
.fx-today {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 11px 14px;
    border: 1px solid #bcd4e3;
    border-radius: 18px;
    background: radial-gradient(120% 92% at 0% 0%, rgba(14, 116, 144, .03), rgba(14, 116, 144, 0) 58%), radial-gradient(110% 92% at 100% 100%, rgba(11, 138, 95, .026), rgba(11, 138, 95, 0) 60%), linear-gradient(160deg, #fdfeff 0%, #f9fcff 54%, #fafefd 100%);
                
    box-shadow: none;              /* 去掉投影（只保留「自动执行」卡片自己的） */
    overflow: hidden;
}

/* 注意：**只有「自动执行」卡片（.stat-card）保留顶部那条 3px 渐变细线**；
   土地 / 培育中 / 待解锁的土地 / 已解锁花朵（.fx-panel）和今日收获（.fx-today）都不要这条线，
   所以这里不再给它们写 ::before（只要底色/边框/圆角/投影跟 .stat-card 一致就行）。 */

/* ==========================================================================
   ① 自动执行卡片：**不要投影、不要顶部细线**；
      「自动开启中」时四周走一圈绿→青渐变，并且**一直循环转圈**。
      做法（兼容优先，iOS Safari / Firefox 都能转）：外层 `.fx-ring` 用 mask 只留 1px 描边，
      里层一块超大 conic 渐变圆盘用 `transform: rotate()` 匀速转 —— 不依赖 @property。
      状态开关：模板里 `data-auto="1"` = 自动开启中（以后接接口改成 0 就自动停）
   ========================================================================== */
/* 投影 + 顶部那条渐变细线：都去掉 */
.acct-pair .stat-card[data-auto] { box-shadow: none; }
.acct-pair .stat-card[data-auto]::before { display: none; }

/* 让出卡片自带那 1px 浅蓝描边，避免出现「双层线」 */
.acct-pair .stat-card[data-auto="1"] { border-color: transparent; }

/* 描边层（只有自动开启时才出现）：mask 只留最外圈 —— 描边加粗到 2px，转起来才看得出来 */
.fx-ring {
    position: absolute;
    inset: 0;
    z-index: 1;                                  /* 只压最外圈，不遮内容 */
    display: none;
    padding: 2px;                                /* 描边粗细（1px 太细，转了也看不出来） */
    border-radius: inherit;
    overflow: hidden;                            /* 裁掉那块超大圆盘 */
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    pointer-events: none;
}

.acct-pair .stat-card[data-auto="1"] .fx-ring { display: block; }

/* 没开启（data-auto="0"，或客户端还没上报）时：
   圈不转，「自动开启中」那个徽章也不该露出来 —— 否则就是页面自己瞎说 */
.stat-card[data-auto="0"] .fx-on { display: none; }

/* 真正转的是这块圆盘：放在描边层里，被 mask 裁成只露一圈描边。
   渐变要“一头亮、大半圈暗”，转起来才像一圈光跑过去（均匀渐变转起来看起来是静止的）。 */
.fx-ring::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 250%;
    aspect-ratio: 1 / 1;
    background: conic-gradient(
        #0b8a5f 0deg,          /* 基底：品牌绿，占大半圈 */
        #0b8a5f 178deg,
        #14b8a6 222deg,
        #22d3ee 258deg,        /* 亮弧起来 */
        #67e8f9 284deg,
        #a5f3fc 300deg,        /* 最亮的一点（高光） */
        #22d3ee 318deg,
        #0b8a5f 356deg,        /* 快速收回，形成“彗尾” */
        #0b8a5f 360deg
    );
    transform: translate(-50%, -50%);
    animation: fx-spin 2.4s linear infinite;
    will-change: transform;
}

@keyframes fx-spin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/* 系统开了「减少动态效果」：不转，只留静态渐变边 */
@media (prefers-reduced-motion: reduce) {
    .fx-ring::before { animation: none; }
}

.fx-today-main { display: flex; align-items: baseline; gap: 4px; font-size: 15px; color: var(--ink-2); }
.fx-today-k { font-weight: 600; color: var(--ink); }
.fx-today-main .fx-num { font-size: 21px; }
.fx-today-u { font-size: 14px; color: var(--ink-2); }
.fx-today-sub { display: flex; flex-wrap: wrap; gap: 0 2px; font-size: 13px; color: var(--ink-2); }
.fx-today-sub .fx-num { font-size: 14px; }

/* ② 自动执行卡片 */
.fx-on {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: auto;             /* 靠卡片头最右 */
    padding: 2px 9px;
    border: 1px solid rgba(15, 157, 112, .22);
    border-radius: 999px;
    background: rgba(15, 157, 112, .09);
    color: #0b7a56;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.fx-on::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* 标题与「下次执行时间」之间的竖线「丨」 */
.fx-sep-x { flex: 0 0 auto; margin: 0 -3px; color: #c9dcea; font-size: 13px; }
.fx-next { font-size: 13px; color: var(--ink-2); }
.fx-next .fx-num { font-size: 14.5px; }

/* ① 自动执行卡片（花朵种植 / 日常任务都有）：**数值不着色、不加粗**（其它卡片仍按指标上色） */
.stat-card[data-auto] .fx-num { color: inherit; font-weight: 500; }

/* 手机端头部换短文案：「下次执行时间」→「下次」、「自动开启中」→「开启中」（桌面/平板仍用全称） */
.fx-next-k-xs, .fx-on-k-xs { display: none; }

/* 自动执行卡片那一行（水滴…挑水工）：**禁止换行**，极窄屏才横滑（滚动条不显示） */
.fx-line { display: flex; flex-wrap: nowrap; align-items: baseline; gap: 3px 2px; font-size: 13.5px; color: var(--ink-2);
           overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.fx-line::-webkit-scrollbar { display: none; }
.fx-cell { white-space: nowrap; flex: 0 0 auto; }
.fx-cell .fx-num { font-size: 14.5px; }
.fx-bar { flex: 0 0 auto; margin: 0 6px; color: #e0edf6; }

/* ③④⑤⑥⑦ 轻量化面板：土地 / 培育中 / 待解锁的土地 / 已解锁花朵 四张卡都用它
   （不走 .stat-card 那套「浅蓝渐变底 + 顶部渐变细线 + 投影」，只留极浅蓝底 + 一条细线 + 细边） */
/* 土地 / 培育中 / 待解锁的土地 / 已解锁花朵 四张卡：
   配色 100% 对齐「自动执行」卡片（.stat-card）—— 同渐变底 / 同边框 / 同 18px 圆角 / 同投影 / 同顶部细线 */
.fx-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    /* 活动任务页会按「配置页开关 + 客户端上报」把整张活动卡 hidden 掉（见 app.js
       applyEventCards）—— .fx-panel 自己设了 display:flex，会盖掉浏览器默认的
       [hidden]，所以这里必须显式写一条，否则「关掉的活动」还是会露出来 */
    overflow: hidden;
    border: 1px solid #bcd4e3;
    border-radius: 18px;
    /* 卡底：跟「自动执行」同色系，但**更淡一档**（不抢里面的白块） */
    background: radial-gradient(120% 92% at 0% 0%, rgba(14, 116, 144, .03), rgba(14, 116, 144, 0) 58%),
                radial-gradient(110% 92% at 100% 100%, rgba(11, 138, 95, .026), rgba(11, 138, 95, 0) 60%),
                linear-gradient(160deg, #fdfeff 0%, #f9fcff 54%, #fafefd 100%);
    box-shadow: none;              /* 同样去掉投影 */
}

.fx-panel[hidden] { display: none; }    /* 关掉的活动卡（applyEventCards）*/

/* 卡头样式也跟「自动执行」的 .stat-head 对齐（半透明白 → 浅蓝渐变 + 细线） */
.fx-head {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: nowrap;                     /* 标题 + 右侧小字：一行到底，不换行 */
    align-items: center;
    gap: 10px;
    padding: 9px 12px 8px;
    /*
    border-bottom: 1px solid #d7e5ef;
    background: linear-gradient(rgba(255, 255, 255, .94), rgba(240, 247, 252, .82));
    */
}

.fx-head h3 {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    white-space: nowrap;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .4px;
    color: #16181b;                                         /* 标题文字：黑 */
}

.fx-head h3::before {
    content: "";
    flex: 0 0 auto;
    width: 3px;
    height: 12px;
    border-radius: 2px;
    background: linear-gradient(180deg, #a8dcf7, #6cc0ea);
}

.fx-body { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px 12px; }

/* 行内信息图标（今日水桶 / 免费水滴后面那个）：**白底 + 灰蓝感叹号**的小方徽章，
   尺寸再小一档（14×14），并且用 `vertical-align: middle` + 微调 transform 跟同行文字**水平居中对齐** */
.fx-info {
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    width: 14px;
    height: 14px;
    margin: 0 0 0 4px;
    padding: 0;
    border: 1px solid #cfdde9;
    border-radius: 4px;
    background: #fff;
    color: #7f93a1;
    box-shadow: 0 1px 2px -1px rgba(70, 90, 105, .3);
    vertical-align: middle;
    transform: translateY(-1.5px);   /* 实测图标中心比同行文字中心低 1.2px，这里补回来 */
    cursor: help;
}

.fx-info:hover,
.fx-info:focus-visible { border-color: #a9c4d6; background: #f6fbfe; color: #55707f; outline: none; }
.fx-info-ico { font-size: 9.5px; font-weight: 800; line-height: 1; }
.fx-info > svg { display: block; }

/* 说明气泡：挂 body 下（fixed），这样不会被卡片的 overflow:hidden 裁掉；位置由 JS 算 */
.fx-tip-pop {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 220;
    max-width: 260px;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(15, 23, 42, .94);
    color: #fff;
    font-size: 12.5px;
    line-height: 1.55;
    box-shadow: 0 14px 30px -16px rgba(0, 0, 0, .8);
    pointer-events: none;
}

.fx-tip-pop[hidden] { display: none; }

.fx-tip-pop::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -5px;
    width: 8px;
    height: 8px;
    margin-left: -4px;
    background: rgba(15, 23, 42, .94);
    transform: rotate(45deg);
}

.fx-tip-pop.is-below::after { bottom: auto; top: -5px; }

/* ④⑦ 方块网格：**每行 4 块**（窄屏也只收内边距/字号，不降列数） */
.fx-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }.fx-sub { margin-left: auto; font-size: 12.5px; color: #7b8f9c; white-space: nowrap; }
.fx-sub .fx-num { font-size: 13px; }

/* 卡头「数据节奏」说明（土地：数据约 90 秒更新一次；倒计时结束自动收获并重种，2026-10-16）——
   跟在标题右边；右侧小字（.fx-sub）不动，空间不够时**本行优先省略号**，title 悬停看全文 */
.fx-head .fx-note {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12.5px;
    color: #7b8f9c;
}

/* 带说明的卡头（土地）：容器窄到一行放不下时，**说明自动换到第二行整行显示**
   （标题 + 右侧小字留在第一行）—— 比把说明截断可读（2026-10-16） */
.fx-head-note { flex-wrap: wrap; row-gap: 1px; }
.fx-head-note .fx-note { flex: 0 1 auto; }

.fx-tile {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    padding: 7px 9px;                      /* 紧凑一档（土地 / 培育中 / 待解锁土地 / 已解锁花朵） */
    border: 1px solid #d5e3ea;             /* 跟营业统计里的白底瓦片同一档描边 */
    border-radius: 12px;
    background: #fff;
    box-shadow: none;                      /* 土地 / 花朵块也不给投影 */
}

.fx-tile-hd { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .2px; color: #9aacb8; }
.fx-tile-main { font-size: 14px; font-weight: 500; line-height: 1.3; color: var(--ink); overflow-wrap: normal; }

/* 待收获的块只显示倒计时，没有多余文字（等宽数字，防止每秒跳动时宽度抳） */
.fx-tile-tip { margin-left: 5px; font-size: 12.5px; font-weight: 700; }
.fx-tile-cd { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* 土地卡片的倒计时：用户 2026-10-16 要求字号改成 **9px**
   （只作用于「土地」列表 `fx_land`；「培育中」「珍珠采集点」里的倒计时不动） */
[data-list="fx_land"] .fx-tile-cd { font-size: 9px; }

.fx-tile-ft { font-size: 11.5px; color: #8fa0ac; }
.fx-tile-ft .fx-num { font-size: 12.5px; }

/* 土地 / 培育中 / 待解锁的土地 / 已解锁花朵：**卡片里的文字一律禁止换行**，
   万一数据变长就省略号收尾（不让它换行把方块 / 卡片撑高）；标题右侧的小字同理 */
.fx-head h3, .fx-head .fx-sub,
.fx-tile-hd, .fx-tile-main, .fx-tile-ft, .fx-tile-tip, .fx-tile-tag,
.fx-none, .fx-none span { white-space: nowrap; }

.fx-tile-hd, .fx-tile-main, .fx-tile-ft { overflow: hidden; text-overflow: ellipsis; }
.fx-sub { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* 鲜花收集：副标题「11 级 丨 1789 朵」约 90px，卡片还有 16px 的左右内边距，
   挤在 4 列（每列仅 73px）里会被省略号吃掉，3 列（100px）也差几像素。
   这里改成 2 列，内容区约 140px 足够；nowrap + 省略号规则照旧。 */
.fx-grid[data-grid="collect"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.fx-tile.is-ready { border-color: #cfe6db; background: #fbfefc; }
.fx-tile.is-ready .fx-tile-tip { color: var(--green); font-weight: 600; }
.fx-tile.is-wait { border-color: #e9e3d6; background: #fffdfa; }
.fx-tile.is-wait .fx-tile-tip { color: #b45309; font-weight: 600; }
.fx-tile.is-empty { border-style: dashed; background: #fafcfe; }
.fx-tile.is-empty .fx-tile-main { color: #9aacb8; font-weight: 500; }

/* 已解锁花朵的小方块 */
.fx-tile.is-flower { background: #fff; }
.fx-tile-tag {
    align-self: flex-start;
    margin-top: 1px;
    padding: 1px 8px;
    border-radius: 999px;
    background: #fff4e5;
    color: #b25e00;
    font-size: 11.5px;
    font-weight: 600;
}

.fx-tile-tag.is-max { background: #eef4f9; color: #8fa4b1; }

/* ⑥⑦ 空态：图标 + 一行字，竖向居中，**没数据时也撑起一点高度**（不然卡片扁成一条） */
.fx-none {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 96px;
    padding: 10px 2px;
    font-size: 13px;
    color: #9aacb8;
    text-align: center;
}

.fx-none-ico { flex: 0 0 auto; color: #c6d6e1; }

/* 面板级「未开放」提示（如宠物要 25 级）：整块居中，比空态更显眼一点 */
.fx-locked {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 120px;
    padding: 18px 14px;
    border: 1px dashed #cfdde6;
    border-radius: 12px;
    background: #f8fbfd;
    text-align: center;
}

.fx-locked strong { font-size: 15px; font-weight: 700; color: #4a6572; }
.fx-locked span { font-size: 13px; color: #8ba0ac; }

/* 上面的 slot 会靠 hidden 属性互斥切换（`.fx-sum-cell` 自身没写 display，
   但保险起见还是补一条，避免以后加了 display 把 [hidden] 盖掉） */
.fx-sum-cell[hidden] { display: none; }

/* 窄屏：方块仍是每行 4 块，但整体收一档，避免挤成一团 */
@media (max-width: 460px) {
    .fx-today { padding: 9px 11px; }
    .fx-today-main { font-size: 14px; }
    .fx-today-main .fx-num { font-size: 19px; }
    .fx-today-sub { font-size: 12px; }
    .fx-grid { gap: 6px; }
    .fx-tile { padding: 7px 8px; gap: 3px; }
    .fx-tile-hd { font-size: 10.5px; }
    .fx-tile-main { font-size: 13px; }
    /* 花朵名称（土地里的花 + 已解锁花朵）手机上也 15px，跟 PC 一致；空地的「空地」等状态文字仍小一档 */
    .fx-panel .fx-tile:not(.is-empty) .fx-tile-main { font-size: 15px; }
    .fx-tile-tip { font-size: 10.5px; }
    .fx-tile-ft { font-size: 11px; }
    .fx-tile-tag { font-size: 10.5px; padding: 1px 6px; }
    /* 自动执行卡片那一行禁止换行 → 字号跟着屏宽缩，360~430 的手机都放得下（不再出现半截被藏） */
    .fx-line { font-size: clamp(10.4px, calc(3.7vw - 2.4px), 12.5px); letter-spacing: -.2px; }
    .fx-cell .fx-num { font-size: 1.13em; }
    .fx-bar { font-size: .8em; margin: 0 1px; }
    .fx-info { width: 12px; height: 12px; margin-left: 2px; }
    .stat-card[data-auto] .stat-body { padding-left: 8px; padding-right: 8px; }
    /* 头部同样禁止换行（短文案「下次 / 开启中」+ 青胶囊收一档） */
    .stat-card[data-auto] .stat-head { flex-wrap: nowrap; gap: 5px; padding-left: 8px; padding-right: 8px; }
    .fx-next { white-space: nowrap; font-size: 12px; }
    .fx-next .fx-num { font-size: 1.1em; }
    .fx-next-k { display: none; }
    .fx-next-k-xs { display: inline; }
    .fx-on { font-size: 11.5px; padding: 2px 7px; }
    .fx-on-k { display: none; }
    .fx-on-k-xs { display: inline; }
    .fx-sub { font-size: 11.5px; }
    .fx-head .fx-note { font-size: 11.5px; }
    .fx-head { padding: 8px 10px; }
    .fx-body { padding: 9px 10px 10px; }
}

/* 手机：土地 / 已解锁花朵的方块改成**每行 2 块**（4 列在手机上太挤） */
@media (max-width: 700px) {
    .fx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   日常任务 tab（「每日任务」面板）
   结构：① 自动执行条（复用 .stat-card[data-auto]，只有一行、无正文）
        ② 活跃度进度条 + 30/60/100 奖励节点 + 任务列表（右侧状态：已领取 / 未完成）
   数据钩子：`data-dy="activity|activity_max|next_h|next_m|next_s|<任务key>|<任务key>_max"`、
            `data-dy-status="<任务key>"`（给状态小标加 `.is-got` 即“已领取”）、`data-dy-rw="30|60|100"`（拿到加 `.is-got`）
   ========================================================================== */
/* 只有一行的自动执行条：不要下面那条分隔线 */
.stat-card.is-bare .stat-head { border-bottom: 0; }

/* 活跃度进度条（带 30 / 60 / 100 三个档位刻度） */
.dy-bar { position: relative; height: 6px; border-radius: 999px; background: #e6f0f6; overflow: visible; }
.dy-bar > i {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, #6cc0ea, #0b8a5f);
    transition: width .35s ease;
}
.dy-tick {
    position: absolute;
    top: -2px;
    bottom: -2px;
    width: 2px;
    margin-left: -1px;
    border-radius: 2px;
    background: rgba(13, 42, 53, .16);
}

/* 30 / 60 / 100 三个档位：数字放大上色 + 实线描边，一眼能看出是三档 */
.dy-rewards { display: flex; flex-wrap: nowrap; gap: 8px; }
/* ---------- 档位卡（每日 / 每周 / 居民订单的奖励档位） ----------
   三种状态一眼分得开：未领取=素白卡、可领取=暖沙卡+琥珀点、已领取=翡翠实心+勾 */
.dy-rw {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 10px 8px 9px;
    border: 1px solid #e5ecf3;
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff 0%, #f7fafd 100%);
    color: #7b8fa0;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(16, 42, 67, .05), inset 0 1px 0 rgba(255, 255, 255, .9);
    transition: transform .16s ease, box-shadow .16s ease;
}
.dy-rw-n {
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.4px;
    color: #55697b;
}
.dy-rw-u {
    font-style: normal;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1;
    padding: 3px 8px 4px;
    border-radius: 999px;
    background: rgba(23, 55, 82, .06);
    color: #8397a7;
}
/* 已领取：**浅绿细边 + 淡绿底**（原来那版翡翠实底太重，用户要求换浅） */
.dy-rw.is-got {
    border-color: #b6e2ce;
    background: linear-gradient(180deg, #f6fdf9 0%, #ecf9f2 100%);
    color: #0f7d57;
    box-shadow: 0 1px 2px rgba(16, 42, 67, .05);
}
.dy-rw.is-got .dy-rw-n { color: #0b7a56; }
.dy-rw.is-got .dy-rw-u { background: rgba(15, 157, 112, .12); color: #0b7a56; }
.dy-rw.is-got::after {
    content: '';
    position: absolute;
    top: 9px;
    right: 10px;
    width: 6px;
    height: 11px;
    border: 2px solid #12a273;
    border-top: 0;
    border-left: 0;
    border-radius: 1px;
    transform: rotate(42deg);
}
/* 可领取：暖沙底 + 琥珀字 + 右上角亮点 */
.dy-rw.is-warn {
    border-color: #efd6a4;
    background: linear-gradient(160deg, #fff8ea 0%, #fdeed2 100%);
    color: #a4711b;
    box-shadow: 0 5px 14px -8px rgba(180, 120, 20, .5), inset 0 1px 0 rgba(255, 255, 255, .8);
}
.dy-rw.is-warn .dy-rw-n { color: #8f5f10; }
.dy-rw.is-warn .dy-rw-u { background: rgba(224, 161, 58, .16); color: #94620f; }
.dy-rw.is-warn::after {
    content: '';
    position: absolute;
    top: 11px;
    right: 11px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #e0a13a;
    box-shadow: 0 0 0 3px rgba(224, 161, 58, .16);
}
@media (hover: hover) {
    .dy-rw:hover { transform: translateY(-1px); box-shadow: 0 6px 14px -8px rgba(16, 42, 67, .3), inset 0 1px 0 rgba(255, 255, 255, .9); }
    .dy-rw.is-got:hover { background: linear-gradient(180deg, #f1fcf6 0%, #e4f7ec 100%); box-shadow: 0 4px 12px -9px rgba(10, 125, 85, .45); }
}

/* ---------- 订单箱（居民 / 顾客订单）----------
   左边一条状态色带 + 极淡底；标题右边一颗状态胶囊 */
[data-sub-panel="order"] .bn-box,
[data-sub-panel="customer"] .bn-box {
    position: relative;
    border: 1px solid #e7eef4;
    border-left: 3px solid #d6e0e9;
    border-radius: 12px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbfd 100%);
    box-shadow: 0 1px 2px rgba(16, 42, 67, .045);
    padding: 9px 11px 9px 10px;
}
[data-sub-panel="order"] .bn-box .bn-box-hd,
[data-sub-panel="customer"] .bn-box .bn-box-hd { color: #3f5566; }
[data-sub-panel="order"] .bn-box .dy-st,
[data-sub-panel="customer"] .bn-box .dy-st {
    border-radius: 999px;
    padding: 2px 7px 3px;
    font-size: 10.5px;
}
/* 已领取：翡翠色带 + 淡绿底 */
[data-sub-panel="order"] .bn-box.is-got,
[data-sub-panel="customer"] .bn-box.is-got {
    border-color: #d5ece1;
    border-left-color: #12a273;
    background: linear-gradient(180deg, #f8fdfb 0%, #effaf5 100%);
    box-shadow: 0 4px 12px -8px rgba(10, 125, 85, .45);
}
[data-sub-panel="order"] .bn-box.is-got .bn-box-hd,
[data-sub-panel="customer"] .bn-box.is-got .bn-box-hd { color: #0a6f4d; }
/* 可领取：琥珀色带 + 暖沙底 */
[data-sub-panel="order"] .bn-box.is-warn,
[data-sub-panel="customer"] .bn-box.is-warn {
    border-color: #f2e0bd;
    border-left-color: #e0a13a;
    background: linear-gradient(180deg, #fffcf6 0%, #fdf5e6 100%);
    box-shadow: 0 4px 12px -8px rgba(180, 120, 20, .4);
}
[data-sub-panel="order"] .bn-box.is-warn .bn-box-hd,
[data-sub-panel="customer"] .bn-box.is-warn .bn-box-hd { color: #8f5f10; }


/* 任务列表 */
.dy-list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }

.dy-task {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 10px 12px;
    border: 1px solid #d5e3ea;
    border-radius: 12px;
    background: #fff;
}

.dy-task-main { display: flex; align-items: center; gap: 6px; min-width: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   梳丝引线 · 色系 & 布局重排（2026-10-22 用户第二轮反馈）
   ---------------------------------------------------------------------------
   用户原话：「UI 现在还是有点乱，绿色用的太多了，绿色应该用在状态上，
              换个色系和布局」

   【问题诊断】
   ① 绿色泛滥 —— 全局 `.fx-num { color:#0b7a56 }`、`.dy-task-prog .fx-num`
      `{ #0b8a5f }`、`.rw-chip .fx-num { #0b7a56 }` 三条叠加，一张卡里
      「总积分 / 累计消耗体力 / 本局步数 / 分数 / 消除行 / 每局体力 / 12 个进度数字」
      全是绿 ⇒ 「绿 = 已领取」这个**状态语义**被稀释得一点不剩。
   ② 盒子太多 —— 6 条任务各自一圈 border + 圆角 + 白底，再加档位 4 个，
      一张卡里挤了 10 个独立盒子，边框线互相打断，看着就乱。

   【改法】
   ① **绿色只留给状态徽章**（.dy-st.is-got）。卡内所有数字 / 标题 / 小标签
      统一换成中性色：主文字 #2c4a5e（深蓝墨），次要 #8497a5（灰蓝）。
   ② 布局从「N 个盒子」改成「**1 张表 + 分隔线**」：外层一个圆角边框，
      行与行之间 1px 分隔线，行高收紧、悬停轻高亮。
   ③ 状态靠**左侧 3px 内阴影色条**表达（绿=已领 / 琥珀=可领 / 无=未达），
      用 box-shadow:inset 而不是 border，不影响行宽对齐。
   ⚠️ 全部规则带 `.fx-panel.ev-spool` 前缀 —— 日常任务 / 百花成蜜 / 密令那些
      `.dy-task` 一个像素都不变。
   ⚠️ :has() 在本项目已经用过（`.cfg-leaf:has(> .cfg-chk)`），口径一致。
   ═══════════════════════════════════════════════════════════════════════════ */

.fx-panel.ev-spool {
    /* ★ 2026-10-22 第三轮：整卡换成**蓝色系**（用户指定）。
     *   三档蓝色拉开重量：可领取 = 饱和蓝 → 已领取 = 中蓝灰 → 未达标 = 灰。
     *   绿色从此在这张卡里彻底退场。 */
    --sp-ink:  #1b3a4d;   /* 标题 / 主文字（深墨蓝） */
    --sp-num:  #12557d;   /* 数字（比标题略亮一档，有层次但不抢色） */
    --sp-line: #e1ecf4;   /* 分隔线 / 外框（淡蓝） */
    --sp-mute: #7b95a8;   /* 次要文字 / 奖励标签 */
    --sp-head: #f2f8fc;   /* 悬停底色 / 标签底（极浅蓝） */
    --sp-blue: #0369a1;   /* 强调蓝：可领取 / 左侧色条 */
}

/* ① 数字全部中性色 —— 绿色只留给 .dy-st 状态徽章 */
.fx-panel.ev-spool .fx-num,
.fx-panel.ev-spool .dy-task-prog .fx-num,
.fx-panel.ev-spool .rw-chip .fx-num,
.fx-panel.ev-spool .fx-keyline .fx-num {
    color: var(--sp-num);
    font-weight: 700;
}

/* ② 「总积分：1566」这类 keyline 也不要绿 */
.fx-panel.ev-spool .fx-keyline {
    color: var(--sp-mute);
}
.fx-panel.ev-spool .fx-keyline b {
    color: var(--sp-num);
}

/* ③ 列表：1 张表 + 分隔线，不再是 N 个盒子 */
.fx-panel.ev-spool .dy-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--sp-line);
    border-radius: 11px;
    background: #fff;
    overflow: hidden;
}
.fx-panel.ev-spool .dy-task {
    border: 0;
    border-bottom: 1px solid var(--sp-line);
    border-radius: 0;
    padding: 9px 12px 9px 14px;
    background: #fff;
    gap: 2px;
}
.fx-panel.ev-spool .dy-task:last-child { border-bottom: 0; }
.fx-panel.ev-spool .dy-task:hover { background: var(--sp-head); }

/* ④ 状态色条：**只给「可领取」画**（琥珀，唯一需要你动手的那条）。
 *    已领取 = 事情已经完事，不该再抢眼睛；未达标 = 还没轮到。
 *    绿色此时只剩右侧徽章一处 —— 「绿 = 状态」的语义终于不打架了。
 *    用 inset shadow 而不是 border-left：不占行宽，三列对齐不会抖。 */
.fx-panel.ev-spool .dy-task:has(> .dy-task-main > .dy-st.is-warn) {
    box-shadow: inset 3px 0 0 var(--sp-blue);
    background: #fafdff;
}

/* ⑤ 三列对齐：名称 | 进度（靠右）| 状态 */
.fx-panel.ev-spool .dy-task-main { gap: 8px; }
.fx-panel.ev-spool .dy-task-name {
    font-weight: 600;
    color: var(--sp-ink);
}
.fx-panel.ev-spool .dy-task-prog {
    margin-left: auto;
    font-size: 12.5px;
    color: var(--sp-mute);
}
.fx-panel.ev-spool .dy-task-ft {
    padding-left: 0;
    font-size: 12px;
    color: var(--sp-mute);
}
.fx-panel.ev-spool .rw-chip {
    padding: 1px 7px;
    border-color: var(--sp-line);
    background: var(--sp-head);
    color: var(--sp-mute);
    font-weight: 500;
}
.fx-panel.ev-spool .rw-chip .fx-num { color: var(--sp-ink); }

/* ⑥ 状态徽章：三档「视觉重量」拉开
 *    可领取 = 实心琥珀（最重，唯一要你注意的）
 *    已领取 = 淡绿底（中等，已完事）
 *    未达标 = 无底灰字（最轻） */
.fx-panel.ev-spool .dy-st {
    margin-left: 0;
    padding: 1px 8px;
    font-size: 11.5px;
    font-weight: 600;
}
.fx-panel.ev-spool .dy-st.is-got {
    background: rgba(3, 105, 161, .07);
    color: #4a728c;              /* 中蓝灰：已完事，不抢眼 */
    font-weight: 500;
}
.fx-panel.ev-spool .dy-st.is-warn {
    background: rgba(3, 105, 161, .14);
    color: var(--sp-blue);       /* 饱和蓝：唯一要你动手的那条 */
    font-weight: 700;
}
.fx-panel.ev-spool .dy-st.is-todo {
    background: transparent;
    color: #a8b8c3;              /* 纯灰：还没轮到 */
    font-weight: 500;
}


.dy-task-name {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
}
.dy-task-prog {
    flex: 0 0 auto;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ink-2);
    white-space: nowrap;
}
.dy-task-prog .fx-num { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 13.5px; }
.dy-task-prog .fx-bar { margin: 0 4px; font-size: .8em; }

/* 右侧状态小标：未完成（灰）/ 已领取（绿） */
/* 奖励明细：客户端给**一整串文本**（`金币：14,976，黄玫瑰：88，珍珠：18`），
   页面只按逗号切开、一条一个小标签（见 detail-render.js 的 buildChips） */
.rw-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.rw-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
    padding: 4px 9px 5px;
    border: 1px solid #e3ebf2;
    border-radius: 9px;
    background: linear-gradient(180deg, #ffffff, #f6fafd);
    font-size: 12px;
    font-weight: 600;
    color: #6d8292;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(16, 42, 67, .045);
}
.rw-chip-k { color: #8fa2b1; font-weight: 600; }
.rw-chip .fx-num {
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
    font-size: 12.5px;
    font-weight: 700;
    color: #0b7a56;
}

/* 公会建设（视频任务）这种用 BN_STATUS 的徽标：已完成 = 绿系 */
.dy-st.is-done { background: rgba(15, 157, 112, .10); color: #0b7a56; }
.dy-st.is-todo { background: rgba(23, 55, 82, .06); color: #7b8fa0; }

.dy-st {
    flex: 0 0 auto;
    margin-left: auto;
    padding: 2px 9px;
    border-radius: 999px;
    background: #eef3f6;
    color: #7b8f9c;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}
.dy-st.is-got { background: rgba(15, 157, 112, .10); color: #0b7a56; }

/* 第二行：奖励：EXP 500 丨 金币 500 丨 活跃度 15（一行到底） */
.dy-task-ft { display: flex; align-items: baseline; gap: 0 2px; white-space: nowrap; font-size: 12.5px; color: #8fa0ac; }
/* 奖励行的数值：**大小 / 颜色跟同一行的文字完全一致**（继承父级，只保留等宽数字对齐） */
.dy-task-ft .fx-num { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: inherit; font-weight: inherit; color: inherit; }
.dy-task-ft .fx-bar { margin: 0 4px; font-size: .8em; color: #c3d6e4; }

@media (max-width: 460px) {
    .dy-task { padding: 9px 10px; gap: 4px; }
    .dy-task-name { font-size: 13.5px; }
    .dy-task-prog, .dy-task-prog .fx-num { font-size: 13px; }
    .dy-task-ft { font-size: 11.5px; }
    .dy-rw { padding: 6px 4px; gap: 2px; }
    .dy-rw-n { font-size: 15px; }
    .dy-rw-u { font-size: 10.5px; }
}
/* 奖励行的分隔改成圆点（不要竖线「丨」） */
.dy-sep { margin: 0 5px; color: #b9cad6; font-style: normal; }

/* 数值配色：**完成值绿色、目标值黑色**；奖励里的数值一律黑色。
   N/500 → N 绿、/ 与 500 黑；活跃度：N/100 同理 */
[data-dt-panel="daily"] .fx-sub .fx-num,
.dy-task-prog .fx-num { color: #0b8a5f; }
[data-dt-panel="daily"] .fx-sub .fx-num[data-dy$="_max"],
.dy-task-prog .fx-num[data-dy$="_max"] { color: #16181b; }
[data-dt-panel="daily"] .fx-sub .fx-slash,
.dy-task-prog .fx-slash { color: #16181b; }

/* ==========================================================================
   日常任务：**数值再大一号，且 PC / 手机一律不加粗**
   （只针对进度 N/M 与活跃度 N/100；奖励行的数值跟文字同大小同色，见上面）
   ========================================================================== */
.dy-task-prog .fx-num,
[data-dt-panel="daily"] .fx-sub .fx-num {
    font-size: 15px;
    font-weight: 500;                 /* 不加粗 */
}

@media (max-width: 460px) {
    .dy-task-prog .fx-num,
    [data-dt-panel="daily"] .fx-sub .fx-num { font-size: 14px; }
}

/* ==========================================================================
   日常任务（PC，>1024px）：自动执行条通栏，「每日任务」+「每周任务」两张卡**并排一行两列**；
   卡片里的文字一律禁止换行（窄屏仍是竖排，靠 ellipsis 收尾）
   ========================================================================== */
[data-dt-panel="daily"] .dy-task-name,
[data-dt-panel="daily"] .dy-task-prog,
[data-dt-panel="daily"] .dy-task-prog *,
[data-dt-panel="daily"] .dy-task-ft,
[data-dt-panel="daily"] .dy-task-ft *,
[data-dt-panel="daily"] .dy-st,
[data-dt-panel="daily"] .dy-rw,
[data-dt-panel="daily"] .dy-rw *,
[data-dt-panel="daily"] .fx-head,
[data-dt-panel="daily"] .fx-head *,
[data-dt-panel="daily"] .fx-sub { white-space: nowrap; }

/* ==========================================================================
   日常任务：自动执行条下面的「每日任务 / 每周任务」子 tab（**第一版样式**）
   —— 未选：浅灰蓝底 + 灰字；选中：白底 + 绿字 + 绿描边（跟功能 tab 同一套配色）
   两张卡各自挂在对应 tab 下、同时只显示一张（app.js 的 showDyTab() 切）
   ========================================================================== */
.dy-tabs {
    display: flex;
    flex-wrap: wrap;                    /* 综合任务有 9 个 tab：窄屏换行铺满，不做横向滑动 */
    gap: 6px;
}

.dy-tab {
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 auto;                     /* 不压缩、不拉伸：宽度按文字，排不下就换行 */
    padding: 6px 14px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: #eef4f8;
    color: #5b7484;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    cursor: pointer;
    transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.dy-tab:hover { background: #e3eef6; color: #33576a; }
.dy-tab.is-on {
    border-color: rgba(15, 157, 112, .42);
    background: #fff;
    color: #0b7a56;
    box-shadow: 0 1px 0 rgba(13, 42, 53, .04);
}

/* 只有 is-on 的那张卡显示（.fx-panel 本身是 flex column，恢复时要写回来） */
[data-sub-panel] { display: none; }
[data-sub-panel].is-on { display: flex; }

/* ★ 2026-10-26：上面那条 `.is-on { display:flex }` 会盖掉浏览器默认的 `[hidden]`，
   而「花坊 / 花灵密令 / 花之密令」这几张子面板是 schema 按「客户端报没报」来
   `hidden` 的（detail-schema.js 的 event.notes）。子 tab 的选择是**记在
   subTabState 里、跨账号保留**的，上次停在某个 tab 时面板仍带 is-on ——
   不加这条，旧客户端切到另一个账号也会把那块空面板显示出来。 */
[data-sub-panel][hidden] { display: none; }

@media (max-width: 460px) {
    .dy-tabs { gap: 6px; }
    .dy-tab { padding: 6px 11px; font-size: 12.5px; }
}

/* 居民订单：订单箱里的花朵进度行 + 「今日奖励」汇总条
   —— 订单箱里**不要绿数字**（全部黑字），奖励行做成带底带边的小标签 */
.dy-ords {
    display: flex;
    align-items: baseline;
    gap: 0 2px;
    white-space: nowrap;
    font-size: 12.5px;
    color: #8fa0ac;
}
.dy-ords .fx-num {
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
    font-size: 13px;
    font-weight: 500;                   /* 不加粗 */
    color: #16181b;                     /* 统一黑字（不再用绿色） */
}
.dy-ords .fx-slash { color: #b9cad6; }  /* 斜线淡一点，跟数字区分 */

/* 订单箱：整体收一档（更紧凑），数值不加粗 */
[data-dy-panel="order"] .dy-task { padding: 8px 10px; gap: 3px; }
[data-dy-panel="order"] .dy-task-name { font-size: 13.5px; }
[data-dy-panel="order"] .dy-st { padding: 1px 8px; }

/* 订单箱的奖励行：黑字 + 浅底细边的小标签 */
[data-dy-panel="order"] .dy-task-ft {
    display: inline-flex;
    align-items: baseline;
    align-self: flex-start;
    gap: 0 2px;
    padding: 2px 8px;
    border: 1px solid #e3edf4;
    border-radius: 8px;
    background: #f4f9fc;
    color: #16181b;
    font-size: 12px;
    font-weight: 400;
}
[data-dy-panel="order"] .dy-task-ft .fx-num {
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
    font-size: 12.5px;
    font-weight: 500;                   /* 不加粗 */
    color: #16181b;
}

/* 「今日奖励」汇总：**薄荷绿浅底**（跟卡片里的白 / 蓝底区分开）
   ★★ 2026-10-24（用户要求）：「卡片都挤在一起了，并且没有自动换行」
     原来这里是 `white-space: nowrap` + `gap: 0 2px`：
       · nowrap 让所有奖励标签硬挤在一行，奖励一多（金币 / 元宝 / 黄玫瑰 / 珍珠…）
         就溢出容器、被卡片裁掉；
       · 2px 的间距连分隔都看不出来，视觉上就是一坨。
     现在：整块可换行 + 标签之间 6px、行之间 6px，读起来清爽。 */
.dy-today {
    display: flex;
    flex-wrap: wrap;                    /* ← 奖励多了，标签容器整块掉到下一行 */
    align-items: center;                /* 原来是 baseline —— 换行后各行会歪 */
    gap: 6px 8px;                       /* 行间距 6 / 标签组间距 8 */
    padding: 8px 12px;
    border: 1px solid #cfe8de;
    border-radius: 10px;
    background: linear-gradient(135deg, #f4fdfa 0%, #edf9f4 100%);
    white-space: normal;                /* ← 关键：原来是 nowrap */
    font-size: 13px;                    /* 比正文大一号 */
    color: #3f6f60;
}
/* 标签容器（`<span data-list>`）：用 `display: contents` 让它的外壳「消失」，
   里面的 chip 直接成为 `.dy-today` 的 flex 子项 —— 这样「今日奖励：」这四个字
   会和**第一个标签排在同一行**，后面放不下的才换行；
   写成 `display: flex` 的话这个 span 自己是一个 flex item，宽度一超就整块掉到
   下一行，出现「『今日奖励：』孤零零占一行」的怪样子。
   ⚠️ `display: contents` 只是不生成盒子，元素仍在 DOM 里 ——
      `hideEmpty()` / `blockHasData()` 判的是 `children.length` 和 `textContent`，
      都不看布局，所以不受影响。 */
.dy-today > [data-list] {
    display: contents;
}
/* ⚠️ 只在「直接子元素」时放大数字。
   原来写的是 `.dy-today .fx-num`（后端选择器同样权重 0,2,0），它在本文件里
   比 `.rw-chip .fx-num` **靠后** ⇒ 把 chip 里的数字从 12.5px 顶成 14.5px，
   标签整个被撑大、更容易挤爆。改成子选择器后 chip 恢复原尺寸。 */
.dy-today > .fx-num {
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
    font-size: 14.5px;
    font-weight: 500;
    color: #16181b;
}
/* 居民订单的档位：单位改成「单奖励」三个字，字小一档才放得下 4 个 */
[data-dy-panel="order"] .dy-rw-u { font-size: 10px; }

/* ==========================================================================
   ★★ 2026-10-24（用户要求）：团单统计
   --------------------------------------------------------------------------
   原来是裸的一行「今日团单 0 · 成功 0 · 失败 0」，跟页面上其它小标题
   （`.stat-sub` + 瓦片）风格完全不一致，数字也没有层级。
   现在改成三格瓦片：标签在上（小字灰）、数字在下（大字），
   成功绿 / 失败橙 —— 一眼能看出今天团单跑得好不好。
   ========================================================================== */
.od-team-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}
.od-team-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding: 8px 11px;
    border: 1px solid #e3ebf2;
    border-radius: 10px;
    background: linear-gradient(180deg, #ffffff, #f7fafd);
    box-shadow: 0 1px 2px rgba(16, 42, 67, .045);
}
.od-team-k {
    font-size: 11.5px;
    font-weight: 600;
    color: #8fa2b1;
    letter-spacing: .3px;
    white-space: nowrap;
}
.od-team-cell .fx-num {
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.15;
    color: #0f172a;
}
.od-team-cell.is-ok .fx-num  { color: #0b7a56; }
.od-team-cell.is-err .fx-num { color: #c2410c; }

/* 团单块内部各段之间留 8px（`.stat-sub` 自己 margin 是 0，间距靠父容器 gap；
   而 `.dy-block` 没有 gap，所以块内要用相邻兄弟选择器补）。
   ⚠️ 用 margin 而不是 display+gap —— 这个块带 `hidden`，写 display 会盖掉它。 */
[data-od-team] > * + * { margin-top: 8px; }

/* 团单备注（客户端给的失败原因等）：浅底虚线小条 */
.od-team-note {
    display: flex;
    gap: 8px;
    padding: 8px 11px;
    border: 1px dashed #dbe7f0;
    border-radius: 10px;
    background: #fafcfe;
    font-size: 12.5px;
    line-height: 1.6;
    color: #5a7286;
}
.od-team-note-k { flex: 0 0 auto; font-weight: 600; color: #8fa2b1; }

/* ⚠️⚠️ 本页有个反复踩的坑（见 2073 行 `.dt-tabs` 的注释）：
   一旦给元素写了 `display:flex/grid`，就会**盖掉浏览器默认的 `[hidden]{}`**
   ⇒ `node.hidden = true` 完全不起作用，空块照样占位。
   下面三个都可能被 JS 用 `hidden` 收起，必须补一条。 */
.dy-today[hidden],
.od-team-grid[hidden],
.od-team-note[hidden] { display: none; }

/* ★ 2026-10-26：买雇佣书 · 元宝上限 = 0 时显示「不限」（替掉那个 0）
   与 `<b data-ev="ev_pb_cap">` 是同一格里互斥的两个兄弟节点，
   显隐由 detail-schema.js 的 `nzero` / `zero` 两条 notes 切换。 */
.pb-cap-none {
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.15;
    color: #8fa2b1;
}
.pb-cap-none[hidden] { display: none; }

@media (max-width: 460px) {
    .dy-ords { font-size: 11.5px; }
    .dy-ords .fx-num { font-size: 12.5px; }
    [data-dy-panel="order"] .dy-task { padding: 7px 9px; gap: 2px; }
    [data-dy-panel="order"] .dy-task-name { font-size: 13px; }
    [data-dy-panel="order"] .dy-task-ft { padding: 2px 7px; font-size: 11.5px; }
    [data-dy-panel="order"] .dy-task-ft .fx-num { font-size: 12px; }
    .dy-today { padding: 7px 10px; font-size: 12.5px; gap: 5px 6px; }
    .dy-today > [data-list] { gap: 5px; }
    .dy-today > .fx-num { font-size: 14px; }
    [data-dy-panel="order"] .dy-rw-u { font-size: 9.5px; }
    .od-team-grid { gap: 6px; }
    .od-team-cell { padding: 7px 9px; }
    .od-team-cell .fx-num { font-size: 16px; }
    .od-team-k { font-size: 11px; }
}

/* ==========================================================================
   综合任务 → 好友 tab：按本站风格重排（卡片 / 描边 / 数值配色全沿用花朵种植、日常任务那套）
   结构：① 好友概览（服务器 + uid + 好友·推荐·待通过 三个指标 + 好友币/偷花汇总）
        ② 好友列表（空态 + 一键添加好友）③ 推荐好友（行列表 + 刷新推荐 + 免费刷新提示）
   ========================================================================== */
/* 一个子 tab 下要放多张卡时的堆叠容器（间距跟 .dt-panel.is-stack 一致 = 12px）
   注意：它自己带 display:flex，会盖掉上面 [data-sub-panel] 的 display:none，
   所以隐藏态用更高优先级（:not(.is-on)）单独写一条 */
.fx-stack { display: flex; flex-direction: column; gap: 12px; }
[data-sub-panel].fx-stack:not(.is-on) { display: none; }

/* 卡头右侧的小按钮（如需要再加）：比 .btn.tiny 再小一档，不挤压标题 */

/* ① 好友概览：三个居中的白瓦片（描边/阴影跟「收益情况」的小瓦片同款） */
.fr-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.fr-metric {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 6px;
    border: 1px solid #d5e3ea;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 32, 42, .05);
}
.fr-metric-k { font-size: 11.5px; color: #7b8f9c; white-space: nowrap; }
.fr-metric-v { display: flex; align-items: baseline; gap: 2px; }
.fr-metric-v .fx-num { font-size: 17px; font-weight: 700; color: #0b7a56; }
.fr-unit { font-style: normal; font-size: 11.5px; color: #7b8f9c; }

/* uid 行：等宽数字（灰蓝）+ 复制按钮 */
.fr-uid { display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: #7b8f9c; }
.fr-uid .fx-num { font-size: 13px; font-weight: 500; color: #4a6070; }
.fr-uid-k { letter-spacing: .3px; }

/* 好友币 / 偷花：薄荷绿浅底汇总（跟「今日奖励」同色系）；主行 = 好友币、副行 = 偷花次数 */
.fx-sum {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 11px;
    border: 1px solid #cfe8de;
    border-radius: 10px;
    background: linear-gradient(135deg, #f4fdfa 0%, #edf9f4 100%);
    font-size: 13.5px;
    color: #3f6f60;
}
.fx-sum-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; }
.fx-sum-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 2px; font-size: 12.5px; }
.fx-sum-cell { white-space: nowrap; }
.fx-sum-cell .fx-num { font-size: 15px; font-weight: 700; color: #0b7a56; }
.fx-sum-line .fx-num { font-size: 13px; font-weight: 700; color: #0b7a56; }
.fx-sum .fx-slash { color: #7fa596; }
.fx-sum-sub { font-size: 11.5px; color: #6b8d80; }
.fx-sum-sub .fx-num { font-size: 12px; font-weight: 600; color: #0b7a56; }

/* 「看视频领珍珠：今日剩余 N/2 次」这一行（见 detail-schema.js 里 pr.notes）：
   没上报 pr_video_left 时由 JS 给它加 hidden —— .fx-sum-line 是 display:flex，
   会盖掉浏览器默认的 [hidden]，所以这里必须显式写一条 */
.fx-video-line { margin-top: 6px; }
.fx-video-line[hidden] { display: none; }

/* 子 tab 顶部的「下次执行时间：N时N分N秒」小卡（模板里的 data-nextcard）；
   没上报对应剩余秒数时由 detail-render.js 给它加 hidden —— 这里设了 display:flex，
   会盖掉浏览器默认的 [hidden]，所以必须显式写一条 */
/* 子 tab 顶部的「下次执行时间」：不要边框 / 背景（只当一行小字）。
   ⚠️ 位置：它属于**上面那条 tab**（紧贴 tab 条），不是下面那张卡的一部分 ——
   所以用负的上外边距吃掉一点 .fx-stack 的 gap，下方再留开一点。 */
.next-card { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 2px;
  margin: 0; padding: 2px 2px 0; font-size: 12.5px; color: #4a6f60;
  background: none; border: 0; border-radius: 0; }
.fx-stack > .next-card { margin: 0px 0 3px; }

/* 活动卡头里的那条：跟在卡名后面、靠右与「剩余时间」排在一起（在它**前面**），
   换个颜色（绿）跟灰色的剩余时间区分开 */
.fx-head .next-card { margin: 0 8px 0 auto; padding: 0; color: #0b7a56; }
.fx-head .next-card .next-card-k { color: #3f9070; }
.fx-head .next-card .next-card-v .fx-num { color: #0b7a56; font-size: 13px; }

/* 活动卡头里的「下次可答题 / 下次可领奖」：靠右，排在「剩余时间」**前面** */
.fx-head .bn-cd { margin-left: auto; font-size: 12.5px; color: #7b8f9c; white-space: nowrap; }
.fx-head .bn-cd .fx-num { font-size: 13px; font-weight: 600; color: #55697b; }

/* ⚠️ 活动卡头（[data-dt-panel="event"]）里那三块（标题 / 下次执行时间 / 剩余时间）
   以前是 flex-wrap: nowrap + 允许压缩：详情列窄的时候（1440 视口下 .col-body 只有 ~440px）
   「下次执行时间」会被压成 34px 宽，「下次 / 执行 / 时 / 间 / 1时 / 00分 / 14秒」竖向排成一列。
   允许换行、并禁止它参与压缩。 */
[data-dt-panel="event"] .fx-head { flex-wrap: wrap; }
[data-dt-panel="event"] .fx-head .next-card { flex: 0 0 auto; }

/* 活动卡头里的「倒计时包裹层」（.fx-cdbar 包住「下次执行时间」+「下次可答题 / 可领奖」）
   桌面端：`display: contents` —— 盒子不参与布局，里面两块照旧当卡头的 flex 子项，
   跟以前完全一样（不用为它写任何桌面规则）。移动端再把它变成真盒子整行居右，见下方媒体查询。 */
.fx-cdbar { display: contents; }

/* 活动卡头在移动端（≤ 1024px）—— 两行结构（用户要求）：
     第一行：标题 …… 剩余时间（靠右）
     第二行：所有倒计时（下次执行时间 / 下次可答题 / 下次可领奖）整体换行、**居右**
   icon 是绝对定位的，不参与换行。 */
@media (max-width: 1024px) {
    [data-dt-panel="event"] .fx-head h3 { order: 1; }
    [data-dt-panel="event"] .fx-head .bn-rest { order: 3; flex: 0 0 auto; margin-left: auto; }

    [data-dt-panel="event"] .fx-head .fx-cdbar {
        display: flex;
        order: 4;
        flex: 1 1 100%;
        justify-content: flex-end;
        align-items: baseline;
        gap: 12px;
        margin: 3px 0 0;
    }

    /* 包裹层里那两块恢复「跟随内容宽度」：不参与卡头的 order / 自动边距那套 */
    [data-dt-panel="event"] .fx-head .fx-cdbar > .next-card,
    [data-dt-panel="event"] .fx-head .fx-cdbar > .bn-cd { order: 0; flex: 0 0 auto; margin: 0; }

    /* 两块倒计时都没数据时，别留一条空行（display:contents 时它本来不占位，现在是真盒子） */
    [data-dt-panel="event"] .fx-head .fx-cdbar:not(:has(> :not([hidden]))) { display: none; }
}

/* 子 tab 的「下次执行时间」紧跟下一个汇总框（宠物 / 珍珠的「今日奖励」）时贴紧一点。
   ⚠️ 必须带 :not([hidden])：没数据时「下次执行时间」是隐藏的（display:none），
   但 `+` 相邻兄弟选择器**照样命中它**，负上边距会把下面的「今日奖励」往上拽
   6 / 17px，直接盖住上面的 tab 条（宠物页就是这么被盖住的）。 */
.fx-stack > .next-card:not([hidden]) + .fx-sum { margin-top: -6px; }

/* 宠物这类「卡片头带大图标」的 tab：容器整体间隙被上面那条
   `.fx-stack:has(> .fx-panel > .fx-head > .fx-ico)` 调成了 28px（卡片之间要留白），
   结果「下次执行时间 → 今日奖励」也被撑到 25px，看着跟下面的今日奖励脱节。
   这一对单独收紧：28 - 17 + 3 = 14px，卡片与卡片之间仍是 28px。
   ⚠️ 同样要 :not([hidden])，理由见上一条。 */
.fx-stack:has(> .fx-panel > .fx-head > .fx-ico) > .next-card:not([hidden]) + .fx-sum { margin-top: -17px; }

/* 仪表盘「营业统计」标题后面的数据更新时间（客户端上报 `detail.biz.daily_at`，
   一串现成文案，如 `10-3 10:20`；没报整段隐藏）。
   要求是「营业统计丨10-3 11:37」—— 紧跟在标题后面，所以左边只留 3px；
   margin-right:auto 把下面的「今天 / 昨天 / 日期」那组顶到右边，不再把它挤在中间。*/
.stat-at { margin-left: 3px; margin-right: auto; font-size: 12.5px; color: #93a6b3; }
.stat-at .fx-sep-x { margin-right: 5px; color: #c9d8e2; }
.stat-at b { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 12.5px; font-weight: 600; color: #61757f; }
.next-card[hidden] { display: none; }
.next-card-k { color: #6b8d80; }
.next-card-v .fx-num { font-size: 14px; font-weight: 700; color: #0b7a56; }
.next-card-v [data-cd-done] { color: #0b7a56; font-weight: 600; }

/* ③ 推荐好友：行（白底细边，跟任务行同款；行距 / 内边距都收紧一档），Lv 做成小标签、名字占中间、服务器靠右 */
.fr-list { display: flex; flex-direction: column; gap: 5px; margin: 0; padding: 0; list-style: none; }
.fr-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 11px;
    border: 1px solid #d5e3ea;
    border-radius: 12px;
    background: #fff;
}
.fr-lv {
    flex: 0 0 auto;
    padding: 1px 7px;
    border: 1px solid #dbe9f1;
    border-radius: 8px;
    background: #f1f7fb;
    font-size: 11.5px;
    font-weight: 600;
    color: #6d8a99;
    white-space: nowrap;
}
.fr-lv .fx-num { font-size: 13px; font-weight: 700; color: #0b7a56; }
.fr-nm {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 13.5px;
    font-weight: 500;
    color: #16181b;
}
.fr-sv { flex: 0 0 auto; margin-left: auto; font-size: 11.5px; color: #7b8f9c; white-space: nowrap; }
.fr-sv .fx-num { font-size: 12.5px; font-weight: 500; color: #4a6070; }

/* 「现在可以免费刷新」：绿点 + 绿字 */
/* hidden 属性必须真的不占位
   （.fx-ok / .dt-placeholder / .cfg-groups 这些设了 display，会盖掉浏览器默认的 [hidden]）

   ⚠️ 这条是全局的、带 !important —— 它会**赢过内联样式**。
      所以别再写「元素带 hidden 属性 + JS 用 style.display 显示它」这种组合，
      那样会失效而且很难查。要么删 hidden 属性，要么用 class 控制。 */
[hidden] { display: none !important; }

/* 「数据等待客户端回传」提示条：只在账号还没报过数据时显示 */
.dt-placeholder {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    margin: 0 0 12px;
    padding: 10px 13px;
    border: 1px solid #fde68a;
    background: #fffbeb;
    color: #92400e;
    border-radius: 11px;
    font-size: 12.5px;
    line-height: 1.6;
}
.dt-placeholder b { font-weight: 600; }
.dt-placeholder span { color: #b45309; }
.dt-placeholder::before {
    content: "";
    flex: 0 0 auto;
    align-self: center;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #f59e0b;
}

.fx-ok { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: #0b8a5f; }
.fx-ok::before { content: ""; flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

@media (max-width: 460px) {
    .fr-metric { padding: 7px 4px; }
    .fr-metric-v .fx-num { font-size: 16px; }
    .fx-sum { padding: 7px 10px; }
    .fx-sum-cell .fx-num { font-size: 14px; }
    .fx-sum-line .fx-num { font-size: 12.5px; }
    .fr-list { gap: 4px; }
    .fr-row { padding: 6px 10px; }
    .fr-nm { font-size: 13px; }
}

/* ==========================================================================
   综合任务 → 视频 tab（免费元宝礼包 / 公会建设视频）
   —— 卡片、任务行（.dy-task / .dy-st）、汇总条（.fx-sum）全部沿用现有那套，只补两行新的
   ========================================================================== */
/* 服务器记录 / 备注这类小灰字行 */
.fx-meta { font-size: 12.5px; line-height: 1.55; color: #8fa0ac; }
.fx-meta .fx-num { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 500; color: #61757f; }
.fx-meta .fx-bar { margin: 0 4px; font-size: .8em; color: #c3d6e4; }

/* 待办状态提示（如「未加入公会」）：淡琥珀底 + 细边，跟「待收获」的土地同色系 */
.fx-warn {
    padding: 7px 11px;
    border: 1px solid #e9e3d6;
    border-radius: 10px;
    background: #fffdfa;
    font-size: 12.5px;
    line-height: 1.55;
    color: #b45309;
}
.fx-warn > b { font-weight: 600; }

@media (max-width: 460px) {
    .fx-meta { font-size: 11.5px; }
    .fx-meta .fx-num { font-size: 12.5px; }
    .fx-warn { padding: 6px 10px; font-size: 12px; }
}

/* ==========================================================================
   综合任务 → 宝箱 tab（福利宝箱 / 日常宝箱）
   —— 今日获得的瓦片、进度条（.dy-bar）、倒计时都复用现有那套
   ========================================================================== */
/* 倒计时行（「37分5秒 后可以获取 1 个宝箱」）：数字用等宽绿字，到点由 app.js 切成 [data-cd-done] */
.cd-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 2px; font-size: 13px; color: #4a6070; }
.cd-line .fx-num {
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
    font-size: 14.5px;
    font-weight: 700;
    color: #0b7a56;
}
.cd-line [data-cd-done] { color: #0b8a5f; }

@media (max-width: 460px) {
    .cd-line { font-size: 12.5px; }
    .cd-line .fx-num { font-size: 13.5px; }
}

/* 宝箱「今日获得」：薄荷绿汇总框里放一行文字（比好友 tab 那个汇总框再收一档，数字小一号） */
.fx-box { padding: 7px 10px; }
.fx-box .fx-sum-line { font-size: 12.5px; }
.fx-box .fx-today-k { font-size: 13px; }
.fx-box .fx-num { font-size: 13.5px; font-weight: 700; color: #0b7a56; }

@media (max-width: 460px) {
    .fx-box { padding: 6px 9px; }
    .fx-box .fx-sum-line { font-size: 12px; }
    .fx-box .fx-num { font-size: 12.5px; }
}

/* ==========================================================================
   综合任务 → 珍珠 tab（珍珠与雇佣书 / 珍珠采集点 / 自己被人雇佣）
   —— 卡片、任务行、汇总框、倒计时全用现有那套，只补一个「行右侧倒计时」
   ========================================================================== */
.pr-cd { flex: 0 0 auto; margin-left: auto; font-size: 13px; color: #4a6070; white-space: nowrap; }
.pr-cd .fx-num {
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
    font-size: 13.5px;
    font-weight: 700;
    color: #0b7a56;
}

@media (max-width: 460px) {
    .pr-cd { font-size: 12.5px; }
    .pr-cd .fx-num { font-size: 13px; }
}

/* 汇总框里的「主标题」文字（如「珍珠数量」「待收获珍珠」「正在打工中」）：比正文大一号 + 黑字 + 不加粗 */
.fx-sum-key { font-size: 15px; font-weight: 400; color: #16181b; }
.fx-sum-key .fx-num { font-size: 17px; }

/* 带边框的成对信息框（宝箱今日获得 / 珍珠奖励列表）：名称黑字、数值绿字（区分开） */
.fx-box .fx-sum-cell { color: #16181b; }

/* PC：珍珠采集点分 2 列（列宽会变窄，倒计时跟着收一档） */
@media (min-width: 1025px) {
    .pr-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .pr-grid > .dy-task { min-width: 0; }
    .pr-grid .dy-task-main { gap: 4px; }
    .pr-grid .pr-cd { font-size: 12.5px; }
    .pr-grid .pr-cd .fx-num { font-size: 13px; }
}

/* ==========================================================================
   综合任务 → 宠物 tab（猫咪状态 / 纪念品收藏 / 外出事件）
   ========================================================================== */
/* 30 档收藏奖励：**移动端单列**（行宽松、字号正常）；**PC才分 2 列小瓦片**
   奖励行允许折行，但以「标签 + 数值」成对小片为单位（.pt-rw），不会把数值单独拆到下一行 */
.pt-tiers { gap: 6px; }
.pt-tiers .dy-task { padding: 6px 10px; gap: 2px; }
.pt-tiers .dy-task-main { gap: 4px; }
.pt-tiers .dy-task-name { font-size: 13px; }
.pt-tiers .dy-task-name .fx-num { font-size: 13.5px; }
.pt-tiers .dy-task-ft,
[data-sub-panel="sign"] .dy-task-ft { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 2px; white-space: normal; }
.pt-tiers .dy-task-ft { font-size: 11.5px; line-height: 1.45; }
[data-sub-panel="sign"] .dy-task-ft { font-size: 12px; line-height: 1.45; }
[data-sub-panel="sign"] .dy-task-ft .fx-num { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 12.5px; font-weight: 500; color: #16181b; }
.pt-rw { white-space: nowrap; }   /* 「标签 + 数值」成对不拆行（奖励行窄了在成对之间折行） */
.pt-tiers .dy-st { padding: 1px 7px; font-size: 11px; }

@media (min-width: 1025px) {
    /* PC：列宽窄，字号跟着收一档 */
    .pt-tiers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
    .pt-tiers > .dy-task { min-width: 0; padding: 6px 9px; }
    .pt-tiers .dy-task-name { font-size: 11.5px; }
    .pt-tiers .dy-task-name .fx-num { font-size: 12.5px; }
    .pt-tiers .dy-task-ft { font-size: 11px; }
    .pt-tiers .dy-st { padding: 1px 5px; font-size: 10.5px; }
}

/* 外出事件：一段文字 + 底部（获得 / 时间）；相对时间用品牌绿加粗，描述用正文字色 */
.pt-events { display: flex; flex-direction: column; gap: 7px; margin: 0; padding: 0; list-style: none; }
.pt-event {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 9px 11px;
    border: 1px solid #d5e3ea;
    border-radius: 12px;
    background: #fff;
}
.pt-event-txt { margin: 0; font-size: 13px; line-height: 1.65; color: var(--ink); }
.pt-ago { font-weight: 600; color: #0b8a5f; }
.pt-event-ft { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 2px; font-size: 12.5px; color: #8fa0ac; }
.pt-event-ft .fx-num { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: inherit; font-weight: inherit; color: inherit; }
.pt-event-ft .fx-bar { margin: 0 4px; font-size: .8em; color: #c3d6e4; }
.pt-time { color: #9aacb8; }

@media (max-width: 460px) {
    .pt-event { padding: 8px 10px; }
    .pt-event-txt { font-size: 12.5px; }
    .pt-event-ft { font-size: 11.5px; }
    .pt-tiers { gap: 5px; }
    .pt-tiers .dy-task { padding: 6px 9px; }
    .pt-tiers .dy-task-name { font-size: 12.5px; }
    .pt-tiers .dy-task-name .fx-num { font-size: 13px; }
    .pt-tiers .dy-task-ft { font-size: 11px; }
}

/* ==========================================================================
   综合任务 → 签到 tab（本期签到概览 / 本期签到列表 / 七日签到）
   ========================================================================== */
/* 29 天列表：单行（第 N 日 / 奖励 / 状态小标），一行约 32px；不使用 2 列（三段的行放不进 155px 窄列） */
.sg-list { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.sg-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid #d5e3ea;
    border-radius: 10px;
    background: #fff;
}
.sg-day { flex: 0 0 auto; font-size: 12.5px; color: #4a6070; white-space: nowrap; }
.sg-day .fx-num { font-size: 13px; font-weight: 700; color: #0b7a56; }
.sg-gift { flex: 0 1 auto; margin-left: auto; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12.5px; color: #7b8f9c; }
.sg-gift .fx-num { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 700; color: #0b7a56; }
.sg-row .dy-st { margin-left: 0; padding: 1px 7px; font-size: 11px; }
.sg-cost { flex: 0 0 auto; font-size: 11.5px; color: #b45309; white-space: nowrap; }
.sg-cost .fx-num { font-family: var(--mono); font-size: 12px; font-weight: 600; color: inherit; }
/* 状态小标：琥珀（漏签 / 漏签待补） */
.dy-st.is-warn { background: rgba(180, 83, 9, .10); color: #b45309; }

/* 七日签到里的「随机 1 项：…」小字行 */
.sg-rand { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 2px; font-size: 11.5px; color: #9aacb8; }
.sg-rand .fx-num { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 12px; font-weight: 500; color: #61757f; }
.sg-rand .fx-bar { margin: 0 4px; font-size: .8em; color: #c3d6e4; }
.sg-rand .sg-dot { margin: 0 3px; color: #c3d6e4; font-style: normal; }   /* 概率前面的间隔点 */

@media (max-width: 460px) {
    .sg-row { padding: 6px 9px; gap: 5px; }
    .sg-day, .sg-gift { font-size: 12px; }
    .sg-day .fx-num, .sg-gift .fx-num { font-size: 12.5px; }
    .sg-row .dy-st { padding: 1px 6px; font-size: 10.5px; }
    .sg-cost { font-size: 11px; }
}

/* ==========================================================================
   主线任务 tab（主线进度 / 任务列表）
   —— 骨架是 4 列表格，这里按本站风格改成「任务行」（序号 / 描述 / 状态小标 + 条件·奖励一行），
      窄列里表格横向滚动太难用，且 116 条任务用行更适合手机
   ========================================================================== */
.ml-list { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
/* 行结构：徽章在左（固定列），右侧一列里放「描述 + 状态」和「条件·奖励」——
   这样描述跟下面那行条件·奖励**左边缘对齐**，不再被徽章顶出去 */
.ml-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 11px;
    border: 1px solid #d5e3ea;
    border-radius: 12px;
    background: #fff;
}
.ml-main { display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; min-width: 0; }
.ml-row-main { display: flex; align-items: center; gap: 6px; min-width: 0; }
/* 序号：改成浅蓝灰小徽章（跟好友列表的 Lv 小标同一套视觉），不再是裸数字 */
.ml-no {
    flex: 0 0 auto;
    margin-top: 1px;             /* 跟描述首行视觉居中 */
    min-width: 24px;
    padding: 1px 6px;
    border: 1px solid #dbe9f1;
    border-radius: 8px;
    background: #f1f7fb;
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
    font-size: 11.5px;
    font-weight: 600;
    color: #6d8a99;
    text-align: center;
}
.ml-name { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13.5px; font-weight: 500; color: var(--ink); }
.ml-row .dy-st { flex: 0 0 auto; margin-left: auto; padding: 1px 7px; font-size: 11px; }
.ml-cond { font-size: 12px; line-height: 1.55; color: #8fa0ac; }
.ml-cond .fx-num { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 12.5px; font-weight: 500; color: #61757f; }
.ml-cond .ml-sep { margin: 0 5px; color: #c3d6e4; font-style: normal; }

@media (max-width: 460px) {
    .ml-row { padding: 7px 10px; }
    .ml-name { font-size: 13px; }
    .ml-row .dy-st { padding: 1px 6px; font-size: 10.5px; }
    .ml-cond { font-size: 11.5px; }
    .ml-cond .fx-num { font-size: 12px; }
}

/* ==========================================================================
   长列表折叠（[data-collapse]）：默认限高 var(--cp-max, 300px)，超出时底部出现
   「点击展开 / 收起」按钮；内容没超出就完全不折叠、也不显示按钮（由 app.js 判断）
   —— 主线 48 行先用它，阶梯等长列表照这个套即可
   ========================================================================== */
.cp { position: relative; }
/* 折叠：限高作用在**列表本体**上。
 * ⚠️ 原来只写 `> :first-child` —— 而这些 .cp 的第一个子元素往往是空态 div（.fx-none），
 *    结果「限高 300px」挂在了空态上，列表根本没被裁，表现就是「点了展开没反应」。
 *    这里把几种列表本体都列上（ul / .dy-block / .fx-grid），并且和 app.js 里
 *    applyCollapse() 挑的元素保持一致。 */
.cp.is-clipped > :first-child,
.cp.is-clipped > ul,
.cp.is-clipped > .dy-block,
.cp.is-clipped > .fx-grid { max-height: var(--cp-max, 300px); overflow: hidden; }
/* 底部一层淡出，暗示下面还有内容（卡片底色偏白，用同色收边） */
.cp.is-clipped::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 34px;
    height: 32px;
    background: linear-gradient(rgba(251, 253, 255, 0), #fbfdff);
    pointer-events: none;
}
.cp-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    margin-top: 6px;
    padding: 6px 10px;
    border: 1px solid #d5e3ea;
    border-radius: 10px;
    background: #fff;
    color: #4a6070;
    font-family: inherit;
    font-size: 12.5px;
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease, color .16s ease;
}
.cp.has-more .cp-toggle { display: inline-flex; }   /* 内容超出：折叠态 / 展开态都要能点 */
.cp-toggle[hidden] { display: none; }
.cp-toggle:hover { border-color: #c9e2f4; background: #f6fbfe; color: #0b7a56; }
.cp-ico { transition: transform .2s ease; }
.cp.is-open .cp-ico { transform: rotate(180deg); }

@media (max-width: 460px) {
    .cp-toggle { font-size: 12px; padding: 6px 8px; }
}

/* ==========================================================================
   综合任务 → 福利 tab
   ========================================================================== */
/* 一句话状态（今日未完成 / 待执行 / 已完成）：小圆点 + 彩色字 */
.bn-st { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; }
.bn-st::before { content: ""; flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.bn-st.is-todo { color: #b45309; }
.bn-st.is-done { color: #0b8a5f; }

/* 卡头右侧小标：频率（每日 / 被动 / 一次性…）+ 活动任务的「剩余时间」 */
.bn-freq, .bn-rest {
    flex: 0 0 auto;
    margin-left: auto;
    padding: 1px 8px;
    border: 1px solid #dbe9f1;
    border-radius: 999px;
    background: #f1f7fb;
    font-size: 11px;
    font-weight: 600;
    color: #6d8a99;
    white-space: nowrap;
}

/* 备注里的正向状态（✓ 可发船 之类） */
.bn-on { margin-left: 4px; color: #0b8a5f; font-weight: 600; }

@media (max-width: 460px) {
    .bn-st { font-size: 12.5px; }
    .bn-freq, .bn-rest { font-size: 10.5px; padding: 1px 7px; }

    /* 活动任务：小方盒的字号再收一档 */
    .bn-box-hd { font-size: 12.5px; }
    .bn-box-l { font-size: 11.5px; }
    .bn-box-l .fx-num { font-size: 12px; }
    .bn-rack, .bn-ords { gap: 6px; }

    /* 活动任务卡标题：手机上也跟着大一号 */
    [data-dt-panel="event"] .fx-head h3 { font-size: 14px; }
    [data-dt-panel="event"] .fx-head h3::before { height: 13px; }
}

/* ==========================================================================
   活动任务 tab（碎玉成瓶 / 花游太空 / 莳花纪闻）
   —— 卡片、汇总框（.fx-sum / .fx-box）、状态小标（.dy-st）、倒计时（[data-countdown]）
      全部沿用现有那套；这里只补「小方盒」+ 两个状态色
   ========================================================================== */
/* 琥珀色待办小字（未答满 之类） */
.bn-todo { margin-left: 4px; color: #b45309; font-weight: 600; }

/* 汇总行里的状态小标（inline 用）：跟前面的文字留一点距离 */
.fx-sum-cell .dy-st { margin-left: 4px; }

/* 小方盒：花架 1/2/3（.bn-rack = 两列）与订单（.bn-ords = 单列堆叠） */
.bn-rack { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.bn-ords { display: flex; flex-direction: column; gap: 8px; }
.bn-box {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid #d5e3ea;
    border-radius: 12px;
    background: #fff;
}
.bn-box-hd { display: flex; align-items: baseline; gap: 5px; font-size: 13px; font-weight: 600; color: #16181b; }
.bn-box-no { flex: 0 0 auto; font-family: var(--mono); font-size: 11.5px; font-weight: 600; color: #9aacb8; }
.bn-box-l { font-size: 12px; line-height: 1.5; color: #8fa0ac; }
.bn-box-l .fx-num { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 12.5px; }
.bn-box-v { margin-left: 2px; color: #b45309; }        /* 空闲（待上架） */
.bn-box-l.is-wait { color: #b45309; }                  /* 等待刷新 · 倒计时 */
.bn-box-l.is-wait .fx-num { color: #b45309; }

/* 档位行的奖励行：允许折行（PC 一行 3 列时列窄，靠 .pt-rw 成对原子小片换行，不会拆散「元宝 ×80」） */
.ev-tiers .dy-task-ft { white-space: normal; flex-wrap: wrap; }

/* PC（≥1025px）：花架 / 订单 / 奖励档位都铺成多列 —— 列宽够就一行 3 个，不够自动 2 个 / 1 个，永不挤扁
   （实测：1440 视口 2 列 / 1600 与 1920 视口都是 3 列） */
@media (min-width: 1025px) {
    .bn-rack,
    .bn-ords,
    .ev-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
    .ev-tiers { gap: 8px; }
}

/* 活动任务卡标题大一号（13px → 15px，标题左边那条竖条跟着加高） */
[data-dt-panel="event"] .fx-head h3 { font-size: 15px; }
[data-dt-panel="event"] .fx-head h3::before { height: 14px; }

/* --------------------------------------------------------------------------
   活动任务：卡头左上的图标 + 卡头布局（重新设计过一版）
   ① 图标＝**透明贴纸**：不描边、不底色、不圆角、不裁切，只靠一层跟着形状走的
      柔投影（filter: drop-shadow）跟卡面分开 —— 像贴在卡上的贴纸，不是贴了个方块
   ② 卡头在图标底下铺一层同色柔光（radial），图标跟卡面化在一起，不再是硬贴上去
   ③ 卡头收口用「左实右隐」的同色发丝线（比整条硬线柔和）
   ④ 标题前那道竖条去掉（图标就是视觉引导），标题 15px + 同色系深色
   ⑤ 「剩余时间」小标去掉描边、改同色淡底胶囊
   贴合要点：图标**贴在卡片左内边（left: 2px，绝不往左溢）**，只让**上方**露到卡片外一头；
   面板左右都不留额外白（只留顶部一点给露出的那头）；卡片不能裁切（.fx-panel overflow: visible）。
   -------------------------------------------------------------------------- */
[data-dt-panel="event"] .fx-panel { overflow: visible; }
[data-dt-panel="event"].dt-panel.is-stack { gap: 32px; }
[data-dt-panel="event"] { padding-top: 24px; }   /* 只在上面留一点白：给图标露在卡片外的那一头 */

/* 卡头：左边留给图标（padding-left）；右边「标题 …… 剩余时间」同一行，
   剩余时间靠最右（.bn-rest 自带 margin-left:auto），跟标题中线对齐 */
[data-dt-panel="event"] .fx-head {
    position: relative;
    align-items: center;
    padding: 10px 14px 10px 84px;
    background: radial-gradient(190px 130px at 40px 46%, var(--ev-bg1) 0%, rgba(255, 255, 255, 0) 74%);
}
[data-dt-panel="event"] .fx-head::after {
    content: "";
    position: absolute;
    left: 84px;
    right: 14px;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, var(--ev-line) 0%, rgba(255, 255, 255, 0) 84%);
}
[data-dt-panel="event"] .fx-head h3::before { display: none; }
/* 图标：左边缘贴在卡片里侧（不往左溢），只有**上方**露在卡片外面一头（top 就是露出的高度）；
   左边缘 left: 2px、上方 top: -20px 都是按需求直接给的定值 */
[data-dt-panel="event"] .fx-head .fx-ico {
    position: absolute;
    left: 2px;
    top: -20px;
    z-index: 2;
    width: 72px;
    height: 72px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    object-fit: contain;
    overflow: visible;
    filter: drop-shadow(0 6px 10px rgba(15, 42, 60, .22)) drop-shadow(0 1px 2px rgba(15, 42, 60, .10));
}

/* --------------------------------------------------------------------------
   三张活动卡三种色系：青瓷（碎玉成瓶）/ 星夜紫（花游太空）/ 湖蓝（莳花纪闻）
   —— 一个色系里分三层做色差（由浅到深），层次一眼看得出来：
        ① 卡底：淡的同色系渐变 + 同色系描边
        ② 汇总框（.fx-sum）：中浓度同色渐变底 + 更深的描边
        ③ 任务行 / 小方盒（.dy-task / .bn-box）：**纯白底** + 明显的同色系描边
      标题 / 小标题 / 块内键名 = 同色系深色字；状态色仍是语义色，不跟着换
      （未领 / 未达标 = 灰、已领取 / 自动开启中 = 绿、待上架 / 等待刷新 / 未答满 = 琥珀）。
   -------------------------------------------------------------------------- */
/* ① 青瓷（碎玉成瓶） */
.fx-panel.ev-celadon {
    border-color: #a8d2c9;
    background: radial-gradient(120% 92% at 0% 0%, rgba(13, 148, 136, .09), rgba(13, 148, 136, 0) 58%),
                radial-gradient(110% 92% at 100% 100%, rgba(56, 178, 172, .085), rgba(56, 178, 172, 0) 60%),
                linear-gradient(160deg, #fbfefd 0%, #f0f8f6 54%, #ecf5f2 100%);
}
.fx-panel.ev-celadon .fx-head h3::before { background: linear-gradient(180deg, #7fd6c9, #35ab9c); }
.fx-panel.ev-celadon .stat-sub::before { background: rgba(13, 148, 136, .55); }
.fx-panel.ev-celadon .bn-rest { border-color: transparent; background: #e6f6f1; color: #0b5c54; }

/* ② 星夜紫（花游太空） */
.fx-panel.ev-space {
    border-color: #bfb4e4;
    background: radial-gradient(120% 92% at 0% 0%, rgba(124, 58, 237, .085), rgba(124, 58, 237, 0) 58%),
                radial-gradient(110% 92% at 100% 100%, rgba(139, 92, 246, .08), rgba(139, 92, 246, 0) 60%),
                linear-gradient(160deg, #fdfcff 0%, #f5f0fc 54%, #f1eafa 100%);
}
.fx-panel.ev-space .fx-head h3::before { background: linear-gradient(180deg, #c3aef3, #7c4bdb); }
.fx-panel.ev-space .stat-sub::before { background: rgba(124, 58, 237, .5); }
.fx-panel.ev-space .bn-rest { border-color: transparent; background: #efe8fc; color: #4b3a95; }

/* ③ 湖蓝（莳花纪闻） */
.fx-panel.ev-blue {
    border-color: #b3cae8;
    background: radial-gradient(120% 92% at 0% 0%, rgba(37, 99, 235, .085), rgba(37, 99, 235, 0) 58%),
                radial-gradient(110% 92% at 100% 100%, rgba(59, 130, 246, .075), rgba(59, 130, 246, 0) 60%),
                linear-gradient(160deg, #fbfdff 0%, #eff5fd 54%, #eaf2fc 100%);
}
.fx-panel.ev-blue .fx-head h3::before { background: linear-gradient(180deg, #a8c8f5, #4c7fe0); }
.fx-panel.ev-blue .stat-sub::before { background: rgba(37, 99, 235, .45); }
.fx-panel.ev-blue .bn-rest { border-color: transparent; background: #e6f0fd; color: #1b4b8f; }

    /* 4) 粉红（花笺集芳，客户端 1.3.2xx）
         玫瑰系：#db2777 / #ec4899 / #f9a8d4 —— 与青瓷·星夜紫·湖蓝同一套「淡底 + 深色字」语言，
         状态色仍用语义色，不跟着换。 */
    /* 花笺集芳 · 玫瑰灰系

       ★★ 活动卡（[data-dt-panel="event"]）的块描边 / 卡头光晕 / 标题 / 数值 /
          分隔符**全部走这套 --ev-* 变量**（见 5869 行 .fx-head::after 与 6218 行起）。
          其它色系（青瓷 / 星夜紫 / 湖蓝 / 蜜金）各自在 .fx-panel.ev-XXX 上定义了它，
          花笺集芳一开始**没定义** ⇒ 整卡沿用了青绿默认值 —— 这才是「配色不统一」的根。
          所以这里优先定义变量，而不是逐条写死颜色。

       ⚠️ --ev-line 是卡头那条分隔线的颜色（由 .fx-head::after 画，不是 border-bottom）；
          2026-10-27 用户要求「边框更深一点」⇒ 从 #f2e6ec 提到 #e6c8d8，看得见但不刺眼。 */
    .fx-panel.ev-hua {
        border-color: #e6c8d8;
        background: radial-gradient(120% 92% at 0% 0%, rgba(190, 24, 93, .035), rgba(190, 24, 93, 0) 58%),
                    linear-gradient(165deg, #fffefe 0%, #fefbfc 58%, #fdf7fa 100%);
        /* 高级感的三层：边框定义形体 → 近距细影贴地 → 远距大扩散托起
           ⚠️ 阴影用玫瑰灰(138,90,110) 而不是黑色，才不脏 */
        box-shadow: 0 1px 2px rgba(138, 90, 110, .06),
                    0 12px 30px -14px rgba(138, 90, 110, .14);
    }
    /* 卡头：不再覆盖 background —— 让 5869 行那条 radial 光晕（取 --ev-bg1）生效；
       分隔线由 .fx-head::after 取 --ev-line 画，所以也不写 border-bottom。 */
    .fx-panel.ev-hua .fx-head { border-bottom: 0; }
    .fx-panel.ev-hua .fx-head h3 { color: #8a5a6e; font-weight: 600; }
    .fx-panel.ev-hua .fx-head h3::before { background: linear-gradient(180deg, #f0c8da, #dda3c1); }
    /* 「最近：xxx」小字与倒计时也跟着走粉色系 */
    .fx-panel.ev-hua .fx-head .next-card-k,
    .fx-panel.ev-hua .fx-head .next-card-v { color: #a97e92; }
    .fx-panel.ev-hua .bn-rest {
        border-color: transparent;
        background: #fdf5f9;
        color: #9c6a80;
        box-shadow: inset 0 0 0 1px #f8e8f0;
        /* 状态说明最长 60 字，不限宽会把卡头的「下次执行时间」挤到第二行 */
        max-width: 44%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* 小标题（今日获得 / 今日次数）：粉色字 + 粉色竖条 */
    .fx-panel.ev-hua .stat-sub { color: #8a5a6e; font-weight: 600; }
    .fx-panel.ev-hua .stat-sub::before { background: linear-gradient(180deg, #f0c8da, #dda3c1); }

    /* 开关胶囊：活动 / 解锁槽位 / 兑换对象 —— 文案由 renderAutoStatus 填 textContent */
    .ev-hua .hua-sw { display: flex; flex-wrap: wrap; gap: 8px; }
    /* 开关行：轻量化纯文字（用户 2026-10-27：不要徽标/胶囊）
       形如「活动：已开启 丨 解锁槽位：已开启 丨 自动兑换：水滴 ×6」 */
    .ev-hua .hua-sw {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0 10px;
        font-size: 12.5px;
        line-height: 1.5;
    }
    .ev-hua .hua-pill {
        display: inline-flex;
        align-items: center;
        gap: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: none;
        font-size: 12.5px;
        font-weight: 400;
        line-height: 1.5;
        white-space: nowrap;
    }
    /* 第 2、3 项前面加一个细分隔符 */
    .ev-hua .hua-pill + .hua-pill::before {
        content: "丨";
        margin-right: 10px;
        color: #eddfe6;
    }
    /* 胶囊左侧的「这是什么」标签（活动 / 解锁槽位 / 自动兑换）
       —— 没有它会出现两颗一模一样的「已开启」，分不清说的是哪一项 */
    .ev-hua .hua-pl-k {
        font-style: normal;
        font-weight: 400;
        color: #b3a0a9;
    }
    .ev-hua .hua-pill b { font-weight: 600; color: #8a5a6e; }
    .ev-hua .hua-pill[hidden] { display: none; }   /* display:inline-flex 会盖掉 [hidden] */
    .ev-hua .hua-pill.is-got b { color: #b8759a; }

    /* 三个指标：当前集芳笺 / 累计集芳笺 / 已执行轮数 */
    .ev-hua .hua-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
    .ev-hua .hua-metric {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        padding: 12px 8px;
        border: 1px solid #f0dae5;
        border-radius: 14px;
        box-shadow: 0 1px 1px rgba(138, 90, 110, .03);
        background: linear-gradient(180deg, #fffdfe, #fff);
    }
    .ev-hua .hua-metric b { font-size: 22px; font-weight: 600; line-height: 1.1; color: #b8759a; }
    .ev-hua .hua-metric span { font-size: 12px; color: #b0959f; }

    /* 今日获得 / 今日次数：3 列小格子；「今日获得」只有 2 项，用 .is-two 铺两列 */
    .ev-hua .hua-today {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .ev-hua .hua-today.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* 奖励档位（3 档写死在模板里）—— 复用 .dy-task 结构，换成粉色系 */
    .ev-hua .hua-tiers .dy-task {
        border-color: #f0dae5;
        box-shadow: 0 1px 1px rgba(138, 90, 110, .03);
        background: #fff;   /* 用户 2026-10-27：档位卡片要纯白底 */
    }
    /* 达标那一档：粉边加深 + 徽章变粉（底色仍是白的） */
    .ev-hua .hua-tiers .dy-task.is-done {
        border-color: #e8c2d7;
        background: #fff;   /* 达标也是白底，只靠边框 + 徽章区分 */
    }
    /* 标题文字改黑（2026-10-27 用户：「卡片里的标题文字为黑色，比如 60 集芳笺」）
   用 #222 不用 #000 —— 纯黑在粉色系里发硬显脏 */
.ev-hua .hua-tiers .dy-task-name { color: #222; font-weight: 600; }
    .ev-hua .hua-tiers .dy-task-prog { color: #a98098; }
    .ev-hua .hua-tiers .dy-task-prog .fx-num { color: #b8759a; font-weight: 600; }
    .ev-hua .hua-tiers .dy-task-ft { color: #b0959f; }
    .ev-hua .hua-tiers .dy-task-ft .dy-sep { color: #eddfe6; }
    .ev-hua .hua-tiers .dy-st { background: #faf5f8; color: #a98098; }
    .ev-hua .hua-tiers .dy-st.is-got { background: #fcf1f6; color: #b8759a; }

    /* 任务栏位（3 个，复用 .dy-task，白底 + 粉边，同奖励档位） */
    .ev-hua .hua-slots .dy-task {
        border-color: #f0dae5;
        box-shadow: 0 1px 1px rgba(138, 90, 110, .03);
        background: #fff;
    }
    /* 已领取的那一栏：粉边加深 */
    .ev-hua .hua-slots .dy-task:has(.dy-st.is-got) {
        border-color: #e8c2d7;
        background: #fff;
    }
    /* 左侧序号小圆片 */
    .ev-hua .hua-slot-no {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 18px;
        height: 18px;
        border-radius: 6px;
        background: #fcf1f6;
        color: #b8759a;
        font-size: 11px;
        font-weight: 700;
        line-height: 1;
    }
    /* 任务栏位标题同样改黑，和奖励档位统一 */
.ev-hua .hua-slots .dy-task-name { color: #222; font-weight: 600; }
    .ev-hua .hua-slots .dy-task-prog { color: #a98098; }
    .ev-hua .hua-slots .dy-task-prog .fx-num { color: #b8759a; font-weight: 600; }
    /* 和上面的进度行左对齐 —— 序号 18px + gap 6px = 24px
   ⚠️ 只给 .hua-slots 加；奖励档位没有序号圆片，左边界就是卡片内边距
   （2026-10-27 用户：「奖励 1 集芳笺，这个没有跟上面的对齐」） */
.ev-hua .hua-slots .dy-task-ft { color: #b0959f; margin-left: 24px; }
    .ev-hua .hua-slots .dy-task-ft .fx-num { color: #b8759a; font-weight: 600; }
    .ev-hua .hua-slots .dy-st { background: #faf5f8; color: #a98098; }
    .ev-hua .hua-slots .dy-st.is-got { background: #fcf1f6; color: #b8759a; }
    /* 小标题里的「（已开 N 个）」 */
    .ev-hua .stat-sub .muted { font-weight: 400; font-size: 11.5px; color: #bda3ad; }

    /* PC 端：任务栏位一行 3 列（用户 2026-10-27 要求）
       ⚠️ 抽屉里的详情区不宽（1920 视口下约 620px），3 列每列只有 ~200px ⇒
          列内改成「任务名 / 进度+徽章 / 奖励」三行，徽章不再靠右挤压任务名。 */
    @media (min-width: 1025px) {
        .ev-hua .hua-slots,
        .ev-hua .hua-tiers {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 8px;
        }
        .ev-hua .hua-slots > .dy-task,
        .ev-hua .hua-tiers > .dy-task {
            min-width: 0;
            height: 100%;
            padding: 9px 10px;
        }
        /* 序号 + 任务名占一整行 */
        .ev-hua .hua-slots .dy-task-main,
        .ev-hua .hua-tiers .dy-task-main {
            flex-wrap: wrap;
            align-items: flex-start;
        }
        .ev-hua .hua-slots .dy-task-name,
        .ev-hua .hua-tiers .dy-task-name {
            flex: 1 1 calc(100% - 24px);
            white-space: normal;       /* 200px 放不下就折两行，别截断 */
            line-height: 1.35;
            font-size: 13px;
        }
        /* 进度 + 徽章换到第二行 */
        /* 进度：只有「任务栏位」要缩进让开序号，档位没有序号不缩 */
        .ev-hua .hua-slots .dy-task-prog {
            flex: 0 0 auto;
            margin-left: 24px;
        }
        .ev-hua .hua-tiers .dy-task-prog {
            flex: 0 0 auto;
            margin-left: 0;
        }
        .ev-hua .hua-slots .dy-st,
        .ev-hua .hua-tiers .dy-st { margin-left: 0; }
        .ev-hua .hua-slots .dy-task-ft,
        .ev-hua .hua-tiers .dy-task-ft { font-size: 12px; }
    }
    .ev-hua .hua-today li {
        display: flex;
        align-items: baseline;
        gap: 6px;
        padding: 9px 11px;
        border: 1px solid #f0dae5;
        box-shadow: 0 1px 1px rgba(138, 90, 110, .03);
        border-radius: 12px;
        background: #fff;
    }
    .ev-hua .hua-today .hua-k { font-size: 12.5px; color: #a98098; }
    .ev-hua .hua-today b { margin-left: auto; font-size: 16px; font-weight: 600; color: #b8759a; }
    .ev-hua .hua-today .hua-u { font-size: 11.5px; font-style: normal; color: #bda3ad; }

    @media (max-width: 900px) {
        /* 3 个指标卡在抽屉宽度（约 760px）里一行放得下 —— 不降到 2 列，否则 2+1 很难看 */
        .ev-hua .hua-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
        .ev-hua .hua-today   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (max-width: 560px) {
        .ev-hua .hua-metrics { grid-template-columns: 1fr; }
        .ev-hua .hua-today   { grid-template-columns: 1fr; }
        .ev-hua .hua-today.is-two { grid-template-columns: 1fr; }
    }

/* ⑤ 蜜金（百花成蜜） */
.fx-panel.ev-honey {
    border-color: #e7c78d;
    background: radial-gradient(120% 92% at 0% 0%, rgba(217, 119, 6, .085), rgba(217, 119, 6, 0) 58%),
                radial-gradient(110% 92% at 100% 100%, rgba(245, 158, 11, .08), rgba(245, 158, 11, 0) 60%),
                linear-gradient(160deg, #fffdf8 0%, #fdf6e9 54%, #fbf1de 100%);
}
.fx-panel.ev-honey .fx-head h3::before { background: linear-gradient(180deg, #f5cf7f, #d98314); }
.fx-panel.ev-honey .stat-sub::before { background: rgba(217, 119, 6, .5); }
.fx-panel.ev-honey .bn-rest { border-color: transparent; background: #fdf2dd; color: #8a5310; }

/* 每个色系在卡上挂一组变量，「卡内所有块」的样式统一取变量 */
[data-dt-panel="event"] .fx-panel {
    --ev-line: #bbd2e1;    /* 块描边（明显一档，跟卡底拉开） */
    --ev-bg1: #edf9f5;     /* 汇总框渐变（起） */
    --ev-bg2: #e2f2ec;     /* 汇总框渐变（止） */
    --ev-card: #fff;       /* 任务行 / 小方盒底（纯白） */
    --ev-title: #0b5c54;   /* 标题 / 小标题 / 键名 */
    --ev-ink: #2a6159;     /* 汇总框内文字 */
    --ev-num: #0b7a56;     /* 块内数值 */
    --ev-sub: #6f8f8a;     /* 灰字说明 */
    --ev-bar: #cfe0e8;     /* 分隔符 丨 · */
}
[data-dt-panel="event"] .fx-panel.ev-celadon {
    --ev-line: #a6cfc7; --ev-bg1: #e9f7f3; --ev-bg2: #dbeee8; --ev-card: #fff;
    --ev-title: #0b5c54; --ev-ink: #26615b; --ev-num: #0a6b61; --ev-sub: #5f8d86; --ev-bar: #b9d8d1;
}
[data-dt-panel="event"] .fx-panel.ev-space {
    --ev-line: #c2b2e9; --ev-bg1: #f0eafc; --ev-bg2: #e3d8f8; --ev-card: #fff;
    --ev-title: #4b3a95; --ev-ink: #443b7d; --ev-num: #6a2fd4; --ev-sub: #776fa1; --ev-bar: #cec2ec;
}
[data-dt-panel="event"] .fx-panel.ev-blue {
    --ev-line: #b3cae8; --ev-bg1: #e8f0fd; --ev-bg2: #dae7fa; --ev-card: #fff;
    --ev-title: #1b4b8f; --ev-ink: #3c5b8a; --ev-num: #1d4ed8; --ev-sub: #6d84a8; --ev-bar: #c9d8f0;
}
[data-dt-panel="event"] .fx-panel.ev-honey {
    --ev-line: #e7cb9a; --ev-bg1: #fdf6e8; --ev-bg2: #faecd3; --ev-card: #fff;
    --ev-title: #8a5310; --ev-ink: #8a6220; --ev-num: #c2711a; --ev-sub: #a08b63; --ev-bar: #e8d3ab;
}

/* ★ 2026-10-27：花笺集芳 · 玫瑰灰系
   ⚠️ 必须写在这个位置（和其它色系并列），且选择器要带 [data-dt-panel="event"] ——
      上面那条默认变量用的是同一个选择器，只写 .fx-panel.ev-hua 优先级不够，
      会被默认的青绿值盖掉（踩过：改成变量后页面照旧是青绿）。 */
[data-dt-panel="event"] .fx-panel.ev-hua {
    --ev-line: #e6c8d8; --ev-bg1: #fdf4f9; --ev-bg2: #faeaf2; --ev-card: #fff;
    --ev-title: #8a5a6e; --ev-ink: #7d5062; --ev-num: #b8759a; --ev-sub: #b0959f; --ev-bar: #eddfe6;
}

/* 标题 / 小标题 / 块内键名：同色系深色字 */
[data-dt-panel="event"] .fx-head h3,
[data-dt-panel="event"] .stat-sub,
[data-dt-panel="event"] .fx-sum-key,
[data-dt-panel="event"] .bn-box-hd,
[data-dt-panel="event"] .dy-task-name { color: var(--ev-title); }
[data-dt-panel="event"] .bn-box-no,
[data-dt-panel="event"] .bn-box-l { color: var(--ev-sub); }

/* 汇总框（含「自动开启中 丨 下次执行时间」那块带边框的） */
[data-dt-panel="event"] .fx-sum {
    border-color: var(--ev-line);
    background: linear-gradient(135deg, var(--ev-bg1) 0%, var(--ev-bg2) 100%);
    color: var(--ev-ink);
}
[data-dt-panel="event"] .fx-sum .fx-num,
[data-dt-panel="event"] .fx-sum .fx-slash,
[data-dt-panel="event"] .fx-sum-sub,
[data-dt-panel="event"] .fx-sum-sub .fx-num { color: var(--ev-num); }

/* 花游太空 / 莳花纪闻 里单独显示「航天币 / 花史残页」的那个框：**去掉边框和底色**（用户要求），
   当成普通信息行 —— 里面的「本期累计奖励」是 chips，自带样式，不受影响。
   判定：事件面板里**没有** .fx-box 的 .fx-sum（两个活动各一处，别改成更宽的选择器）。 */
[data-dt-panel="event"] .fx-sum:not(.fx-box) {
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
}

/* 这两行的**文字用正文黑**（原来是同色系的紫 / 蓝标题色），数值保持原来的高亮色不变（用户要求） */
[data-dt-panel="event"] .fx-sum:not(.fx-box) > .fx-sum-main .fx-sum-cell { color: var(--ink); }
[data-dt-panel="event"] .fx-sum:not(.fx-box) > .fx-sum-main .fx-sum-cell .fx-num { color: var(--ev-num); }

/* 「航天币：N」/「花史残页：N」：放在卡头（标题行）**正下方**、独立一行（用户要求）。
   同样不带框不带底色：黑字 + 同色系数值。间距交给 .fx-body 自己的 gap，这里不写 margin。 */
[data-dt-panel="event"] .fx-keyline { color: var(--ink); font-size: 13px; }
[data-dt-panel="event"] .fx-keyline .fx-num { color: var(--ev-num); font-weight: 600; font-size: 13.5px; }

/* 任务行（奖励档位）与花架 / 订单小方盒：纯白底 + 同色系描边 */
[data-dt-panel="event"] .dy-task,
[data-dt-panel="event"] .bn-box { border-color: var(--ev-line); background: var(--ev-card); }
[data-dt-panel="event"] .bn-box-l .fx-num { color: var(--ev-num); }
/* 等待刷新 · 倒计时 = 语义琥珀，压在这一组变量后面（不然会被上面的同色系规则盖掉） */
[data-dt-panel="event"] .bn-box-l.is-wait,
[data-dt-panel="event"] .bn-box-l.is-wait .fx-num { color: #b45309; }

/* 灰字说明与分隔符也跟着同色系 */
[data-dt-panel="event"] .fx-meta { color: var(--ev-sub); }
[data-dt-panel="event"] .fx-meta .fx-num { color: var(--ev-num); }
[data-dt-panel="event"] .fx-bar,
[data-dt-panel="event"] .dy-sep { color: var(--ev-bar); }

/* 活动任务：手机上的图标徽章整体小一档（外框 52×52 / 内图 42×42），
   卡片间距、面板顶部留白、卡头左内边距同步收一档
   （写在文件最后，免得被上面的主规则按「后写优先」盖掉） */
@media (max-width: 460px) {
    [data-dt-panel="event"].dt-panel.is-stack { gap: 30px; }
    [data-dt-panel="event"] { padding-top: 22px; }
    [data-dt-panel="event"] .fx-head { padding: 10px 12px 10px 82px; background: radial-gradient(170px 114px at 38px 46%, var(--ev-bg1) 0%, rgba(255, 255, 255, 0) 74%); }
    [data-dt-panel="event"] .fx-head::after { left: 82px; right: 12px; }
    [data-dt-panel="event"] .fx-head .fx-ico { left: 2px; top: -20px; width: 72px; height: 72px; }
}

/* ==========================================================================
   卡片左上角图标（通用版）—— 把「活动任务」那套「图标 + 标题 + 卡片」结合的风格
   铺到所有卡片：图标是透明贴纸，左边缘贴在卡片里侧（绝不往左溢），只有**上方**
   露到卡片外面一头（20px），跟卡头标题中线对齐。
   —— 用 `:has()` 做「卡片里有图标才生效」，省得给每个卡头加类
      （Chrome 105+ / Safari 15.4+ / Firefox 121+ 都支持）。
   ========================================================================== */
/* ① 图标本体 */
.fx-ico {
    position: absolute;
    left: 2px;
    top: -20px;
    z-index: 2;
    width: 72px;
    height: 72px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    object-fit: contain;
    overflow: visible;
    filter: drop-shadow(0 6px 10px rgba(15, 42, 60, .22)) drop-shadow(0 1px 2px rgba(15, 42, 60, .10));
}
/* ② 有图标的卡头：左边让出图标位置（84px）；标题前那道竖条去掉（图标就是视觉引导） */
.fx-head:has(> .fx-ico),
.stat-card:has(> .stat-head > .fx-ico) .stat-head { padding-left: 84px; }   /* .stat-card 那条更狠：压过 [data-auto] .stat-head 的 8px */
.fx-head:has(> .fx-ico) h3::before { display: none; }
/* ③ 卡片本身不能裁切（图标要露到卡片外面） */
.fx-panel:has(> .fx-head > .fx-ico),
.stat-card:has(> .stat-head > .fx-ico) { overflow: visible; }
/* ④ 容器得留出「图标上方那一头」的位置：带图标的面板 / 卡片堆间距各放一档
      （活动任务有自己的规则；别的面板第一张卡不带图标，就不用额外留白了） */
[data-dt-panel="multi"].dt-panel.is-stack { gap: 12px; }
.fx-stack:has(> .fx-panel > .fx-head > .fx-ico) { gap: 28px; }

/* 手机：带图标的卡头左内边距收一档（跟活动任务一致） */
@media (max-width: 460px) {
    .fx-head:has(> .fx-ico),
    .stat-card:has(> .stat-head > .fx-ico) .stat-head { padding-left: 82px; }
}

/* --------------------------------------------------------------------------
   福利 tab 的图标：小 2 号（72 → 56）、跟别的卡一样「上方露一头」但同比例收一档，
   并且卡片上下的间隔再大一号（28 → 36）
   —— 图片也统一过了：`static/icon/norm/` 下那 13 张是「裁到内容 + 补成正方形画布、
      内容最长边统一 208/256」的版本，所以每张图在页面上的实际视觉大小是一致的
      （原来星耀花园那张是 408×138 的长条、防骗那张是 183×265 的竖条，看着会偏小 / 偏窄）。
   -------------------------------------------------------------------------- */
/* 图标已按需求全部去掉，只剩「卡片上下间隔大一号」 */
[data-dt-panel="multi"] .fx-stack[data-sub-panel="benefit"] { gap: 12px; }

/* 福利 tab：卡头（标题行）与卡内容之间的上下留白收一档
   —— 卡头底内边距 8 → 3、卡内容顶内边距 10 → 7（合计 18px → 10px）；
      左右仍保持 12px（手机 10px），卡头顶部/底部留白也不动 */
[data-sub-panel="benefit"] .fx-head { padding-bottom: 3px; }
[data-sub-panel="benefit"] .fx-body { padding-top: 7px; }

/* 福利 tab：卡片标题不要加粗（700 → 500，字号 / 颜色 / 竖条都不动） */
[data-sub-panel="benefit"] .fx-head h3 { font-weight: 500; }

/* --------------------------------------------------------------------------
   宠物 tab：图标改成 64px（其余 tab 仍是 72），卡头左内边距跟着收到 74px
   —— 也就是「猫咪状态」这个标题比原来往左移 10px
   -------------------------------------------------------------------------- */
[data-sub-panel="pet"] .fx-ico { width: 64px; height: 64px; top: -16px; }
[data-sub-panel="pet"] .fx-head:has(> .fx-ico) { padding-left: 74px; }

/* --------------------------------------------------------------------------
   视频 tab：「视频任务」标题下面那两组任务行，**PC 端一行 2 个**（手机仍单列）
   —— 两张卡里各有一个「视频任务」列表，所以按子面板统一处理
   -------------------------------------------------------------------------- */
@media (min-width: 1025px) {
    [data-sub-panel="video"] .dy-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-items: stretch; }
}

/* --------------------------------------------------------------------------
   活动任务 tab：新增的「自动执行」条放在面板最上面（没有图标），
   所以面板顶部那点留白（给第一张**带图标**的卡露头用的）要做成条件式：
   只有第一个子元素是带图标的 .fx-panel 时才留白，否则贴顶（跟其它 tab 一致）。
   -------------------------------------------------------------------------- */
[data-dt-panel="event"] { padding-top: 0; }
[data-dt-panel="event"]:has(> .fx-panel:first-child > .fx-head > .fx-ico) { padding-top: 24px; }

@media (max-width: 460px) {
    [data-dt-panel="event"] { padding-top: 0; }
    [data-dt-panel="event"]:has(> .fx-panel:first-child > .fx-head > .fx-ico) { padding-top: 22px; }
}

/* ==========================================================================
   游戏配置层正文（account/_cfg.html）
   --------------------------------------------------------------------------
   结构：分组（.cfg-sec）= 一条横线 + 一个标题（.cfg-sec-h）+ 配置项网格（.cfg-grid）
     · PC（≥1025px）：**一行 4 个**；平板（461~1024px）：按 220px 自动 2 列；
       手机（≤460px）：1 列
       单张配置项（.cfg-item）：标题 + 描述小字 + 右侧勾选框（整张卡可点）
   配色沿用详情区那套：浅蓝底内容区 + 白卡 + 细蓝边 + 蓝勾选
   ========================================================================== */
/* 顶部提示卡（橙色）：提醒「默认就是最优解」—— 只看活动任务的新增 / 结束即可。
   放在「自动执行配置」上方，跟着下面的配置区块形成视觉隔离 */
.cfg-tip {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 18px;
    padding: 12px 15px;
    border: 1px solid #f6c98a;
    border-left: 4px solid #f59e0b;
    border-radius: 10px;
    background: linear-gradient(180deg, #fffaf1, #fff4e3);
    box-shadow: 0 1px 2px rgba(180, 110, 20, .06);
    color: #8a4b06;
    font-size: 13.5px;
    line-height: 1.5;
}

.cfg-tip-ico {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    color: #e08605;
}

.cfg-tip-ico svg { display: block; width: 100%; height: 100%; }

.cfg-tip-t strong { color: #b45309; font-weight: 600; }

/* 分组之间那条横线（第一个分组不加，它的上方是配置层头部自己的分隔线） */
.cfg-sec + .cfg-sec {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid #dbe8f1;
}

/* 分组标题：左边一小段蓝色竖条 + 右边拖一条渐隐横线 */
.cfg-sec-h {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 10px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .3px;
    color: #23485a;
}

.cfg-sec-h::before {
    content: "";
    flex: 0 0 auto;
    width: 3px;
    height: 14px;
    border-radius: 2px;
    background: linear-gradient(180deg, #3ba9dd, #0d7ea9);
}

.cfg-sec-h::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: linear-gradient(90deg, #dbe8f1, rgba(219, 232, 241, 0));
}

/* 大标题（一级区块，如「花朵种植」）：比小分组标题大一号、竖条用绿→蓝渐变，
   自身带一条分隔横线（跟小分组之间的横线同一套视觉，只是层级更高） */
.cfg-group {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid #dbe8f1;
}

.cfg-group-h {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
    font-size: 16.5px;
    font-weight: 700;
    letter-spacing: .4px;
    color: #123c50;
}

.cfg-group-h::before {
    content: "";
    flex: 0 0 auto;
    width: 4px;
    height: 18px;
    border-radius: 2px;
    background: linear-gradient(180deg, #35c9a4, #0d7ea9);
}

.cfg-group-h::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: linear-gradient(90deg, #cfe0ea, rgba(207, 224, 234, 0));
}

/* 大标题里的小分组（培育配置 / 种花配置 / 好友偷花配置 / 花艺上架配置）：
   标题退一档（更小、更淡、竖条更浅），免得跟大标题抢层级；分组之间一条细横线 */
.cfg-group-body > .cfg-sec + .cfg-sec { margin-top: 16px; padding-top: 14px; }

.cfg-group-body > .cfg-sec > .cfg-sec-h {
    font-size: 14px;
    color: #46697c;
    margin-bottom: 9px;
}

.cfg-group-body > .cfg-sec > .cfg-sec-h::before {
    height: 13px;
    background: linear-gradient(180deg, #a9cde0, #6ea7c4);
}

@media (max-width: 460px) {
    .cfg-group { margin-top: 18px; padding-top: 15px; }
    .cfg-group-h { font-size: 15.5px; margin-bottom: 10px; }
    .cfg-group-h::before { width: 3px; height: 16px; }
}

/* 配置项网格 */
.cfg-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
    align-items: stretch;
}

/* 单张配置项：整卡可点（等于点右侧勾选框） */
.cfg-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
    padding: 11px 12px;
    border: 1px solid #d5e3ea;
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.cfg-item:hover { border-color: #b9d9ee; box-shadow: 0 10px 20px -16px rgba(10, 37, 49, .6); }
.cfg-item:has(input:checked) { background: #fff; }
.cfg-item:has(input:focus-visible) { border-color: #8ed0f0; }

.cfg-item-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
/* 标题：**禁止换行**（列窄时省略号收尾，不把卡片顶高） */
.cfg-item-t {
    display: block;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;
    color: #16181b;
}
/* 说明：**最多 2 行**（超出省略），高度跟标题一样不拖泥带水 */
.cfg-item-d {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 12.5px;
    line-height: 1.6;
    color: #8fa0ac;
    overflow-wrap: anywhere;
}

/* 勾选框：20×20 圆角方框，选中 = 蓝底白勾（跟截图那套一致） */
.cfg-chk { position: relative; flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px; }

.cfg-chk input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.cfg-chk i {
    display: block;
    width: 20px;
    height: 20px;
    border: 1.5px solid #c3d5e0;
    border-radius: 6px;
    background: #fff;
    box-shadow: inset 0 1px 2px rgba(10, 37, 49, .05);
    transition: border-color .14s ease, background-color .14s ease, box-shadow .14s ease;
}

.cfg-item:hover .cfg-chk i { border-color: #a9c6da; }

.cfg-chk input:checked + i {
    border-color: #1a73e8;
    background: #1a73e8 url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.6 8.7l3 3 5.8-6.6'/%3E%3C/svg%3E") center / 13px 13px no-repeat;
    box-shadow: none;
}

.cfg-chk input:focus-visible + i { box-shadow: 0 0 0 3px rgba(26, 115, 232, .22); }

/* PC 端的列数按「配置层实际可用宽度」分档（左边还有 220px 侧栏 + 350px 账号列表，
   所以配置层宽 ≈ 视口 - 594px，最大 1100px）：
     · ≥1440px 视口 → 层宽 ≥846px  → **一行 4 个**（每张 ≥183px）
     · ≥1240px 视口 → 层宽 ≥646px  → 一行 3 个（每张 ≥183px）
     · ≥1080px 视口 → 层宽 ≥486px  → 一行 2 个（每张 ≥196px）
     · 1025~1079px  → 层宽 431~485px → 走基础规则（auto-fill 220px）自动落到 1 列
   目标：每一档都保证每张卡 ≥180px，实测标题与说明都不截断（说明恒 ≤2 行）。 */
@media (min-width: 1080px) {
    .cfg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1240px) {
    .cfg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1440px) {
    .cfg-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 460px) {
    .cfg-sec + .cfg-sec { margin-top: 16px; padding-top: 14px; }
    .cfg-sec-h { font-size: 14px; margin-bottom: 8px; }
    .cfg-grid { grid-template-columns: 1fr; gap: 8px; }
    .cfg-item { padding: 10px 11px; }
    /* 手机：一行放得下就一行，同样最多 2 行 */
    .cfg-item-t { font-size: 13.5px; }
    .cfg-item-d { font-size: 12px; }
}

/* --------------------------------------------------------------------------
   功能开关区（配置层最上面）：一级卡片里带可单独勾选的二级项
   · 一级勾选框仍在卡片右侧（跟普通卡片同一位置），下面是一条虚线 + 二级项列表；
   · 二级项用小一号的同款勾选框；一级勾选框支持半选（indeterminate）状态。
   -------------------------------------------------------------------------- */
.cfg-item.is-branch { flex-direction: column; align-items: stretch; gap: 9px; cursor: default; }

.cfg-branch-head { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.cfg-branch-head .cfg-item-main { flex: 1 1 auto; min-width: 0; }

.cfg-sub-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    padding-top: 9px;
    border-top: 1px dashed #e2ecf3;
}

.cfg-sub {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    line-height: 1.5;
    color: #4a6070;
    white-space: nowrap;
    cursor: pointer;
}

.cfg-sub input { position: absolute; width: 15px; height: 15px; margin: 0; opacity: 0; pointer-events: none; }

.cfg-sub i {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    border: 1.5px solid #c3d5e0;
    border-radius: 5px;
    background: #fff;
    transition: border-color .14s ease, background-color .14s ease, box-shadow .14s ease;
}

.cfg-sub:hover i { border-color: #a9c6da; }

.cfg-sub input:checked + i {
    border-color: #1a73e8;
    background: #1a73e8 url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.6 8.7l3 3 5.8-6.6'/%3E%3C/svg%3E") center / 10px 10px no-repeat;
}

.cfg-sub input:focus-visible + i { box-shadow: 0 0 0 3px rgba(26, 115, 232, .22); }

/* 一级勾选框的半选状态：二级只勾了一部分时显示「一横」 */
.cfg-chk input:indeterminate + i {
    border-color: #1a73e8;
    background: #1a73e8 url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M4 8h8'/%3E%3C/svg%3E") center / 11px 11px no-repeat;
    box-shadow: none;
}

@media (max-width: 460px) {
    .cfg-sub-list { gap: 6px 10px; padding-top: 8px; }
    .cfg-sub { font-size: 12px; }
}

/* ==========================================================================
   待定配置：**清单式布局**（不再是卡片）
   --------------------------------------------------------------------------
   · 每行 = 固定宽度的标题列（132px，右对齐对齐成一列）+ 一行说明 + 右侧勾选框；
   · 行与行之间只用一条极细横线，不用边框 / 底色 —— 视觉重心落在「对齐 + 留白」上；
   · 悬停：整行一层极浅的蓝色渐变 + 左侧 2px 蓝色细条滑出（高级感靠这个细节）；
   · 列数自适应（`auto-fit minmax(430px,1fr)`）：配置层够宽就两列，否则一列；
     手机把说明换到第二行（155px 的窄列塞不下）。
   ========================================================================== */
.cfg-lines {
    display: grid;
    /* 每列至少 430px（132 标题 + 14 + 说明 + 勾选框 + 内边距），够宽才排两列；
       配置层 1099px（1920 屏）正好两列，1440 及以下自动落成一列。
       ⚠️ 用 min(430px, 100%)：容器比 430px 还窄（手机）时列宽跟着 100%，不会横向溢出 */
    grid-template-columns: repeat(auto-fit, minmax(min(430px, 100%), 1fr));
    column-gap: 40px;
}

.cfg-line {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 2px 10px 10px;
    border-bottom: 1px solid #e9f1f6;
    cursor: pointer;
    transition: background .16s ease;
}

.cfg-line:last-child { border-bottom-color: transparent; }

.cfg-line::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 2px;
    height: 0;
    border-radius: 2px;
    background: linear-gradient(180deg, #3ba9dd, #0d7ea9);
    transform: translateY(-50%);
    transition: height .18s ease;
}

.cfg-line:hover { background: linear-gradient(90deg, rgba(14, 116, 144, .055), rgba(14, 116, 144, 0)); }
.cfg-line:hover::before { height: 20px; }
.cfg-line:has(input:focus-visible) { background: linear-gradient(90deg, rgba(14, 116, 144, .055), rgba(14, 116, 144, 0)); }
.cfg-line:has(input:focus-visible)::before { height: 20px; }

.cfg-line-t {
    flex: 0 0 132px;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 14px;
    font-weight: 600;
    color: #16181b;
    letter-spacing: .2px;
}

.cfg-line-d {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 12.5px;
    color: #8fa0ac;
}

/* --------------------------------------------------------------------------
   功能开关：**卡片版（一级 / 二级分明）**
   · 一张卡 = 一个模块：卡头（浅色渐变底：模块名 15.5px/600 + 说明 + 右侧大号 toggle）
     ＋ 一条分隔线 ＋ 二级区（浅色底 + 大号二级项）；
   · 一级与二级用「不同底色 + 一条分隔线」双重区分，一眼看得出谁属于谁；
   · 二级项 38px 高 / 13.5px 字 / 17px 勾选框，比一级的说明大一圈，看得清也点得准；
   · 两级开关形态也不同：一级 = 大号 toggle（支持半选），二级 = 方勾选框。
   -------------------------------------------------------------------------- */
/* PC：**一行 2 列**（手机 ≤460px 落回单列，见文件末尾的媒体查询） */
/* PC：**一行 3 列**（平板 ≤1024px 两列、手机 ≤640px 单列，见文件末尾的媒体查询）；
   align-items: start —— 没有二级的卡不被同行的「高卡」拉高，各按内容自适应 */
.cfg-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 12px; }

/* PC 三列时改「瀑布流」：行高拆成 8px 一格、行间距 0，每张卡的 `grid-row-end: span N`
   由 app.js 按自身实际高度算（N = ⌈(高度 + 12) / 8⌉）—— 于是同一行里的矮卡下面
   不会再被高卡拉出一大片空白，卡片像瀑布一样错落贴着排。
   ⚠️ 只在 JS 跑过之后才生效（JS 未运行时是普通网格，不会重叠）。 */
@media (min-width: 1025px) {
    .cfg-tiles.is-masonry { grid-auto-rows: 8px; row-gap: 0; }
}

.cfg-tile {
    border: 1px solid #dbe7f0;
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.cfg-tile:hover { border-color: #c2dcee; box-shadow: 0 12px 28px -26px rgba(10, 37, 49, 1); }

/* ① 一级：卡头 */
.cfg-tile-head {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 15px 16px;
    background: linear-gradient(180deg, #f8fcfe, #f1f7fc);
    cursor: pointer;
    transition: background .18s ease;
}

.cfg-tile-head:hover { background: linear-gradient(180deg, #f5fbff, #eaf5fd); }

.cfg-tile-h { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cfg-tile-t { font-size: 15.5px; font-weight: 600; letter-spacing: .3px; color: #123c50; }
.cfg-tile-d { font-size: 12.5px; color: #7d95a3; }

/* ② 二级区：浅底 + 分隔线，跟一级分得清清楚楚 */
.cfg-tile-body { padding: 13px 16px 14px; border-top: 1px solid #e0ecf4; background: #fcfdff; }

/* 二级项网格：列宽下限 150px（用 min(150px, 100%) 防止卡片很窄时横向溢出），
   1920 一行 3 列时卡内约 315px → 两列；1440 → 一列 */
/* 列宽下限 140px：1920 一行 3 列时卡内约 309px → 正好两列（每项 ~149px，
   15.5px 的「居民订单」+ 勾选框共约 112px，余量充足）；更窄时自动一列。
   用 min(140px, 100%) 兜住极窄容器，避免横向溢出 */
.cfg-figs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(140px, 100%), 1fr)); gap: 10px; }

.cfg-fig {
    position: relative;
    display: flex;
    align-items: center;
    gap: 9px;
    height: 38px;
    padding: 0 12px;
    border: 1px solid #dce8f1;
    border-radius: 10px;
    background: #fff;
    font-size: 15.5px;
    color: #23485a;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, color .16s ease;
}

.cfg-fig:hover { border-color: #a9d3ee; background: #f7fcff; color: #123c50; box-shadow: 0 8px 18px -16px rgba(10, 37, 49, 1); }
.cfg-fig input { position: absolute; width: 17px; height: 17px; margin: 0; opacity: 0; pointer-events: none; }

.cfg-fig i {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    border: 1.5px solid #c3d5e0;
    border-radius: 5px;
    background: #fff;
    transition: border-color .14s ease, background-color .14s ease;
}

.cfg-fig:hover i { border-color: #a9c6da; }

.cfg-fig input:checked + i {
    border-color: #1a73e8;
    background: #1a73e8 url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.6 8.7l3 3 5.8-6.6'/%3E%3C/svg%3E") center / 11px 11px no-repeat;
}

.cfg-fig input:focus-visible + i { box-shadow: 0 0 0 3px rgba(26, 115, 232, .22); }

/* ③ 一级开关：大号 toggle（46×26 胶囊 + 20px 白色滑块；半选时滑块停在中间） */
.cfg-tiles .cfg-chk { width: 46px; height: 26px; margin-top: 0; }

.cfg-tiles .cfg-chk i {
    position: relative;
    width: 46px;
    height: 26px;
    border: 0;
    border-radius: 999px;
    background: #cddae4;
    box-shadow: inset 0 1px 3px rgba(10, 37, 49, .18);
    transition: background-color .2s ease, box-shadow .2s ease;
}

.cfg-tiles .cfg-chk i::after {
    content: "";
    position: absolute;
    left: 3px;
    top: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(10, 37, 49, .3);
    transition: transform .2s cubic-bezier(.22, 1, .36, 1);
}

.cfg-tile-head:hover .cfg-chk i { background: #bfd0dc; }

.cfg-tiles .cfg-chk input:checked + i {
    background: linear-gradient(135deg, #34d399, #0f9d70);   /* 开启 = 品牌绿 */
    box-shadow: inset 0 1px 2px rgba(6, 40, 30, .2), 0 6px 14px -10px rgba(15, 157, 112, .9);
}

.cfg-tiles .cfg-chk input:checked + i::after { transform: translateX(20px); }
.cfg-tiles .cfg-chk input:indeterminate + i { background: #8ad4b4; }   /* 半选 = 浅绿 */
.cfg-tiles .cfg-chk input:indeterminate + i::after { transform: translateX(10px); }

.cfg-tiles .cfg-chk input:focus-visible + i {
    box-shadow: 0 0 0 3px rgba(15, 157, 112, .28), inset 0 1px 3px rgba(10, 37, 49, .18);
}

/* 功能开关卡片：1030px 以下两列、640px 以下单列 */
@media (max-width: 1024px) {
    .cfg-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .cfg-tiles { grid-template-columns: 1fr; }
}

/* 手机：标题 + 勾选框在第一行，说明换到第二行（可以折到 2 行） */
@media (max-width: 460px) {
    .cfg-line {
        flex-wrap: wrap;
        gap: 3px 10px;
        padding: 9px 2px 9px 8px;
    }

    /* 功能开关（卡片版）：卡头与二级项整体收一档 */
    .cfg-tiles { grid-template-columns: 1fr; gap: 10px; }
    .cfg-tile-head { gap: 12px; padding: 13px 12px; }
    .cfg-tile-t { font-size: 14.5px; }
    .cfg-tile-d { font-size: 12px; }
    .cfg-tile-body { padding: 11px 12px 12px; }
    .cfg-figs { grid-template-columns: repeat(auto-fill, minmax(min(140px, 100%), 1fr)); gap: 8px; }
    .cfg-fig { height: 37px; padding: 0 10px; font-size: 15px; }
    .cfg-tiles .cfg-chk { width: 42px; height: 24px; }
    .cfg-tiles .cfg-chk i { width: 42px; height: 24px; }
    .cfg-tiles .cfg-chk i::after { width: 18px; height: 18px; }
    .cfg-tiles .cfg-chk input:checked + i::after { transform: translateX(18px); }
    .cfg-tiles .cfg-chk input:indeterminate + i::after { transform: translateX(9px); }

    .cfg-line-t { flex: 1 1 auto; font-size: 13.5px; }

    .cfg-line-d {
        flex: 1 1 100%;
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        font-size: 12px;
    }
}

/* ==========================================================================
   花朵种植 → 分组 → 细项：**树形三级布局**
   --------------------------------------------------------------------------
   · 大标题（花朵种植）：绿色渐变粗竖条 + 16.5px/700（层级最高）
   · 一组：分组缩进在一条「树干」线右侧，分组标题压在这条线的小圆点上（浅蓝 + 光晕）
   · 细项：再缩进一档，前面一小段横线接出来（├ 的观感）；整行可点，悬停浅蓝底
   · 三级用「缩进 + 树干/枝线 + 字号色阶」三重表达从属关系，一眼看出谁继承自谁
   ========================================================================== */
.cfg-tree-body {
    position: relative;
    margin-top: 4px;
    padding-left: 26px;
}

/* 树干：从第一个分组标题的中心，一直到最后一个细项 */
.cfg-tree-body::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 9px;
    bottom: 22px;
    width: 1px;
    background: linear-gradient(180deg, #cfe3ee, #e4eff6);
}

.cfg-tree-branch { position: relative; }
.cfg-tree-branch + .cfg-tree-branch { margin-top: 15px; }

/* 分组标题 + 树干上的小圆点 + 右侧渐隐横线 */
.cfg-branch-h {
    position: relative;
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 5px;
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: .3px;
    color: #2f6a86;
}

.cfg-branch-h::before {
    content: "";
    position: absolute;
    left: -22px;
    top: 50%;
    width: 9px;
    height: 9px;
    margin-top: -4.5px;
    border-radius: 50%;
    background: #fff;
    box-shadow: inset 0 0 0 2.5px #7fc4e0, 0 0 0 3px rgba(127, 196, 224, .16);
}

.cfg-branch-h::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: linear-gradient(90deg, #dbe8f1, rgba(219, 232, 241, 0));
}

/* 细项列表 */
.cfg-leaf-list { display: flex; flex-direction: column; gap: 1px; }

.cfg-leaf {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px 7px 12px;
    border-radius: 9px;
    cursor: pointer;
    transition: background .16s ease;
}

/* ├ 的那一小段横线 */
.cfg-leaf::before {
    content: "";
    position: absolute;
    left: -18px;
    top: 50%;
    width: 13px;
    height: 1px;
    background: #dbe8f1;
    transition: background .16s ease;
}

.cfg-leaf:hover { background: linear-gradient(90deg, rgba(14, 116, 144, .07), rgba(14, 116, 144, 0)); }
.cfg-leaf:hover::before { background: #8fc6e2; }
.cfg-leaf:has(input:focus-visible) { background: linear-gradient(90deg, rgba(14, 116, 144, .07), rgba(14, 116, 144, 0)); }

/* 细项：标题固定列（所有说明对齐在同一条竖线上）+ 说明一行省略 */
.cfg-leaf-t {
    /* 固定列宽：所有说明都对齐在同一条竖线上；170px 足够放下最长的一条标题
       （「缺材料自动「暂时没货」」≈ 11 个字符 ≈ 165px），再长才省略 */
    flex: 0 0 170px;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 16px;
    font-weight: 500;
    color: #16181b;
    letter-spacing: .2px;
}

.cfg-leaf-d {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 13px;
    color: #8fa0ac;
}

/* 手机：细项改成「勾选框 + 标题」一行、说明第二行（可以折 2 行），树干与缩进都收一档 */
@media (max-width: 460px) {
    .cfg-tree-body { padding-left: 18px; }
    .cfg-tree-body::before { left: 6px; top: 8px; bottom: 18px; }
    .cfg-branch-h { font-size: 14px; }
    .cfg-branch-h::before { left: -17px; width: 8px; height: 8px; margin-top: -4px; }

    .cfg-leaf { flex-wrap: wrap; gap: 2px 8px; padding: 7px 8px 7px 10px; }
    .cfg-leaf::before { left: -13px; width: 9px; }
    .cfg-leaf-t { flex: 1 1 auto; font-size: 14.5px; }
    .cfg-leaf-d {
        flex: 1 1 100%;
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        font-size: 12.5px;
    }
}

/* --------------------------------------------------------------------------
   树形三级里的「数字目标」项（如 居民订单每日目标 = 150）：
   标题（固定列）+ 说明（一行省略）+ 右侧一个等宽数字输入框
   -------------------------------------------------------------------------- */
.cfg-leaf-num { cursor: default; }

.cfg-num-input {
    flex: 0 0 auto;
    width: 84px;
    height: 32px;
    margin-left: 12px;
    padding: 0 10px;
    border: 1px solid #cfdde9;
    border-radius: 9px;
    background: #fff;
    color: #123c50;
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    -moz-appearance: textfield;
    appearance: textfield;
    transition: border-color .16s ease, box-shadow .16s ease;
}

/* 去掉 number 输入框的上下箭头（Chrome / Safari 的 spinner） */
.cfg-num-input::-webkit-outer-spin-button,
.cfg-num-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.cfg-num-input:hover { border-color: #a9c6da; }

/* 下拉型配置项（2026-10-22）：游戏倍数那种「普通（1 体力/局）」的长文案，
 * 数字框默认 84px 装不下会把文字截断 —— 给它一个更宽的变体。
 * ⚠️ 两个类选择器（.cfg-num-input.cfg-select-wide）优先级高于下面
 *    `@media (max-width:460px)` 里的 `.cfg-num-input { width:78px }`，
 *    所以手机端不会被压回去；窄到放不下时 `.cfg-leaf` 本来就是 flex-wrap。
 * ⚠️ 不用 `appearance:none` 自绘箭头：原生箭头最稳，各种浏览器/系统都对。
 */
.cfg-num-input.cfg-select-wide {
    width: auto;
    min-width: 200px;
    padding: 0 8px 0 12px;
    font-family: inherit;      /* 中文选项别用等宽字体 */
    font-size: 14px;
    font-weight: 500;
    text-align: left;          /* 覆盖 .cfg-num-input 的居中 */
    cursor: pointer;
}

@media (max-width: 460px) {
    .cfg-num-input.cfg-select-wide { min-width: 168px; }
}

.cfg-num-input:focus {
    outline: none;
    border-color: #16b981;
    box-shadow: 0 0 0 3px rgba(22, 185, 129, .16);
}

@media (max-width: 460px) {
    /* 手机：标题 + 输入框一行、说明第二行（.cfg-leaf 本身已 flex-wrap） */
    /* 手机：带勾选框的细项，说明与标题左对齐（20px 勾选框 + 10px 间距 = 30px）；数字项不需要 */
    .cfg-leaf:has(> .cfg-chk) .cfg-leaf-d { padding-left: 30px; }
    .cfg-leaf-num .cfg-leaf-t { flex: 1 1 0; }
    .cfg-num-input { width: 78px; height: 34px; margin-left: auto; align-self: center; font-size: 15px; }
}

/* --------------------------------------------------------------------------
   「自动种植」的下级行（单花占地数量，2026-10-16 新增）：
   向右缩进到父级标题列（勾选框 20px + 间距），枝线从树干一路折进来（└ 的观感），
   标题收半档字号 —— 摆在「自动种植」正下方时，一眼看出它是上一行的从属参数。
   -------------------------------------------------------------------------- */
.cfg-leaf.cfg-leaf-sub { margin-left: 30px; }
.cfg-leaf.cfg-leaf-sub::before { left: -48px; width: 43px; }
.cfg-leaf.cfg-leaf-sub .cfg-leaf-t { font-size: 15px; }

@media (max-width: 460px) {
    /* 手机树干更靠左（见上面的树形三级规则），下级枝线跟着收 */
    .cfg-leaf.cfg-leaf-sub::before { left: -42px; width: 37px; }
}

/* 暂未开放的模块（如公会竞赛）：卡片整体压暗、toggle 灰掉、鼠标变禁止，
   点击时由 app.js 给一句「该功能暂未开放」提示（input 是 disabled，本身不会变） */
.cfg-tile.is-locked .cfg-tile-head {
    background: linear-gradient(180deg, #f8fafb, #eff3f6);
    cursor: not-allowed;
}

.cfg-tile.is-locked .cfg-tile-t { color: #7c93a3; }
.cfg-tile.is-locked .cfg-tile-d { color: #9aadb9; }
.cfg-tile.is-locked .cfg-chk { opacity: .5; }

/* 标题后面的「未开放」小标签 */
.cfg-tile-tag {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 7px;
    border-radius: 999px;
    background: #ecf1f5;
    color: #8497a3;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .2px;
    vertical-align: 1px;
}

/* 「点击设置详细游戏配置」：一张**手风琴卡片** ——
   折叠条就是卡片的“头”，下面三个一级区块是“身”：展开时头部的下圆角 / 下边框收掉，
   跟内容区拼成同一张卡，中间只留一条内部分隔线（不再靠间距隔开） */
.cfg-more {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    margin: 20px 0 0;
    padding: 13px 18px;
    border: 1px solid #d3e5f1;
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff, #f2f9fd);
    box-shadow: 0 2px 6px rgba(13, 126, 169, .07), 0 0 0 5px rgba(13, 126, 169, .04);
    color: #17475f;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .2s, box-shadow .2s, background .2s, border-radius .2s;
}

.cfg-more:hover {
    border-color: #a8cfe6;
    background: linear-gradient(180deg, #ffffff, #eaf5fc);
    box-shadow: 0 6px 18px -6px rgba(13, 126, 169, .22), 0 0 0 5px rgba(13, 126, 169, .05);
}

.cfg-more:active { box-shadow: 0 2px 6px rgba(13, 126, 169, .1); }
.cfg-more:focus-visible { outline: 2px solid rgba(13, 126, 169, .4); outline-offset: 2px; }

/* 图标徽章：蓝→青渐变方块 + 白色描边图标，hover 时轻轻抬起 */
.cfg-more-badge {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: linear-gradient(135deg, #38bdf8, #0d7ea9);
    box-shadow: 0 4px 10px rgba(13, 126, 169, .26), inset 0 1px 0 rgba(255, 255, 255, .38);
    color: #fff;
    transition: transform .2s ease, box-shadow .2s ease;
}

.cfg-more-badge svg { display: block; width: 19px; height: 19px; }
.cfg-more:hover .cfg-more-badge { transform: translateY(-1px) scale(1.05); box-shadow: 0 6px 14px rgba(13, 126, 169, .3), inset 0 1px 0 rgba(255, 255, 255, .38); }

/* 主文案 + 一行小字（说明展开后是哪三块），展开后小字退居次要（不隐藏） */
.cfg-more-h { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cfg-more-t { color: #123c50; font-size: 14.5px; font-weight: 650; letter-spacing: .2px; }
.cfg-more-sub { color: #6b93a8; font-size: 12px; font-weight: 500; letter-spacing: .2px; transition: opacity .22s ease; }
.cfg-more[aria-expanded="true"] .cfg-more-sub { opacity: .5; }

.cfg-more-state {
    flex: 0 0 auto;
    padding: 3px 10px;
    border-radius: 999px;
    background: #e8f4fb;
    color: #3d7d9c;
    font-size: 12px;
    font-weight: 500;
    transition: background .2s, color .2s, transform .24s ease;
}

.cfg-more[aria-expanded="true"] .cfg-more-state { background: #d8eefb; color: #17698f; transform: translateX(-2px); }

/* 右侧箭头做成圆底按钮，展开时整体旋转 180° */
.cfg-more-arrow {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #eef7fc;
    color: #2b93c4;
    transition: transform .25s ease, background .2s ease;
}

.cfg-more-arrow svg { display: block; width: 16px; height: 16px; }
.cfg-more:hover .cfg-more-arrow { background: #e0f1fb; }
.cfg-more[aria-expanded="true"] .cfg-more-arrow { transform: rotate(180deg); background: #dcf0fb; }

/* 展开时：头部下圆角 / 下边框收掉，准备跟内容区拼成一张卡 */
.cfg-more[aria-expanded="true"] {
    border-radius: 14px 14px 0 0;
    border-bottom-color: transparent;
    box-shadow: 0 -1px 2px rgba(13, 126, 169, .04);
}

/* 三个一级区块默认隐藏（.cfg-groups 自带 display: grid，会盖掉浏览器默认的 [hidden]） */
.cfg-groups[hidden] { display: none; }
.cfg-groups:not([hidden]) { animation: cfgGroupsIn .24s ease-out; }

@keyframes cfgGroupsIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   PC：综合任务 / 花朵种植 / 日常任务 三个一级区块**并行 2 列瀑布流**
   · 并排后每列只有原来一半宽，所以细项从「标题 + 说明同一行」改成
     「标题（+ 右侧输入框）一行 + 说明一行」，说明允许折到 3 行，不再被截断
   · 各区块自己的顶部横线 / 间距交给容器统一负责（避免中间多出一条线）
   · 瀑布流：把隐式行高拆成 8px 一格（`grid-auto-rows`）+ 容器 `row-gap: 0`，
     再由 app.js 的 `layoutCfgTreeMasonry()` 按实际高度给每个区块算
     `grid-column` + `grid-row-end: span N`（N 里已含 22px 区块间距）——
     于是「综合任务」这种超高区块不会再给同行的矮区块下面顶出大片空白，
     每个区块都往当前最矮的那一列落。JS 没跑时退化成普通 2 列（不会重叠）。
   -------------------------------------------------------------------------- */
.cfg-groups {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 8px;
    align-items: start;
    column-gap: 18px;
    row-gap: 0;
    /* 手风琴的“身”：跟折叠条共用一张卡的边框 / 圆角，
       顶部只留一条内部分隔线（头部已把下边框设为透明） */
    margin-top: 0;
    padding: 20px 18px 6px;
    border: 1px solid #d3e5f1;
    border-top: 0;
    border-radius: 0 0 14px 14px;
    background: linear-gradient(180deg, #fbfdff, #f7fbfe);
    box-shadow: inset 0 1px 0 #e6f0f7, 0 10px 24px -16px rgba(13, 126, 169, .35);
}

.cfg-groups > .cfg-group { margin-top: 0; padding-top: 0; border-top: 0; }

.cfg-groups .cfg-leaf { flex-wrap: wrap; gap: 2px 8px; }
.cfg-groups .cfg-leaf-t { flex: 1 1 auto; }

.cfg-groups .cfg-leaf-d {
    flex: 1 1 100%;
    white-space: normal;
    display: -webkit-box;
    /* 最多 3 行：两个区块并排时列宽只有原来一半（1240 屏时每列仅 ~264px），
       目标说明（40 字左右）要 3 行才放得下，再多才省略 */
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

/* 带勾选框的细项：说明换到第二行时缩进到跟**标题**左对齐
   （20px 勾选框 + 8px 间距 = 28px），而不是贴着勾选框；
   数字项没有勾选框，标题就在第一行，说明不需要任何缩进 */
.cfg-groups .cfg-leaf:has(> .cfg-chk) .cfg-leaf-d { padding-left: 28px; }

/* 数字项：标题用 `flex: 1 1 0`（基准宽 0）—— 这样「标题 + 输入框」永远在同一行，
   列窄时是标题被压缩（省略号），而不会把输入框挤到第二行；输入框贴这一行最右、与标题中线对齐 */
.cfg-groups .cfg-leaf-num .cfg-leaf-t { flex: 1 1 0; }
.cfg-groups .cfg-leaf-num .cfg-num-input { margin-left: auto; align-self: center; }

/* <1240px（配置层窄于 ~590px）落回单列：再窄下去每列放不下
   「标题 + 输入框」与说明，会被迫截断。单列时行高回 auto、间距回普通 gap
   （JS 在 ≤1239px 会清掉 span，双保险） */
@media (max-width: 1239px) {
    .cfg-groups { grid-template-columns: 1fr; grid-auto-rows: auto; row-gap: 16px; }
}

/* 手机：折叠条与手风琴内容都收一档尺寸 */
@media (max-width: 640px) {
    .cfg-more { gap: 11px; padding: 12px 14px; border-radius: 12px; }
    .cfg-more-badge { width: 32px; height: 32px; border-radius: 10px; }
    .cfg-more-badge svg { width: 17px; height: 17px; }
    .cfg-more-t { font-size: 14px; }
    .cfg-more-sub { font-size: 11.5px; }
    .cfg-more-arrow { width: 26px; height: 26px; }
    .cfg-more[aria-expanded="true"] { border-radius: 12px 12px 0 0; }
    .cfg-groups { padding: 16px 12px 4px; border-radius: 0 0 12px 12px; }
}

/* ---------- 运行日志（account_logs：两级分类 + 级别） ---------- */

/* 两个 tab（运行日志 / 系统日志）：放进 col-head 右侧的胶囊分段控件 */
.lg-tabs {
    display: inline-flex;
    gap: 2px;
    padding: 2px;
    border-radius: 9px;
    background: #eef4f8;
}
.lg-tab {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 4px 11px;
    border-radius: 7px;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    color: #628aa0;
    cursor: pointer;
    white-space: nowrap;
    transition: background .16s ease, color .16s ease;
}
.lg-tab:hover { color: #3d6b81; }
.lg-tab.is-on {
    background: #fff;
    color: #0b5c7a;
    box-shadow: 0 1px 2px rgba(16, 60, 80, .12);
}
.lg-tab:focus-visible { outline: 2px solid #7cc0dd; outline-offset: 1px; }

/* 日志头部实际是**深色渐变**（.acct-pair .col-head，桌面两栏和手机抽屉都一样，
   因为抽屉里也是这个 .acct-pair），浅色胶囊放上去完全看不见 —— 这里换一套：
   半透明轨道 + 亮字 + 白色选中块。上面那套默认值只在面板被挪到 .acct-pair 之外时兜底。 */
.acct-pair #acctLogs .lg-tabs { background: rgba(255, 255, 255, .13); }
.acct-pair #acctLogs .lg-tab { color: #9dc4d4; }
.acct-pair #acctLogs .lg-tab:hover { color: #fff; }
.acct-pair #acctLogs .lg-tab.is-on {
    background: rgba(255, 255, 255, .94);
    color: #17485a;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .28);
}
.acct-pair #acctLogs .lg-tab:focus-visible { outline-color: rgba(255, 255, 255, .7); }

/* ⚠️ `.lv-head`（「共 N 条 · 最新在前」那一行）已按需求删掉，样式一并移除：
   日志面板上不再有统计信息（服务端也不再算 total / counts / summary）。*/
.lv-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }

/* 卡片配色按级别走：
     · 信息  → 素色底 + 黑字内容（唯一一个不用彩色系的）
     · 成功 / 警告 / 失败 → 背景、边框、左侧色条**整块**都用各自色系
   颜色只在下面 4 个变量块里出现一次，子元素统一取用，加新级别只需再加一块。 */
.lv-item {
    --lv-bg: #fbfdff;
    --lv-bd: #e4edf3;
    --lv-bar: #cfe0ea;
    --lv-tag-bg: #eef4f8;
    --lv-ink: #4b7488;
    --lv-dim: #7d9aab;
    --lv-txt: #111;
    padding: 9px 11px;
    border: 1px solid var(--lv-bd);
    border-left: 3px solid var(--lv-bar);
    border-radius: 9px;
    background: var(--lv-bg);
}
.lv-item.lv-success {
    --lv-bg: #eefaf4;
    --lv-bd: #c6ebd9;
    --lv-bar: #34c98a;
    --lv-tag-bg: #d8f2e5;
    --lv-ink: #0b6b4b;
    --lv-dim: #4f9179;
    --lv-txt: #0b5c41;
}
.lv-item.lv-warn {
    --lv-bg: #fff8ec;
    --lv-bd: #f3dcb4;
    --lv-bar: #f0a53a;
    --lv-tag-bg: #fbe8c8;
    --lv-ink: #96500a;
    --lv-dim: #b0793a;
    --lv-txt: #7a4208;
}
.lv-item.lv-error {
    --lv-bg: #fef4f3;
    --lv-bd: #f6cdc8;
    --lv-bar: #e45c4a;
    --lv-tag-bg: #fbdedb;
    --lv-ink: #a81b12;
    --lv-dim: #b06a62;
    --lv-txt: #8c1710;
}
.lv-top { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--lv-dim); }
.lv-cat { color: var(--lv-ink); font-weight: 600; }
.lv-lv { padding: 0 6px; border-radius: 999px; background: var(--lv-tag-bg); color: var(--lv-ink); }
.lv-item.lv-success .lv-lv { color: #0b7a56; }
.lv-item.lv-warn .lv-lv    { color: #b45309; }
.lv-item.lv-error .lv-lv   { color: #b42318; }
.lv-time { margin-left: auto; font-variant-numeric: tabular-nums; }
.lv-txt { margin-top: 4px; font-size: 13px; color: var(--lv-txt); line-height: 1.6; }
.lv-note { margin-top: 3px; font-size: 11.5px; color: var(--lv-dim); }


/* ---------- 左侧列表：轮询到新值时闪一下 ----------
   app.js 里那个 15 秒的轮询会**原地**改这几格。不改 DOM 结构是为了「无感」，
   但那样用户也感知不到「它更新了」—— 所以变化的那一格短暂高亮一下。 */
@keyframes acctFlash {
    0%   { background-color: rgba(14, 165, 233, .24); }
    100% { background-color: transparent; }
}

.acct-row .is-flash { animation: acctFlash .95s ease-out; }

/* 状态文字是 inline，背景铺不开，给它一点内边距撑出个小圆角底 */
.acct-row .st-txt.is-flash {
    padding: 1px 4px;
    margin-left: -4px;
    border-radius: 5px;
}

/* ---------- 详情面板里「用 JS 切 hidden」的元素，必须真的消失 ----------
 * `.fx-none`（空态）、`.fx-panel`、`.dy-task`… 这些类自己写了 display，
 * 会盖掉浏览器默认的 `[hidden]{display:none}`（同级选择器里作者样式优先），
 * 结果就是「隐藏」了却还占着位置。这里统一兜住。 */
#acctDetail [hidden] { display: none !important; }

/* ============================================================
   PC（≥1025px）多列排布
   —— 移动端保持竖排单列；PC 端按需求铺成 2 / 3 列网格。
      列数由模板按需加类（.is-2 / .is-3），不用全局结构选择器，
      避免误伤其它列表。
   ============================================================ */
@media (min-width: 1025px) {
    /* .dy-list / .sg-list 原本是 flex 纵向列表，PC 下换成等高网格 */
    .dy-list.is-2, .dy-list.is-3,
    .sg-list.is-2, .sg-list.is-3 {
        display: grid;
        gap: 8px;
        align-items: start;
    }
    .dy-list.is-2, .sg-list.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dy-list.is-3, .sg-list.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    /* 阶梯「鲜花收集奖品 / 花瓶收集奖品」：PC 一行 3 列 */
    .fx-grid.is-3, .fx-grid[data-grid="collect"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .fx-grid.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* PC 下这些卡片的奖励档位也要限高可展开，网格本身允许纵向裁切 */
    .cp.is-clipped > .fx-grid { align-content: start; }
}

/* 离线 / 失联时被 JS 关掉的卡片（applyOfflineState）：
 * `.stat-card` 自己有 display:flex，会盖掉浏览器默认的 [hidden]，必须显式写一条
 * （`.next-card[hidden]` 早就有同类规则）*/
.stat-card[hidden] { display: none; }

/* ============================================================
   日常任务 · 居民订单 / 顾客订单：「今日已领满」
   —— 客户端报 done >= max（如 150/150）时亮出，告诉用户今天不用再等
   ============================================================ */
.dy-cap {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    margin-left: 8px;
    padding: 2px 9px 2px 7px;
    border: 1px solid #c6ecdc;
    border-radius: 999px;
    background: linear-gradient(180deg, #f2fcf7, #e6f7ef);
    color: #0b7a56;
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
    white-space: nowrap;
}
.dy-cap-ico { flex: 0 0 auto; }
.dy-cap[hidden] { display: none !important; }

.dy-cap-note {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    border: 1px solid #d9efe5;
    border-radius: 10px;
    background: #f5fbf8;
    color: #2f6b57;
    font-size: 12.5px;
    line-height: 1.5;
}
.dy-cap-note::before {
    content: "✓";
    color: #0b7a56;
    font-weight: 700;
}
.dy-cap-note[hidden] { display: none !important; }

/* 领满时把头部「今天完成：150/150」的数字也点绿，一眼能看出状态 */
.fx-panel:has(.dy-cap:not([hidden])) .fx-head .fx-sub .fx-num { color: #0b7a56; }
.fx-panel:has(.dy-cap:not([hidden])) .fx-head { flex-wrap: wrap; row-gap: 6px; }

/* ==========================================================================
   分组管理页（/groups）
   ========================================================================== */
.grp-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.grp-table th, .grp-table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--line); }
.grp-table thead th { font-size: 12.5px; color: var(--ink-3); font-weight: 600; background: #fbfdfe; }
.grp-table tbody tr:hover { background: #f7fbf9; }
.grp-th-count, .grp-count { width: 140px; }
.grp-th-act, .grp-act { width: 190px; white-space: nowrap; }
.grp-act .btn + .btn { margin-left: 6px; }
.grp-name { font-weight: 600; color: var(--ink); }
.grp-tag { display: inline-block; padding: 2px 8px; border-radius: 7px; background: #f1f5f9; color: #64748b; font-size: 12px; }
.grp-num { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 14px; }
.grp-num.is-plain { color: var(--ink-3); }
.grp-num.is-link { border: 0; background: transparent; padding: 3px 9px; border-radius: 8px;
    color: var(--green); font-weight: 700; cursor: pointer; transition: background .16s ease; }
.grp-num.is-link:hover { background: var(--green-soft); text-decoration: underline; }
.grp-dash { color: var(--ink-3); }
.grp-empty { padding: 30px 16px; text-align: center; color: var(--ink-3); font-size: 13px; }

/* 分组账号弹层：整层紧凑 —— 行矮、字小、留白小，一屏尽量多显示几个账号 */
.modal-card.wide { max-width: 680px; }
#grpAccModal .modal-head { padding: 14px 18px 11px; }
#grpAccModal .modal-head h3 { font-size: 15px; }
#grpAccModal .modal-body { padding: 12px 18px 4px; }
#grpAccModal .modal-foot { padding: 0 18px 14px; }
.grp-acc-sub { margin: 0 0 8px; font-size: 12px; color: var(--ink-3); }
.grp-acc-list { max-height: 64vh; overflow: auto; border: 1px solid var(--line); border-radius: 10px; }
.grp-acc-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.grp-acc-table th, .grp-acc-table td { padding: 5px 10px; text-align: left; border-bottom: 1px solid #eef2f7; }
.grp-acc-table thead th { position: sticky; top: 0; z-index: 1; padding: 6px 10px; background: #fbfdfe; font-size: 11.5px; color: var(--ink-3); }
.grp-acc-table tbody tr:hover { background: #f7fbf9; }
.grp-acc-table tbody tr:last-child td { border-bottom: 0; }
.grp-acc-empty { padding: 18px 14px; text-align: center; color: var(--ink-3); font-size: 12.5px; }
.grp-acc-foot { justify-content: space-between; align-items: center; }
.grp-acc-pager { margin-left: 0; flex-wrap: wrap; gap: 4px; }
.grp-acc-pager .pg { min-width: 28px; height: 28px; padding: 0 8px; border-radius: 8px; font-size: 12px; }
.grp-acc-table .ta-r { text-align: right; font-variant-numeric: tabular-nums; }

/* ==========================================================================
   批量操作卡片（在「批量操作」按钮上方向上展开）
   ========================================================================== */
.sel-more {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
    margin-bottom: 2px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 -16px 32px -24px rgba(16, 24, 40, .55);
    animation: sel-more-in .16s cubic-bezier(.22, 1, .36, 1);
}
.sel-more[hidden] { display: none; }
@keyframes sel-more-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}
.sel-more-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 9px 10px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    font-family: inherit;
    font-size: 13.5px;
    color: var(--ink);
    text-align: left;
    cursor: pointer;
    transition: background .14s ease, color .14s ease;
}
.sel-more-item > svg { flex: 0 0 auto; color: var(--ink-3); }
.sel-more-item:hover { background: #f4faf7; color: var(--green); }
.sel-more-item:hover > svg { color: var(--green); }
.sel-more-item.danger { color: #c62a1c; }
.sel-more-item.danger > svg { color: #c62a1c; }
.sel-more-item.danger:hover { background: #fdeceb; }

/* 批量删除：卡片里的主按钮样式（原来的平铺行改成按钮） */
.sel-more-del {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    height: 38px;
    padding: 0 14px;
    border: 1px solid #f2c3bb;
    border-radius: 10px;
    background: #fff5f4;
    color: #c62a1c;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color .14s ease, background .14s ease;
}
.sel-more-del > svg { flex: 0 0 auto; }
.sel-more-del:hover { border-color: #e9a99e; background: #fdeceb; }

.sel-more-soon { margin-left: auto; font-size: 11px; color: var(--ink-3); }
.sel-more-sep { height: 1px; margin: 3px 6px; background: var(--line); }
.sel-more-label { padding: 2px 10px 0; font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.sel-more-groups { display: flex; flex-wrap: wrap; gap: 6px; padding: 5px 10px 4px; }
.sel-more-chip {
    padding: 6px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #f8fafc;
    font-family: inherit;
    font-size: 14px;
    color: var(--ink-2);
    cursor: pointer;
    transition: border-color .14s ease, background .14s ease, color .14s ease;
}
.sel-more-chip:hover { border-color: #bfe8d8; background: #f2fbf7; color: var(--green); }

/* ==========================================================================
   筛选抽屉（PC：左侧滑出 220px，正好盖住最左侧导航菜单）
   结构：头部（标题 + ×） / 内容（元宝数量 / 账号状态 / 排序方式） / 底部（重置 + 关闭）
   ========================================================================== */
.fd {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 80;
    width: 220px;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdfc 58%, #f6fbf9 100%);
    border-right: 1px solid var(--line);
    box-shadow: 34px 0 62px -46px rgba(16, 24, 40, .72);
    transform: translateX(-102%);
    transition: transform .26s cubic-bezier(.4, 0, .2, 1);
}
.fd[hidden] { display: none; }
.fd.open { transform: none; }

.fd-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px 16px 15px;
    border-bottom: 1px solid var(--line);
}
.fd-head h3 {
    position: relative;
    padding-left: 11px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .3px;
    color: var(--ink);
}
.fd-head h3::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 3px;
    height: 15px;
    margin-top: -7.5px;
    border-radius: 2px;
    background: linear-gradient(180deg, #1fc08a, #0b8a5f);
}
.fd-x {
    margin-left: auto;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: #fff;
    color: var(--ink-3);
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: color .16s ease, border-color .16s ease, background .16s ease, transform .16s ease;
}
.fd-x:hover { color: var(--green); border-color: #bfe8d8; background: #f4fbf8; }
.fd-x:active { transform: scale(.94); }

.fd-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 16px 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    scrollbar-width: thin;
}
.fd-body::-webkit-scrollbar { width: 6px; }
.fd-body::-webkit-scrollbar-thumb { background: #dde6ea; border-radius: 99px; }
.fd-sec { display: flex; flex-direction: column; gap: 9px; }
.fd-hd {
    margin: 0;                 /* h4 默认上下 1.33em 外边距会把间距撐大，清零（间距交给父容器 gap） */
    font-size: 13.5px;
    font-weight: 650;
    letter-spacing: .4px;
    color: var(--ink-2);
}

/* 选项按钮：两列网格，「全部」占整行 */
.fd-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.fd-chip {
    box-sizing: border-box;
    padding: 10px 4px;
    border: 1px solid #d4e0e6;
    border-radius: 10px;
    background: #f8fafc;
    font-family: inherit;
    font-size: 13px;
    line-height: 1.2;
    color: var(--ink-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.fd-chip.wide { grid-column: 1 / -1; }
.fd-chip:hover { border-color: #bfe8d8; background: #f3fbf7; color: var(--green); }
.fd-chip:active { transform: scale(.97); }

/* 选中：浅绿底 + 绿边框 + 绿字（比实心绿轻，久看不刺眼） */
.fd-chip.is-on {
    border-color: var(--green);
    background: #e9f8f2;
    color: var(--green);
    font-weight: 600;
    box-shadow: 0 6px 14px -12px rgba(11, 138, 95, .9);
}
.fd-chip.is-on:hover { background: #dff5ec; }

/* 双滑块（起点 / 终点）：粗轨道 + 渐变进度 + 带光晕的大圆点 */
.fd-range { position: relative; height: 34px; margin-top: 2px; }
.fd-range-track {
    position: absolute; left: 0; right: 0; top: 50%;
    height: 6px; margin-top: -3px; border-radius: 99px;
    background: #edf2f6;
    box-shadow: inset 0 1px 2px rgba(16, 24, 40, .07);
    overflow: hidden;
}
.fd-range-track > i {
    position: absolute; top: 0; bottom: 0; border-radius: 99px;
    background: linear-gradient(90deg, #1fc08a, #0b8a5f);
    box-shadow: 0 0 12px -2px rgba(11, 138, 95, .85);
}
.fd-range input[type="range"] {
    position: absolute; left: 0; top: 0; width: 100%; height: 34px; margin: 0;
    background: transparent; -webkit-appearance: none; appearance: none; pointer-events: none;
}
.fd-range input[type="range"]:focus { outline: none; }
.fd-range input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; pointer-events: auto; box-sizing: border-box;
    width: 18px; height: 18px; border-radius: 50%;
    background: #fff;
    border: 2.5px solid var(--green);
    box-shadow: 0 3px 8px rgba(16, 24, 40, .2), 0 0 0 0 rgba(22, 185, 129, .16);
    cursor: grab;
    transition: transform .14s ease, box-shadow .14s ease;
}
.fd-range input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.08); }
.fd-range input[type="range"]:active::-webkit-slider-thumb {
    cursor: grabbing; transform: scale(1.16);
    box-shadow: 0 3px 8px rgba(16, 24, 40, .2), 0 0 0 7px rgba(22, 185, 129, .14);
}
.fd-range input[type="range"]::-moz-range-thumb {
    pointer-events: auto; box-sizing: border-box;
    width: 18px; height: 18px; border-radius: 50%;
    background: #fff;
    border: 2.5px solid var(--green);
    box-shadow: 0 3px 8px rgba(16, 24, 40, .2);
    cursor: grab;
    transition: transform .14s ease, box-shadow .14s ease;
}
.fd-range input[type="range"]:hover::-moz-range-thumb { transform: scale(1.08); }
.fd-range input[type="range"]::-moz-range-track { background: transparent; }

.fd-range-val {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    font-size: 11.5px;
    color: var(--ink-3);
}
.fd-range-val b {
    font-size: 13px;
    font-weight: 650;
    color: var(--green);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* 排序方式：整行单选，选中项左侧包一条竖绿条 + 右侧打勾 */
.fd-sorts { display: flex; flex-direction: column; gap: 8px; }
.fd-sort {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    padding: 11px 12px;
    border: 1px solid #d4e0e6;
    border-radius: 10px;
    background: #f8fafc;
    font-family: inherit;
    font-size: 13px;
    color: var(--ink-2);
    text-align: left;
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease;
}
.fd-sort:hover { border-color: #bfe8d8; background: #f3fbf7; color: var(--green); }
.fd-sort.is-on {
    border-color: var(--green);
    background: #e9f8f2;
    color: #0b7a52;
    font-weight: 650;
    box-shadow: inset 3px 0 0 0 var(--green);
}
.fd-sort.is-on:hover { background: #dff5ec; }
.fd-tick { display: none; margin-left: auto; color: var(--green); }
.fd-sort.is-on .fd-tick { display: block; }

.fd-foot {
    display: flex;
    gap: 10px;
    padding: 14px 16px 16px;
    border-top: 1px solid var(--line);
    background: rgba(255, 255, 255, .92);
}
/* 「重置」「关闭」用同一样式：灰白底 + 黑字 + 灰边 */
.fd-foot .btn {
    flex: 1 1 0;
    padding: 11px 10px;
    font-size: 14px;
    border-radius: 10px;
    border-color: #cfd8dd;
    background: #f5f7f8;
    color: #111;
    box-shadow: none;
}
.fd-foot .btn:hover { background: #ebeff2; border-color: #c3ced4; }
.fd-foot .btn.is-done { background: #e6ebee; }

/* 顶栏「营业统计」：切回统计层的入口（选中账号时它不亮） */
.topbar-stats { padding: 8px 13px; font-size: 13px; }
.topbar-stats.is-on {
    color: var(--green);
    background: var(--green-soft);
    border-color: #bfe8d8;
    box-shadow: none;
}

/* 移动端：抽屉几乎占满屏（90%）；统计表列多，手机上保持横向滚动 */
@media (max-width: 1024px) {
    /* 筛选抽屉：手机上跟 PC 一样宽 220px（原来是 90% 宽，盖住大半个列表） */
    .fd { width: 220px; }

    /* 统计表：手机上 14 列太挤 —— 昵称 / 金币整列藏起来，账号列也收窄
       （列顺序看 `Account::statsColumns()`，`st-col-<key>` 是服务端 + 前端都加的标记类）
       min-width 740：加了花卡 / 果卡两列后，剩下这 12 列按原 620 会挤到数字断行 */
    .st-table { min-width: 740px; }
    .st-table .st-col-nickname,
    .st-table .st-col-gold { display: none; }
    .st-table .st-acc { font-size: 12.5px; max-width: 118px; overflow: hidden; text-overflow: ellipsis; }

    /* 手机上顶栏太窄：只留图标，别把标题挤没了 */
    .topbar-stats { padding: 9px 11px; }
    .topbar-stats span { display: none; }

    /* 营业统计层：右上角一个关闭按钮（关掉抽屉回列表） */
    .st-close {
        display: grid;
        place-items: center;
        position: absolute;
        top: 10px;
        right: 12px;
        z-index: 6;
        width: 30px;
        height: 30px;
        border: 1px solid var(--line);
        border-radius: 9px;
        background: #fff;
        color: var(--ink-3);
        cursor: pointer;
        transition: color .16s ease, border-color .16s ease, background .16s ease, transform .16s ease;
    }
    .st-close:hover { color: var(--green); border-color: #bfe8d8; background: #f4fbf8; }
    .st-close:active { transform: scale(.94); }

    /* 别让标题/日期条钻到关闭按钮底下 */
    .st-head { padding-right: 50px; }
}

/* ==========================================================================
   平铺式「所属分组」选择器（新增账号 / 批量导入弹层）
   真值在同名 hidden input 里，这些按钮只负责外观
   ========================================================================== */
.gp-pick {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-height: 148px;
    overflow-y: auto;
    padding: 2px;
    scrollbar-width: thin;
}
.gp-pick::-webkit-scrollbar { width: 6px; }
.gp-pick::-webkit-scrollbar-thumb { background: #dde6ea; border-radius: 99px; }
.gp-pick-btn {
    padding: 8px 13px;
    border: 1px solid #d4e0e6;
    border-radius: 10px;
    background: #f8fafc;
    font-family: inherit;
    font-size: 13px;
    line-height: 1.2;
    color: var(--ink-2);
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease, color .16s ease, transform .16s ease;
}
.gp-pick-btn:hover { border-color: #bfe8d8; background: #f3fbf7; color: var(--green); }
.gp-pick-btn:active { transform: scale(.97); }
.gp-pick-btn.is-on {
    border-color: var(--green);
    background: #e9f8f2;
    color: var(--green);
    font-weight: 600;
}

/* ===== 左侧列表：表头「账号丨昵称」切换（2026-10-07 用户要求） ===== */
/* 两个词之间只留「丨」自己的宽度（用户 2026-10-07：「中间的丨间隔近一点」） */
.acct-pick { display: inline-flex; align-items: center; gap: 0; }

.acct-pick .ap-btn {
    border: 0;
    background: none;
    padding: 0 1px;          /* 原来 0 3px：两词之间隔着 6px+，太开 */
    font: inherit;
    color: var(--ink-3, #8a97a8);
    cursor: pointer;
    border-radius: 4px;
}

.acct-pick .ap-btn:hover { color: var(--ink); background: #f1f5f4; }
.acct-pick .ap-btn.is-on { color: var(--ink); font-weight: 600; }
.acct-pick .ap-sep { font-style: normal; color: #cbd5e1; }

/* 账号 / 昵称两段：默认只显示账号，`html.is-nick-mode` 时只显示昵称 */
.acct-name .an-nick { display: none; }
html.is-nick-mode .acct-name .an-acc { display: none; }
html.is-nick-mode .acct-name .an-nick { display: inline; }
/* 用户 2026-10-07：切到昵称时文字**小一号**（账号不受影响）
   ⚠️ 只改 font-size，行高由上面一条的固定 22px 兜住，否则列表会跳 */
html.is-nick-mode .table-acct tbody td.acct-name { font-size: 13.5px; }

/* 昵称可能比账号长：截断 + 省略号（不撑破列宽） */
.table-acct tbody td.acct-name {
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------- 卡密充值：批量充值的「充值卡」输入区（2026-10-09） ---------- */
.card-form .cr-box {
    position: relative;
    /* 宽度上限 600px（用户 2026-10-09 定的）；窄屏自然就是全宽 */
    max-width: 600px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: border-color .2s ease, box-shadow .2s ease;
}

/* 聚焦时整张卡一起亮：跟 .field-box:focus-within 同一套手感 */
.card-form .cr-box:focus-within {
    border-color: #bfe8d8;
    box-shadow: var(--shadow), 0 0 0 4px rgba(46, 204, 143, .12);
}

.card-form .cr-box-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 16px;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(180deg, #fbfdfe, #f5f9fa);
}

.card-form .cr-box-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: .02em;
}

.card-form .cr-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--green-2), var(--green));
    box-shadow: 0 0 0 4px rgba(46, 204, 143, .14);
}

/* 计数徽标：等宽数字，三种状态换色 */
.card-form .cr-count {
    padding: 4px 11px;
    border-radius: 999px;
    background: var(--green-soft);
    color: #0b7a56;
    font-family: var(--mono);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
    transition: background .18s ease, color .18s ease;
}

.card-form .cr-count.is-warn { background: #fff5e6; color: #b54708; }
.card-form .cr-count.is-bad  { background: #fef3f2; color: #b42318; }

.card-form textarea {
    display: block;
    width: 100%;
    /* 固定 160px 高（约 6 行），超出的内部滚动；不给拖拽把手，尺寸就是用户定的这个 */
    height: 160px;
    min-height: 160px;
    padding: 12px 16px;
    border: 0;
    outline: 0;
    background: #fff;
    color: var(--ink);
    font-family: var(--mono);
    font-size: 14px;
    line-height: 1.9;
    letter-spacing: .06em;
    resize: none;
    overflow: auto;
}

.card-form textarea::placeholder { color: var(--ink-3); letter-spacing: .02em; }

.card-form .cr-box-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 16px;
    border-top: 1px solid var(--line);
    background: linear-gradient(180deg, #fbfdfe, #f7fafb);
}

.card-form .cr-tip { font-size: 12px; color: var(--ink-3); }

.card-form .cr-submit {
    flex: 0 0 auto;
    min-width: 132px;
    padding: 11px 22px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .04em;
    border-radius: var(--radius-sm);
}

@media (max-width: 560px) {
    .card-form .cr-box-foot { flex-direction: column; align-items: stretch; }
    .card-form .cr-submit { width: 100%; }
}

/* ---------- 卡密充值：逐行明细 ---------- */
.card-result {
    margin: 0 0 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.card-result .cr-head {
    margin: 0;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(180deg, #fbfdfe, #f5f9fa);
    font-size: 13px;
    color: var(--ink-2);
}

.card-result .cr-head .is-ok   { color: #0b7a56; }
.card-result .cr-head .is-bad  { color: #b42318; }
.card-result .cr-head .is-warn { color: #b54708; }

.card-result .cr-list {
    margin: 0;
    padding: 0;
    list-style: none;
    max-height: 340px;
    overflow: auto;
}

.card-result .cr-list li {
    display: flex;
    gap: 12px;
    align-items: baseline;
    padding: 9px 16px;
    border-top: 1px solid #f2f6f7;
    font-size: 13px;
}

.card-result .cr-list li:first-child { border-top: 0; }
.card-result .cr-list li.bad { background: #fffafa; }

.card-result .cr-no {
    flex: 0 0 28px;
    color: var(--ink-3);
    font-family: var(--mono);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.card-result .cr-code {
    flex: 0 0 auto;
    padding: 2px 8px;
    border-radius: 8px;
    background: #f4f8f9;
    color: var(--ink);
    font-family: var(--mono);
    font-size: 12.5px;
    letter-spacing: .04em;
}

.card-result .cr-txt { flex: 1 1 auto; color: var(--ink-2); }
.card-result .cr-list li.ok  .cr-txt { color: #0b7a56; }
.card-result .cr-list li.bad .cr-txt { color: #b42318; }

/* ==========================================================================
   详情头部「图标键」7 个（2026-10-12 第三版皮肤：玻璃方键 + 底部微标签）
   --------------------------------------------------------------------------
   第二版被吐槽三点：图标看着偏上、顶上那道彩线多余、整体不够高级。这一版：

     ① **图标 + 小字当成一整块**（用户 2026-10-12 最终口径）——
        小字是流内元素，`flex-direction: column` + `justify-content: center`
        + `gap: 1px` ⇒ 整块（16 + 1 + 7 = 24px）在 36 里垂直居中，上下各 6px；
        横向靠 `align-items: center` 居中。整块位置随 `height` 自动居中，不用手调。

     ② **顶部彩线整条删掉**（原来的 `::before` 灯条）。

     ③ 高级感的做法是「收」不是「加」：
        · 半径 13px，描边改成**中性 1px 环**（不带颜色），两层很轻的投影 ——
          有厚度，但不是霓虹灯。
        · 图标静息色**压低饱和度**（第二版是粉彩高亮，远看发飘），hover 才发一点光；
          静息不再挂 `drop-shadow`。
        · 小字加字重 600 + 字距 .3px + 对比提到 .66 ⇒ 7px 中文才不糊成一团。
        · 7 个键里只有「启动」是实心翡翠（主操作），「删除」带极淡朱砂底（危险身份），
          其余 5 个都是同一块中性玻璃 —— 颜色只出现在图标上。

   尺寸：**34 × 36**（第三版曾用 34 × 40，用户说太高 ⇒ 压矮；高度再变化时
   注意图标是靠 `justify-content: center` 自己居中的）。

   ⚠️ 尺寸 / 排版是一套的：图标 + 小字是一整块，靠 `justify-content: center` 居中。
      改 `height` 时**只改这一个值**就行（整块会自动重新居中）。

   ⚠️⚠️ 三个坑（前两版都踩过）：
     1. 选择器**写满 6 个类、整段必须放在文件最末** —— 上面 3960 行那段深色主题
        `.acct-pair .col-head.row .col-tools .btn.tiny { padding: 0 13px }` 是 6 个类；
        少写一个类、或写在它前面，就会被盖掉 ⇒ 内容宽只剩 2px、16px 图标被压成
        2px 竖线 =「图标没显示」。
        `.primary` / `.danger` 那两条是 **7 个类**，所以覆盖它们的地方（启动 / 删除）
        也写成 7 个类（多带一个 `[data-*]` 即可）。
     2. 「刷新 / 换代理」住在 **.col-title**，另外 5 个住在 **.col-tools**
        ⇒ 这一整段的选择器都要**同时覆盖两个容器**（写两条，或用 :is()）。
        移动端怎么把两组并到一排，见本段最后的媒体查询。
     3. **描边用 inset 环画，不用真 border**：真 border 会吃掉 1px 内容盒
        （内容高于内容盒时，图标会被挤偏、小字会被裁）。
        svg 还要带 `width/height` 属性，别只靠 CSS 定尺寸。

   ⚠️ 按钮外面那层 `.ic-btn` 壳是为了让 **disabled 也能弹 title**
      （Chrome 不给 disabled 表单控件显示 title）。title 一律写在壳上。
   ========================================================================== */

/* --- 壳：两个容器里都当行内块用 --- */
.col-head.row .col-title .ic-btn,
.col-head.row .col-tools .ic-btn { display: inline-flex; flex: 0 0 auto; }

/* --- 底座：中性玻璃方键（7 个键共用，每个键只覆盖自己那几个变量） --- */
.col-head.row .col-title .btn.tiny.btn-icon,
.col-head.row .col-tools .btn.tiny.btn-icon {
    /* —— 设计变量（2026-10-12 第七轮换色系：去「脏」）—— */
    --k-icon:    #d6e8f4;                      /* 图标静息色（近白冰蓝：要亮、要干净，不能发灰） */
    --k-label:   rgba(226, 242, 252, .74);     /* 小字静息色 */
    --k-glow:    rgba(190, 220, 240, .24);     /* hover 的描边/微光色 */
    --k-border:  rgba(255, 255, 255, .18);     /* 中性描边（比底色亮一档，边缘才锐） */
    /* ⚠️ 底色是**深墨色**，不是半透明白 —— 上一版用 `rgba(255,255,255,.07)`，
       压在深色卡头的青底上会混出一层灰绿（用户：「有点脏的感觉」）。
       换成低透明度的深墨之后，卡片变成干净的深色片，亮色图标才跳得出来。 */
    --k-face:    rgba(6, 26, 34, .38);
    --k-face-hv: rgba(10, 38, 48, .54);
    --k-bg: linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.015) 100%);

    position: relative;
    width: 34px;
    height: 34px;                 /* 2026-10-12 用户：40 太高 → 36 → 34（键变成 34×34 正方形） */
    flex: 0 0 auto;               /* 防呆：别的规则也不许压它 */
    /* ⚠️ 2026-10-12 第四次微调（用户：「把图标和文字**看成一个整体**，然后往上移」）：
       小字改回**流内**（不再绝对定位贴底），图标 + 1px + 小字 这 24px 当一整块，
       在 36 里**垂直居中** ⇒ 整块上下各 6px。
       对比「图标居中、小字贴底」那版：整块**上移了 4px**，小字也不再贴着底边。 */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0;
    gap: 1px;
    border: 0;                    /* 描边交给 inset 环，见注释 3 */
    border-radius: 12px;
    background-color: var(--k-face);
    background-image: var(--k-bg);
    color: var(--k-icon);
    box-shadow: inset 0 0 0 1px var(--k-border),
                0 2px 3px -1px rgba(0, 0, 0, .25),
                0 6px 14px -8px rgba(0, 0, 0, .60);
    -webkit-tap-highlight-color: transparent;
    transition: transform .16s cubic-bezier(.22,.68,.32,1), box-shadow .18s ease,
                background-color .18s ease, color .18s ease;
}

/* 图标：静息**不加**发光（霓虹感是「不高级」的主要来源），hover 才加 */
.col-head.row .col-title .btn.tiny.btn-icon svg,
.col-head.row .col-tools .btn.tiny.btn-icon svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    color: var(--k-icon);
    transition: color .18s ease, filter .18s ease;
}

/* 图标下那行 7px 小字：**流内**（跟图标算一个整体），上面靠 `gap: 1px` 挨着图标。
   7px 中文要「重一点 + 松一点」才不糊：font-weight 600 + letter-spacing .3px。 */
.col-head.row .col-title .btn.tiny.btn-icon .ic-t,
.col-head.row .col-tools .btn.tiny.btn-icon .ic-t {
    text-align: center;
    font-size: 7px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: .3px;
    white-space: nowrap;
    color: var(--k-label);
    transition: color .18s ease;
}

/* 提交中：图标和小字一起藏起来，只留 `.is-loading::after` 那个转圈 */
.col-head.row .col-title .btn.tiny.btn-icon.is-loading svg,
.col-head.row .col-title .btn.tiny.btn-icon.is-loading .ic-t,
.col-head.row .col-tools .btn.tiny.btn-icon.is-loading svg,
.col-head.row .col-tools .btn.tiny.btn-icon.is-loading .ic-t { visibility: hidden; }

/* ---------- 逐个键：只换「图标色 + hover 微光色」 ----------
   :is() 只为少写一遍容器；老浏览器不认 :is() 时这几条整条失效，该键退回底座的
   近白冰蓝 —— 不会坏，所以放心用。
   配色口径（2026-10-12 第七轮）：**高纯度、高明度的「干净色」**。上一版把这些色都
   压低了饱和度，贴在青底深色片上就变成雾紫/雾蓝/雾金/灰白 ⇒ 用户反馈「有点脏」。 */
.col-head.row :is(.col-title, .col-tools) .btn.tiny.btn-icon[data-detail-refresh] { --k-icon: #4fd3ff; --k-glow: rgba(79, 211, 255, .32); }
.col-head.row :is(.col-title, .col-tools) .btn.tiny.btn-icon[data-proxy-swap]     { --k-icon: #b8a4ff; --k-glow: rgba(184, 164, 255, .32); }
.col-head.row :is(.col-title, .col-tools) .btn.tiny.btn-icon[data-hangup="stop"]  { --k-icon: #ffba5e; --k-glow: rgba(255, 186, 94, .32); }
.col-head.row :is(.col-title, .col-tools) .btn.tiny.btn-icon[data-hangup="config"]{ --k-icon: #7fb2ff; --k-glow: rgba(127, 178, 255, .32); }
.col-head.row :is(.col-title, .col-tools) .btn.tiny.btn-icon[data-detail-edit]    { --k-icon: #e4f2fb; --k-glow: rgba(228, 242, 251, .26); }

/* 删除：危险身份只靠**亮红图标 + 红描边**，不再给整块加淡红底
   （那层红叠在青底上，正是「脏」的主要来源之一）。
   ⚠️ background / box-shadow 必须在这条 7 个类的规则里重写：上面 3981 行 `.danger`
      （同样是 7 个类、而且用的是 `background:` 简写）会把底座（6 个类）的
      background-color / background-image 整条盖回去。 */
.col-head.row :is(.col-title, .col-tools) .btn.tiny.btn-icon[data-detail-delete] {
    --k-icon:    #ff7c8f;
    --k-glow:    rgba(255, 124, 143, .34);
    --k-border:  rgba(255, 124, 143, .28);
    background-color: var(--k-face);
    background-image: var(--k-bg);
    box-shadow: inset 0 0 0 1px var(--k-border),
                0 2px 3px -1px rgba(0, 0, 0, .25),
                0 6px 14px -8px rgba(0, 0, 0, .60);
}

/* 启动：唯一的实心键（翡翠渐变）。
   ⚠️ 这两个属性必须在这条 7 个类的规则里重写 —— 上面 3985 行 `.primary` 也是 7 个类、
      而且用的是 `background:` 简写，会把底座（6 个类）的 background-color /
      background-image 整条盖掉（表现：还是旧的 #18b184、没有渐变）。 */
.col-head.row :is(.col-title, .col-tools) .btn.tiny.btn-icon[data-hangup="start"] {
    --k-icon:    #ffffff;
    --k-label:   rgba(255, 255, 255, .90);
    --k-glow:    rgba(30, 200, 140, .40);
    --k-border:  rgba(255, 255, 255, .20);
    --k-face:    #10a878;
    --k-face-hv: #17b886;
    --k-bg: linear-gradient(180deg, #2ad79b 0%, #12a97a 58%, #0e9b71 100%);
    background-color: var(--k-face);
    background-image: var(--k-bg);
    box-shadow: inset 0 0 0 1px var(--k-border),
                inset 0 1px 0 rgba(255, 255, 255, .20),
                0 2px 8px -4px rgba(16, 168, 120, .55);
}

/* ---------- hover：上浮 1px + 描边亮一点 + 图标一点微光（不再是大片彩晕）----------
   只在真有指针悬停的设备上写，手机上避免「粘住」。
   `background-image: var(--k-bg)` 必须重写：上面 3975 行那段深色主题的 hover 用的是
   `background:` 简写，会把渐变一起清掉。 */
@media (hover: hover) {
    .col-head.row .col-title .btn.tiny.btn-icon:not(:disabled):not([aria-disabled="true"]):hover,
    .col-head.row .col-tools .btn.tiny.btn-icon:not(:disabled):not([aria-disabled="true"]):hover {
        transform: translateY(-1px);
        background-color: var(--k-face-hv);
        background-image: var(--k-bg);
        box-shadow: inset 0 0 0 1px var(--k-glow),
                    0 2px 3px rgba(0, 0, 0, .22),
                    0 8px 18px -8px rgba(0, 0, 0, .55);
        color: #ffffff;
    }
    .col-head.row .col-title .btn.tiny.btn-icon:not(:disabled):hover svg,
    .col-head.row .col-tools .btn.tiny.btn-icon:not(:disabled):hover svg {
        color: var(--k-icon);
        filter: drop-shadow(0 0 6px var(--k-glow));
    }
    .col-head.row .col-title .btn.tiny.btn-icon:not(:disabled):hover .ic-t,
    .col-head.row .col-tools .btn.tiny.btn-icon:not(:disabled):hover .ic-t { color: rgba(255, 255, 255, .92); }

    /* 启动 hover：只提亮底色 + 稍强的绿影（别被通用那条改成中性） */
    .col-head.row :is(.col-title, .col-tools) .btn.tiny.btn-icon[data-hangup="start"]:not(:disabled):not([aria-disabled="true"]):hover {
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .26),
                    0 2px 4px rgba(0, 0, 0, .18),
                    0 8px 18px -8px rgba(16, 168, 120, .85);
    }
}

/* 按下：回落 + 一点内阴影（够快才不会觉得卡） */
.col-head.row .col-title .btn.tiny.btn-icon:not(:disabled):active,
.col-head.row .col-tools .btn.tiny.btn-icon:not(:disabled):active {
    transform: translateY(0) scale(.97);
    box-shadow: inset 0 0 0 1px var(--k-border), inset 0 2px 5px rgba(0, 0, 0, .35);
    transition-duration: .06s;
}

/* 键盘可达：一圈中性描边（鼠标点不会出现） */
.col-head.row .col-title .btn.tiny.btn-icon:focus-visible,
.col-head.row .col-tools .btn.tiny.btn-icon:focus-visible {
    outline: 2px solid rgba(255, 255, 255, .40);
    outline-offset: 2px;
}

/* 不可用（disabled = 空态；aria-disabled = 启停冷却期）：降透明 + 抽彩度，位置不动 */
.col-head.row .col-title .btn.tiny.btn-icon:disabled,
.col-head.row .col-title .btn.tiny.btn-icon[aria-disabled="true"],
.col-head.row .col-tools .btn.tiny.btn-icon:disabled,
.col-head.row .col-tools .btn.tiny.btn-icon[aria-disabled="true"] {
    opacity: .42;
    filter: saturate(.35);
    box-shadow: inset 0 0 0 1px var(--k-border);
    cursor: not-allowed;
}

/* ---------- 左组：刷新 / 换代理 ----------
   桌面端它们待在 .col-title 里（跟在状态徽标后面），这里只管这一组自身：
   两个方键挨着排 5px，与徽标之间留一丝缝。 */
.col-head.row .col-title .ic-mini {
    display: inline-flex;
    flex: 0 0 auto;
    gap: 5px;
    margin-left: 2px;
}

/* 刷新按钮的转圈（原来是 `.refresh-mini.is-spin svg`，换成图标键后要补一份） */
.col-head.row .col-title .btn.tiny.btn-icon.is-spin,
.col-head.row .col-tools .btn.tiny.btn-icon.is-spin { color: #fff; cursor: progress; }
.col-head.row .col-title .btn.tiny.btn-icon.is-spin svg,
.col-head.row .col-tools .btn.tiny.btn-icon.is-spin svg {
    color: #fff;
    animation: rfm-spin .8s linear infinite;
}

/* ---------- 移动端：刷新 / 换代理 跟那 5 个**并成一排**（左组靠左、5 个靠右）----------
   难点：这一组住在 `.col-title` 里，而抽屉里整行是 `display: none`
   （app.css 3150 行 `.acct-drawer #acctDetail .col-title { display: none }`）——
   留在标题行里手机上根本看不到，光靠 CSS 也没法把元素搬到隔壁容器。
   所以把那行改写成 **`display: contents`**（盒子消失、子元素升成 .col-head.row
   的直属项）⇒ 这一排就剩 [.ic-mini][.col-tools] 两个子元素，而 .col-head.row 是
   `space-between` ⇒ 左组贴左、5 个贴右。标题字 / 账号 / 复制 / 状态徽标继续隐掉
   （抽屉头部已经写了这些，不重复）。两条都要盖住 3150 行那条：同分靠「放最末」赢。 */
@media (max-width: 1024px) {
    .acct-drawer #acctDetail .col-title { display: contents; }
    .acct-drawer #acctDetail .col-title > *:not(.ic-mini) { display: none; }
    /* 左组顶到最左，并用一根很淡的竖线跟右边 5 个分组（顺手把留白吃掉） */
    .acct-drawer #acctDetail .col-head.row .ic-mini {
        margin-left: 0;
        margin-right: auto;
        padding-right: 7px;
        border-right: 1px solid rgba(255, 255, 255, .09);
    }

    /* ⚠️ 2026-10-12 结论修正：抽屉里这两块「详情头部」也**不是白底** ——
       `.acct-pair #acctDetail .col-head`（1 个 id + 2 个类）压过了
       `.acct-drawer .col-head { background: transparent }`，窄屏还有一条
       `@media (max-width:1024px) .acct-pair #acctDetail .col-head {
            background: linear-gradient(120deg,#224e5e,#2d6274 80%,#38778b) }`
       ⇒ **手机上头部同样是深色**。所以这里**不要再给按钮做浅色版**
       （用户 2026-10-12 明确要求「移动端按钮不要改变样式」）：
       7 个键在两个宽度下用同一套 token，颜色/描边/hover 完全一致。

       ⚠️ 踩坑记录：临时测试页里把 _detail.html 直接塞进 `.acct-drawer`（漏了
       `.acct-pair` 外层）⇒ 背景落到 `#acctDetail .col-head { background: #fff }`
       ⇒ 误判成「抽屉是白底」，白加了一套浅色版。**测试页必须照抄真实层级**：
       .acct-drawer > .drawer-sheet > .drawer-body > .acct-pair > #acctDetail。 */
}

/* ═══════════════════════════════════════════════════════════════════════════
   梳丝引线 · 蓝色系收口（**必须留在文件末尾**）
   ---------------------------------------------------------------------------
   为什么单独放这儿：项目里已有两条更狠的规则——
       `.fx-sum-cell .fx-num        { color: #0b7a56 }`     ← 绿
       `[data-dt-panel="event"] .fx-sum .fx-num { color: var(--ev-num) }`
   特异性都在 (0,3,0) 以上，而 `梳丝引线` 段里那条
   `.fx-panel.ev-spool .fx-num { color: var(--sp-num) }` 只有 (0,2,0)
   ⇒ 写在前面永远被压住（实测 `累计消耗体力 27` 还是绿的）。

   这里用「同特异性 (0,3,0) + 排在文件最后」把它压回去；
   不用 !important，也不用依赖 `[data-dt-panel="event"]`（预览页没有那层）。
   ═══════════════════════════════════════════════════════════════════════════ */

/* 卡内所有数字：绿/橙 → 深蓝 */
.fx-panel.ev-spool .fx-sum .fx-num,
.fx-panel.ev-spool .fx-sum-cell .fx-num,
.fx-panel.ev-spool .fx-sum-line .fx-num,
.fx-panel.ev-spool .fx-keyline .fx-num,
.fx-panel.ev-spool .fx-keyline b {
    color: #12557d;
}

/* 「模式：普通」这类强调小字（原来是琥珀 #b45309） */
.fx-panel.ev-spool .bn-todo {
    color: #0369a1;
}

/* 「进行中」状态点（原来是绿 #0b8a5f / 橙 #b45309） */
.fx-panel.ev-spool .bn-st,
.fx-panel.ev-spool .bn-st.is-done,
.fx-panel.ev-spool .bn-st.is-todo {
    color: #0369a1;
}

/* 卡头「剩余时间」小标签 */
.fx-panel.ev-spool .bn-rest {
    color: #4a728c;
}

/* ═══════════════════════════════════════════════════════════════════════════
   梳丝引线 · 蓝色系 v2：**更深、更丰富**（2026-10-22 用户第三轮反馈）
   ---------------------------------------------------------------------------
   用户原话：「颜色可以再深一点，丰富一点」

   v1 偏淡（#12557d 数字 + #7b95a8 次要文字 + 空心徽章），问题：
     · 数字和正文对比不足，扫一眼抓不住重点
     · 徽章都是「浅底 + 彩字」，三档视觉重量差不够
     · 整卡偏灰，缺层次

   v2 做三件事：
     ① 主色调**整体压深一档**（#0f2f42 / #0b4a78），数字更沉；
     ② 引入**三支蓝**做层次：靛蓝 #1e40af（最强）· 天蓝 #0369a1（中）·
        青蓝 #0e7490（辅助），不再是单一蓝；
     ③ 徽章改成「**可领取 = 实心渐变白字** / 已领取 = 中蓝实心 / 未达标 = 极淡」，
        三档重量彻底拉开。

   ⚠️ 又一次放文件末尾：`.fx-sum-cell .fx-num` 那些 (0,2,0) 的绿规则还活着，
      必须靠「同特异性 + 靠后」压住（见上面 8130 行那段说明）。
   ⚠️ 全部带 `.fx-panel.ev-spool` 前缀，别的 `.dy-task` 不受影响。
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── ① 变量板：整体压深 + 三支蓝 ───────────────────────────────────── */
.fx-panel.ev-spool {
    --sp-ink:   #0f2f42;   /* 标题：深墨蓝（比 v1 的 #1b3a4d 更深）*/
    --sp-num:   #0b4a78;   /* 数字：深蓝（比 v1 的 #12557d 更深）*/
    --sp-line:  #d5e4ef;   /* 分隔线：加深一档 */
    --sp-mute:  #6b8598;   /* 次要文字：加深一档 */
    --sp-head:  #eaf3fa;   /* 悬停 / 标签底：加深一档 */
    --sp-blue:  #0369a1;   /* 天蓝：主强调 */
    --sp-deep:  #1e40af;   /* 靛蓝：最强强调 */
    --sp-teal:  #0e7490;   /* 青蓝：辅助 */
}

/* ── ② 数字：更深 + 稍大 ─────────────────────────────────────────── */
.fx-panel.ev-spool .fx-num,
.fx-panel.ev-spool .dy-task-prog .fx-num,
.fx-panel.ev-spool .fx-sum-cell .fx-num,
.fx-panel.ev-spool .fx-sum-line .fx-num,
.fx-panel.ev-spool .fx-sum .fx-num,
.fx-panel.ev-spool .fx-keyline .fx-num,
.fx-panel.ev-spool .fx-keyline b {
    color: var(--sp-num);
    font-weight: 700;
}
.fx-panel.ev-spool .dy-task-prog .fx-num {
    font-size: 14px;          /* 比正文大一档，进度更抓眼 */
}

/* ── ③ 徽章三档：重量彻底拉开 ─────────────────────────────────────── */
/* 可领取：实心渐变白字 —— 整张卡唯一的「实心彩色块」，绝对跳出来 */
.fx-panel.ev-spool .dy-st.is-warn {
    background: linear-gradient(135deg, var(--sp-blue), var(--sp-deep));
    color: #fff;
    font-weight: 700;
    box-shadow: 0 1px 4px rgba(30, 64, 175, .32);
    letter-spacing: .2px;
}
/* 已领取：中蓝实心淡底 + 深蓝字（比 v1 的空心重，但明显弱于可领取）*/
.fx-panel.ev-spool .dy-st.is-got {
    background: rgba(3, 105, 161, .13);
    color: var(--sp-num);
    font-weight: 600;
    box-shadow: none;
}
/* 未达标：极淡灰蓝底 + 灰字，最轻 */
.fx-panel.ev-spool .dy-st.is-todo {
    background: rgba(107, 133, 152, .09);
    color: #8598a6;
    font-weight: 500;
}

/* ── ④ 「可领取」整行：4px 渐变竖条 + 极淡蓝底，扫一眼就能定位 ────────
 *     ⚠️ 加了 `:not(.is-pills)` —— 每日任务已经改成方格（is-pills），
 *        方格里要的是「整格淡底」，再叠一条 4px 竖条会显得很重。 */
.fx-panel.ev-spool .dy-list:not(.is-pills) > .dy-task:has(> .dy-task-main > .dy-st.is-warn) {
    box-shadow: inset 4px 0 0 var(--sp-blue);
    background: linear-gradient(90deg, rgba(3, 105, 161, .055), rgba(3, 105, 161, 0) 65%);
}
.fx-panel.ev-spool .dy-list:not(.is-pills) > .dy-task:has(> .dy-task-main > .dy-st.is-warn):hover {
    background: linear-gradient(90deg, rgba(3, 105, 161, .09), rgba(3, 105, 161, .02) 65%);
}

/* ── ⑤ 汇总条（总积分 / 累计消耗体力那一块）：加浅蓝渐变底，分区块 ── */
.fx-panel.ev-spool .fx-sum.fx-box {
    background: linear-gradient(135deg, #f3f9fd, #e6f1f9);
    border-color: #cfe2ee;
}
.fx-panel.ev-spool .fx-sum-cell { color: var(--sp-mute); }
.fx-panel.ev-spool .fx-sum-cell .dy-st { margin-left: 6px; }

/* ── ⑥ 「总积分」那一行 keyline：加一条青色左竖线，跟下面拉开层级 ──── */
.fx-panel.ev-spool .fx-keyline {
    padding-left: 9px;
    border-left: 3px solid var(--sp-teal);
    color: var(--sp-mute);
}

/* ── ⑦ 奖励标签：从「浅灰底」改成「淡蓝底 + 深蓝字」，不再是白块 ───── */
.fx-panel.ev-spool .rw-chip {
    background: var(--sp-head);
    border-color: #d9e8f2;
    color: var(--sp-mute);
}
.fx-panel.ev-spool .rw-chip .fx-num { color: var(--sp-num); }

/* ── ⑧ 标题 / 状态文字 ──────────────────────────────────────────── */
.fx-panel.ev-spool .dy-task-name { color: var(--sp-ink); font-weight: 600; }
.fx-panel.ev-spool .dy-task-prog { color: var(--sp-mute); }
.fx-panel.ev-spool .dy-task-ft   { color: var(--sp-mute); }
.fx-panel.ev-spool .bn-st,
.fx-panel.ev-spool .bn-st.is-done,
.fx-panel.ev-spool .bn-st.is-todo { color: var(--sp-teal); font-weight: 700; }
.fx-panel.ev-spool .bn-todo        { color: var(--sp-blue); }
.fx-panel.ev-spool .bn-rest        { color: var(--sp-mute); }

/* ═══════════════════════════════════════════════════════════════════════════
   梳丝引线 · 每日任务「小方格」（v2：PC 固定 6 列铺满 + 整体更轻盈）
   ---------------------------------------------------------------------------
   用户两轮要求：
     ① 「不要做成列表，可以合并在一起，紧凑一点」
     ② 「PC 端 6 格请铺满一行」「每日任务卡片整体轻盈一点」

   v1 的做法与问题：
     · `minmax(78px, 1fr)` + auto-fill ⇒ 列数是**算出来的**，容器一宽就变 7 列、
       一窄就退成 5 列（5+1 换行很难看）—— 不是「稳定的 6 格一行」。
     · 每格带 `border` + `border-radius` + 白底 + 可领取那格还有投影 ⇒
       6 个方块摞在一起像 6 张小卡片，视觉重量偏重。

   v2：
     ① `repeat(6, minmax(0, 1fr))` —— **PC 端永远 6 列、平分整行**；
        手机（≤460px）退成 3 列 × 2 行。
     ② 「轻盈」：**去掉边框、去掉投影**，只留**极淡的底色**区隔；
        状态徽章在格内也**不再画底色**，只改文字颜色 —— 整格的底色就是状态。
     ③ 字号再收小一点，行高收紧。
   ⚠️ 只作用于 `.dy-list.is-pills`；`sp_tiers`（档位）保持原来的整行表格。
   ═══════════════════════════════════════════════════════════════════════════ */

.fx-panel.ev-spool .dy-list.is-pills {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));   /* ★ PC 端固定 6 列，平分整行 */
    gap: 6px;
    border: 0;
    border-radius: 0;
    background: transparent;
    overflow: visible;
}

/* 每格：无边框、无投影、极淡底 —— 「轻盈」的核心就是这三条 */
.fx-panel.ev-spool .dy-list.is-pills > .dy-task {
    border: 0;
    border-radius: 8px;
    padding: 7px 4px 6px;
    background: #f7fafc;
    gap: 1px;
    box-shadow: none;
    transition: background-color .15s;
}
.fx-panel.ev-spool .dy-list.is-pills > .dy-task .dy-task-main {
    flex-direction: column;
    align-items: center;
    gap: 1px;
    width: 100%;
}
.fx-panel.ev-spool .dy-list.is-pills > .dy-task .dy-task-name {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--sp-mute);
    line-height: 1.2;
}
.fx-panel.ev-spool .dy-list.is-pills > .dy-task .dy-task-name .fx-num {
    font-size: 14px;
    font-weight: 700;
    color: var(--sp-num);
    line-height: 1.1;
}
.fx-panel.ev-spool .dy-list.is-pills > .dy-task .dy-task-prog {
    margin-left: 0;
    font-size: 11px;
    line-height: 1.25;
    color: var(--sp-mute);
}
.fx-panel.ev-spool .dy-list.is-pills > .dy-task .dy-task-prog .fx-num {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--sp-num);
}
.fx-panel.ev-spool .dy-list.is-pills > .dy-task .dy-task-ft { display: none; }

/* 格内徽章：**不画底色**，只留一句短文字 —— 底色交给整格 */
.fx-panel.ev-spool .dy-list.is-pills > .dy-task .dy-st {
    margin: 1px 0 0;
    padding: 0;
    background: transparent;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: .2px;
}

/* 三档状态：只靠**整格底色 + 文字颜色**表达 */
.fx-panel.ev-spool .dy-list.is-pills > .dy-task:has(> .dy-task-main > .dy-st.is-got) {
    background: #f4f9fc;
}
.fx-panel.ev-spool .dy-list.is-pills > .dy-task:has(> .dy-task-main > .dy-st.is-got) .dy-st {
    color: #7d97a8;
}

.fx-panel.ev-spool .dy-list.is-pills > .dy-task:has(> .dy-task-main > .dy-st.is-warn) {
    background: linear-gradient(160deg, #e9f4fc, #dcecf8);
    box-shadow: none;          /* 方格里不要竖条，底色就够 */
}
.fx-panel.ev-spool .dy-list.is-pills > .dy-task:has(> .dy-task-main > .dy-st.is-warn) .dy-task-name {
    color: var(--sp-num);
}
.fx-panel.ev-spool .dy-list.is-pills > .dy-task:has(> .dy-task-main > .dy-st.is-warn) .dy-st {
    color: var(--sp-blue);
    font-weight: 700;
}

.fx-panel.ev-spool .dy-list.is-pills > .dy-task:has(> .dy-task-main > .dy-st.is-todo) {
    background: transparent;
}
.fx-panel.ev-spool .dy-list.is-pills > .dy-task:has(> .dy-task-main > .dy-st.is-todo) .dy-st {
    color: #aebec9;
}

/* 手机：3 列 × 2 行（6 个挤一行在 360px 上会看不清） */
@media (max-width: 460px) {
    .fx-panel.ev-spool .dy-list.is-pills {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 5px;
    }
    .fx-panel.ev-spool .dy-list.is-pills > .dy-task { padding: 6px 3px 5px; }
    .fx-panel.ev-spool .dy-list.is-pills > .dy-task .dy-task-name { font-size: 11px; }
    .fx-panel.ev-spool .dy-list.is-pills > .dy-task .dy-task-name .fx-num { font-size: 13px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   梳丝引线 · 第三版视觉（2026-10-22 用户：要有设计感和高级感）
   ---------------------------------------------------------------------------
   全部追加在文件最末尾，靠「同优先级后写覆盖」压过上面的旧版规则。
   ⚠️ 以后改这段**只准 cat >> 追加**，绝对不要按字符偏移切片删除 ——
   17:30 那次切片切在别人规则的中间，破坏了几百条其它组件的块结构。
   ═══════════════════════════════════════════════════════════════════════════ */

.fx-panel.ev-spool {
    --sp-ink: #0d2233;
    --sp-num: #0a4a7a;
    --sp-line: #e3edf5;
    --sp-mute: #7b93a6;
    --sp-accent: #0b6ca8;
    --sp-soft: #f5f9fc;
    border: 0;
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 1px 2px rgba(13, 34, 51, .05), 0 10px 28px -14px rgba(13, 34, 51, .22);
}

/* ① 深色渐变头 */
.fx-panel.ev-spool .sp-head {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: linear-gradient(135deg, #0e2c47 0%, #14486b 58%, #1a5c85 100%);
    overflow: hidden;
}
.fx-panel.ev-spool .sp-head::after {
    content: "";
    position: absolute;
    inset: -60% -20% auto auto;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(122, 205, 255, .38), transparent 62%);
    pointer-events: none;
}
.fx-panel.ev-spool .sp-ico {
    position: static;
    width: 38px;
    height: 38px;
    flex: none;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .32));
}
.fx-panel.ev-spool .sp-head-txt { position: relative; z-index: 1; min-width: 0; }
.fx-panel.ev-spool .sp-head-txt h3 {
    margin: 0;
    font-size: 15.5px;
    font-weight: 700;
    letter-spacing: .6px;
    color: #fff;
}
.fx-panel.ev-spool .sp-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    margin-top: 4px;
    font-size: 11.5px;
    color: rgba(255, 255, 255, .66);
}
.fx-panel.ev-spool .sp-meta b { color: #fff; font-weight: 600; }
.fx-panel.ev-spool .sp-badge {
    padding: 1px 9px;
    border-radius: 20px;
    background: rgba(126, 224, 176, .16);
    color: #7ee0b0;
    font-weight: 600;
    letter-spacing: .2px;
}
.fx-panel.ev-spool .next-card {
    position: relative;
    z-index: 1;
    margin-left: auto;
    padding: 4px 10px;
    border-radius: 9px;
    background: rgba(255, 255, 255, .12);
    color: #cfe8fb;
    font-size: 11.5px;
    white-space: nowrap;
}
.fx-panel.ev-spool .next-card-k { color: rgba(255, 255, 255, .6); margin-right: 5px; }
.fx-panel.ev-spool .next-card .fx-num { color: #fff; }

/* ② 主体 + 4 个指标 */
.fx-panel.ev-spool .sp-body { padding: 14px 16px 16px; }
.fx-panel.ev-spool .sp-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
    margin-bottom: 15px;
}
.fx-panel.ev-spool .sp-metric {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 9px 6px 8px;
    border-radius: 10px;
    background: linear-gradient(180deg, #f8fcff, #edf6fd);
    border: 1px solid #e8f2fa;
}
.fx-panel.ev-spool .sp-metric .fx-num {
    font-size: 19px;
    font-weight: 800;
    line-height: 1.15;
    color: var(--sp-num);
    letter-spacing: -.3px;
}
.fx-panel.ev-spool .sp-metric > span {
    font-size: 10.5px;
    color: var(--sp-mute);
    letter-spacing: .2px;
    white-space: nowrap;
}

/* ③ 每日任务 6 点阵 */
.fx-panel.ev-spool .sp-tasks { margin-bottom: 14px; }
.fx-panel.ev-spool .sp-tasks-hd {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--sp-ink);
}
.fx-panel.ev-spool .sp-tasks-hd::before {
    content: "";
    align-self: center;
    width: 3px;
    height: 11px;
    border-radius: 2px;
    background: var(--sp-accent);
}
.fx-panel.ev-spool .sp-tasks-note {
    margin-left: auto;
    font-size: 10.5px;
    font-weight: 400;
    color: var(--sp-mute);
}
.fx-panel.ev-spool .dy-list.is-pills.sp-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 6px;
    border: 0;
    border-radius: 0;
    background: transparent;
    overflow: visible;
}
.fx-panel.ev-spool .sp-grid > .dy-task {
    border: 0;
    border-radius: 11px;
    padding: 8px 3px 7px;
    background: transparent;
    box-shadow: none;
    text-align: center;
    transition: background-color .16s ease, box-shadow .16s ease;
}
.fx-panel.ev-spool .sp-grid > .dy-task .dy-task-main {
    flex-direction: column;
    align-items: center;
    gap: 2px;
    width: 100%;
}
.fx-panel.ev-spool .sp-grid > .dy-task .dy-task-name {
    display: block;
    font-size: 10px;
    font-weight: 500;
    color: var(--sp-mute);
    line-height: 1;
}
.fx-panel.ev-spool .sp-grid > .dy-task .dy-task-name .fx-num {
    display: block;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.05;
    color: #b6c8d5;
    letter-spacing: -.5px;
}
.fx-panel.ev-spool .sp-grid > .dy-task .dy-task-prog {
    margin: 0;
    font-size: 10px;
    line-height: 1.3;
    color: #a9bac6;
}
.fx-panel.ev-spool .sp-grid > .dy-task .dy-task-prog .fx-num {
    font-size: 10.5px;
    font-weight: 600;
    color: #93a8b7;
}
.fx-panel.ev-spool .sp-grid > .dy-task .dy-st {
    margin: 1px 0 0;
    padding: 0;
    background: transparent;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.5;
}
.fx-panel.ev-spool .sp-grid > .dy-task .dy-task-ft { display: none; }
.fx-panel.ev-spool .sp-grid > .dy-task:has(> .dy-task-main > .dy-st.is-todo) .dy-st { color: #c3d1db; }
.fx-panel.ev-spool .sp-grid > .dy-task:has(> .dy-task-main > .dy-st.is-got) { background: #f4f9fd; }
.fx-panel.ev-spool .sp-grid > .dy-task:has(> .dy-task-main > .dy-st.is-got) .dy-task-name .fx-num { color: #9db6c7; }
.fx-panel.ev-spool .sp-grid > .dy-task:has(> .dy-task-main > .dy-st.is-got) .dy-st { color: #89a8bb; }
.fx-panel.ev-spool .sp-grid > .dy-task:has(> .dy-task-main > .dy-st.is-warn) {
    background: linear-gradient(158deg, #0e6da8 0%, #0a4d7c 100%);
    box-shadow: 0 6px 16px -6px rgba(10, 77, 124, .55);
}
.fx-panel.ev-spool .sp-grid > .dy-task:has(> .dy-task-main > .dy-st.is-warn) .dy-task-name { color: rgba(255, 255, 255, .72); }
.fx-panel.ev-spool .sp-grid > .dy-task:has(> .dy-task-main > .dy-st.is-warn) .dy-task-name .fx-num { color: #fff; }
.fx-panel.ev-spool .sp-grid > .dy-task:has(> .dy-task-main > .dy-st.is-warn) .dy-task-prog { color: rgba(255, 255, 255, .7); }
.fx-panel.ev-spool .sp-grid > .dy-task:has(> .dy-task-main > .dy-st.is-warn) .dy-task-prog .fx-num { color: #eaf6ff; }
.fx-panel.ev-spool .sp-grid > .dy-task:has(> .dy-task-main > .dy-st.is-warn) .dy-st { color: #9fd8ff; }

/* ④ 本期累计奖励 */
.fx-panel.ev-spool .sp-rewards {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding: 9px 12px;
    border-radius: 10px;
    background: var(--sp-soft);
}
.fx-panel.ev-spool .sp-rewards-k { font-size: 11px; color: var(--sp-mute); letter-spacing: .2px; }
.fx-panel.ev-spool .sp-rewards .rw-chips { gap: 5px; }
.fx-panel.ev-spool .sp-rewards .rw-chip {
    padding: 2px 8px;
    border: 0;
    border-radius: 20px;
    background: #fff;
    color: var(--sp-ink);
    font-size: 11.5px;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(13, 34, 51, .06);
}
.fx-panel.ev-spool .sp-rewards .rw-chip .fx-num { color: var(--sp-accent); }

/* ⑤ 档位（整行，轻量） */
.fx-panel.ev-spool .dy-block .stat-sub {
    margin-bottom: 7px;
    font-size: 12px;
    font-weight: 600;
    color: var(--sp-ink);
}
.fx-panel.ev-spool .dy-block .stat-sub::before { background: rgba(11, 108, 168, .5); }
.fx-panel.ev-spool .dy-block .stat-sub::after { background: var(--sp-line); }
.fx-panel.ev-spool .dy-list:not(.is-pills) {
    display: flex;
    flex-direction: column;
    gap: 6px;
    border: 0;
    border-radius: 0;
    background: transparent;
    overflow: visible;
}
.fx-panel.ev-spool .dy-list:not(.is-pills) > .dy-task {
    border: 0;
    border-radius: 10px;
    padding: 8px 11px;
    background: var(--sp-soft);
    gap: 2px;
}
.fx-panel.ev-spool .dy-list:not(.is-pills) > .dy-task .dy-task-name {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--sp-ink);
}
.fx-panel.ev-spool .dy-list:not(.is-pills) > .dy-task .dy-task-prog {
    margin-left: auto;
    font-size: 11.5px;
    color: var(--sp-mute);
}
.fx-panel.ev-spool .dy-list:not(.is-pills) > .dy-task .fx-num { color: var(--sp-num); }
.fx-panel.ev-spool .dy-list:not(.is-pills) > .dy-task .dy-task-ft { font-size: 11px; color: var(--sp-mute); }
.fx-panel.ev-spool .dy-list:not(.is-pills) > .dy-task .dy-st {
    margin-left: 0;
    padding: 0 7px;
    font-size: 10.5px;
    font-weight: 600;
    border-radius: 20px;
}
.fx-panel.ev-spool .dy-list:not(.is-pills) > .dy-task .dy-st.is-todo { background: #eaf1f7; color: #8aa0b0; }
.fx-panel.ev-spool .dy-list:not(.is-pills) > .dy-task .dy-st.is-got { background: rgba(3, 105, 161, .10); color: var(--sp-num); }
.fx-panel.ev-spool .dy-list:not(.is-pills) > .dy-task .dy-st.is-warn {
    background: linear-gradient(135deg, #0e6da8, #0a4d7c);
    color: #fff;
}
.fx-panel.ev-spool .dy-list:not(.is-pills) > .dy-task:has(> .dy-task-main > .dy-st.is-warn) {
    background: #eef7fd;
    box-shadow: inset 3px 0 0 var(--sp-accent);
}
.fx-panel.ev-spool .dy-task.is-pills .sp-x { display: none; }

@media (max-width: 460px) {
    .fx-panel.ev-spool .sp-body { padding: 12px 12px 14px; }
    .fx-panel.ev-spool .sp-head { padding: 12px 13px; gap: 10px; }
    .fx-panel.ev-spool .sp-ico { width: 32px; height: 32px; }
    .fx-panel.ev-spool .sp-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fx-panel.ev-spool .sp-metric .fx-num { font-size: 17px; }
    .fx-panel.ev-spool .dy-list.is-pills.sp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .fx-panel.ev-spool .sp-grid > .dy-task .dy-task-name .fx-num { font-size: 15px; }
    .fx-panel.ev-spool .next-card { display: none; }
}

/* ── 特异性兜底（2026-10-22 17:5x）────────────────────────────────────────
   上面第 8374 行那段旧规则用的是
   `.dy-list.is-pills > .dy-task:has(...)`（7 个 class），
   比本段 `.sp-grid > .dy-task:has(...)`（6 个）特异性高，
   导致「可领取」的深蓝渐变被压回浅蓝。
   这里把 `.dy-list.is-pills.sp-grid` 全写出来（9 个 class），确保赢。 */
.fx-panel.ev-spool .dy-list.is-pills.sp-grid > .dy-task:has(> .dy-task-main > .dy-st.is-warn) {
    background: linear-gradient(158deg, #0e6da8 0%, #0a4d7c 100%);
    box-shadow: 0 6px 16px -6px rgba(10, 77, 124, .55);
}
.fx-panel.ev-spool .dy-list.is-pills.sp-grid > .dy-task:has(> .dy-task-main > .dy-st.is-warn) .dy-task-name { color: rgba(255, 255, 255, .72); }
.fx-panel.ev-spool .dy-list.is-pills.sp-grid > .dy-task:has(> .dy-task-main > .dy-st.is-warn) .dy-task-name .fx-num { color: #fff; }
.fx-panel.ev-spool .dy-list.is-pills.sp-grid > .dy-task:has(> .dy-task-main > .dy-st.is-warn) .dy-task-prog { color: rgba(255, 255, 255, .7); }
.fx-panel.ev-spool .dy-list.is-pills.sp-grid > .dy-task:has(> .dy-task-main > .dy-st.is-warn) .dy-task-prog .fx-num { color: #eaf6ff; }
.fx-panel.ev-spool .dy-list.is-pills.sp-grid > .dy-task:has(> .dy-task-main > .dy-st.is-warn) .dy-st {
    background: transparent;
    color: #9fd8ff;
}
.fx-panel.ev-spool .dy-list.is-pills.sp-grid > .dy-task:has(> .dy-task-main > .dy-st.is-got) {
    background: #f4f9fd;
    box-shadow: none;
}
.fx-panel.ev-spool .dy-list.is-pills.sp-grid > .dy-task:has(> .dy-task-main > .dy-st.is-got) .dy-task-name { color: var(--sp-mute); }
.fx-panel.ev-spool .dy-list.is-pills.sp-grid > .dy-task:has(> .dy-task-main > .dy-st.is-got) .dy-task-name .fx-num { color: #9db6c7; }
.fx-panel.ev-spool .dy-list.is-pills.sp-grid > .dy-task:has(> .dy-task-main > .dy-st.is-got) .dy-task-prog { color: #a9bac6; }
.fx-panel.ev-spool .dy-list.is-pills.sp-grid > .dy-task:has(> .dy-task-main > .dy-st.is-got) .dy-task-prog .fx-num { color: #93a8b7; }
.fx-panel.ev-spool .dy-list.is-pills.sp-grid > .dy-task:has(> .dy-task-main > .dy-st.is-got) .dy-st {
    background: transparent;
    color: #89a8bb;
}
.fx-panel.ev-spool .dy-list.is-pills.sp-grid > .dy-task:has(> .dy-task-main > .dy-st.is-todo) {
    background: transparent;
    box-shadow: none;
}
.fx-panel.ev-spool .dy-list.is-pills.sp-grid > .dy-task:has(> .dy-task-main > .dy-st.is-todo) .dy-st { background: transparent; color: #c3d1db; }
/* 旧段给所有 .dy-task 加了白底 + 下边框，点阵里要清掉 */
.fx-panel.ev-spool .dy-list.is-pills.sp-grid > .dy-task,
.fx-panel.ev-spool .dy-list.is-pills.sp-grid > .dy-task:last-child {
    border: 0;
    border-bottom: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   梳丝引线 · 第四版微调（2026-10-22 用户要求）
   ① 图标放大到 72×72（跟碎玉成瓶 / 花游太空 等其它活动卡片一致），
      但**绝不允许撑开卡片头部** —— 把 `.sp-ico` 从 `.sp-head` 里挪出来做成
      绝对定位贴纸：不占流 → 卡头高度一点都不变，只往卡片上方露 20px。
      代价是卡片必须 `overflow: visible`，所以 `.sp-head` 自己接管圆角裁切。
   ② 徽标配色：已领取 = 绿色，可领取 = 浅绿色
   ═══════════════════════════════════════════════════════════════════════════ */

/* ①-1 卡片不再裁切（图标要露到上面去），圆角交给 sp-head 自己画 */
.fx-panel.ev-spool {
    overflow: visible;
}
/* ①-2 卡头接管圆角 + 裁掉自己的光晕（原来靠父级 overflow:hidden 裁） */
.fx-panel.ev-spool .sp-head {
    border-radius: 16px 16px 0 0;
    padding-left: 84px;          /* 给图标让位，跟其它活动卡片同一档 */
}
/* ①-3 图标：72×72 贴纸，左贴卡片里侧、上露 20px，跟 .fx-ico 一模一样的做法 */
.fx-panel.ev-spool .sp-ico {
    position: absolute;
    left: 2px;
    top: -20px;
    z-index: 3;
    width: 72px;
    height: 72px;
    padding: 0;
    border: 0;
    object-fit: contain;
    filter: drop-shadow(0 6px 10px rgba(15, 42, 60, .22)) drop-shadow(0 1px 2px rgba(15, 42, 60, .10));
}
/* 手机：图标同样 72（跟其它活动卡片一致），卡头左内边距收一档 82 */
@media (max-width: 460px) {
    .fx-panel.ev-spool .sp-head { padding-left: 82px; }
    .fx-panel.ev-spool .sp-ico { width: 72px; height: 72px; top: -20px; }
}

/* ② 徽标配色：已领取 = 绿，可领取 = 浅绿 */
/* ②-1 顶部「进行中」状态徽章保持原样（那是活动状态，不是任务状态） */

/* ②-2 每日任务 6 点阵里的徽标 */
.fx-panel.ev-spool .dy-list.is-pills.sp-grid > .dy-task .dy-st.is-got {
    background: transparent;
    color: #16a34a;              /* 绿：已领取 */
}
.fx-panel.ev-spool .dy-list.is-pills.sp-grid > .dy-task .dy-st.is-warn {
    background: transparent;
    color: #86efac;              /* 浅绿：可领取（在深蓝点阵里） */
}
.fx-panel.ev-spool .dy-list.is-pills.sp-grid > .dy-task .dy-st.is-todo {
    background: transparent;
    color: #c3d1db;
}
/* 点阵里「已领取」的格子统一浅灰蓝，绿字才跳得出来 */
.fx-panel.ev-spool .dy-list.is-pills.sp-grid > .dy-task:has(> .dy-task-main > .dy-st.is-got) {
    background: #f6f9fc;
    box-shadow: none;
}

/* ②-3 档位（整行）里的徽标 —— 这里是实心药丸，绿得更明确 */
.fx-panel.ev-spool .dy-list:not(.is-pills) > .dy-task .dy-st.is-got {
    background: rgba(22, 163, 74, .12);
    color: #15803d;              /* 绿：已领取 */
}
.fx-panel.ev-spool .dy-list:not(.is-pills) > .dy-task .dy-st.is-warn {
    background: #dcfce7;
    color: #15803d;              /* 浅绿：可领取 */
    box-shadow: inset 0 0 0 1px rgba(22, 163, 74, .25);
}
.fx-panel.ev-spool .dy-list:not(.is-pills) > .dy-task:has(> .dy-task-main > .dy-st.is-warn) {
    background: #f5fbf7;
    box-shadow: inset 3px 0 0 #16a34a;   /* 左边条也改绿，跟徽标同一语义 */
}
.fx-panel.ev-spool .dy-list:not(.is-pills) > .dy-task:has(> .dy-task-main > .dy-st.is-warn) .dy-task-prog,
.fx-panel.ev-spool .dy-list:not(.is-pills) > .dy-task:has(> .dy-task-main > .dy-st.is-warn) .dy-task-prog .fx-num {
    color: #15803d;
}

/* ── 徽标配色兜底（2026-10-22 18:0x）────────────────────────────────────────
   ⚠️ 坑：`:has()` 的特异性 = **参数里最复杂选择器**的特异性，不是简单 +1。
   旧规则 `.dy-list.is-pills.sp-grid > .dy-task:has(> .dy-task-main > .dy-st.is-got) .dy-st`
   实际是 6 + 3(`.dy-task-main .dy-st .is-got`) = 9 个 class，
   我上面写的 8 个 → 输了，绿色没生效。
   这里把 `> .dy-task-main > .dy-st.xxx` 全写出来，12 个 class，稳赢。 */
.fx-panel.ev-spool .dy-list.is-pills.sp-grid > .dy-task:has(> .dy-task-main > .dy-st.is-got) > .dy-task-main > .dy-st.is-got {
    background: transparent;
    color: #16a34a;              /* 绿：已领取 */
    text-shadow: none;
}
.fx-panel.ev-spool .dy-list.is-pills.sp-grid > .dy-task:has(> .dy-task-main > .dy-st.is-warn) > .dy-task-main > .dy-st.is-warn {
    background: transparent;
    color: #86efac;              /* 浅绿：可领取 */
    text-shadow: none;
}
.fx-panel.ev-spool .dy-list.is-pills.sp-grid > .dy-task:has(> .dy-task-main > .dy-st.is-todo) > .dy-task-main > .dy-st.is-todo {
    background: transparent;
    color: #c3d1db;              /* 灰：未达标 */
    text-shadow: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   梳丝引线 · 浅蓝描边（2026-10-22 用户要求）
   原来 `border: 0` 靠阴影浮起来，加一圈浅蓝细边把卡片"框"出来。
   注意：卡片是 `overflow: visible`（图标要露到上面），所以描边正常显示；
   内层 .sp-head 圆角要收 1px，否则边框会被深色卡头的直角顶出来。
   ═══════════════════════════════════════════════════════════════════════════ */
.fx-panel.ev-spool {
    border: 1px solid #c7e0f4;          /* 浅蓝描边 */
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(11, 108, 168, .06),
                0 10px 28px -14px rgba(11, 108, 168, .28);
}
/* 卡头圆角收 1px 贴合边框内沿 */
.fx-panel.ev-spool .sp-head {
    border-radius: 15px 15px 0 0;
}
/* 描边稍亮一档的悬停反馈（可选，跟着边框同一色系） */
.fx-panel.ev-spool:hover {
    border-color: #a9d2ef;
}

/* ═══════════════════════════════════════════════════════════════════════════
   梳丝引线 · 每日任务格子标题改中文（2026-10-22 用户要求）
   原来格子里是一个 17px 大数字（taskId），现在换成「任务一」~「任务六」三字，
   所以字号 / 字重 / 行高都按「文字」重排，不再按「大号数字」。
   ⚠️ 特异性：旧规则是 `.sp-grid > .dy-task .dy-task-name`（5 个 class），
      这里写全 `.dy-list.is-pills.sp-grid`（6 个）才能盖过。
   ═══════════════════════════════════════════════════════════════════════════ */
.fx-panel.ev-spool .dy-list.is-pills.sp-grid > .dy-task .dy-task-name {
    display: block;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: .2px;
    color: var(--sp-mute);
    white-space: nowrap;
}
/* 已领取：整块退到背景里（连标题一起淡） */
.fx-panel.ev-spool .dy-list.is-pills.sp-grid > .dy-task:has(> .dy-task-main > .dy-st.is-got) > .dy-task-main > .dy-task-name {
    color: #9db6c7;
    font-weight: 500;
}
/* 可领取：深蓝格子上白字最清楚 */
.fx-panel.ev-spool .dy-list.is-pills.sp-grid > .dy-task:has(> .dy-task-main > .dy-st.is-warn) > .dy-task-main > .dy-task-name {
    color: #fff;
    font-weight: 700;
}
/* 未达标：最轻 */
.fx-panel.ev-spool .dy-list.is-pills.sp-grid > .dy-task:has(> .dy-task-main > .dy-st.is-todo) > .dy-task-main > .dy-task-name {
    color: #a8bcc9;
    font-weight: 500;
}
/* 手机：3 列更宽，标题可以再大一号 */
@media (max-width: 460px) {
    .fx-panel.ev-spool .dy-list.is-pills.sp-grid > .dy-task .dy-task-name { font-size: 12.5px; }
}


/* ═══════════════════════════════════════════════════════════════════════════════
   喵铺消消 · 极简暖白（Minimal Warm）+ 占位纯 CSS 切换

   ★ 2026-10-29 用户：「现在色系和文字不匹配，整体看过去很脏很重」
                     「每日任务还是暂无数据」

   ── 一、为什么之前「脏、重」─────────────────────────────────────────────────
   前面 8 版都在**加大块彩色**（橙 / 金 / 紫 / 绿 / 蓝 / 酒红 / 柠檬黄 / 暖橙），
   再配近黑字。问题：
     · **大块饱和色 + 近黑字 = 对比过猛**，整张卡像贴满标签，视觉重量全压在头上；
     · 彩色数字（深橙棕 #9a3412）在浅底上发浑，跟灰色说明文字（#a89a8e）同族，
       一层层叠起来就是「脏」；
     · 顶着一块高饱和色，下面白底反而像「没做完」，上下割裂。

   ── 二、这版的做法：把颜色降到「点缀」──
     · 卡头改**极浅暖白**（#fffefc → #f7f4f0），只用一条 1px 暖灰线收边
     · 所有文字收敛到**墨色 / 暖灰**两级，数字也不再染色
     · 橙色**只留三处**：图标、可领取格、可领取行左侧 3px 条
       —— 整张卡只有「要你动手的地方」是彩色的，其它全是中性色
     这样视觉重量从「满屏」降到「一处」，才谈得上高级。

   ── 三、占位改用纯 CSS ─────────────────────────────────────────────────────
   JS 生成占位会跟 renderBlock 抢时序（paintMpTasks 铺好 → renderDetail 清空 →
   又变回「暂无数据」）。现在模板里同时存在两个 ul：
     · `.mp-task-list[data-list="mp_tasks"]`  真实数据（renderBlock 往里渲染）
     · `.mp-task-list.mp-task-ph`             静态 6 行骨架
   CSS 用 `:has()` 切换，跟谁先跑完全无关。

   ── 四、项目级约束 ──
   · 必须排在文件最后（`.fx-sum-cell .fx-num{color:#0b7a56}` 这类绿字 (0,3,0)+）
   · `--ev-*` 要在 `[data-dt-panel="event"]` 前缀下重定义（6203 行的青绿默认值）
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── 0、变量：全部中性化，橙只做点缀 ── */
[data-dt-panel="event"] .fx-panel.ev-mp {
    --ev-line:  #ece7df;
    --ev-bg1:   #fbf9f6;
    --ev-bg2:   #f7f4f0;
    --ev-card:  #fff;
    --ev-title: #1f1b16;
    --ev-ink:   #2b2620;
    --ev-num:   #1f1b16;
    --ev-sub:   #948d84;
    --ev-bar:   #e6e1d9;
}

.fx-panel.ev-mp {
    --mp-ink:    #1f1b16;   /* 主文字：墨（暖调近黑） */
    --mp-num:    #17140f;   /* 数字：比正文再深一档，不染色 */
    --mp-accent: #c2410c;   /* 唯一彩色，只给「可领取」 */
    --mp-line:   #ece7df;   /* 分隔线：暖灰 */
    --mp-mute:   #948d84;   /* 次要文字 */
    --mp-soft:   #f9f6f2;   /* 极浅暖底 */
    --mp-head:   #fbf8f4;   /* 悬停底 */
}

/* ── 1、卡片本体：**橙色边框** + 上下留白 ──
 *
 *   · 边框：`#f2c9a8` 是「浅橙」，能一眼看出是橙色系，又不会像荧光橙那样压重
 *     （整卡已经是中性暖白，边框是唯一的橙色轮廓线）
 *   · 上下间距：图标向上溢出 28px，`.dt-panel.is-stack` 的 32px gap 会被它吃掉一半
 *     ⇒ 视觉上跟上一张卡贴在一起。这里给 12px 额外上边距把空间让出来
 *     （**只动 mp 自己，不改全局 gap** —— 另外 6 张活动卡的间距是既有设计，别牵动） */
.fx-panel.ev-mp {
    position: relative;
    margin-top: 12px;
    margin-bottom: 6px;
    border: 1px solid #f2c9a8;
    border-radius: 16px;
    overflow: visible;
    background: #fff;
    /* 有边框了，阴影可以收一点，避免「边框 + 重影」双线 */
    box-shadow: 0 1px 2px rgba(31, 27, 22, .035),
                0 12px 28px -18px rgba(31, 27, 22, .14);
}

/* ── 2、图标：92px，溢出卡片但不占流 ── */
.fx-panel.ev-mp .mp-ico {
    position: absolute;
    left: -10px;
    top: -28px;
    z-index: 4;
    width: 92px;
    height: auto;
    object-fit: contain;
    pointer-events: none;
    filter: drop-shadow(0 6px 12px rgba(31, 27, 22, .18))
            drop-shadow(0 1px 2px rgba(31, 27, 22, .1));
}

/* ── 3、头部：极浅暖白，靠排版而不是色块撑起层级 ── */
.fx-panel.ev-mp .mp-head {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 14px 16px 12px 84px;
    border-radius: 16px 16px 0 0;
    background: linear-gradient(180deg, #fffefc 0%, #f7f4f0 100%);
    border-bottom: 1px solid var(--mp-line);
    overflow: hidden;
}

/* 3-1 标题 + 反色徽章（全卡唯一深块）*/
.fx-panel.ev-mp .mp-hd-top {
    display: flex;
    align-items: center;
    gap: 8px;
}
.fx-panel.ev-mp .mp-hd-top h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.2px;
    line-height: 1.2;
    color: var(--mp-num);
}
.fx-panel.ev-mp .mp-badge {
    margin-left: auto;
    padding: 2px 9px;
    border-radius: 20px;
    background: #17140f;
    color: #fdfcf9;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .3px;
    white-space: nowrap;
}
.fx-panel.ev-mp .mp-badge:empty { display: none; }

/* 3-2 剩余（主）+ 模式 / 兑换（次）*/
.fx-panel.ev-mp .mp-hd-sub {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 3px 10px;
    margin-top: 4px;
    font-size: 11px;
    color: var(--mp-mute);
}
.fx-panel.ev-mp .mp-hd-sub b { color: #4a443c; font-weight: 600; }
.fx-panel.ev-mp .mp-dim { color: var(--mp-mute); }
.fx-panel.ev-mp .mp-rest {
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: -.1px;
    color: #2b2620;
}

/* 3-3 两个开关：开 = 墨底白字，关 = 极浅底灰字（明度差，不靠色相）*/
.fx-panel.ev-mp .mp-hd-flags {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 9px;
}
.fx-panel.ev-mp .mp-flag {
    padding: 1.5px 9px;
    border-radius: 20px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .2px;
    line-height: 1.6;
    white-space: nowrap;
}
.fx-panel.ev-mp .mp-flag.is-on  { background: #17140f; color: #fdfcf9; }
.fx-panel.ev-mp .mp-flag.is-off { background: #f1ede7; color: #9a938a; }
.fx-panel.ev-mp .mp-flag:empty  { display: none; }

/* ── 4、主体 ── */
.fx-panel.ev-mp .mp-body { padding: 16px 16px 18px; }

/* 4-1 Hero：两个大数字（墨色，不染色）*/
.fx-panel.ev-mp .mp-hero {
    display: flex;
    align-items: center;
    padding: 2px 0 14px;
    border-bottom: 1px solid var(--mp-line);
}
.fx-panel.ev-mp .mp-hero-cell {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 0;
}
.fx-panel.ev-mp .mp-hero-cell .fx-num {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -.8px;
    color: var(--mp-num);
    font-variant-numeric: tabular-nums;
}
.fx-panel.ev-mp .mp-hero-cell .fx-num:empty::before {
    content: '—';
    color: #ddd8d0;
    font-weight: 400;
}
.fx-panel.ev-mp .mp-hero-cell > span {
    font-size: 11px;
    letter-spacing: .6px;
    color: var(--mp-mute);
    /* ★ 2026-10-29：Hero 改成三列后格子更窄，标签（如「累计消耗体力」6 字）
       绝对不能折行 —— 一折行整行高度被顶起来，三格基线也对不齐。*/
    white-space: nowrap;
}
.fx-panel.ev-mp .mp-hero-line {
    flex: 0 0 1px;
    align-self: stretch;
    margin: 2px 0;
    background: linear-gradient(180deg, transparent, var(--mp-line), transparent);
}

/* 4-2 Inline 次要指标 */
.fx-panel.ev-mp .mp-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 0;
    padding: 11px 0 2px;
    font-size: 11px;
    color: var(--mp-mute);
}
.fx-panel.ev-mp .mp-inline > span {
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    white-space: nowrap;
}
.fx-panel.ev-mp .mp-inline > span + span::before {
    content: "·";
    margin: 0 8px;
    color: #d6d1c8;
}
.fx-panel.ev-mp .mp-inline .fx-num {
    font-size: 12px;
    font-weight: 600;
    color: #4a443c;
    font-variant-numeric: tabular-nums;
}

/* 4-3 状态说明 */
.fx-panel.ev-mp .mp-note {
    margin-top: 11px;
    padding: 8px 11px;
    border-radius: 8px;
    background: var(--mp-soft);
    font-size: 11px;
    line-height: 1.6;
    color: var(--mp-mute);
    word-break: break-all;
}

/* ── 5、分区头 ── */
.fx-panel.ev-mp .mp-sec { margin-top: 16px; }
.fx-panel.ev-mp .mp-sec-hd {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 9px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .2px;
    color: var(--mp-ink);
}
.fx-panel.ev-mp .mp-sec-note {
    margin-left: auto;
    font-size: 10.5px;
    font-weight: 400;
    color: var(--mp-mute);
}

/* ── 6、每日任务 6 列 + **占位纯 CSS 切换** ──
 *   ⚠️ 两个 ul 并存：
 *      · `.mp-task-list[data-list]`  真实数据，renderBlock 有内容时打 data-rendered="1"
 *      · `.mp-task-list.mp-task-ph`  静态骨架，常驻 data-rendered="1"（给 blockHasData）
 *   切换只看「真实列表有没有 data-rendered」，跟 JS 执行顺序无关。 */
.fx-panel.ev-mp .mp-task-list {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 0;
    background: transparent;

    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 6px;
}
/* 默认：藏真实、显示占位 */
.fx-panel.ev-mp .mp-task-list[data-list="mp_tasks"] { display: none; }
/* 有真实数据：反过来 */
.fx-panel.ev-mp .mp-sec:has(.mp-task-list[data-list="mp_tasks"][data-rendered="1"]) .mp-task-list[data-list="mp_tasks"] {
    display: grid;
}
.fx-panel.ev-mp .mp-sec:has(.mp-task-list[data-list="mp_tasks"][data-rendered="1"]) .mp-task-ph {
    display: none;
}

.fx-panel.ev-mp .mp-tr {
    border-radius: 10px;
    background: #fbf9f6;
    border: 1px solid transparent;
    transition: background-color .15s, border-color .15s;
}
.fx-panel.ev-mp .mp-tr:hover { background: var(--mp-head); }
.fx-panel.ev-mp .mp-tr .mp-tr-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 9px 2px 8px;
}
/* 档位数字：主角，墨色 */
.fx-panel.ev-mp .mp-tr .mp-tr-k {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.2px;
    color: var(--mp-num);
    white-space: nowrap;
}
.fx-panel.ev-mp .mp-tr .mp-tr-k .fx-num {
    font-size: 14px;
    font-weight: 700;
    color: var(--mp-num);
    font-variant-numeric: tabular-nums;
}
/* 奖励：更淡一档 */
.fx-panel.ev-mp .mp-tr .mp-tr-rw {
    font-size: 10px;
    line-height: 1.25;
    color: #b3aca2;
    white-space: nowrap;
}
/* 状态 */
.fx-panel.ev-mp .mp-tr .mp-tr-st {
    margin-top: 1px;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.4;
    color: #b3aca2;
    white-space: nowrap;
}
.fx-panel.ev-mp .mp-tr .mp-tr-st.is-got  { color: #b3aca2; }
.fx-panel.ev-mp .mp-tr .mp-tr-st.is-todo { color: #c2bbb1; }

/* 可领取：整卡唯一的彩色 —— 浅橙底 + 橙字 + 橙边（不填实心，避免"重"）*/
.fx-panel.ev-mp .mp-tr:has(.mp-tr-st.is-warn) {
    background: #fff6ef;
    border-color: #f7d4bd;
}
.fx-panel.ev-mp .mp-tr:has(.mp-tr-st.is-warn) .mp-tr-k,
.fx-panel.ev-mp .mp-tr:has(.mp-tr-st.is-warn) .mp-tr-k .fx-num { color: var(--mp-accent); }
.fx-panel.ev-mp .mp-tr:has(.mp-tr-st.is-warn) .mp-tr-rw { color: #d99a75; }
.fx-panel.ev-mp .mp-tr:has(.mp-tr-st.is-warn) .mp-tr-st { color: var(--mp-accent); }

/* 占位骨架：整格压灰，但**要看得清**（太淡等于没占位）
 *    实测 #d8d2c8 在截图里几乎看不出文字 ⇒ 提到 #c9c2b6 / #d5cec3，
 *    仍然明显弱于真实数据（#17140f / #b3aca2），能一眼区分。 */
.fx-panel.ev-mp .mp-tr.is-ph { background: #fbf9f7; border-color: transparent; }
.fx-panel.ev-mp .mp-tr.is-ph .mp-tr-k,
.fx-panel.ev-mp .mp-tr.is-ph .mp-tr-k .fx-num { color: #c9c2b6; }
.fx-panel.ev-mp .mp-tr.is-ph .mp-tr-rw { color: #d5cec3; }
.fx-panel.ev-mp .mp-tr.is-ph .mp-tr-st { color: #d5cec3; }
.fx-panel.ev-mp .mp-tr.is-ph:hover { background: #fbf9f7; }

/* ── 7、累计消耗体力档位：4 档一行 4 列 ── */
.fx-panel.ev-mp .mp-tiers {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.fx-panel.ev-mp .mp-tier {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 10px 3px 9px;
    border-radius: 10px;
    background: #fbf9f6;
    border: 1px solid transparent;
    text-align: center;
    transition: background-color .16s, border-color .16s;
}
.fx-panel.ev-mp .mp-tier-need {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.3px;
    color: var(--mp-num);
    font-variant-numeric: tabular-nums;
}
.fx-panel.ev-mp .mp-tier-rw {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    min-height: 26px;      /* 第 4 档只有 1 条奖励，靠它撑住 4 格等高 */
    margin-top: 1px;
}
.fx-panel.ev-mp .mp-tier-rw > span {
    font-size: 10.5px;
    line-height: 1.25;
    color: #b3aca2;
    white-space: nowrap;
}
.fx-panel.ev-mp .mp-tier-st {
    margin-top: 3px;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.4;
    color: #c2bbb1;
}
.fx-panel.ev-mp .mp-tier-st:empty::before {
    content: "—";
    color: #ddd8d0;
    font-weight: 400;
}
/* 已领取：灰下去 */
.fx-panel.ev-mp .mp-tier.is-got .mp-tier-need { color: #b3aca2; }
.fx-panel.ev-mp .mp-tier.is-got .mp-tier-rw > span { color: #c2bbb1; }
.fx-panel.ev-mp .mp-tier.is-got .mp-tier-st { color: #b3aca2; }

/* 可领取：浅橙底 + 橙字 + 橙边（跟任务格同一套语言）*/
.fx-panel.ev-mp .mp-tier.is-warn {
    background: #fff6ef;
    border-color: #f7d4bd;
}
.fx-panel.ev-mp .mp-tier.is-warn .mp-tier-need { color: var(--mp-accent); }
.fx-panel.ev-mp .mp-tier.is-warn .mp-tier-rw > span { color: #d99a75; }
.fx-panel.ev-mp .mp-tier.is-warn .mp-tier-st { color: var(--mp-accent); }

/* ── 8、数字收口：压掉项目级绿字 ── */
.fx-panel.ev-mp .fx-sum .fx-num,
.fx-panel.ev-mp .fx-sum-cell .fx-num,
.fx-panel.ev-mp .fx-sum-line .fx-num,
.fx-panel.ev-mp .fx-keyline .fx-num,
.fx-panel.ev-mp .fx-keyline b {
    color: var(--mp-num);
}
.fx-panel.ev-mp .muted { color: var(--mp-mute); }

/* ── 9、手机：任务 3 列、档位 2 列 ── */
@media (max-width: 460px) {
    .fx-panel.ev-mp .mp-head { padding: 13px 13px 11px 74px; }
    .fx-panel.ev-mp .mp-ico { width: 78px; top: -22px; left: -6px; }
    .fx-panel.ev-mp .mp-hd-top h3 { font-size: 16px; }
    .fx-panel.ev-mp .mp-hero-cell .fx-num { font-size: 22px; }
    .fx-panel.ev-mp .mp-task-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .fx-panel.ev-mp .mp-tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* ═══════════════════════════════════════════════════════════════════════════════
   喵铺消消 · 徽标 + 淡橙点缀 + 两个时间（★ 2026-10-29）

   用户：「未领取/已领取，要有徽标。然后加点颜色（淡橙色系）点缀，
         时间应该有 2 个：活动剩余时间，下一轮执行时间：倒计时」

   ── 一、状态徽标 ────────────────────────────────────────────────────────────
   之前状态只是一行小字，扫视时容易漏。改成 **pill**（圆角 + 底色）：
     · 已领取  → 中性灰底（事情办完了，最不抢眼）
     · 可领取  → **淡橙底 + 橙字**（全卡唯一的行动点）
     · 未领取/未达标 → 无底、更淡
   ⚠️ 任务格只有 57px 宽，「已领取」3 字 + 左右 padding ≈ 43px，刚好放得下；
      pill 的 padding 不能超过 7px，否则会换行。

   ── 二、淡橙点缀 ────────────────────────────────────────────────────────────
   整卡仍是中性暖白（上一轮定的），只加**三处**淡橙把气色提起来：
     ① 分区标题前的 3px 竖条（橙渐变）
     ② 状态说明条左侧 2px 橙边
     ③ 两个时间 pill 的淡橙底
   —— 加起来面积不到 5%，够「有颜色」，又不会回到「脏、重」。

   ── 三、两个时间 ────────────────────────────────────────────────────────────
   按最新上报规格：
     · `ev_mp_rest`        距下一轮秒数（-1 = 没排上）  → 本地每秒递减的倒计时
     · `ev_mp_act_rest`    活动剩余秒数（-1 = 读不到）
     · `ev_mp_act_rest_txt` 活动剩余文案（如「3天11时20分」）→ 优先用它
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── 1、两个时间 pill ── */
.fx-panel.ev-mp .mp-time {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 8px;
    background: #fff8f2;
    border: 1px solid #fbe6d6;
}
.fx-panel.ev-mp .mp-time > i {
    font-style: normal;
    font-size: 10px;
    letter-spacing: .2px;
    color: #b08a68;
}
.fx-panel.ev-mp .mp-time > b {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -.2px;
    color: #c2410c;
    font-variant-numeric: tabular-nums;
}
/* 倒计时那一格更醒目一点（它是会动的，值得多看一眼） */
.fx-panel.ev-mp .mp-time.is-hl {
    background: #fff1e6;
    border-color: #f8d4b8;
}
.fx-panel.ev-mp .mp-time.is-hl > b { color: #ea580c; }

/* ── 2、状态徽标（任务 6 格 + 档位 4 格） ── */
.fx-panel.ev-mp .mp-tr .mp-tr-st,
.fx-panel.ev-mp .mp-tier-st {
    padding: 1.5px 7px;
    border-radius: 20px;
    font-size: 9.5px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: .1px;
    white-space: nowrap;
}

/* 已领取：中性灰底（不抢眼） */
.fx-panel.ev-mp .mp-tr .mp-tr-st.is-got,
.fx-panel.ev-mp .mp-tier-st.is-got {
    background: #f2ede6;
    color: #a8a096;
}

/* 可领取：淡橙底 + 橙字（唯一的行动点） */
.fx-panel.ev-mp .mp-tr .mp-tr-st.is-warn,
.fx-panel.ev-mp .mp-tier-st.is-warn {
    background: #ffe8d6;
    color: #c2410c;
}

/* 未领取 / 未达标：无底，最淡 */
.fx-panel.ev-mp .mp-tr .mp-tr-st.is-todo,
.fx-panel.ev-mp .mp-tier-st.is-todo {
    background: transparent;
    color: #c8c1b7;
}

/* 占位骨架里的「—」不画底 */
.fx-panel.ev-mp .mp-tr.is-ph .mp-tr-st {
    background: transparent;
    color: #ded7cb;
}

/* ── 3、淡橙点缀 ── */

/* ① 分区标题前的竖条 */
.fx-panel.ev-mp .mp-sec-hd::before {
    content: "";
    align-self: center;
    width: 3px;
    height: 11px;
    border-radius: 2px;
    background: linear-gradient(180deg, #fdba74, #ea580c);
}

/* ② 状态说明条左侧橙边 */
.fx-panel.ev-mp .mp-note {
    border-left: 2px solid #f8d4b8;
}

/* ③ Hero 分隔线也染一点暖色 */
.fx-panel.ev-mp .mp-hero-line {
    background: linear-gradient(180deg, transparent, #f3d9c4, transparent);
}

/* ── 4、可领取格：底色也带一点橙（跟徽标呼应） ── */
.fx-panel.ev-mp .mp-tr:has(.mp-tr-st.is-warn) {
    background: #fffaf6;
    border-color: #f8ddc8;
}
.fx-panel.ev-mp .mp-tier.is-warn {
    background: #fffaf6;
    border-color: #f8ddc8;
}

/* ════════════════════════════════════════════════════════════════════════════
   绯梦夜曲（★ 2026-10-31 用户要求）—— 紫色系活动卡
   ────────────────────────────────────────────────────────────────────────────
   配色口径（沿用喵铺消消那一轮总结出的规律）：
     「高级感」不靠大块饱和色，靠**极高明度的中性底 + 一处高饱和点缀 + 近黑字**。
     所以：底色是 #fff / #fdfbff，紫色只出现在描边、徽标、3px 竖条、月亮装饰上，
     面积 < 8%，整体看起来轻、不脏。

   7 列网格的尺寸约束（PC 端真实卡宽 400px）：
     400 - 32(padding) - 30(gap 6×5) = 338 ⇒ 每格 48px
     所以徽标字号压到 8.5px、内边距 1px 5px（「已领取」≈ 34px，放得下）
   ════════════════════════════════════════════════════════════════════════════ */

.fx-panel.ev-fm {
    --fm-main: #7c3aed;      /* violet-600  主色（只在点缀上用） */
    --fm-deep: #5b21b6;      /* violet-800  深一档，用于数字 */
    --fm-soft: #faf5ff;      /* violet-50   最浅底 */
    --fm-soft2: #f3e8ff;     /* violet-100  次浅底 */
    --fm-line: #e9d5ff;      /* violet-200  描边 */
    --fm-ink: #1f1b16;       /* 近黑（正文字） */
    --fm-mute: #8b7fa3;      /* 灰紫（弱化字） */

    position: relative;
    margin-top: 12px;
    margin-bottom: 6px;
    border: 1px solid var(--fm-line);
    border-radius: 16px;
    overflow: visible;
    background: #fff;
    box-shadow: 0 1px 2px rgba(31, 27, 22, .035),
                0 12px 28px -18px rgba(91, 33, 182, .18);
}

/* ── 卡头：极浅紫渐变 + 一个月亮装饰 ──────────────────────────────────── */
.fx-panel.ev-fm .fm-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-radius: 16px 16px 0 0;
    background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 55%, #ede9fe 100%);
    border-bottom: 1px solid var(--fm-line);
    overflow: hidden;
}

.fx-panel.ev-fm .fm-head > h3 {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .2px;
    color: var(--fm-ink);
}

/* 月亮装饰：不是一个 emoji，用渐变球做，避免跨端字形差异 */
.fx-panel.ev-fm .fm-moon {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: radial-gradient(circle at 32% 28%, #ddd6fe 0%, #a78bfa 45%, #6d28d9 100%);
    box-shadow: 0 2px 7px rgba(124, 58, 237, .38),
                inset -3px -2px 6px rgba(91, 33, 182, .28);
}

/* 卡头右侧的「剩余时间」：跟活动卡统一的 bn-rest，只改字色 */
.fx-panel.ev-fm .fm-head .bn-rest {
    flex: 0 0 auto;
    font-size: 11px;
    color: var(--fm-mute);
    white-space: nowrap;
}

.fx-panel.ev-fm .fm-head .bn-rest b {
    font-size: 12px;
    font-weight: 700;
    color: var(--fm-deep);
    font-variant-numeric: tabular-nums;
}

/* ── 卡体 ──────────────────────────────────────────────────────────────── */
.fx-panel.ev-fm .fm-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 14px 16px 16px;
}

.fx-panel.ev-fm .fm-sec {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* 分区标题：左侧 3px 紫渐变竖条 —— 这是"有颜色但不重"的关键 */
.fx-panel.ev-fm .fm-sec-hd {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 700;
    color: var(--fm-ink);
}

.fx-panel.ev-fm .fm-sec-hd::before {
    content: "";
    align-self: center;
    width: 3px;
    height: 11px;
    border-radius: 2px;
    background: linear-gradient(180deg, #c4b5fd, #7c3aed);
}

.fx-panel.ev-fm .fm-sec-note {
    margin-left: auto;
    font-size: 10px;
    font-weight: 400;
    color: var(--fm-mute);
}

/* 状态说明条：左侧紫边 */
.fx-panel.ev-fm .bn-st {
    padding: 7px 10px;
    border-radius: 8px;
    border-left: 2px solid #d8b4fe;
    background: var(--fm-soft);
    font-size: 11px;
    line-height: 1.55;
    color: #4c4360;
}

/* ── 七日福利：PC 一行 7 列 ────────────────────────────────────────────── */
.fx-panel.ev-fm .fm-d7 {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 5px;
    margin: 0;
    padding: 0;
    list-style: none;
    border: 0;
    background: transparent;
}

.fx-panel.ev-fm .fm-d7-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 3px;
    min-width: 0;
    padding: 8px 2px 7px;
    border: 1px solid var(--fm-line);
    border-radius: 10px;
    background: #fdfbff;
    text-align: center;
}

.fx-panel.ev-fm .fm-d7-no {
    font-size: 9px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--fm-mute);
    white-space: nowrap;
}

/* 奖励拆成「数值 + 单位」两段竖排：
 * 格只有 48px（400 卡宽 / 7 列），「100 花坊币」6 个字符在 9.5px 下必然折行，
 * 用 break-all 会断成「100 花坊 / 币」—— 语义都断了。
 * 所以模板改成 <b>数值</b><i>单位</i>，这里竖排居中，不折断任何词。 */
.fx-panel.ev-fm .fm-d7-rw {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    line-height: 1.25;
    color: var(--fm-ink);
    white-space: nowrap;
}

.fx-panel.ev-fm .fm-d7-rw > b {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: -.2px;
    font-variant-numeric: tabular-nums;
}

.fx-panel.ev-fm .fm-d7-rw > i {
    font-style: normal;
    font-size: 8.5px;
    font-weight: 500;
    color: var(--fm-mute);
}

/* 徽标 pill：三态（已领取 / 未领取 / 今天可领） */
.fx-panel.ev-fm .fm-d7-st {
    margin-top: auto;
    padding: 1px 5px;
    border-radius: 20px;
    font-size: 8.5px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0;
    white-space: nowrap;
}

.fx-panel.ev-fm .fm-d7-st.is-got {
    background: #ede9fe;
    color: #9d93b0;
}

.fx-panel.ev-fm .fm-d7-st.is-todo {
    background: transparent;
    color: #c4b5fd;
}

/* 已领取的格子整体弱化（划线 + 灰底），一眼能扫出还剩几天 */
.fx-panel.ev-fm .fm-d7-item.is-got {
    background: #fcfbff;
    border-color: #f1ebff;
}

.fx-panel.ev-fm .fm-d7-item.is-got .fm-d7-rw {
    color: #a89fb8;
    text-decoration: line-through;
}

/* "今天"那一格：紫色描边高亮（已领的不会走到这里，JS 里已排除） */
.fx-panel.ev-fm .fm-d7-item.is-cur {
    background: var(--fm-soft);
    border-color: #a78bfa;
    box-shadow: inset 0 0 0 1px #ddd6fe;
}

.fx-panel.ev-fm .fm-d7-item.is-cur .fm-d7-no {
    color: var(--fm-deep);
}

.fx-panel.ev-fm .fm-d7-item.is-cur .fm-d7-st.is-todo {
    background: #ede9fe;
    color: var(--fm-main);
}

/* ── 雪鸮夜曲：奖励 N ──────────────────────────────────────────────────── */
.fx-panel.ev-fm .fm-owl {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 10px 14px;
    border: 1px solid var(--fm-line);
    border-radius: 10px;
    background: linear-gradient(135deg, #faf5ff 0%, #f5f3ff 100%);
}

.fx-panel.ev-fm .fm-owl-k {
    font-size: 11px;
    color: var(--fm-mute);
}

.fx-panel.ev-fm .fm-owl-n {
    font-size: 18px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.2px;
    color: var(--fm-deep);
    font-variant-numeric: tabular-nums;
}

/* 窄屏（手机）兜底：7 列在 <360px 会挤，允许横向滚动而不是压扁 */
@media (max-width: 480px) {
    .fx-panel.ev-fm .fm-d7 {
        grid-template-columns: repeat(7, minmax(44px, 1fr));
        overflow-x: auto;
        padding-bottom: 2px;
    }
}

/* ════════════════════════════════════════════════════════════════════════════
   绯梦夜曲 · 「梦幻紫」主题 v2（★ 2026-10-31 用户追问要求）
   ────────────────────────────────────────────────────────────────────────────
   用户要求：① 左上角换成 s058 图标；② 加「下次执行时间」+「剩余时间」；
             ③ 改成「梦幻紫」，要有设计感和高级感。

   为什么是这一段追加而不是改上面的 v1：
     项目 CSS 纪律 —— **只在末尾追加**，靠同优先级后写覆盖，绝不删旧规则
     （删段会在文件里留下未闭合的注释开头，或者切在别的组件中间，2026-10-22 出过事故）。
     卡头结构从「一行（月亮+标题+剩余）」变成「两行（标题 / 两个时间 pill）」，
     v1 里的 .fm-moon / .fm-head > h3 / .bn-rest 已不再匹配，留着无害。

   「梦幻紫」的做法（区别于普通紫）：
     · **多段柔和渐变**：紫 → 淡紫 → 粉紫 → 白，四个色标过渡，不是两个色硬切
     · **柔光斑**：卡头右上角一枚 120px 径向光晕，营造"发光"的梦感
     · **半透明玻璃 pill**：时间标签用 rgba(255,255,255,.7) + 细紫边
     · **紫色柔光阴影**：不是黑色投影，是 rgba(139,92,246,.3) 的彩色投影
     但**底色仍然极高明度**（#fff / #fbf8ff），文字用近黑 —— 不然"梦幻"会变成"糊"。
   ════════════════════════════════════════════════════════════════════════════ */

/* ── 卡片本体：梦幻紫描边 + 彩色柔光投影 ─────────────────────────────── */
.fx-panel.ev-fm {
    --fm-main: #8b5cf6;      /* violet-500  主色 */
    --fm-deep: #6d28d9;      /* violet-700  深一档 */
    --fm-pink: #d946ef;      /* fuchsia-500 梦幻感的粉紫点缀 */
    --fm-ink: #1f1b16;       /* 近黑（正文） */
    --fm-mute: #8b7fa3;      /* 灰紫（弱化字） */
    --fm-line: #ede9fe;      /* violet-100 描边 */
    --fm-glow: rgba(139, 92, 246, .30);

    border: 1px solid #e4dbff;
    border-radius: 16px;
    background: #fff;
    box-shadow:
        0 1px 2px rgba(31, 27, 22, .03),
        0 14px 34px -22px var(--fm-glow),
        0 3px 10px -6px rgba(217, 70, 239, .12);
}

/* ── 左上角图标：绝对定位向上溢出，不占流 ─────────────────────────────── */
.fx-panel.ev-fm .fm-ico {
    position: absolute;
    left: -8px;
    top: -24px;
    z-index: 4;
    width: 84px;
    height: auto;
    object-fit: contain;
    pointer-events: none;
    filter: drop-shadow(0 6px 12px rgba(109, 40, 217, .22))
            drop-shadow(0 1px 2px rgba(31, 27, 22, .10));
}

/* ── 卡头：两行布局 + 四段柔和渐变 + 右上角柔光斑 ────────────────────── */
.fx-panel.ev-fm .fm-head {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 13px 16px 12px 78px;    /* 左 78px 给图标让位（图标右缘落在 76px） */
    border-radius: 16px 16px 0 0;
    border-bottom: 1px solid var(--fm-line);
    overflow: hidden;
    background:
        radial-gradient(115% 130% at 92% -10%, rgba(250, 232, 255, .95) 0%, transparent 58%),
        linear-gradient(112deg,
            #faf7ff 0%,
            #f3ecff 34%,
            #f6e9ff 62%,
            #fdf5ff 100%);
}

/* 柔光斑：梦感来源，纯装饰、不吃事件 */
.fx-panel.ev-fm .fm-head::after {
    content: "";
    position: absolute;
    right: -34px;
    top: -46px;
    width: 128px;
    height: 128px;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(196, 181, 253, .55) 0%,
        rgba(240, 171, 252, .22) 45%,
        transparent 70%);
    pointer-events: none;
}

.fx-panel.ev-fm .fm-hd-top {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.fx-panel.ev-fm .fm-head .fm-hd-top > h3 {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .3px;
    color: var(--fm-ink);
}

/* ── 两个时间 pill（剩余 / 下次执行）─────────────────────────────────── */
.fx-panel.ev-fm .fm-hd-times {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

.fx-panel.ev-fm .fm-time {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .74);   /* 玻璃感 */
    border: 1px solid #ebe3ff;
    box-shadow: 0 1px 2px rgba(109, 40, 217, .06);
}

.fx-panel.ev-fm .fm-time > i {
    font-style: normal;
    font-size: 10px;
    font-weight: 500;
    color: #a99cc4;
    letter-spacing: .2px;
}

.fx-panel.ev-fm .fm-time > b {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--fm-deep);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.1px;
}

/* 没数据时 pill 里不要出现空洞的空白 */
.fx-panel.ev-fm .fm-time > b:empty::after {
    content: "—";
    color: #c9bfe0;
    font-weight: 500;
}

/* 「下次执行」是倒计时，给它更重的视觉权重 */
.fx-panel.ev-fm .fm-time.is-hl {
    background: linear-gradient(135deg, #f3ebff 0%, #fae9ff 100%);
    border-color: #e4d4ff;
}

.fx-panel.ev-fm .fm-time.is-hl > i {
    color: #9b7fd4;
}

.fx-panel.ev-fm .fm-time.is-hl > b {
    color: var(--fm-main);
    text-shadow: 0 0 12px rgba(139, 92, 246, .25);
}

/* ── 分区标题：紫→粉紫 双色渐变竖条（比 v1 的单色更有层次）──────────── */
.fx-panel.ev-fm .fm-sec-hd::before {
    background: linear-gradient(180deg, #c4b5fd 0%, #a78bfa 45%, #d946ef 100%);
}

/* ── 七日福利格子：等宽 + 柔和阴影 ──────────────────────────────────── */
.fx-panel.ev-fm .fm-d7-item {
    border: 1px solid #efe9ff;
    background: linear-gradient(180deg, #fdfbff 0%, #fbf8ff 100%);
    box-shadow: 0 1px 2px rgba(109, 40, 217, .035);
    transition: box-shadow .18s ease, border-color .18s ease;
}

/* 已领取：淡化但不"死"——保留一点点暖色，避免整片灰掉显脏 */
.fx-panel.ev-fm .fm-d7-item.is-got {
    background: linear-gradient(180deg, #fcfaff 0%, #fbf7ff 100%);
    border-color: #f4eeff;
    box-shadow: none;
}

.fx-panel.ev-fm .fm-d7-item.is-got .fm-d7-rw > i {
    color: #bdb3cc;
}

/* 今日可领：紫色描边 + 柔光，是整行的视觉焦点 */
.fx-panel.ev-fm .fm-d7-item.is-cur {
    background: linear-gradient(180deg, #f8f3ff 0%, #f6ecff 100%);
    border-color: #b79bfb;
    box-shadow:
        inset 0 0 0 1px #e0d3ff,
        0 4px 14px -8px rgba(139, 92, 246, .55);
}

.fx-panel.ev-fm .fm-d7-item.is-cur .fm-d7-no {
    color: var(--fm-deep);
}

/* ── 徽标：渐变底，区别于 v1 的纯色底 ───────────────────────────────── */
.fx-panel.ev-fm .fm-d7-st.is-got {
    background: #f0ecfa;
    color: #a498b8;
}

.fx-panel.ev-fm .fm-d7-item.is-cur .fm-d7-st.is-todo {
    background: linear-gradient(135deg, #e9dbff 0%, #f6ddff 100%);
    color: var(--fm-main);
    box-shadow: 0 1px 4px rgba(139, 92, 246, .22);
}

/* ── 雪鸮夜曲：梦幻渐变块 ────────────────────────────────────────────── */
.fx-panel.ev-fm .fm-owl {
    position: relative;
    border: 1px solid #ece4ff;
    background:
        radial-gradient(120% 160% at 100% 0%, rgba(250, 232, 255, .85) 0%, transparent 62%),
        linear-gradient(135deg, #faf7ff 0%, #f6efff 55%, #fdf6ff 100%);
    overflow: hidden;
}

.fx-panel.ev-fm .fm-owl-n {
    color: var(--fm-deep);
    text-shadow: 0 0 16px rgba(139, 92, 246, .22);
}

/* ── 状态说明条：左紫边改成渐变边 ────────────────────────────────────── */
.fx-panel.ev-fm .bn-st {
    border-left: 2px solid #cbb6ff;
    background: linear-gradient(90deg, #faf7ff 0%, #fdfaff 100%);
}

/* ── 窄屏兜底 ────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .fx-panel.ev-fm .fm-ico { width: 68px; top: -18px; left: -6px; }
    .fx-panel.ev-fm .fm-head { padding-left: 64px; }
    .fx-panel.ev-fm .fm-head .fm-hd-top > h3 { font-size: 14px; }
    .fx-panel.ev-fm .fm-time > b { font-size: 12px; }
}

/* ── 绯梦夜曲 · 卡头微调（2026-10-31 第二轮）──────────────────────────────
   首版实测发现两个构图问题：
     ① 图标 84px + top:-24px 溢出太多，花篮图的方形边界压在卡片圆角上，显脏；
     ② 标题 / 时间 pill 居中，而左侧 78px 是给图标让位的空白 ⇒ 左右失衡。
   改成：图标缩到 72px 只轻微上溢、卡头左内边距收到 74px、标题与 pill 一律左对齐，
   视觉上「图标 → 标题 → 时间」是一条干净的左对齐竖线。 */
.fx-panel.ev-fm .fm-ico {
    left: 6px;
    top: -16px;
    width: 72px;
    filter: drop-shadow(0 5px 10px rgba(109, 40, 217, .20))
            drop-shadow(0 1px 2px rgba(31, 27, 22, .08));
}

.fx-panel.ev-fm .fm-head {
    padding: 12px 16px 12px 74px;
    gap: 7px;
}

.fx-panel.ev-fm .fm-hd-top {
    justify-content: flex-start;
}

.fx-panel.ev-fm .fm-head .fm-hd-top > h3 {
    text-align: left;
    font-size: 15.5px;
    letter-spacing: .4px;
}

.fx-panel.ev-fm .fm-hd-times {
    justify-content: flex-start;
}

@media (max-width: 480px) {
    .fx-panel.ev-fm .fm-ico { width: 60px; top: -12px; left: 4px; }
    .fx-panel.ev-fm .fm-head { padding-left: 62px; }
}

/* ── 绯梦夜曲 · 修「标题莫名居中」（2026-10-31 第三轮）────────────────────
   根因：`.fx-head`（全局，app.css:4305）写了 `align-items: center`。
   本卡的 `.fm-head` 改成了 `flex-direction: column`，而在 column 方向下
   `align-items: center` 的含义是**水平居中** ⇒ 标题和两个时间 pill 全被拉到中间，
   左边给图标让出来的 74px 变成一片空白，左右失衡。
   覆盖成 `stretch` 即可让子元素撑满一行、靠左对齐。 */
.fx-panel.ev-fm .fm-head {
    align-items: stretch;
}

.fx-panel.ev-fm .fm-hd-top,
.fx-panel.ev-fm .fm-hd-times {
    justify-content: flex-start;
    align-self: stretch;
}

/* 标题本身也置左（`.fx-head h3` 是 flex 容器，这里只保证文本起点靠左） */
.fx-panel.ev-fm .fm-head .fm-hd-top > h3 {
    justify-content: flex-start;
    text-align: left;
}

/* 图标稍微离左边缘远一点，避免压在卡片圆角上 */
.fx-panel.ev-fm .fm-ico {
    left: 10px;
}

/* ── 绯梦夜曲 · 图标与标题的重叠修正（2026-10-31 第四轮）──────────────────
   实测：图标 left:10px + width:72px ⇒ 右缘落在 82px，
   而卡头 padding-left:74px ⇒ 标题起点 74px，被图标压住 8px（「绯」字看不见）。
   按算数避让：padding-left 必须 ≥ 图标右缘 + 间隙 ⇒ 82 + 8 = 90px。
   （喵铺消消当时踩过同一个坑：改图标尺寸时忘了同步 padding-left。） */
.fx-panel.ev-fm .fm-head {
    padding: 12px 16px 12px 90px;
}

@media (max-width: 480px) {
    /* 窄屏图标 left:4 + width:60 ⇒ 右缘 64，padding-left 取 72 */
    .fx-panel.ev-fm .fm-head { padding-left: 72px; }
}

/* ===================================================================
   ⑦ 香卉甜糕（.ev-tg）· 清爽青绿系（★ 2026-11-05 用户要求）
   -------------------------------------------------------------------
   骨架照喵铺消消（.ev-mp）：图标探出 · 三段式卡头 · 3 格 Hero · inline · note · 占位。
   配色换成清爽青绿（薄荷 / 青瓷），比喵铺的深橙轻一档 —— 整卡只有边框和徽章带色。

   ⚠️ 为什么每条都写足 `.fx-panel.ev-tg`（0,3,0）且全部追加在文件末尾：
      文件前面有
        `.fx-sum-cell .fx-num { color: #0b7a56 }`              ← (0,2,0)
        `[data-dt-panel="event"] .fx-sum .fx-num { ... }`      ← (0,3,0)
      两条都比 `.ev-tg .fx-num`（0,2,0）狠 ⇒ 写在前面永远被压住，
      卡里所有数字会变回绿色。所以用「同特异性 + 排最后」压回去。
      （喵铺消消 / 梳丝引线都踩过这个坑，这里直接按算好的特异性写。）
   =================================================================== */

.fx-panel.ev-tg {
    --tg-ink:    #0f3f3a;   /* 主文字：深青墨 */
    --tg-num:    #0b7a6b;   /* 数字：青绿 */
    --tg-accent: #10b981;   /* 强调：翡翠绿 */
    --tg-line:   #dff0ec;   /* 分隔线：极浅青 */
    --tg-mute:   #7fa39d;   /* 次要文字 */
    --tg-soft:   #f3fbf9;   /* 极浅青底 */
    --tg-head:   #eefaf6;   /* 悬停底 */
}

/* ── 1、卡片本体：浅青边框，上下留白给探出的图标 ── */
.fx-panel.ev-tg {
    position: relative;
    margin-top: 12px;
    margin-bottom: 6px;
    border: 1px solid #bfe6dd;
    border-radius: 16px;
    overflow: visible;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 63, 58, .035),
                0 12px 28px -18px rgba(15, 63, 58, .14);
}

/* ── 2、图标（原图 219×187，近似方形偏宽）：88px 宽 ⇒ 实高 ≈ 75px，向左上溢出但不占流 ── */
.fx-panel.ev-tg .tg-ico {
    position: absolute;
    left: -8px;
    top: -18px;
    z-index: 4;
    width: 88px;
    height: auto;
    object-fit: contain;
    pointer-events: none;
    filter: drop-shadow(0 6px 12px rgba(15, 63, 58, .16))
            drop-shadow(0 1px 2px rgba(15, 63, 58, .1));
}

/* ── 3、卡头：极浅青渐变，靠排版而不是色块撑层级 ──
       padding-left 必须 ≥ 图标右缘(-8 + 88 = 80) + 12 间隙 = 92
       （改图标尺寸时忘了同步 padding-left 会把标题压住 —— 绯梦夜曲踩过）*/
.fx-panel.ev-tg .tg-head {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 10px 12px 8px 88px;
    border-radius: 16px 16px 0 0;
    background: linear-gradient(180deg, #f9fefd 0%, #eefaf6 100%);
    border-bottom: 1px solid var(--tg-line);
    overflow: hidden;
}

/* 3-1 标题 + 徽章（全卡唯一深色块） */
.fx-panel.ev-tg .tg-hd-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
}
/* 时间组靠最右（窄屏换行时自己落到下一行） */
.fx-panel.ev-tg .tg-hd-times {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    margin-left: auto;
}
.fx-panel.ev-tg .tg-hd-top h3 {
    flex: 0 0 auto;
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -.2px;
    line-height: 1.2;
    color: var(--tg-ink);
}
.fx-panel.ev-tg .tg-badge {
    margin-left: 0;
    padding: 1px 8px;
    border-radius: 20px;
    background: #0d9488;
    color: #f0fdfa;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .3px;
    white-space: nowrap;
}
.fx-panel.ev-tg .tg-badge:empty { display: none; }

/* 3-2 两个时间（活动剩余 / 下次执行） */
.fx-panel.ev-tg .tg-hd-sub {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 3px 12px;
    margin-top: 6px;
}
.fx-panel.ev-tg .tg-time {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    font-size: 11.5px;
    color: var(--tg-mute);
}
.fx-panel.ev-tg .tg-time i {
    font-style: normal;
    opacity: .85;
}
.fx-panel.ev-tg .tg-time b {
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: #2f6b62;
}
.fx-panel.ev-tg .tg-time.is-hl b { color: var(--tg-num); }

/* 3-3 旗标行 */
.fx-panel.ev-tg .tg-hd-flags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px 8px;
    margin-top: 7px;
}
.fx-panel.ev-tg .tg-flag {
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}
.fx-panel.ev-tg .tg-flag.is-on  { background: #0d9488; color: #f0fdfa; }
.fx-panel.ev-tg .tg-flag.is-off { background: #e8f4f1; color: #7fa39d; }
.fx-panel.ev-tg .tg-flag:empty  { display: none; }
.fx-panel.ev-tg .tg-dim {
    font-size: 11px;
    color: var(--tg-mute);
}
.fx-panel.ev-tg .tg-dim b {
    color: var(--tg-ink);
    font-weight: 600;
}

/* ── 4、卡身 ── */
.fx-panel.ev-tg .tg-body { padding: 10px 12px 11px; }

/* 4-1 Hero：三格等分（花糕币 / 当前体力 / 累计消耗体力） */
.fx-panel.ev-tg .tg-hero {
    display: flex;
    align-items: stretch;
    padding: 7px 0;
    border-radius: 10px;
    background: var(--tg-soft);
}
.fx-panel.ev-tg .tg-hero-cell {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 0 6px;
    text-align: center;
}
.fx-panel.ev-tg .tg-hero-cell .fx-num {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.4px;
    color: var(--tg-num);
    font-variant-numeric: tabular-nums;
}
.fx-panel.ev-tg .tg-hero-cell .fx-num:empty::before {
    content: '—';
    color: #b9d4cf;
    font-weight: 500;
}
.fx-panel.ev-tg .tg-hero-cell > span {
    font-size: 10px;
    color: var(--tg-mute);
    white-space: nowrap;
}
.fx-panel.ev-tg .tg-hero-line {
    width: 1px;
    flex: 0 0 1px;
    background: var(--tg-line);
    margin: 4px 0;
}

/* 4-2 inline 次要指标 */
.fx-panel.ev-tg .tg-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 16px;
    margin-top: 9px;
    font-size: 12px;
    color: var(--tg-mute);
}
.fx-panel.ev-tg .tg-inline > span {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
}
.fx-panel.ev-tg .tg-inline b {
    font-size: 13px;
    font-weight: 600;
    color: var(--tg-ink);
    font-variant-numeric: tabular-nums;
}
/* ⚠️ 2026-11-05：这里**故意不给** `:empty` 加 `content: '—'`。
   中文语境下「已跑 — 轮」的破折号会被看成汉字「一」⇒ 「已跑一轮」，比空着更容易误读。
   没数据时由 `.tg-inline[data-hide-empty]` 整行收走（见 _dt_event.html 注释）。 */

/* 4-3 note */
.fx-panel.ev-tg .tg-note {
    margin-top: 6px;
    padding: 4px 8px;
    border-radius: 7px;
    background: #f6fbfa;
    border-left: 2px solid var(--tg-accent);
    font-size: 11px;
    line-height: 1.4;
    color: #4d6f6a;
}
.fx-panel.ev-tg .tg-note[hidden] { display: none; }

/* 4-4 未上报引导（客户端还没跑这个活动时显示）
   ★ 2026-11-05 用户要求：去掉「客户端还没开始跑这个活动」这句断言式文案 ——
     它看起来像报错。只保留下面那句引导，框也从虚线改成淡底（没有提示就没什么好“框”的）。 */
.fx-panel.ev-tg .tg-ph {
    display: flex;
    justify-content: center;
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #f8fdfb;
    text-align: center;
}
.fx-panel.ev-tg .tg-ph-d {
    font-size: 11.5px;
    line-height: 1.6;
    color: #8fb0aa;
}

/* 4-5 有数据后收走占位（JS 给 section 打 data-has="1"） */
.fx-panel.ev-tg[data-has="1"] .tg-ph { display: none; }

/* ── 5、窄屏 ── */
@media (max-width: 480px) {
    .fx-panel.ev-tg .tg-ico {
        left: -6px;
        top: -15px;
        width: 68px;
    }
    .fx-panel.ev-tg .tg-head { padding-left: 74px; }
    .fx-panel.ev-tg .tg-hero-cell .fx-num { font-size: 18px; }
}

/* ===================================================================
   ⑧ 活动任务里的三级分组标题（任务 / 小游戏 / 福利）
   -------------------------------------------------------------------
   ★ 2026-11-05 用户要求：「新增3个分组：任务、小游戏、福利，只做 UI 上显示，
     用于增加层级和层次感，不做数据结构上的改变」。
   ★★ 二次：改成与上级 `.cfg-group-h` 同构（竖条 + 横线）。
   ★★★ 三次（2026-11-05 最终）：「标题文字变小，不要前面的竖线和后面的横线，
     就纯文字。然后颜色淡一点，然后下面的层级都往左偏移，看过去要是属于这个标题的下级。」
     ⇒ 去掉 `::before` / `::after`，只留纯文字，13px + 淡青灰。
     ⇒ **用负 margin 把标题往左顶出去**（抵掉 `.cfg-tree-body` 的 `padding-left:26px` 一部分）：
          标题左缘 ≈ 10px、卡片名左缘 = 26px ⇒ 16px 缩进差，一眼看出「下面的卡片属于这个标题」。
        为什么不反过来给卡片加右缩进：卡片的圆圈节点是按 `.cfg-tree-body::before`
        那条竖线（left:8px）对齐的（`.cfg-branch-h::before{left:-22px}`），
        一缩进圆圈就跟竖线错位；往左顶标题则**一条既有对齐都不用动**。

   · 纯视觉分隔：`<h5 class="cfg-tree-sec">` 直接插在 `.cfg-tree-body` 里。
   · **不影响数据**：`collectConfig()` 只扫 `[data-cfg]`，这个 h5 没有 data-cfg，
     提交 / 回填 / 联动 / 应用到 全都感知不到它。
   =================================================================== */
.cfg-tree-sec {
    /* ★ 2026-11-05 用户要求：「`.cfg-tree-body::before` 里的 left 加 10px，
       对应的圆点也要加 10px 左右，这样竖线跟圆点跟分组标题中间对齐。
       然后给分组小标题加个背景色，这样竖线就不会入侵。」

       坐标账（`.cfg-tree-body` 的 content box 从 26px 起）：
         竖线  = `::before{left:18px}`            ⇒ x = 18   （本条规则下方那条 :has 覆盖）
         圆点  = branch-h(26) + `::before{left:-12px}`，宽 9 ⇒ 中心 26-12+4.5 = 18.5
         标题  = 26 + margin-left(-18) + padding-left(10)    ⇒ 文字 x = 18
       三者同一条线（圆点 0.5px 是 9px 取半的既有误差）。

       `position:relative + z-index:1` 是**必须的** —— 树干竖线是
       `.cfg-tree-body::before{position:absolute}`，绝对定位的绘制顺序在 static 内容之后，
       不加这两行的话标题背景色根本盖不住竖线。 */
    position: relative;
    z-index: 1;
    display: inline-block;          /* 背景只包住文字，不要拉成整行长条 */
    margin: 24px 0 10px -30px;
    padding: 3px 10px;
    border-radius: 7px;
    /* ★ 2026-11-05 二次：「分组小标题背景和文字换个色系」
       原来是不透明白底（只为盖住竖线）+ 淡青灰字，太像"系统灰标签"。
       换成**薰衣草紫**：浅紫底 + 紫字。上一版试过蜜糖橙（#fff6ea/#b8792f），
       用户要求「继续换个色系」⇒ 改成紫：跟蓝色系大组标题、蓝圆圈节点同属冷色家族，
       但色相拉开足够远，能一眼看出「这是一组」；背景仍是不透明色 ⇒ 竖线照旧在这一行断开。 */
    background: #f4f0ff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 1.3;
    color: #7357c4;
}

/* 第一个子组紧贴树身顶部，不要 24px 的大空隙 */
.cfg-tree-sec:first-child { margin-top: 2px; }

/* ── 活动区专用的「竖线 + 圆点」右移 10px ──
 * 只对含 `.cfg-tree-sec` 的那个 `.cfg-tree-body` 生效（全站有 5 个 tree-body，
 * 其它 4 个没有子分组，保持原来的 8px 不动）。
 * `:has()` 项目里已在用（`.mp-sec:has(...)`），浏览器支持足够。 */
.cfg-tree-body:has(> .cfg-tree-sec)::before {
    left: 18px;
}

.cfg-tree-body:has(> .cfg-tree-sec) > .cfg-tree-branch > .cfg-branch-h::before {
    left: -12px;
}

/* ── 子组下面的卡片：文字整体右缩进，圆圈节点仍留在树干上 ──
 * ★ 2026-11-05 用户要求：「分组标题应该在竖线中间，然后下级整体再移一下」。
 *   标题已经骑到竖线上（见上面的 -18px），这里把卡片**文字**再往右让 14px，
 *   让「标题 → 圆圈 → 卡片名」三层拉开。
 *
 * ⚠️ 为什么用 `padding-left` 而不是给 `.cfg-tree-branch` 加 `margin-left`：
 *    圆圈是 `.cfg-branch-h::before{position:absolute;left:-22px}`，它的定位原点是
 *    `.cfg-branch-h` 的 padding box 左缘 = 元素左缘（无 border）——
 *    所以加 padding **只推文字、不推圆圈**，圆圈继续挂在树干竖线上。
 *    换成 margin 会把圆圈一起带走，跟竖线错位。
 * ⚠️ `.cfg-leaf-list` 必须一起缩进，否则卡片名和下面的细项会错开。
 */
.cfg-tree-body:has(> .cfg-tree-sec) > .cfg-tree-branch > .cfg-branch-h {
    padding-left: 14px;
}

.cfg-tree-body:has(> .cfg-tree-sec) > .cfg-tree-branch > .cfg-leaf-list {
    margin-left: 14px;
}

@media (max-width: 640px) {
    .cfg-tree-sec { margin: 20px 0 8px -18px; padding: 3px 8px; font-size: 12.5px; letter-spacing: .8px; }
    .cfg-tree-body:has(> .cfg-tree-sec) > .cfg-tree-branch > .cfg-branch-h { padding-left: 10px; }
    .cfg-tree-body:has(> .cfg-tree-sec) > .cfg-tree-branch > .cfg-leaf-list { margin-left: 10px; }
}

/* ── 手机（≤460px）：三者重新对齐 ──────────────────────────────────────
 * ★ 2026-11-05 用户报：「移动端活动任务里的圆点没有跟竖线垂直居中」。
 *
 *   根因：460px 以下 `.cfg-tree-body` 的 `padding-left` 从 26 变成 18（原设计），
 *         竖线也从 8 变成 6 —— 但上面那两条 :has() 覆盖只写了桌面值（left:18 / left:-12），
 *         到手机上就变成：
 *            竖线 x = 18
 *            圆点 = branch-h(18) - 12 + 8/2 = 10      ← 偏左 8px
 *            标题 = 18 - 18 + 8 = 8                    ← 偏左 10px
 *
 *   重算（content 从 18px 起、圆点 8px 宽、竖线 left:18）：
 *            竖线 x = 18
 *            圆点   = 18 + left + 4 = 18  ⇒ left: -4px
 *            标题   = 18 + margin(-8) + padding(8) = 18 ⇒ margin-left: -8px
 *   背景块左缘 = 10px，仍覆盖竖线 ⇒ 标题这一行照旧断开。
 */
@media (max-width: 460px) {
    .cfg-tree-sec { margin: 20px 0 8px -8px; padding: 3px 8px; font-size: 12.5px; letter-spacing: .8px; }

    .cfg-tree-body:has(> .cfg-tree-sec) > .cfg-tree-branch > .cfg-branch-h::before {
        left: -4px;
    }
}

/* ===================================================================
   ⑨ 香卉甜糕 · 任务格 / 档位 / 累计奖励（★ 2026-11-05 协议对齐）
   -------------------------------------------------------------------
   对应客户端上报：`tg_tasks[]` / `tg_tiers[]` / `tg_sum`
   （标量走模板 `data-ev="ev_tg_*"`，旗标/倒计时由 app.js `paintTg()` 填）

   结构照喵铺消消（`.ev-mp` 的 `.mp-task-list` / `.mp-tier`），
   配色换成青绿；占位仍是「两个 ul 并存 + `:has([data-rendered])` 切换」——
   不靠 JS 生成骨架，避免跟 renderBlock 抢时序。
   =================================================================== */

.fx-panel.ev-tg .tg-sec { margin-top: 9px; }

.fx-panel.ev-tg .tg-sec-hd {
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin-bottom: 5px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .2px;
    color: var(--tg-ink);
}

/* 分区标题前的青绿小竖条 —— 整卡唯一的渐变装饰 */
.fx-panel.ev-tg .tg-sec-hd::before {
    content: "";
    align-self: center;
    width: 3px;
    height: 10px;
    border-radius: 2px;
    background: linear-gradient(180deg, #6ee7d7, #0d9488);
}

.fx-panel.ev-tg .tg-sec-note {
    margin-left: auto;
    font-size: 10.5px;
    font-weight: 400;
    color: var(--tg-mute);
}

.fx-panel.ev-tg .tg-sec-note .fx-num {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--tg-num);
    font-variant-numeric: tabular-nums;
}

/* ── 今日任务 6 列（PC）/ 3 列（手机），带纯 CSS 占位切换 ── */
.fx-panel.ev-tg .tg-task-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 5px;
}

/* 默认：藏真实、显示骨架 */
.fx-panel.ev-tg .tg-task-list[data-list="tg_tasks"] { display: none; }
/* 真实列表被 renderBlock 打了 data-rendered="1" ⇒ 反过来 */
.fx-panel.ev-tg .tg-sec:has(.tg-task-list[data-list="tg_tasks"][data-rendered="1"]) .tg-task-list[data-list="tg_tasks"] {
    display: grid;
}
.fx-panel.ev-tg .tg-sec:has(.tg-task-list[data-list="tg_tasks"][data-rendered="1"]) .tg-task-ph {
    display: none;
}

.fx-panel.ev-tg .tg-tr {
    border-radius: 10px;
    background: var(--tg-soft);
    border: 1px solid transparent;
    transition: background-color .15s ease, border-color .15s ease;
}
.fx-panel.ev-tg .tg-tr .tg-tr-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 5px 2px 4px;
}
.fx-panel.ev-tg .tg-tr .tg-tr-k {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.2px;
    color: var(--tg-ink);
    white-space: nowrap;
}
.fx-panel.ev-tg .tg-tr .tg-tr-k .fx-num {
    font-size: 13px;
    font-weight: 700;
    color: var(--tg-num);
    font-variant-numeric: tabular-nums;
}
.fx-panel.ev-tg .tg-tr .tg-tr-rw {
    font-size: 10px;
    line-height: 1.25;
    color: var(--tg-mute);
    white-space: nowrap;
}
.fx-panel.ev-tg .tg-tr .tg-tr-st {
    margin-top: 0;
    padding: 1px 6px;
    border-radius: 20px;
    font-size: 9px;
    font-weight: 600;
    line-height: 1.45;
    white-space: nowrap;
}

/* 三态：已领取=中性灰绿 / 可领取=青绿 / 未达标=无底 */
.fx-panel.ev-tg .tg-tr .tg-tr-st.is-got  { background: #eef6f4; color: #9ab3ae; }
.fx-panel.ev-tg .tg-tr .tg-tr-st.is-warn { background: #d9f5ef; color: #0b7a6b; }
.fx-panel.ev-tg .tg-tr .tg-tr-st.is-todo { background: transparent; color: #b9cfca; }

/* 「可领取」整格提亮（唯一需要动手的地方） */
.fx-panel.ev-tg .tg-tr:has(.tg-tr-st.is-warn) {
    background: #f2fdfa;
    border-color: #a7e8db;
}

/* 占位骨架 */
.fx-panel.ev-tg .tg-tr.is-ph { background: #f8fdfb; }
.fx-panel.ev-tg .tg-tr.is-ph .tg-tr-k { color: #c3d8d4; }
.fx-panel.ev-tg .tg-tr.is-ph .tg-tr-st { background: transparent; color: #d4e6e2; }

/* ── 累计消耗体力档位：4 格（600 / 1200 / 1800 / 2400 写死在模板） ── */
.fx-panel.ev-tg .tg-tiers {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.fx-panel.ev-tg .tg-tier {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 6px 3px 5px;
    border-radius: 10px;
    background: var(--tg-soft);
    border: 1px solid transparent;
    text-align: center;
    transition: background-color .15s ease, border-color .15s ease;
}
.fx-panel.ev-tg .tg-tier-need {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -.3px;
    color: var(--tg-num);
    font-variant-numeric: tabular-nums;
}
.fx-panel.ev-tg .tg-tier-st {
    padding: 1px 6px;
    border-radius: 20px;
    font-size: 9px;
    font-weight: 600;
    line-height: 1.45;
    white-space: nowrap;
    color: #b9cfca;
}
/* 首屏还没数据：状态位给个浅破折号（这里是档位格，不是「已跑 N 轮」那种语句，用破折号不会误读） */
.fx-panel.ev-tg .tg-tier-st:empty::before {
    content: "—";
    color: #d4e6e2;
}

.fx-panel.ev-tg .tg-tier.is-got .tg-tier-need { color: #9ab3ae; }
.fx-panel.ev-tg .tg-tier .tg-tier-st.is-got  { background: #eef6f4; color: #9ab3ae; }
.fx-panel.ev-tg .tg-tier .tg-tier-st.is-warn { background: #d9f5ef; color: #0b7a6b; }
.fx-panel.ev-tg .tg-tier .tg-tier-st.is-todo { background: transparent; color: #b9cfca; }

.fx-panel.ev-tg .tg-tier.is-warn {
    background: #f2fdfa;
    border-color: #a7e8db;
}
.fx-panel.ev-tg .tg-tier.is-warn .tg-tier-need { color: #0b7a6b; }

/* ── 本期累计奖励 chips（复用 .rw-chips，只换青绿配色） ── */
.fx-panel.ev-tg .rw-chip {
    padding: 2px 8px;
    border: 1px solid #d9eee9;
    border-radius: 20px;
    background: #f5fcfa;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--tg-ink);
}
.fx-panel.ev-tg .rw-chip .fx-num { color: var(--tg-num); }

/* ── 手机：任务 3 列 × 2 行、档位 2 列 × 2 行 ── */
@media (max-width: 480px) {
    .fx-panel.ev-tg .tg-task-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .fx-panel.ev-tg .tg-tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ===================================================================
   花艺上架（日常任务的子 tab，「花艺」，2026-11-06）
   -------------------------------------------------------------------
   ★ 用户报「最新结果卡片跟上面的卡片叠在一起了，要有间隔」。
   原因：`.fx-body` 的 `gap: 8px` **只作用于直接子元素**，而这里为了
   三态切换（数据区 / 占位符）在外面套了一层 `[data-art-body]`，
   里面的 `.od-team-grid` 和 `.fx-sum` 就成了普通 div 的子节点 ⇒ 没有间距。

   ⚠️ 这里用 display:flex 不受 [hidden] 影响 —— 文件下方已有
      `#acctDetail [hidden] { display: none !important; }` 统一兜底。
   =================================================================== */
.fx-panel[data-art-card] [data-art-body] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ==========================================================================
   ★ 2026-11-09（用户要求）：游戏详情 →「其他」tab → 云游商人
   --------------------------------------------------------------------------
   图标 `ui_ui_orderpalace_18_350x428.png` 沿用活动卡那套「透明贴纸」：
   浮在卡头左上角（只让上方露到卡片外一头）、不裁切、靠 drop-shadow 跟卡面分开。
   ⚠️ 原图是 350×428 的**竖版**，`.fx-ico` 默认槽位是 72×72（正方形 + contain），
      竖图在里面只能缩到 59×72 显得偏细 —— 这里把槽位放宽成 60×74，图就撑满了。
   ========================================================================== */
[data-dt-panel="other"] { padding-top: 24px; }          /* 上面留白：给图标露出的那一头 */
[data-dt-panel="other"] .fx-panel { overflow: visible; }
[data-dt-panel="other"] .fx-head { position: relative; padding: 10px 14px 10px 78px; }
[data-dt-panel="other"] .fx-head .fx-ico { width: 60px; height: 74px; top: -22px; }
[data-dt-panel="other"] .fx-head h3::before { display: none; }   /* 有图标就不留竖条 */

/* 上次投资 / 领取日期：一行两个，窄屏自动换行 */
.mrt-dates { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 12.5px; color: #7b8b99; }
.mrt-dates b { font-family: var(--mono); font-weight: 600; color: #33475b; }

/* 「当前期数」：大数字 + 小字「/ 4」同一行（`.od-team-cell` 是 flex-column， 不包一层会换行） */
.mrt-num { display: flex; align-items: baseline; gap: 5px; }
.mrt-num .mrt-of { font-family: var(--mono); font-size: 12.5px; color: #8b9aa8; }
.mrt-num .mrt-of i { font-style: normal; }

/* 经商计划里「· 当前期」：颜色跳一点，一眼看出现在到哪一期 */
.mp-tr-rw.is-cur { color: #b45309; }

/* 经商计划 · 第 1~4 期（单行：左「第 N 期」，右「已领取 / 未领取」）
   ⚠️ 不能用喵铺消消那套 `mp-tr*` —— 它的样式全写在 `.fx-panel.ev-mp` 下面，
      复用到别的卡上一条都不生效（实测：状态字变裸文本、行没有底色）。 */
.mrt-list { list-style: none; margin: 0; padding: 0; }
.mrt-tr { display: flex; align-items: center; gap: 8px; padding: 7px 10px;
    border-radius: 8px; background: #f7fafc; border: 1px solid #e8eef4; }
.mrt-tr + .mrt-tr { margin-top: 6px; }
.mrt-tr-main { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; }
.mrt-tr-k { font-size: 13px; font-weight: 600; color: #22313f; white-space: nowrap; }
.mrt-tr-rw { font-size: 12px; color: #b45309; white-space: nowrap; }
.mrt-tr-st { margin-left: auto; font-size: 12px; font-weight: 600; color: #a3b1bd; white-space: nowrap; }
.mrt-tr-st.is-got { color: #1f9d55; }
.mrt-tr-st.is-warn { color: #b45309; }

/* 经商计划 · 占位骨架（客户端还没上报期数时先摆出第 1~4 期，别让这块空着）
   ⚠️ 容器是 `.fx-none`（空态那套：居中 + 上下留白），这里要的是「像正经列表」，
      所以把居中/内边距改回来。 */
.mrt-ph { padding: 0; text-align: left; display: block; width: 100%; }
.mrt-ph .mrt-list { width: 100%; }
.mrt-tr.is-ph { background: #fafcfd; border-color: #eef3f7; }
.mrt-tr.is-ph .mrt-tr-k { color: #c2cfda; font-weight: 500; }
.mrt-tr.is-ph .mrt-tr-st { color: #d3dde5; }