/* =============================================================
   国庆赠送记录系统 · 样式表
   设计原则：移动优先｜无外部依赖｜单文件
   ============================================================= */

:root {
    --primary: #6366f1;
    --primary-dark: #4f46e5;
    --primary-light: #eef2ff;
    --bg: #f6f7fb;
    --card: #ffffff;
    --text: #1a2030;
    --muted: #6b7280;
    --border: #e6e8ee;
    --ok: #059669;      --ok-bg: #d1fae5;      --ok-bd: #a7f3d0;
    --warn: #b45309;    --warn-bg: #fef3c7;    --warn-bd: #fde68a;
    --bad: #dc2626;     --bad-bg: #fee2e2;     --bad-bd: #fecaca;
    --info: #0369a1;    --info-bg: #e0f2fe;    --info-bd: #bae6fd;
    --radius: 12px;
    --radius-sm: 9px;
    --shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 6px 20px -10px rgba(16, 24, 40, .12);
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
    --shadow-lg: 0 18px 46px -18px rgba(31, 41, 55, .22), 0 2px 6px rgba(16, 24, 40, .06);
    --line: 1px solid rgba(15, 23, 42, .06);
    --ring: 0 0 0 3px rgba(99, 102, 241, .16);
    --pad: 22px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
                 "Microsoft YaHei", system-ui, sans-serif;
    background: var(--bg);
    color: var(--text);
    font-size: 14px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { margin: 0; font-weight: 600; }
img { max-width: 100%; }

/* ---------------- 顶部导航 ---------------- */
.nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, .94);
    -webkit-backdrop-filter: saturate(180%) blur(10px);
    backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 8px 22px -20px rgba(16, 24, 40, .5);
}
.nav-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 16px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    min-height: 58px;
}
.brand {
    font-size: 16px;
    font-weight: 700;
    color: var(--primary);
    letter-spacing: -.01em;
    padding: 15px 0;
    white-space: nowrap;
}
.nav-toggle { position: absolute; left: -9999px; }
.nav-burger {
    display: none;
    margin-left: auto;
    width: 42px;
    height: 42px;
    border-radius: 9px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
    -webkit-tap-highlight-color: transparent;
}
.nav-burger:active { background: #f4f5f9; }
.nav-burger span {
    display: block;
    width: 18px;
    height: 2px;
    background: var(--text);
    border-radius: 2px;
    transition: transform .25s, opacity .2s;
}
.nav-menu { display: flex; align-items: center; flex: 1; min-width: 0; }
.nav-menu .item {
    padding: 8px 12px;
    margin-left: 2px;
    border-radius: 8px;
    color: var(--muted);
    font-size: 14px;
    white-space: nowrap;
    transition: background .15s, color .15s;
}
.nav-menu .item:hover { background: #f4f5f9; color: var(--text); text-decoration: none; }
.nav-menu .item.active { color: var(--primary); background: var(--primary-light); font-weight: 600; }
.nav-user {
    margin-left: auto;
    padding-left: 14px;
    color: var(--muted);
    font-size: 13.5px;
    white-space: nowrap;
}
.nav-user b { color: var(--text); font-weight: 600; }

/* ---------------- 手机底部导航（仅窄屏显示） ---------------- */
.tabbar { display: none; }
.tabbar .tab {
    flex: 1;
    min-height: 54px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 10px 2px 7px;
    position: relative;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.1;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: color .18s ease, transform .12s ease;
}
.tabbar .tab svg { width: 22px; height: 22px; display: block; }
.tabbar .tab:hover { text-decoration: none; color: var(--text); }
.tabbar .tab:active { transform: scale(.93); }
.tabbar .tab.active { color: var(--primary); font-weight: 600; }
.tabbar .tab.active::after,
body:has(.nav-toggle:checked) .tabbar .tab.more::after {
    content: "";
    position: absolute;
    top: 0;
    width: 24px;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--primary);
}
/* 抽屉展开时，给「更多 / 我的」一个选中态 */
body:has(.nav-toggle:checked) .tabbar .tab.more { color: var(--primary); font-weight: 600; }

/* 批量选择：桌面上用表头的全选框，手机上表头被隐藏，改用工具栏里的全选 */
.sel-all { display: none; }

/* ---------------- 布局 ---------------- */
.container { max-width: 1240px; margin: 0 auto; padding: 22px 16px 56px; }

.page-title {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -.01em;
    margin-bottom: 18px;
}
.page-title .sub { font-size: 13.5px; font-weight: 400; color: var(--muted); }
.page-title .spacer { flex: 1; }

.card {
    background: var(--card);
    border: var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: var(--pad);
    margin-bottom: 18px;
}
.card.narrow { max-width: 480px; }
.form-narrow { max-width: 560px; }
.card > h2 {
    font-size: 15.5px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

/* ---------------- 统计卡 ---------------- */
.stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}
.stat {
    position: relative;
    background: linear-gradient(158deg, #fbfbfe 0%, #fff 66%);
    border: var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 16px 18px;
    overflow: hidden;
}
.stat::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: var(--border);
}
.stat .num { font-size: 24px; font-weight: 700; letter-spacing: -.02em; line-height: 1.3; }
.stat .lbl { color: var(--muted); font-size: 12.5px; margin-top: 3px; }
.stat.c-primary::before { background: var(--primary); }
.stat.c-primary .num { color: var(--primary); }
.stat.c-ok::before { background: var(--ok); }
.stat.c-ok .num { color: var(--ok); }
.stat.c-warn::before { background: var(--warn); }
.stat.c-warn .num { color: var(--warn); }
.stat.c-bad::before { background: var(--bad); }
.stat.c-bad .num { color: var(--bad); }
.stat.c-info::before { background: var(--info); }
.stat.c-info .num { color: var(--info); }
/* 按类型给统计卡一层极淡的底色，避免整页纯白显得扁平 */
.stat.c-primary { background: linear-gradient(158deg, #eef2ff 0%, #fff 68%); }
.stat.c-ok { background: linear-gradient(158deg, #ecfdf5 0%, #fff 68%); }
.stat.c-warn { background: linear-gradient(158deg, #fffbeb 0%, #fff 68%); }
.stat.c-bad { background: linear-gradient(158deg, #fef2f2 0%, #fff 68%); }
.stat.c-info { background: linear-gradient(158deg, #f0f9ff 0%, #fff 68%); }

/* ---------------- 表格 ---------------- */
.tbl-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 calc(var(--pad) * -1);
    padding: 0 var(--pad);
}
.tbl-wrap::-webkit-scrollbar { height: 8px; }
.tbl-wrap::-webkit-scrollbar-thumb { background: #d6d9e2; border-radius: 8px; }
.tbl-wrap::-webkit-scrollbar-track { background: transparent; }

.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tbl th {
    background: #fafbfd;
    color: var(--muted);
    font-weight: 600;
    font-size: 12.5px;
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.tbl td {
    padding: 11px 12px;
    border-bottom: 1px solid #f2f3f8;
    vertical-align: middle;
}
.tbl tr:last-child td { border-bottom: none; }
.tbl tr:hover td { background: #fafbff; }
.tbl .center { text-align: center; }

/* 单元格内的小字与操作按钮 */
.tbl .sub { font-size: 12.5px; color: var(--muted); }

/* ---------------- 表单 ---------------- */
label.f { display: block; margin-bottom: 14px; }
label.f > span {
    display: block;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--muted);
    margin-bottom: 6px;
}
label.f > span b { color: var(--bad); font-weight: 600; }

input[type=text], input[type=password], input[type=number], input[type=date],
select, textarea {
    width: 100%;
    padding: 9px 12px;
    font-size: 14px;
    font-family: inherit;
    line-height: 1.5;
    color: var(--text);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: var(--ring);
}
input::placeholder, textarea::placeholder { color: #a8adb9; }
textarea { resize: vertical; min-height: 70px; }
input[type=checkbox], input[type=radio] { accent-color: var(--primary); cursor: pointer; }
input[type=file] {
    width: 100%;
    padding: 9px 12px;
    font-size: 13px;
    color: var(--muted);
    background: #fafbfd;
    border: 1px dashed #cfd4df;
    border-radius: var(--radius-sm);
}
input[type=date] { min-height: 40px; }

/* 表单行：移动端纵向堆叠，宽屏横向排列 */
.inline-form { display: grid; gap: 12px; }
.inline-form label.f { margin-bottom: 0; }

/* 复选框组 */
.f-checks { display: grid; gap: 9px; font-size: 13.5px; }
.f-checks label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.inline-form + .mt { margin-top: 16px; }

/* ---------------- 按钮 ---------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 16px;
    font-size: 13.5px;
    font-weight: 500;
    font-family: inherit;
    line-height: 1.2;
    color: var(--text);
    background: linear-gradient(180deg, #fff 0%, #f6f7fb 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    transition: background .15s, border-color .15s, transform .1s, box-shadow .15s;
}
.btn:hover { border-color: #cdd2dc; background: linear-gradient(180deg, #fff 0%, #eef1f8 100%); color: var(--text); text-decoration: none; }
.btn:active { transform: translateY(1px) scale(.985); box-shadow: none; }
.btn.primary {
    background: linear-gradient(180deg, #6366f1 0%, #4f46e5 100%);
    border-color: #4f46e5;
    color: #fff;
    box-shadow: 0 2px 10px -2px rgba(79, 70, 229, .45), inset 0 1px 0 rgba(255, 255, 255, .2);
}
.btn.primary:hover { background: linear-gradient(180deg, #5558eb 0%, #4338ca 100%); border-color: var(--primary-dark); color: #fff; }
.btn.ok {
    background: linear-gradient(180deg, #10b981 0%, #059669 100%);
    border-color: #059669;
    color: #fff;
    box-shadow: 0 2px 10px -2px rgba(5, 150, 105, .42), inset 0 1px 0 rgba(255, 255, 255, .2);
}
.btn.ok:hover { background: linear-gradient(180deg, #0da271 0%, #047857 100%); border-color: #047857; color: #fff; }
.btn.bad {
    background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%);
    border-color: #dc2626;
    color: #fff;
    box-shadow: 0 2px 10px -2px rgba(220, 38, 38, .42), inset 0 1px 0 rgba(255, 255, 255, .2);
}
.btn.bad:hover { background: linear-gradient(180deg, #e03535 0%, #b91c1c 100%); border-color: #b91c1c; color: #fff; }
.btn.sm { padding: 5px 11px; font-size: 12.5px; border-radius: 7px; }
.btn.block { width: 100%; padding: 11px 16px; font-size: 14.5px; }

/* 表格操作列的动作组 */
.actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.actions form { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.actions input[type=password] { width: 118px; }

/* ---------------- 标签 ---------------- */
.tag {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 99px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}
.tag-ok { background: var(--ok-bg); color: var(--ok); }
.tag-warn { background: var(--warn-bg); color: var(--warn); }
.tag-bad { background: var(--bad-bg); color: var(--bad); }
.tag-info { background: var(--info-bg); color: var(--info); }
.tag-muted { background: #eef0f4; color: var(--muted); }

/* ---------------- 提示条 ---------------- */
.flash {
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    margin-bottom: 16px;
    font-size: 13.5px;
    border: 1px solid transparent;
}
.flash-success { background: var(--ok-bg); color: #065f46; border-color: var(--ok-bd); }
.flash-error { background: var(--bad-bg); color: #991b1b; border-color: var(--bad-bd); }
.flash-info { background: var(--info-bg); color: #075985; border-color: var(--info-bd); }

/* ---------------- 分页 ---------------- */
.pager { margin-top: 18px; display: flex; gap: 6px; flex-wrap: wrap; }
.pager .pg {
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: var(--text);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
}
.pager .pg:hover { border-color: var(--primary); color: var(--primary); text-decoration: none; }
.pager .pg.cur { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600; }

/* ---------------- 登录 / 注册 ---------------- */
.auth-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    background: linear-gradient(165deg, #eef2ff 0%, #f4f5f9 46%, #f4f5f9 100%);
}
.auth-wrap .card {
    width: 100%;
    max-width: 400px;
    padding: 32px 28px;
    margin: 0;
    box-shadow: var(--shadow-lg);
}
.auth-title { text-align: center; font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.auth-sub { text-align: center; color: var(--muted); font-size: 13.5px; margin: 6px 0 24px; }
.auth-foot { text-align: center; margin-top: 18px; font-size: 13.5px; }

/* ---------------- 规则选择卡 ---------------- */
.rule-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(288px, 1fr));
    gap: 12px;
}
.rule-item {
    display: block;
    position: relative;
    padding: 14px 16px;
    background: #fff;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: border-color .15s, background .15s, box-shadow .15s;
}
.rule-item:hover { border-color: #c9ced9; }
.rule-item.off { opacity: .55; background: #f9fafc; cursor: not-allowed; }
.rule-item h3 { display: inline; font-size: 14px; }
.rule-item .desc { color: var(--muted); font-size: 13px; margin: 6px 0 8px; }
.rule-item .why { font-size: 12px; color: var(--muted); }
.rule-item input[type=radio] { margin-right: 6px; vertical-align: middle; }
.rule-item:has(input:checked) {
    border-color: var(--primary);
    background: var(--primary-light);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, .1);
}

/* ---------------- 证据文件 ---------------- */
.evi-thumb { display: inline-block; margin: 2px; }
.evi-thumb img {
    display: block;
    width: 58px;
    height: 58px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--border);
}
.evi-vid {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 2px;
    padding: 5px 10px;
    font-size: 12.5px;
    color: var(--primary);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 7px;
}
.evi-vid:hover { background: var(--primary-light); border-color: var(--primary); text-decoration: none; }

/* ---------------- 图片灯箱预览 ---------------- */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(10, 14, 26, .82);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    cursor: zoom-out;
    animation: fade-in .18s ease both;
}
.lightbox img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 10px;
    box-shadow: 0 24px 70px -20px rgba(0, 0, 0, .7);
    cursor: default;
}
.lightbox .lb-close {
    position: absolute;
    top: 14px;
    right: 18px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    color: #fff;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}
.lightbox .lb-close:hover { background: rgba(255, 255, 255, .22); }
/* 灯箱打开时禁止背景滚动 */
body.lb-open { overflow: hidden; }

/* ---------------- 通用模态弹窗 ---------------- */
.modal-mask {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 200;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(15, 23, 42, .5);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}
.modal-mask.show { display: flex; animation: fade-in .2s ease both; }
.modal {
    width: 100%;
    max-width: 340px;
    padding: 28px 24px 22px;
    text-align: center;
    background: #fff;
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
    animation: sheet-down .28s cubic-bezier(.2, .8, .3, 1) both;
}
.modal-icon { font-size: 40px; line-height: 1; }
.modal h3 { margin: 10px 0 8px; font-size: 17px; }
.modal p { margin: 0 0 20px; color: var(--muted); font-size: 13.5px; line-height: 1.7; }
.modal-btns { display: flex; gap: 10px; }
.modal-btns .btn { flex: 1; }

/* ---------------- 用户分组头行（审核中心 / 发放管理） ---------------- */
.tbl .grp-head td {
    background: #eef2ff;
    border-left: 3px solid #6366f1;
    word-break: break-all;
}
.grp-head .grp-line { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.grp-head .grp-sel {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    font-weight: 400;
    font-size: 12.5px;
    color: #4b5563;
    white-space: nowrap;
}
.grp-head .grp-sel input { width: 16px; height: 16px; margin: 0; }
.grp-head .grp-sum { color: #6b7280; font-weight: 400; font-size: 12.5px; margin-left: auto; }
.grp-head .grp-info,
.card .grp-info {
    margin-top: 4px;
    font-weight: 400;
    font-size: 12.5px;
    line-height: 1.8;
    color: #374151;
}
.grp-head .grp-info div,
.card .grp-info div { display: inline; margin-right: 12px; }
.grp-head .grp-info div::before { content: ""; }
/* 单用户发放页的资料卡：每项独占一行更易读 */
.card .grp-info div { display: block; margin-right: 0; padding: 2px 0; font-size: 13.5px; }

/* ---------------- 工具类 ---------------- */
.muted { color: var(--muted); }
.text-bad { color: var(--bad); }
.mt { margin-top: 14px; }
.mb { margin-bottom: 14px; }
.text-sm { font-size: 12.5px; }
.km-strong { font-weight: 700; color: var(--primary); }
.nowrap { white-space: nowrap; }
.empty { padding: 22px 0; color: var(--muted); text-align: center; }

/* =============================================================
   断点 1 — 平板 / 宽屏手机：导航收进汉堡菜单，表单横向排列
   ============================================================= */
@media (min-width: 760px) {
    .inline-form { display: flex; flex-wrap: wrap; align-items: flex-end; }
    .inline-form label.f { flex: 0 1 190px; }
    .inline-form label.f.grow { flex: 1 1 240px; }
}

@media (max-width: 900px) {
    .nav-burger { display: flex; }
    .nav-toggle:checked ~ .nav-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
    .nav-toggle:checked ~ .nav-burger span:nth-child(2) { opacity: 0; }
    .nav-toggle:checked ~ .nav-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

    .nav-menu {
        display: none;
        flex-basis: 100%;
        flex-direction: column;
        align-items: stretch;
        padding-bottom: 10px;
    }
    .nav-toggle:checked ~ .nav-menu { display: flex; }
    .nav-menu .item {
        margin: 0;
        padding: 13px 4px;
        border-top: 1px solid var(--border);
        border-radius: 0;
        color: var(--text);
    }
    .nav-menu .item.active { background: transparent; color: var(--primary); }
    .nav-user {
        margin: 0;
        padding: 13px 4px 2px;
        border-top: 1px solid var(--border);
    }
}

/* =============================================================
   断点 2 — 手机：收紧留白，统计卡与标题缩小
   ============================================================= */
@media (max-width: 640px) {
    :root { --pad: 16px; }
    /* 底部预留固定导航的高度（登录页无导航，不受影响） */
    .container { padding: 16px 12px calc(80px + env(safe-area-inset-bottom)); }
    .card { border-radius: 11px; margin-bottom: 14px; }
    .page-title { font-size: 17px; margin-bottom: 14px; }
    .card > h2 { font-size: 15px; }
    .stats { grid-template-columns: repeat(auto-fit, minmax(142px, 1fr)); gap: 10px; margin-bottom: 14px; }
    .stat { padding: 13px 15px; }
    .stat .num { font-size: 20px; }
    .auth-wrap { padding: 16px 12px; }
    .auth-wrap .card { padding: 26px 20px; }
    .rule-grid { grid-template-columns: 1fr; }
    .btn { padding: 9px 14px; }

    /* ---- 底部固定导航：手机上一键切页，不用再展开汉堡菜单 ---- */
    .nav-burger { display: none; }
    .tabbar {
        display: flex;
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 60;
        background: rgba(255, 255, 255, .96);
        -webkit-backdrop-filter: saturate(180%) blur(16px);
        backdrop-filter: saturate(180%) blur(16px);
        box-shadow: 0 -1px 0 rgba(16, 24, 40, .07), 0 -12px 30px -14px rgba(16, 24, 40, .25);
        padding-bottom: env(safe-area-inset-bottom);
    }
    /* 手机上表头行被隐藏，批量操作改用工具栏里的全选 */
    .sel-all {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 13.5px;
        cursor: pointer;
    }
    .sel-all input[type=checkbox] { width: 19px; height: 19px; }
    /* 工具栏按钮更高更宽，方便点按 */
    .inline-form .btn { padding: 12px 14px; font-size: 14.5px; }

    /* ---- 表格转卡片：每个 td 用 data-label 显示列名，行距收紧 ---- */
    .tbl-wrap { overflow: visible; margin: 0; padding: 0; }
    .tbl, .tbl tbody, .tbl tr, .tbl td { display: block; width: auto; }
    .tbl tr.head { display: none; }
    .tbl tr {
        background: #fff;
        border: var(--line);
        border-radius: 11px;
        box-shadow: var(--shadow-sm);
        padding: 9px 12px;
        margin-bottom: 10px;
    }
    .tbl tr:hover td { background: transparent; }
    /* 列名用绝对定位固定在左侧，值统一缩进，跨行也能对齐；
       正文保持普通块级流，避免多个子元素（缩略图、<br>）被拆散 */
    .tbl td {
        position: relative;
        display: block;
        min-height: 22px;
        padding: 3px 0 3px 74px;
        border: none;
        font-size: 13px;
    }
    .tbl td::before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        top: 3px;
        width: 66px;
        color: var(--muted);
        font-size: 12px;
        line-height: 1.6;
    }
    /* 勾选列的复选框放大，便于手指点选 */
    .tbl td[data-label="选择"] input[type=checkbox] { width: 20px; height: 20px; margin: 0; }

    /* ---- 用户分组头：手机上也是一张独立卡片 ---- */
    .tbl .grp-head td { padding-left: 12px; }
    .tbl .grp-head .grp-info div { display: block; margin-right: 0; }
    .tbl .grp-head .grp-sum { margin-left: 0; width: 100%; }

    /* ---- 操作列：按钮占满整行、加大点击区域 ---- */
    .tbl td[data-label="操作"] { padding: 6px 0 0; }
    /* 操作列不显示「操作」二字，把整行宽度让给按钮 */
    .tbl td[data-label="操作"]::before { content: none; }
    .actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 2px; }
    .actions form { display: block; }
    .actions .btn, .actions button { width: 100%; padding: 11px 8px; font-size: 13.5px; border-radius: 9px; }
    .actions input[type=password] { width: 100%; }
    .actions > *:only-child { grid-column: 1 / -1; }

    /* 整行提示（如「无数据」）不显示标签 */
    .tbl td[colspan] { display: block; padding: 6px 0; }
    .tbl td[colspan]::before { content: none; }
}

/* =============================================================
   公开官网首页（index.php）
   ============================================================= */
.site-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, .94);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--border);
}
.site-nav-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 16px;
    min-height: 62px;
    display: flex;
    align-items: center;
    gap: 16px;
}
.site-nav-links { display: flex; gap: 2px; }
.site-nav-links a {
    padding: 7px 12px;
    border-radius: 8px;
    color: var(--muted);
    font-size: 14px;
    transition: background .15s, color .15s;
}
.site-nav-links a:hover { background: #f4f5f9; color: var(--text); text-decoration: none; }
.site-nav-actions { margin-left: auto; display: flex; gap: 8px; }

/* Hero */
.hero {
    position: relative;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(135deg, #4f46e5 0%, #6366f1 48%, #7c3aed 100%);
}
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(760px 300px at 88% -20%, rgba(255, 255, 255, .22), transparent 62%),
                radial-gradient(520px 240px at 6% 118%, rgba(255, 255, 255, .14), transparent 60%);
}
.hero-inner {
    position: relative;
    z-index: 1;
    max-width: 1240px;
    margin: 0 auto;
    padding: 62px 16px 66px;
}
.hero-badge {
    display: inline-block;
    padding: 5px 13px;
    border-radius: 99px;
    background: rgba(255, 255, 255, .18);
    border: 1px solid rgba(255, 255, 255, .3);
    font-size: 12.5px;
    letter-spacing: .02em;
}
.hero h1 {
    margin: 18px 0 0;
    max-width: 15em;
    font-size: 34px;
    line-height: 1.25;
    letter-spacing: -.02em;
}
.hero-sub {
    margin: 14px 0 0;
    max-width: 34em;
    font-size: 15px;
    line-height: 1.7;
    color: rgba(255, 255, 255, .86);
}
.hero-actions { margin-top: 26px; display: flex; gap: 12px; flex-wrap: wrap; }
.btn.hero-btn {
    padding: 11px 22px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--primary);
    background: #fff;
    border-color: transparent;
    box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .45);
}
.btn.hero-btn:hover { color: var(--primary-dark); background: #fff; border-color: transparent; }
.btn.hero-btn.ghost {
    color: #fff;
    background: rgba(255, 255, 255, .14);
    border-color: rgba(255, 255, 255, .38);
    box-shadow: none;
}
.btn.hero-btn.ghost:hover { color: #fff; background: rgba(255, 255, 255, .24); }
.hero-stats { margin-top: 40px; display: flex; gap: 40px; flex-wrap: wrap; }
.hero-stats > div { display: flex; flex-direction: column; }
.hero-stats b { font-size: 28px; font-weight: 700; line-height: 1.2; letter-spacing: -.02em; }
.hero-stats span { margin-top: 4px; font-size: 12.5px; color: rgba(255, 255, 255, .78); }

/* 正文 */
.site-body { max-width: 1240px; margin: 0 auto; padding: 40px 16px 30px; }
.section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.section-head h2 { font-size: 21px; letter-spacing: -.01em; }
.section-sub { margin: 0; color: var(--muted); font-size: 13.5px; }

.feat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); gap: 14px; }
.feat {
    position: relative;
    background: var(--card);
    border: var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 20px 20px 18px;
}
.feat .idx {
    position: absolute;
    right: 18px;
    top: 16px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    color: #d3d7e0;
}
.feat h3 { padding-right: 32px; font-size: 15.5px; }
.feat .desc { margin: 9px 0 14px; color: var(--muted); font-size: 13px; line-height: 1.65; }
.feat .reward { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); }
.feat .reward b { color: var(--primary); font-size: 15px; font-weight: 700; }
.feat .need-evi {
    font-style: normal;
    padding: 2px 9px;
    border-radius: 99px;
    background: var(--warn-bg);
    color: var(--warn);
    font-size: 11.5px;
}

/* 排行榜 */
.rank-tip {
    margin: 34px 0 -2px;
    padding: 11px 16px;
    border-radius: var(--radius-sm);
    background: var(--primary-light);
    color: var(--primary-dark);
    font-size: 13.5px;
}
.rank-cards { display: grid; gap: 18px; margin-top: 38px; }
.rank-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.rank-head h2 { font-size: 16px; display: flex; align-items: baseline; gap: 8px; }
.rank-head .sub { font-size: 12.5px; font-weight: 400; color: var(--muted); }

.seg { display: inline-flex; gap: 2px; padding: 3px; background: #f0f1f6; border-radius: 9px; }
.seg-btn {
    padding: 5px 15px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    font-family: inherit;
    font-size: 13px;
    color: var(--muted);
    cursor: pointer;
    transition: background .15s, color .15s;
}
.seg-btn.on { background: #fff; color: var(--primary); font-weight: 600; box-shadow: var(--shadow-sm); }

.pane { display: none; }
.pane.on { display: block; }

.rank { list-style: none; margin: 0; padding: 0; }
.rank-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    border-radius: 10px;
    transition: background .15s;
}
.rank-item + .rank-item { margin-top: 2px; }
.rank-item:hover { background: #fafbff; }
.rank-no {
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #f0f1f6;
    color: var(--muted);
    font-size: 12.5px;
    font-weight: 700;
}
.rank-user { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rank-user b { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank-user em { font-style: normal; font-size: 12px; color: var(--muted); }
.rank-score { font-size: 15px; font-weight: 700; color: var(--primary); white-space: nowrap; }
.rank-score i { margin-left: 2px; font-style: normal; font-size: 12px; font-weight: 500; color: var(--muted); }
.rank-item.r1 .rank-no { background: linear-gradient(180deg, #fbbf24, #f59e0b); color: #fff; }
.rank-item.r2 .rank-no { background: linear-gradient(180deg, #cbd5e1, #94a3b8); color: #fff; }
.rank-item.r3 .rank-no { background: linear-gradient(180deg, #fdba74, #ea580c); color: #fff; }
.rank-empty { margin: 0; padding: 22px 0; text-align: center; color: var(--muted); font-size: 13.5px; }

/* 底部行动区与页脚 */
.cta {
    margin-top: 40px;
    padding: 44px 24px;
    border-radius: var(--radius);
    text-align: center;
    color: #fff;
    background: linear-gradient(135deg, #4f46e5 0%, #6366f1 52%, #7c3aed 100%);
    box-shadow: var(--shadow-lg);
}
.cta h2 { font-size: 22px; letter-spacing: -.01em; }
.cta p { max-width: 30em; margin: 10px auto 22px; font-size: 14px; color: rgba(255, 255, 255, .86); }
.site-foot { padding: 26px 16px 34px; text-align: center; color: var(--muted); font-size: 13px; }
.site-foot p { margin: 0; }
.site-foot a { color: var(--muted); }

@media (min-width: 900px) {
    .rank-cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
    .site-nav-links { display: none; }
    .site-nav-inner { min-height: 56px; }
    .hero-inner { padding: 40px 16px 44px; }
    /* 卡片圆角略大，按钮长按不选中文字 */
    .card, .feat, .stat { border-radius: 14px; }
    .btn, .tab, .nav-menu .item, .seg-btn {
        -webkit-user-select: none;
        user-select: none;
    }
    .hero h1 { font-size: 24px; }
    .hero-sub { font-size: 14px; }
    .hero-actions { margin-top: 22px; gap: 10px; }
    .btn.hero-btn { padding: 10px 18px; font-size: 14px; }
    .hero-stats { margin-top: 28px; gap: 26px; }
    .hero-stats b { font-size: 22px; }
    .site-body { padding: 28px 12px 22px; }
    .section-head h2 { font-size: 18px; }
    .rank-cards { margin-top: 28px; gap: 14px; }
    .cta { margin-top: 28px; padding: 32px 18px; }
    .cta h2 { font-size: 19px; }
    /* 分段切换按钮加大，便于手指点按 */
    .seg { padding: 4px; }
    .seg-btn { padding: 8px 16px; font-size: 13.5px; }
    /* 名次与分数略放大，手机上更清晰 */
    .rank-user b { font-size: 14.5px; }
    .rank-score { font-size: 16px; }
}

/* ---------- 触摸反馈 ---------- */
.nav-menu .item:active { background: #eef1f8; }
.site-nav-links a:active { transform: scale(.96); }

/* ---------- 锚点定位避开吸顶导航 ---------- */
#rules, #rank { scroll-margin-top: 78px; }

/* =============================================================
   公告条
   ============================================================= */
/* 公告条：白卡 + 渐变标签 + 三色侧条 */
.announce {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 16px 13px 22px;
    margin-bottom: 16px;
    background: #fff;
    border: 1px solid #e9ecf3;
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    font-size: 13.5px;
    line-height: 1.6;
    overflow: hidden;
}
.announce::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, #6366f1, #8b5cf6, #22d3ee);
}
.announce b {
    flex: 0 0 auto;
    padding: 3px 13px;
    border-radius: 99px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
}
.announce-body { flex: 1; min-width: 0; color: var(--text); }
.announce-body strong { color: #131727; font-weight: 700; }
.announce-time { flex: 0 0 auto; color: #a5adc0; font-size: 12px; }

/* =============================================================
   导航未读徽标 / 红点
   ============================================================= */
.nav-badge {
    display: inline-block;
    min-width: 17px;
    padding: 1px 5px;
    border-radius: 99px;
    background: var(--bad);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    vertical-align: 1px;
}
.tabbar .dot {
    position: absolute;
    top: 8px;
    right: calc(50% - 16px);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--bad);
    border: 1.5px solid #fff;
}

/* =============================================================
   通知中心
   ============================================================= */
.notif { list-style: none; margin: 0; padding: 0; }
.notif-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 10px;
    border-radius: 10px;
}
.notif-item + .notif-item { border-top: 1px solid #f2f3f8; }
.notif-item.unread { background: var(--primary-light); }
.notif-icon {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 700;
}
.notif-icon.c-ok { background: var(--ok-bg); color: var(--ok); }
.notif-icon.c-bad { background: var(--bad-bg); color: var(--bad); }
.notif-icon.c-info { background: var(--info-bg); color: var(--info); }
.notif-icon.c-primary { background: var(--primary-light); color: var(--primary); }
.notif-body { flex: 1; min-width: 0; }
.notif-text { margin: 0; font-size: 13.5px; line-height: 1.6; }
.notif-item.unread .notif-text { font-weight: 600; }
.notif-time { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; }
.notif-item form { margin: 0; }

/* =============================================================
   看板图表（纯 CSS）
   ============================================================= */
.charts { display: grid; gap: 18px; margin-bottom: 18px; }
@media (min-width: 900px) { .charts { grid-template-columns: 1fr 1fr; } }

.chart-bars {
    display: flex;
    align-items: stretch;
    gap: 8px;
    height: 170px;
    padding-top: 6px;
}
.chart-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    min-width: 0;
}
.chart-val { font-size: 12px; font-weight: 600; color: var(--text); }
.chart-bar {
    width: 100%;
    max-width: 44px;
    border-radius: 7px 7px 3px 3px;
    background: linear-gradient(180deg, #818cf8 0%, var(--primary) 100%);
    min-height: 4px;
    transition: height .3s ease;
}
.chart-bar.today { background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 100%); }
.chart-label { font-size: 11.5px; color: var(--muted); white-space: nowrap; }

.hbars { list-style: none; margin: 0; padding: 0; }
.hbar {
    display: grid;
    grid-template-columns: 88px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 7px 0;
}
.hbar + .hbar { border-top: 1px solid #f2f3f8; }
.hbar-name {
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hbar-track {
    height: 12px;
    border-radius: 99px;
    background: #f0f1f6;
    overflow: hidden;
}
.hbar-track i {
    display: block;
    height: 100%;
    border-radius: 99px;
    background: linear-gradient(90deg, #818cf8, var(--primary));
}
.hbar-num { font-size: 12.5px; color: var(--muted); white-space: nowrap; }

/* =============================================================
   倒计时
   ============================================================= */
.hero-badge.countdown {
    margin-left: 8px;
    background: #fff;
    color: #dc2626;
    border-color: #fecaca;
    font-weight: 700;
    box-shadow: 0 4px 14px -6px rgba(220, 38, 38, .35);
}
.hero-badge.countdown.last {
    background: #dc2626;
    color: #fff;
    border-color: #dc2626;
    animation: cd-pulse 1.6s ease-in-out infinite;
}
@keyframes cd-pulse {
    50% { box-shadow: 0 0 20px rgba(220, 38, 38, .55); }
}
.countdown-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px 14px;
    padding: 14px 18px;
    margin-bottom: 16px;
    border-radius: 16px;
    background: linear-gradient(135deg, #eef2ff 0%, #fdf4ff 55%, #ecfeff 100%);
    border: 1px solid #dfe3ff;
    color: #4b5563;
    font-size: 13.5px;
    box-shadow: var(--shadow-sm);
}
.countdown-strip .cd-label { font-weight: 700; color: #374151; margin-right: 6px; }
.countdown-strip .cd-group { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.countdown-strip .digits { display: flex; gap: 4px; perspective: 160px; }
.countdown-strip .digit {
    width: 36px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: linear-gradient(180deg, #fff 0%, #eef0ff 100%);
    border: 1.5px solid #dfe3ff;
    color: #4f46e5;
    font-size: 25px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 5px 14px -5px rgba(99, 102, 241, .4), inset 0 -3px 0 rgba(99, 102, 241, .08);
    transform-origin: center bottom;
}
.countdown-strip .digit.wide { width: auto; min-width: 42px; padding: 0 12px; }
.countdown-strip .cd-group i { font-style: normal; font-size: 11px; color: #8b94a3; letter-spacing: 2px; }
.countdown-strip .digit.flip { animation: digit-flip .5s cubic-bezier(.3, .7, .4, 1); }
@keyframes digit-flip {
    0% { transform: rotateX(-92deg); filter: brightness(1.7); }
    55% { filter: brightness(1.25); }
    100% { transform: rotateX(0); filter: brightness(1); }
}
.countdown-strip.last { background: linear-gradient(135deg, #fee2e2, #fff1f2); border-color: #fecaca; }
.countdown-strip.last .cd-label { color: #b91c1c; }
.countdown-strip.last .digit {
    color: #dc2626; border-color: #fecaca;
    background: linear-gradient(180deg, #fff 0%, #fff1f2 100%);
    box-shadow: 0 5px 14px -5px rgba(239, 68, 68, .4);
}
.countdown-strip.last .cd-group i { color: #b91c1c; }
/* Hero 变体：左对齐、白底实卡保证对比度 */
.countdown-strip.hero-cd {
    display: inline-flex;
    justify-content: flex-start;
    margin: 26px 0 6px;
    background: rgba(255, 255, 255, .55);
    border-color: rgba(255, 255, 255, .8);
    box-shadow: var(--shadow);
}
.countdown-strip.hero-cd .cd-label { color: #1a2030; }
.countdown-strip.hero-cd .digit {
    background: #fff;
    border-color: #c7d2fe;
    color: #3730a3;
    box-shadow: 0 6px 16px -6px rgba(79, 70, 229, .45);
}
.countdown-strip.hero-cd .cd-group i { color: #4b5563; }
.countdown-strip.hero-cd.last { background: #fee2e2; border-color: #fecaca; }
.countdown-strip.hero-cd.last .cd-label { color: #b91c1c; }
.countdown-strip.hero-cd.last .digit { color: #dc2626; border-color: #fecaca; background: #fff; }

/* =============================================================
   每日签到卡
   ============================================================= */
.checkin-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    background: linear-gradient(135deg, #eef2ff 0%, #ffffff 62%);
}
.checkin-card h2 { justify-content: flex-start; }
.checkin-sub { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.checkin-sub b { color: var(--primary); font-size: 15px; }
.checkin-btn {
    min-width: 168px;
    min-height: 48px;
    font-size: 15.5px;
    font-weight: 600;
    border-radius: 12px;
}
.checkin-btn.done {
    background: var(--ok-bg);
    border: 1px solid var(--ok-bd);
    color: var(--ok);
    box-shadow: none;
    cursor: default;
}

/* =============================================================
   双列布局（日历 + 徽章）
   ============================================================= */
.two-col { display: grid; gap: 18px; margin-bottom: 0; }
@media (min-width: 900px) { .two-col { grid-template-columns: 1fr 1fr; } }
.card > h2 .h2-nav { font-size: 12.5px; font-weight: 400; color: var(--muted); }

/* 打卡日历 */
.cal-title { margin: -6px 0 12px; color: var(--muted); font-size: 13px; }
.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}
.cal-dow {
    text-align: center;
    font-size: 12px;
    color: var(--muted);
    padding: 4px 0;
}
.cal-cell {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 13.5px;
    color: var(--text);
    background: #f7f8fb;
}
.cal-cell.blank { background: transparent; }
.cal-cell.done {
    background: linear-gradient(180deg, #818cf8 0%, var(--primary) 100%);
    color: #fff;
    font-weight: 600;
}
.cal-cell.today {
    box-shadow: inset 0 0 0 2px var(--bad);
    color: var(--bad);
    font-weight: 700;
}
.cal-cell.done.today { box-shadow: inset 0 0 0 2px var(--bad); }

/* 成就徽章 */
.badge-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 10px;
}
.badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 3px;
    padding: 14px 6px 11px;
    border-radius: 12px;
    background: #f7f8fb;
    border: 1px solid transparent;
}
.badge .badge-icon { font-size: 27px; line-height: 1.2; filter: grayscale(1); opacity: .38; }
.badge b { font-size: 12.5px; font-weight: 600; }
.badge em { font-style: normal; font-size: 10.5px; color: var(--muted); line-height: 1.4; }
.badge.earned {
    background: var(--primary-light);
    border-color: rgba(79, 70, 229, .25);
}
.badge.earned .badge-icon { filter: none; opacity: 1; }
.badge.earned b { color: var(--primary); }

/* 成长曲线 */
.curve { width: 100%; height: auto; display: block; }
.curve-axis { font-size: 11px; fill: var(--muted); font-family: inherit; }
.curve-val { font-size: 13px; font-weight: 700; fill: var(--primary); font-family: inherit; }

/* 环境诊断 */
.diag { list-style: none; margin: 0; padding: 0; }
.diag-item { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; }
.diag-item + .diag-item { border-top: 1px solid #f2f3f8; }
.diag-dot { flex: 0 0 12px; width: 12px; height: 12px; border-radius: 50%; margin-top: 5px; background: var(--muted); }
.diag-item.ok .diag-dot { background: var(--ok); }
.diag-item.bad .diag-dot { background: var(--bad); }
.diag-item.warn .diag-dot { background: var(--warn); }
.diag-item p { margin: 2px 0 0; font-size: 13px; line-height: 1.6; word-break: break-all; }

/* 打回原因快捷模板 */
.tpl-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.tpl-chips .tpl {
    padding: 6px 13px;
    border: 1px dashed #c3c8d4;
    border-radius: 99px;
    background: #fafbfd;
    color: var(--muted);
    font-family: inherit;
    font-size: 12.5px;
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
}
.tpl-chips .tpl:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }
.tpl-chips .tpl:active { transform: scale(.95); }

/* 异常提交预警 */
.risk-card { border-left: 4px solid var(--warn); }
.risk-card > h2 { color: var(--warn); }
.risk-row { margin-bottom: 12px; }
.risk-row:last-of-type { margin-bottom: 0; }
.risk-label {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 99px;
    background: var(--warn-bg);
    color: var(--warn);
    font-size: 12.5px;
    margin-bottom: 6px;
}
.risk-list { margin: 0; padding-left: 18px; font-size: 13.5px; line-height: 1.8; }
.risk-list b { color: var(--bad); }

/* =============================================================
   动效层
   ============================================================= */

/* 1) 页面内容入场：依次上浮淡入 */
@keyframes rise-in {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}
.container > * { animation: rise-in .45s cubic-bezier(.2, .8, .3, 1) both; }
.container > *:nth-child(1) { animation-delay: .02s; }
.container > *:nth-child(2) { animation-delay: .07s; }
.container > *:nth-child(3) { animation-delay: .12s; }
.container > *:nth-child(4) { animation-delay: .17s; }
.container > *:nth-child(5) { animation-delay: .22s; }
.container > *:nth-child(n+6) { animation-delay: .26s; }

/* 2) 提示条滑入 */
.flash { animation: flash-drop .4s cubic-bezier(.2, .8, .3, 1.2) both; }
@keyframes flash-drop {
    from { opacity: 0; transform: translateY(-12px) scale(.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* 3) 卡片悬停轻浮 */
.card, .feat, .stat { transition: transform .2s ease, box-shadow .2s ease; }
.feat:hover, .stat:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

/* 4) 徽章动效：点亮徽章呼吸浮沉 + 悬停扫光 */
@keyframes badge-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}
.badge { position: relative; overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; }
.badge .badge-icon { display: inline-block; }
.badge.earned .badge-icon { animation: badge-bob 2.6s ease-in-out infinite; }
.badge.earned::after {
    content: "";
    position: absolute;
    top: -60%;
    left: -80%;
    width: 50%;
    height: 220%;
    transform: rotate(25deg);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
    transition: none;
}
.badge.earned:hover::after { animation: badge-shine .9s ease; }
@keyframes badge-shine {
    from { left: -80%; }
    to { left: 130%; }
}
.badge.earned:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 8px 20px -10px rgba(79, 70, 229, .5); }
.badge:not(.earned):hover { background: #f0f1f6; }

/* 5) 排行榜：名次徽章悬停摇摆，整行悬停右移 */
@keyframes medal-swing {
    0%, 100% { transform: rotate(0); }
    25% { transform: rotate(-12deg); }
    60% { transform: rotate(10deg); }
    85% { transform: rotate(-4deg); }
}
.rank-item { transition: background .15s, transform .18s ease; }
.rank-item:hover { transform: translateX(3px); }
.rank-item.r1 .rank-no, .rank-item.r2 .rank-no, .rank-item.r3 .rank-no { transition: transform .2s; }
.rank-item:hover .rank-no { animation: medal-swing .7s ease; }

/* 6) 签到按钮成功态小弹跳 */
@keyframes pop-in {
    from { transform: scale(.85); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
.checkin-btn { animation: pop-in .35s cubic-bezier(.2, .8, .3, 1.3) both; }

/* 7) 曲线画线（app.js 触发） */
.curve .curve-line {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: curve-draw 1.4s cubic-bezier(.4, 0, .2, 1) .3s forwards;
}
@keyframes curve-draw {
    to { stroke-dashoffset: 0; }
}
.curve .curve-area {
    opacity: 0;
    animation: fade-in .8s ease 1.2s forwards;
}
@keyframes fade-in {
    to { opacity: 1; }
}

/* 8) 撒花粒子（app.js 动态生成） */
.confetti-bit {
    position: fixed;
    top: -12px;
    z-index: 9999;
    width: 9px;
    height: 14px;
    border-radius: 2px;
    pointer-events: none;
    animation: confetti-fall linear forwards;
}
@keyframes confetti-fall {
    to { transform: translateY(105vh) rotate(var(--spin, 540deg)); opacity: .9; }
}

/* 9) 底部导航切换小弹跳 */
.tabbar .tab.active svg { animation: pop-in .3s cubic-bezier(.2, .8, .3, 1.4) both; }

/* 动效全局开关：用户系统开启「减少动态效果」时全部停用 */
@media (prefers-reduced-motion: reduce) {
    .container > *, .flash, .checkin-btn, .tabbar .tab.active svg,
    .curve .curve-line, .curve .curve-area { animation: none !important; }
    .badge.earned .badge-icon { animation: none !important; }
    .curve .curve-area { opacity: 1; }
    .curve .curve-line { stroke-dashoffset: 0; }
}

/* =============================================================
   uiverse 悬停揭示卡（暗色 + 金边）
   用法：<div class="feat u-dark"><i class="u-border"></i>…<span class="u-reveal">…</span></div>
   ============================================================= */
.u-border {
    position: absolute;
    inset: 0;
    border: 2px solid #bd9f67;
    border-radius: inherit;
    opacity: 0;
    transform: rotate(10deg);
    pointer-events: none;
    transition: inset .5s ease-in-out, transform .5s ease-in-out, opacity .5s ease-in-out;
}
.u-reveal {
    display: block;
    color: #bd9f67;
    font-size: 11.5px;
    line-height: 1.6;
    opacity: 0;
    letter-spacing: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all .5s ease-in-out .15s;
}
.u-dark { position: relative; }
.u-dark:hover { z-index: 3; }
/* 规则卡与统计卡的彩色样式见文末「浅色高级极光主题层」 */


/* =============================================================
   浅色高级极光主题层（最终主题）
   明亮通透 + 多彩点缀 + uiverse 悬停揭示（.u-dark 为历史类名，现为彩色卡）
   ============================================================= */

/* 极光浅色背景：彩色雾 + 细网格，固定 */
html {
    background-color: #f6f7fb;
    background-image:
        repeating-linear-gradient(0deg, rgba(15, 23, 42, .016) 0 1px, transparent 1px 44px),
        repeating-linear-gradient(90deg, rgba(15, 23, 42, .016) 0 1px, transparent 1px 44px);
    background-attachment: fixed;
}
body { background: none; }
body::before {
    content: "";
    position: fixed;
    inset: -22%;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(560px 420px at 14% 10%, rgba(99, 102, 241, .1), transparent 62%),
        radial-gradient(660px 460px at 86% 4%, rgba(192, 132, 252, .09), transparent 62%),
        radial-gradient(640px 460px at 82% 92%, rgba(34, 211, 238, .08), transparent 62%),
        radial-gradient(600px 440px at 8% 96%, rgba(251, 191, 36, .07), transparent 62%);
    filter: blur(56px);
    animation: aurora-drift 26s ease-in-out infinite alternate;
}
@keyframes aurora-drift {
    0% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(2.4%, -2%, 0) scale(1.06); }
    100% { transform: translate3d(-2%, 2.4%, 0) scale(1.03); }
}

/* 玻璃导航（浅色） */
.nav, .site-nav {
    background: rgba(255, 255, 255, .8);
    -webkit-backdrop-filter: saturate(160%) blur(16px);
    backdrop-filter: saturate(160%) blur(16px);
    border-bottom: 1px solid rgba(15, 23, 42, .06);
}
.tabbar {
    background: rgba(255, 255, 255, .88);
    box-shadow: 0 -1px 0 rgba(15, 23, 42, .05), 0 -12px 30px -14px rgba(15, 23, 42, .18);
}
.tabbar .dot { border-color: #fff; }

/* 统计彩卡：白底 + 柔彩渐变 + 彩色数字（u-dark 为历史类名） */
.stat.u-dark {
    background: linear-gradient(180deg, rgba(192, 132, 252, .07), #fff 58%);
    border-color: #eee3fb;
}
.stat.u-dark .num { color: #7c3aed; }
.stat.u-dark.c-primary {
    background: linear-gradient(180deg, rgba(99, 102, 241, .09), #fff 58%);
    border-color: #dfe3ff;
}
.stat.u-dark.c-primary .num { color: #4f46e5; }
.stat.u-dark.c-info {
    background: linear-gradient(180deg, rgba(34, 211, 238, .09), #fff 58%);
    border-color: #d3f1fb;
}
.stat.u-dark.c-info .num { color: #0891b2; }
.stat.u-dark.c-ok {
    background: linear-gradient(180deg, rgba(52, 211, 153, .1), #fff 58%);
    border-color: #cdf3e6;
}
.stat.u-dark.c-ok .num { color: #059669; }
.stat.u-dark.c-warn {
    background: linear-gradient(180deg, rgba(251, 191, 36, .1), #fff 58%);
    border-color: #fdecc8;
}
.stat.u-dark.c-warn .num { color: #d97706; }
.stat.u-dark:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.stat.u-dark:hover .u-border { inset: 7px; opacity: 1; transform: rotate(0); }

/* 规则 / 亮点卡：白卡 + 悬停彩色揭示（五色轮换） */
.feat.u-dark { background: #fff; border-color: #e9ecf3; color: var(--text); }
.feat.u-dark h3 { color: #1a2030; }
.feat.u-dark .desc { color: var(--muted); }
.feat.u-dark .reward { color: var(--muted); }
.feat.u-dark .reward b { color: #4f46e5; }
.feat.u-dark .idx { color: #d3d8e2; }
.feat.u-dark .need-evi { background: #fef3c7; color: #b45309; }
.feat.u-dark:hover {
    border-radius: 10px;
    transform: translateY(-4px) scale(1.04);
    box-shadow: var(--shadow-lg);
}
.feat.u-dark:hover .u-border { inset: 8px; opacity: 1; transform: rotate(0); }
.feat.u-dark:hover .u-reveal { opacity: 1; letter-spacing: 2px; }
/* 五色轮换 */
.feat-grid .u-dark:nth-child(5n+1):hover .u-border { border-color: #818cf8; box-shadow: 0 0 18px rgba(99, 102, 241, .25); }
.feat-grid .u-dark:nth-child(5n+1) .u-reveal { color: #6366f1; }
.feat-grid .u-dark:nth-child(5n+2):hover .u-border { border-color: #c084fc; box-shadow: 0 0 18px rgba(192, 132, 252, .25); }
.feat-grid .u-dark:nth-child(5n+2) .u-reveal { color: #9333ea; }
.feat-grid .u-dark:nth-child(5n+3):hover .u-border { border-color: #22d3ee; box-shadow: 0 0 18px rgba(34, 211, 238, .25); }
.feat-grid .u-dark:nth-child(5n+3) .u-reveal { color: #0891b2; }
.feat-grid .u-dark:nth-child(5n+4):hover .u-border { border-color: #34d399; box-shadow: 0 0 18px rgba(52, 211, 153, .25); }
.feat-grid .u-dark:nth-child(5n+4) .u-reveal { color: #059669; }
.feat-grid .u-dark:nth-child(5n+5):hover .u-border { border-color: #fbbf24; box-shadow: 0 0 18px rgba(251, 191, 36, .3); }
.feat-grid .u-dark:nth-child(5n+5) .u-reveal { color: #d97706; }

/* 主按钮：靛蓝→紫渐变（浅色页面上的彩色焦点） */
.btn.primary {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 6px 18px -6px rgba(99, 102, 241, .55);
}
.btn.primary:hover {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 8px 24px -8px rgba(124, 58, 237, .6);
}
/* 普通按钮回归白底描边 */
.btn { background: #fff; border: 1px solid var(--border); color: var(--text); box-shadow: var(--shadow-sm); }
.btn:hover { background: #f8f9fd; border-color: #c9ced9; color: var(--text); box-shadow: var(--shadow); }
.btn.ok { background: #059669; border-color: #059669; color: #fff; }
.btn.ok:hover { background: #047857; border-color: #047857; }
.btn.bad { background: #dc2626; border-color: #dc2626; color: #fff; }
.btn.bad:hover { background: #b91c1c; border-color: #b91c1c; }
.btn.is-loading, .btn[disabled] { opacity: .6; cursor: not-allowed; }

/* 图表多色：7 天柱状图彩虹轮换 */
.chart-bars .chart-col:nth-child(1) .chart-bar { background: linear-gradient(180deg, #818cf8, #4f46e5); }
.chart-bars .chart-col:nth-child(2) .chart-bar { background: linear-gradient(180deg, #a78bfa, #7c3aed); }
.chart-bars .chart-col:nth-child(3) .chart-bar { background: linear-gradient(180deg, #22d3ee, #0891b2); }
.chart-bars .chart-col:nth-child(4) .chart-bar { background: linear-gradient(180deg, #34d399, #059669); }
.chart-bars .chart-col:nth-child(5) .chart-bar { background: linear-gradient(180deg, #fbbf24, #d97706); }
.chart-bars .chart-col:nth-child(6) .chart-bar { background: linear-gradient(180deg, #fb7185, #e11d48); }
.chart-bars .chart-col:nth-child(7) .chart-bar { background: linear-gradient(180deg, #38bdf8, #0284c7); }
.hbar-track i { background: linear-gradient(90deg, #818cf8, #22d3ee); }

/* 成长曲线 / 日历：靛蓝系 */
.curve .curve-line { stroke: #6366f1; }
.curve .curve-area { fill: rgba(99, 102, 241, .1); }
.curve circle { fill: #6366f1; stroke: #fff; }
.curve-val { fill: #4f46e5; }
.cal-cell.done { background: linear-gradient(180deg, #6366f1 0%, #4f46e5 100%); color: #fff; }

/* Hero：浅色极光渐变 + 深色文字 */
.hero {
    background:
        radial-gradient(700px 320px at 85% -10%, rgba(129, 140, 248, .18), transparent 62%),
        radial-gradient(560px 280px at 8% 110%, rgba(34, 211, 238, .12), transparent 62%),
        linear-gradient(180deg, #eef2ff 0%, #f6f7fb 100%);
    color: var(--text);
}
.hero::after {
    background: radial-gradient(520px 240px at 6% 118%, rgba(192, 132, 252, .1), transparent 60%);
}
.hero-badge { background: #fff; color: #4f46e5; border-color: #dfe3ff; }
.hero h1 { color: #131727; }
.hero-sub { color: #5b6472; }
.btn.hero-btn {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 10px 24px -10px rgba(99, 102, 241, .6);
}
.btn.hero-btn:hover { background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%); color: #fff; }
.btn.hero-btn.ghost {
    background: rgba(255, 255, 255, .8);
    color: #4f46e5;
    border-color: #dfe3ff;
    box-shadow: none;
}
.btn.hero-btn.ghost:hover { background: #fff; color: #4f46e5; }
.hero-stats b { color: #131727; }
.hero-stats span { color: #6b7280; }

/* 底部 CTA：靛紫渐变保留，压浅一点 */
.cta { background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 55%, #8b5cf6 100%); }

/* 签到卡：浅靛渐变 */
.checkin-card { background: linear-gradient(135deg, #eef2ff 0%, #fff 62%); }

/* 提示条与预警回归浅色（基础变量已恢复，无需额外覆盖） */

/* 减少动效：极光静止 */
@media (prefers-reduced-motion: reduce) {
    body::before { animation: none !important; }
}

/* =============================================================
   「我的」账户中心
   ============================================================= */
.me-head {
    display: flex;
    align-items: center;
    gap: 16px;
}
.me-avatar {
    flex: 0 0 58px;
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    font-size: 26px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    box-shadow: 0 8px 20px -8px rgba(99, 102, 241, .55);
}
.me-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.me-info b { font-size: 17px; font-weight: 700; }
.me-info span { margin-top: 2px; color: var(--muted); font-size: 12.5px; }

.me-menu { list-style: none; margin: 0; padding: 0; }
.me-menu li + li { border-top: 1px solid #f0f2f7; }
.me-menu a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 6px;
    color: var(--text);
    font-size: 14.5px;
    transition: background .15s;
}
.me-menu a:hover { text-decoration: none; background: #f8f9fd; }
.me-menu a:active { background: var(--primary-light); }
.me-menu a svg { width: 20px; height: 20px; color: var(--primary); }
.me-menu a span { flex: 1; }
.me-menu a .nav-badge { margin-right: 6px; }
.me-menu a em { font-style: normal; color: #c3c9d4; font-size: 18px; }
.me-menu .me-logout { color: var(--bad); }
.me-menu .me-logout svg { color: var(--bad); }

/* 排名奖励配置 */
.rank-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 760px) { .rank-grid { grid-template-columns: 1fr; } }
.rank-title { display: block; margin-bottom: 10px; font-size: 14px; color: var(--primary-dark); }
.rank-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.rank-row > span { flex: 0 0 58px; font-size: 13px; color: var(--muted); }
.rank-row select { flex: 1; }

/* =============================================================
   移动端操作体验增强
   ============================================================= */

/* 全局：去掉点击高亮，消除双击缩放的 300ms 延迟 */
a, button, label, input[type=checkbox], input[type=radio], .seg-btn, .tpl {
    -webkit-tap-highlight-color: transparent;
}
body { touch-action: manipulation; }

/* 手机抽屉遮罩：菜单展开时盖住内容，点击即关闭
   z-index 必须低于 .nav(50)：菜单面板在 .nav 的层叠上下文内，遮罩高于 50 会盖住菜单 */
.nav-mask {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 45;
    background: rgba(15, 23, 42, .38);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    animation: fade-in .2s ease both;
}
body:has(.nav-toggle:checked) .nav-mask { display: block; }

/* 返回顶部悬浮按钮（仅手机显示，滚动超过一屏出现） */
.to-top {
    position: fixed;
    right: 14px;
    bottom: calc(74px + env(safe-area-inset-bottom));
    z-index: 58;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: var(--line);
    border-radius: 50%;
    background: rgba(255, 255, 255, .94);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: var(--primary);
    font-size: 19px;
    font-weight: 600;
    line-height: 1;
    box-shadow: var(--shadow);
    cursor: pointer;
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    transition: opacity .22s ease, transform .22s ease;
}
.to-top.show { opacity: 1; transform: none; pointer-events: auto; }
.to-top:active { transform: scale(.92); }
@media (min-width: 641px) { .to-top { display: none; } }

@media (max-width: 640px) {
    /* ---- 输入体验：16px 防 iOS 聚焦自动放大，44px 触摸高度 ---- */
    input[type=text], input[type=password], input[type=number], input[type=date],
    input[type=month], input[type=email], input[type=tel], select, textarea {
        font-size: 16px;
    }
    input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea {
        min-height: 44px;
    }
    input[type=file] { min-height: 0; padding: 12px; }
    input[type=date] { min-height: 44px; }

    /* ---- 分页按钮加大 ---- */
    .pager .pg { min-width: 40px; height: 40px; font-size: 14px; }

    /* ---- 证据缩略图加大，方便看图 ---- */
    .evi-thumb img { width: 76px; height: 76px; border-radius: 10px; }
    .evi-vid { padding: 9px 14px; font-size: 13px; }

    /* ---- 卡片列表按下反馈 ---- */
    .tbl tr:active { background: #f5f6ff; }
    .notif-item:active { background: rgba(99, 102, 241, .08); }

    /* ---- 「更多」菜单改为导航条下方的浮层面板 ----
       注意：不能用 position:fixed —— .nav 的 backdrop-filter 会把它变成
       fixed 的定位基准，bottom 会被算到 58px 高的导航条上方（屏幕外）。
       用 absolute 相对 .nav 定位，从导航条正下方展开。 */
    .nav-toggle:checked ~ .nav-menu {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 5px;
        position: absolute;
        left: 10px;
        right: 10px;
        top: calc(100% + 8px);
        flex-basis: auto;
        max-height: calc(100vh - 140px);
        overflow-y: auto;
        z-index: 65;
        padding: 12px;
        background: rgba(255, 255, 255, .97);
        -webkit-backdrop-filter: saturate(160%) blur(16px);
        backdrop-filter: saturate(160%) blur(16px);
        border: var(--line);
        border-radius: 18px;
        box-shadow: var(--shadow-lg);
        animation: sheet-down .25s cubic-bezier(.2, .8, .3, 1) both;
    }
    .nav-toggle:checked ~ .nav-menu .item {
        border-top: none;
        margin: 0;
        padding: 12px 8px;
        border-radius: 11px;
        background: #f7f8fb;
        text-align: center;
        font-size: 14px;
    }
    .nav-toggle:checked ~ .nav-menu .item.active {
        background: var(--primary-light);
        color: var(--primary);
    }
    .nav-toggle:checked ~ .nav-menu .nav-user {
        grid-column: 1 / -1;
        border-top: none;
        padding: 8px 0 2px;
        text-align: center;
    }
}
@keyframes sheet-down {
    from { opacity: 0; transform: translateY(-12px); }
    to { opacity: 1; transform: none; }
}

/* 倒计时手机紧凑版：四组数字一行放下，不再换行 */
@media (max-width: 640px) {
    .countdown-strip { gap: 7px 6px; padding: 10px 12px; }
    .countdown-strip .cd-label { font-size: 12px; margin-right: 2px; }
    .countdown-strip .digits { gap: 2px; }
    .countdown-strip .digit {
        width: 25px;
        height: 38px;
        font-size: 19px;
        border-radius: 7px;
        border-width: 1px;
    }
    .countdown-strip .digit.wide { min-width: 33px; padding: 0 7px; }
    .countdown-strip .cd-group i { font-size: 10px; letter-spacing: 1px; }
}
/* 超窄屏：隐藏「距活动结束」标签，仅保留「今日截止」提示 */
@media (max-width: 360px) {
    .countdown-strip:not(.last) .cd-label { display: none; }
}

/* =============================================================
   移动端操作效率优化
   1) 粘性批量操作栏（审核/发放）：滚动到任何位置都能直接操作，
      不用再滚回页面顶部/底部找按钮
   2) 筛选表单折叠（details.mfilter）：无筛选条件时移动端默认收起
   3) 看板待办统计卡可点击直达对应页面
   ============================================================= */

/* 看板可点击统计卡 */
a.stat { color: inherit; text-decoration: none; }
a.stat:active { transform: scale(.98); }

/* 筛选折叠摘要（桌面端隐藏，筛选表单始终展开） */
.mfilter > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
    padding: 11px 14px;
    background: #f4f5ff;
    border-radius: 10px;
    color: var(--primary);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    -webkit-tap-highlight-color: transparent;
}
.mfilter > summary::-webkit-details-marker { display: none; }
.mfilter > summary::after { content: '展开 ▾'; font-size: 12px; font-weight: 400; color: var(--muted); }
.mfilter[open] > summary::after { content: '收起 ▴'; }
.mfilter[open] { margin-bottom: 14px; }

/* 拒绝原因模板选中态反馈 */
.tpl-chips .tpl.on {
    border-style: solid;
    border-color: var(--primary);
    color: var(--primary);
    background: var(--primary-light);
}

@media (min-width: 641px) {
    .batch-spacer { display: none; }
    .mfilter > summary { display: none; }
}

@media (max-width: 640px) {
    /* ---- 粘性批量操作栏：悬浮在底部导航栏上方 ---- */
    .batch-bar {
        position: fixed;
        left: 8px;
        right: 8px;
        bottom: calc(63px + env(safe-area-inset-bottom));
        z-index: 62;
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 10px 12px;
        background: rgba(255, 255, 255, .97);
        -webkit-backdrop-filter: saturate(160%) blur(14px);
        backdrop-filter: saturate(160%) blur(14px);
        border: var(--line);
        border-radius: 15px;
        box-shadow: 0 10px 34px -10px rgba(16, 24, 40, .4);
        animation: sheet-up .22s cubic-bezier(.2, .8, .3, 1) both;
    }
    /* 拒绝原因输入框独占一行置顶；全选 + 通过/拒绝 平分最后一行 */
    .batch-bar .inline-form,
    .batch-bar .mt { margin: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
    .batch-bar .inline-form .f.grow { order: -1; flex: 1 1 100%; }
    .batch-bar .inline-form .f.grow > span { font-size: 11.5px; margin-bottom: 3px; }
    .batch-bar .inline-form .f.grow input { min-height: 40px; padding: 8px 10px; }
    .batch-bar .inline-form .btn,
    .batch-bar .mt .btn { flex: 1 1 0; margin: 0; }
    .batch-bar .sel-all { flex: 0 0 auto; margin: 0; }
    /* 拒绝模板条横向滑动，不撑高面板 */
    .batch-bar .tpl-chips {
        flex-wrap: nowrap;
        overflow-x: auto;
        margin: 0;
        padding-bottom: 2px;
        -webkit-overflow-scrolling: touch;
    }
    .batch-bar .tpl-chips .tpl { white-space: nowrap; flex: 0 0 auto; }
    /* 页面底部留出操作栏高度，最后几行不被盖住 */
    .batch-spacer { height: 182px; }
    .batch-spacer.sm { height: 96px; }
    /* 返回顶部按钮避开操作栏 */
    body:has(.batch-bar) .to-top { bottom: calc(248px + env(safe-area-inset-bottom)); }
    /* 筛选摘要（移动端显示） */
    .mfilter > summary { display: flex; }
}
@keyframes sheet-up {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}

/* =============================================================
   移动端效率增强二期
   1) 底部导航待办角标（审核/发放积压数）
   2) 灯箱多图切换按钮与计数
   3) 新记录提示条
   4) 校园跑密码显示/复制按钮
   5) 移动端趋势图横向滑动
   ============================================================= */

/* ---- 底部导航待办角标 ---- */
.tabbar .tab { position: relative; }
.tab-badge {
    position: absolute;
    top: 5px;
    left: calc(50% + 5px);
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 9px;
    background: #ef4444;
    color: #fff;
    font-size: 10px;
    font-style: normal;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
    box-shadow: 0 2px 6px rgba(239, 68, 68, .45);
    animation: badge-pop .25s cubic-bezier(.34, 1.56, .64, 1) both;
}
@keyframes badge-pop {
    from { transform: scale(0); }
    to { transform: scale(1); }
}

/* ---- 灯箱多图切换 ---- */
.lb-nav {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .3);
    color: #fff;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    -webkit-tap-highlight-color: transparent;
}
.lb-nav:active { background: rgba(255, 255, 255, .28); }
.lb-prev { left: 10px; }
.lb-next { right: 10px; }
.lb-count {
    position: fixed;
    bottom: calc(18px + env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, .9);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    background: rgba(0, 0, 0, .35);
    padding: 4px 12px;
    border-radius: 999px;
    pointer-events: none;
}

/* ---- 新记录提示条 ---- */
.new-hint {
    margin: 0 0 14px;
    padding: 12px 16px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 12px;
    color: #92400e;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    animation: hint-pulse 1.8s ease-in-out infinite;
}
.new-hint:active { transform: scale(.99); }
@keyframes hint-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, .35); }
    50% { box-shadow: 0 0 0 6px rgba(245, 158, 11, 0); }
}

/* ---- 校园跑密码显示 / 复制 ---- */
.pw-btn {
    padding: 2px 10px;
    font-size: 12px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--primary);
    font-weight: 600;
    cursor: pointer;
    vertical-align: middle;
    -webkit-tap-highlight-color: transparent;
    transition: transform .12s ease;
}
.pw-btn:active { transform: scale(.95); }
.pw { letter-spacing: 2px; }

/* ---- 部分发放：本次发放 km 输入框 ---- */
.part-grant {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 5px;
    font-size: 12px;
    font-weight: 500;
    color: var(--muted);
    white-space: nowrap;
}
.part-grant input[type="number"] {
    width: 58px;
    height: 28px;
    padding: 0 6px;
    font-size: 14px;
    font-weight: 700;
    color: var(--primary);
    text-align: center;
    border: 1.5px solid var(--primary);
    border-radius: 8px;
    background: #eef2ff;
    -moz-appearance: textfield;
}
.part-grant input::-webkit-outer-spin-button,
.part-grant input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.part-grant input:focus { outline: none; box-shadow: 0 0 0 3px rgba(99, 102, 241, .18); }
.pg-full {
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    color: var(--primary);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 7px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.pg-full:active { transform: scale(.94); }
.pg-tip { font-weight: 400; color: #9ca3af; }
.btn.warn {
    background: linear-gradient(180deg, #f59e0b, #d97706);
    border-color: #d97706;
    color: #fff;
    box-shadow: 0 2px 8px rgba(217, 119, 6, .28);
}

/* ---- 审核页：历史审核记录折叠卡 ---- */
.hcard > summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}
.hcard > summary::-webkit-details-marker { display: none; }
.hcard > summary h2 { margin: 0; }
.hcard[open] > summary { padding-bottom: 6px; }

/* ---------- 排名奖励矩阵（rewards.php） ---------- */
.rk-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 14px 0 8px;
}
.rk-head:first-of-type { margin-top: 0; }
.rk-head > b { font-size: 15px; }
.rk-gen { display: inline-flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.rk-gen form { margin: 0; }
.rank-matrix { min-width: 460px; }
.rank-matrix th:not(:first-child),
.rank-matrix td:not(:first-child) { padding: 6px 5px; }
.rank-matrix select {
    width: 100%;
    min-width: 72px;
    font-size: 12.5px;
    padding: 7px 5px;
}
.rank-matrix td[data-label="名次"] { white-space: nowrap; }