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

: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, .82);
    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-card {
    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; }
.modal-head .close { margin-left: auto; border: 0; background: transparent; font-size: 20px; line-height: 1; color: var(--ink-3); cursor: pointer; }
.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, .82); 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; }
.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; }

@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;
}

/* 「今日奖励」汇总：**薄荷绿浅底**（跟卡片里的白 / 蓝底区分开） */
.dy-today {
    display: flex;
    align-items: baseline;
    gap: 0 2px;
    padding: 7px 11px;
    border: 1px solid #cfe8de;
    border-radius: 10px;
    background: linear-gradient(135deg, #f4fdfa 0%, #edf9f4 100%);
    white-space: nowrap;
    font-size: 13.5px;                  /* 比正文大一号 */
    color: #3f6f60;
}
.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; }

@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: 6px 10px; font-size: 12.5px; }
    .dy-today .fx-num { font-size: 14px; }
    [data-dy-panel="order"] .dy-rw-u { font-size: 9.5px; }
}

/* ==========================================================================
   综合任务 → 好友 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; }

/* ⑤ 蜜金（百花成蜜） */
.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;
}

/* 标题 / 小标题 / 块内键名：同色系深色字 */
[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; }

.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。 */
}