/* ============================================================
 * GBoy 控制台 · 全局设计系统
 * 目标：简洁、精致、有层次的现代管理台质感
 * ============================================================ */
:root {
    --brand-1: #4F46E5;
    --brand-2: #7C3AED;
    --ink: #0F172A;
    --muted: #64748B;
    --line: #ECEFF5;
    --line-strong: #E2E6EF;
    --bg: #F4F6FB;
    --card-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 6px 16px rgba(16, 24, 40, .05);
    --card-shadow-hover: 0 2px 4px rgba(16, 24, 40, .05), 0 14px 32px rgba(16, 24, 40, .09);
}

html, body { margin: 0; height: 100%; }
body {
    background: var(--bg);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
#app { height: 100%; }

/* ---------- 背景（极淡的品牌光晕） ---------- */
.v-application {
    background:
        radial-gradient(900px 420px at 8% -6%, rgba(79, 70, 229, .07), transparent 60%),
        radial-gradient(760px 380px at 100% 0%, rgba(124, 58, 237, .06), transparent 62%),
        var(--bg) !important;
}

/* ---------- 侧边栏 ---------- */
.app-drawer { border-right: 1px solid var(--line) !important; }
.app-drawer .v-navigation-drawer__content { display: flex; flex-direction: column; }

.brand { display: flex; align-items: center; gap: 12px; padding: 22px 18px 10px; }
.brand-logo {
    width: 42px; height: 42px; border-radius: 13px;
    background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
    color: #fff; display: grid; place-items: center;
    font-weight: 800; font-size: 18px; letter-spacing: -.5px;
    box-shadow: 0 8px 18px rgba(79, 70, 229, .35);
}
.brand-name { font-weight: 800; font-size: 16px; letter-spacing: -.3px; line-height: 1.15; }
.brand-sub { font-size: 11.5px; color: var(--muted); margin-top: 1px; }

.nav-scroll { flex: 1; overflow-y: auto; padding: 4px 12px 14px; }
.nav-scroll::-webkit-scrollbar { width: 5px; }
.nav-scroll::-webkit-scrollbar-thumb { background: #D8DEE9; border-radius: 4px; }

.nav-label {
    font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
    color: #9AA3B2; padding: 16px 12px 6px;
}
.nav-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px; margin: 3px 0; border-radius: 12px;
    cursor: pointer; color: #4A5568; font-weight: 550; font-size: 14px;
    transition: background .18s ease, color .18s ease, box-shadow .18s ease, transform .12s ease;
    user-select: none;
}
.nav-item .v-icon { opacity: .8; transition: opacity .18s ease; }
.nav-item:hover { background: #F0F2F8; color: var(--ink); }
.nav-item:active { transform: scale(.985); }
.nav-item.active {
    background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
    color: #fff;
    box-shadow: 0 8px 18px rgba(79, 70, 229, .28);
}
.nav-item.active .v-icon { opacity: 1; }

.drawer-foot {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 16px; border-top: 1px solid var(--line);
    background: #FBFCFE;
}
.foot-name { font-weight: 700; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.foot-role { font-size: 11.5px; color: var(--muted); }

/* ---------- 顶栏 ---------- */
.app-bar {
    border-bottom: 1px solid var(--line) !important;
    background: rgba(255, 255, 255, .82) !important;
    backdrop-filter: saturate(180%) blur(16px);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
}
.app-title { font-weight: 750; font-size: 18px; letter-spacing: -.3px; }

/* ---------- 内容容器 ---------- */
.page-container { max-width: 1320px; margin: 0 auto; padding: 22px 24px 40px; }
@media (max-width: 600px) { .page-container { padding: 14px 14px 30px; } }

/* ---------- 卡片统一质感 ---------- */
.v-card {
    border: 1px solid var(--line) !important;
    box-shadow: var(--card-shadow) !important;
    transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease;
}
.hoverable:hover {
    box-shadow: var(--card-shadow-hover) !important;
    transform: translateY(-3px);
    border-color: var(--line-strong) !important;
}

/* ---------- 统计卡片 ---------- */
.stat-tile { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; }
.stat-tile .stat-label { font-size: 12.5px; font-weight: 600; color: var(--muted); letter-spacing: .01em; }
.stat-tile .stat-value { font-size: 27px; font-weight: 800; letter-spacing: -.6px; line-height: 1.15; margin-top: 4px; }
.stat-icon {
    width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center;
    color: #fff; flex: 0 0 auto;
}

/* 品牌渐变工具类 */
.grad-brand { background: linear-gradient(135deg, var(--brand-1), var(--brand-2)); }
.grad-green { background: linear-gradient(135deg, #10B981, #34D399); }
.grad-amber { background: linear-gradient(135deg, #F59E0B, #FBBF24); }
.grad-cyan  { background: linear-gradient(135deg, #06B6D4, #22D3EE); }
.grad-rose  { background: linear-gradient(135deg, #F43F5E, #FB7185); }

/* ---------- 分区标题 ---------- */
.section-title { font-size: 12.5px; font-weight: 700; color: #94A3B8; letter-spacing: .06em; text-transform: uppercase; margin: 26px 0 12px; }

/* ---------- 页面头 ---------- */
.page-hero { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.page-hero h2 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.4px; }
.page-hero p { margin: 4px 0 0; color: var(--muted); font-size: 13.5px; }

/* ---------- 杂项 ---------- */
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; }
.text-muted { color: var(--muted); }
.soft-bg { background: #F7F8FC; }
.gap-8 { gap: 8px; }

/* 让表格更清爽 */
.v-table { background: transparent !important; }
.v-table > .v-table__wrapper > table > thead > tr > th {
    background: #F7F8FC !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #64748B !important;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}
.v-table > .v-table__wrapper > table > tbody > tr > td { font-size: 13.5px; }
.v-table > .v-table__wrapper > table > tbody > tr:hover > td { background: #F9FAFD; }

/* 滚动条 */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #D8DEE9; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #C3CCDB; }
::-webkit-scrollbar-track { background: transparent; }

/* ============================================================
 * 登录页
 * ============================================================ */
.login-wrap {
    position: relative; min-height: 100vh; overflow: hidden;
    display: flex; align-items: center; justify-content: center; padding: 20px;
    background: linear-gradient(160deg, #EEF0FB 0%, #F6F4FE 45%, #F4F6FB 100%);
}
.login-glow { position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none; }
.login-glow-a { width: 460px; height: 460px; left: -120px; top: -140px; background: rgba(79, 70, 229, .30); }
.login-glow-b { width: 420px; height: 420px; right: -120px; bottom: -160px; background: rgba(124, 58, 237, .26); }

.login-card {
    position: relative; z-index: 1; width: 100%; max-width: 430px;
    background: rgba(255, 255, 255, .88) !important;
    backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, .7) !important;
    box-shadow: 0 24px 60px rgba(31, 41, 55, .18) !important;
}
.login-logo {
    width: 60px; height: 60px; margin: 0 auto 14px; border-radius: 18px;
    background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
    color: #fff; display: grid; place-items: center;
    font-size: 26px; font-weight: 800; letter-spacing: -1px;
    box-shadow: 0 12px 26px rgba(79, 70, 229, .38);
}
.login-title { font-size: 22px; font-weight: 800; letter-spacing: -.5px; }
.login-sub { font-size: 13px; color: var(--muted); margin-top: 4px; }

.login-tabs {
    display: flex; gap: 4px; padding: 4px; margin-bottom: 22px;
    background: #F1F3F9; border-radius: 12px;
}
.login-tab {
    flex: 1; border: none; background: transparent; cursor: pointer;
    padding: 9px 0; border-radius: 9px; font-size: 14px; font-weight: 600;
    color: #64748B; transition: all .18s ease; font-family: inherit;
}
.login-tab.on { background: #fff; color: var(--brand-1); box-shadow: 0 1px 4px rgba(16, 24, 40, .10); }

.login-btn { font-weight: 700; letter-spacing: .08em; height: 48px !important; }

/* 注册页：协议勾选与文档链接 */
.agree-check { margin-left: -8px; }
.agree-check .v-selection-control { min-height: 34px; }
.agree-text { font-size: 12.5px; color: #64748B; line-height: 1.5; }
.doc-link { color: var(--brand-1); font-weight: 600; text-decoration: none; }
.doc-link:hover { text-decoration: underline; }

/* 忘记密码：顶部说明条 */
.reset-tip {
    padding: 10px 12px;
    border-radius: 10px;
    background: #F5F7FF;
    border: 1px solid #E4E9FB;
    color: #475569;
    font-size: 12.5px;
    line-height: 1.6;
}

/* ============================================================
 * 控件精修（针对 Vuetify 内部结构）
 * ============================================================ */

/* ---------- 1. 输入类控件：圆角 + 柔和描边 + 聚焦光环 ---------- */
.v-field { border-radius: 12px !important; background: #fff !important; }
.v-field--variant-outlined .v-field__outline { color: var(--line-strong) !important; }
.v-field--variant-outlined:hover .v-field__outline { color: #C7D0DE !important; }
.v-field--variant-outlined.v-field--focused .v-field__outline { color: var(--brand-1) !important; }
.v-field--focused { box-shadow: 0 0 0 3px rgba(79, 70, 229, .12) !important; }
.v-field__input { font-size: 14px !important; }
.v-label { font-size: 13.5px !important; }
/* 注意：不要覆盖 __start/__end/__notch 的 border-width，
   Vuetify 只用其中 3 条边拼描边，统一成 1px 会多出竖线（已修复）。 */

/* ---------- 2. 按钮 ---------- */
.v-btn {
    font-weight: 650 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    font-size: 13.5px !important;
}
.v-btn--variant-text { border-radius: 9px !important; padding: 0 12px !important; }
.v-btn--variant-text:hover { background: rgba(15, 23, 42, .055) !important; }
.v-btn--variant-tonal { font-weight: 650 !important; }
.v-btn--size-small { height: 32px !important; }
.v-btn--size-large { height: 46px !important; }
.v-btn .v-icon { opacity: .95; }

/* ---------- 3. 表格：去掉粗边框、加大留白、行悬浮 ---------- */
.v-table { background: transparent !important; }
.v-table > .v-table__wrapper > table { border-collapse: separate !important; border-spacing: 0 !important; }
.v-table > .v-table__wrapper > table > thead > tr > th {
    background: #F7F8FC !important;
    color: #6B7280 !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase;
    padding: 13px 16px !important;
    border-bottom: 1px solid #EDF0F6 !important;
    white-space: nowrap;
    height: 44px;
}
.v-table > .v-table__wrapper > table > tbody > tr > td {
    padding: 13px 16px !important;
    font-size: 13.5px !important;
    color: #334155;
    border-bottom: 1px solid #F2F4F9 !important;
    height: 56px;
}
.v-table > .v-table__wrapper > table > tbody > tr:last-child > td { border-bottom: none !important; }
.v-table > .v-table__wrapper > table > tbody > tr { transition: background .15s ease; }
.v-table > .v-table__wrapper > table > tbody > tr:hover > td { background: #F8FAFD !important; }
.v-table > .v-table__wrapper > table > tbody > tr > td .v-btn--variant-text { margin: 0 -4px; }

/* 表格上方的工具条卡片 */
.v-card > .v-card-text.d-flex { gap: 10px; }

/* ---------- 4. 卡片标题/操作区 ---------- */
.v-card-title { font-size: 16px !important; font-weight: 750 !important; letter-spacing: -.2px; }
.v-card-actions { padding: 8px 12px 12px !important; gap: 4px; }
.v-card-item__title { font-weight: 700 !important; }

/* ---------- 5. Chip / 标签 ---------- */
.v-chip { font-weight: 650 !important; letter-spacing: 0 !important; }
.v-chip--size-small { height: 24px !important; font-size: 11.5px !important; padding: 0 9px !important; }
.v-chip--size-x-small { height: 20px !important; font-size: 11px !important; padding: 0 7px !important; }

/* ---------- 6. 分页 ---------- */
.v-pagination__item {
    border-radius: 10px !important;
    font-weight: 650 !important;
    font-size: 13.5px !important;
    min-width: 38px !important;
    height: 38px !important;
    border: 1px solid var(--line) !important;
    background: #fff !important;
    margin: 0 3px !important;
    transition: all .16s ease;
}
.v-pagination__item:hover { background: #F3F5FA !important; }
.v-pagination__item--is-active {
    background: linear-gradient(135deg, var(--brand-1), var(--brand-2)) !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: 0 6px 14px rgba(79, 70, 229, .30);
}

/* 手机端：页码块要能全部放下。
   多页时最多 8 块（‹ 1 2 3 4 … 20 ›），桌面每块 48px 会把 390px 的屏幕撑出去，
   这里把「li + 里面的按钮」一起收到 32px。
   注意：只改 li 的 min-width 没用 —— Vuetify 按钮自带 padding:0 12px，实际宽度由按钮决定。 */
@media (max-width: 768px) {
    .v-pagination__item {
        min-width: 32px !important;
        height: 34px !important;
        margin: 0 2px !important;
    }
    .v-pagination__item .v-btn,
    .v-pagination__prev .v-btn,
    .v-pagination__next .v-btn {
        width: 32px !important;
        min-width: 32px !important;
        height: 34px !important;
        padding: 0 !important;
        font-size: 12.5px !important;
    }
}

/* ---------- 7. 弹窗 / 菜单列表 ---------- */
.v-overlay__content.v-dialog > .v-card,
.v-dialog .v-card { border-radius: 20px !important; }
.v-dialog .v-card-title { padding: 20px 22px 12px !important; }
.v-dialog .v-card-actions { padding: 12px 18px 18px !important; }
.v-menu > .v-overlay__content > .v-list,
.v-list { border-radius: 14px !important; }
.v-list-item { border-radius: 10px !important; margin: 2px 6px !important; }
.v-list-item:hover > .v-list-item__overlay { opacity: .06 !important; }

/* ---------- 8. 其它 ---------- */
.v-alert { border-radius: 12px !important; font-size: 13.5px !important; }
.v-tab { text-transform: none !important; font-weight: 650 !important; letter-spacing: 0 !important; font-size: 14px !important; }
.v-avatar { font-weight: 700; }
.v-progress-linear { border-radius: 999px !important; }
.v-switch .v-label { font-size: 13.5px !important; }
.v-snackbar__wrapper { border-radius: 12px !important; font-weight: 600; }

/* 卡片内的空状态更柔和 */
.v-card .text-center.pa-10,
.v-card .text-center.pa-8 { color: #94A3B8 !important; }

/* ---------- 9. 文件选择控件 ---------- */
.v-file-input .v-field { border-radius: 12px !important; }
.v-file-input .v-field__input { min-height: 52px; padding-top: 4px; }
.v-file-input .v-chip { border-radius: 9px !important; font-weight: 650; }

/* ---------- 10. 下拉面板 / 弹出层更精致 ---------- */
.v-overlay__content > .v-list,
.v-overlay__content > .v-sheet {
    border: 1px solid var(--line) !important;
    box-shadow: 0 14px 40px rgba(16, 24, 40, .14) !important;
}
.v-select__selection { font-size: 14px; }

/* ---------- 11. 列表型卡片（我的游戏等） ---------- */
.v-card.h-100 { display: flex; flex-direction: column; }
.v-card .v-divider { border-color: #F1F3F8 !important; opacity: 1 !important; }

/* ---------- 12. 空状态图标更轻盈 ---------- */
.v-icon.mdi-48px, .v-icon[style*="font-size: 56px"] { opacity: .35; }

/* ---------- 13. 顶栏/侧栏细节 ---------- */
.app-bar .v-toolbar__content { padding: 0 16px !important; }
.app-drawer .v-navigation-drawer__content::-webkit-scrollbar { width: 5px; }

/* ============================================================
 * 14. 圆角体系统一（Vuetify 的 rounded-lg 只有 8px，偏硬）
 * ============================================================ */
.v-card { border-radius: 16px !important; }
.v-btn:not(.v-btn--icon) { border-radius: 10px !important; }
.v-chip { border-radius: 10px !important; }
.v-list { border-radius: 16px !important; }
.v-list-item { border-radius: 12px !important; }
.v-menu > .v-overlay__content > .v-list { border-radius: 16px !important; }
.v-dialog .v-card { border-radius: 20px !important; }
.login-card { border-radius: 24px !important; }
.v-alert { border-radius: 14px !important; }
.v-snackbar__wrapper { border-radius: 14px !important; }
.v-sheet.v-card { border-radius: 16px !important; }
.v-navigation-drawer { border-radius: 0 !important; }

/* ============================================================
 * 15. 移动端：表格改为卡片式堆叠（.rtable）
 * ============================================================ */
@media (max-width: 768px) {
    .v-table > .v-table__wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .v-table > .v-table__wrapper > table { min-width: 560px; }
    .v-table > .v-table__wrapper > table > thead > tr > th,
    .v-table > .v-table__wrapper > table > tbody > tr > td {
        padding: 12px 12px !important;
        white-space: nowrap;
    }
    .page-container { padding: 12px 12px 26px; }
    .stat-tile { padding: 15px 16px; }
    .stat-tile .stat-value { font-size: 23px; }
    .stat-icon { width: 46px; height: 46px; border-radius: 13px; }

    /* 卡片式表格 */
    .rtable > .v-table__wrapper { overflow: visible; }
    .rtable > .v-table__wrapper > table { min-width: 0 !important; display: block; }
    .rtable > .v-table__wrapper > table > thead { display: none; }
    .rtable > .v-table__wrapper > table > tbody { display: block; }
    .rtable > .v-table__wrapper > table > tbody > tr {
        display: block;
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 14px;
        margin-bottom: 10px;
        padding: 4px 0;
        box-shadow: var(--card-shadow);
    }
    .rtable > .v-table__wrapper > table > tbody > tr:hover > td { background: transparent !important; }
    .rtable > .v-table__wrapper > table > tbody > tr > td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        width: 100% !important;
        height: auto !important;
        border-bottom: 1px dashed #F1F3F8 !important;
        padding: 10px 14px !important;
        text-align: right;
        white-space: normal !important;
    }
    .rtable > .v-table__wrapper > table > tbody > tr > td:last-child { border-bottom: none !important; }
    .rtable > .v-table__wrapper > table > tbody > tr > td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        font-size: 12px;
        font-weight: 650;
        color: #94A3B8;
        text-align: left;
    }

    /*
     * 空状态行（colspan 单元格，如「暂无数据 / 还没有邀请记录…」）
     * 不能走上面的「标签左 + 值右」布局：它没有 data-label，
     * 被 justify-content:space-between 一挤就跑到左边/右边去了。
     * 这里让它恢复成整行居中的一段文字。
     */
    .rtable > .v-table__wrapper > table > tbody > tr > td[colspan] {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        padding: 26px 16px !important;
        border-bottom: none !important;
    }
    .rtable > .v-table__wrapper > table > tbody > tr > td[colspan]::before {
        content: none !important;
    }
}

/* ============================================================
 * 16. 排序控件（胶囊样式）
 * ============================================================ */
.sort-pill { max-width: 220px; min-width: 170px; }
.sort-pill .v-field {
    border-radius: 999px !important;
    background: #F1F3F9 !important;
    box-shadow: none !important;
    border: 1px solid transparent !important;
    transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.sort-pill .v-field:hover { background: #E9ECF5 !important; }
.sort-pill .v-field--focused {
    background: #fff !important;
    border-color: var(--brand-1) !important;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, .14) !important;
}
.sort-pill .v-field__outline { display: none !important; }
/*
 * 垂直居中：之前只把 padding-top 归零、底部仍是 Vuetify 默认的 12px，
 * 结果文字被顶到上方（实测上 8px / 下 20px）。这里把上下内边距设为对称，
 * 让 align-items:center 真正生效。
 */
.sort-pill .v-field__input { font-size: 13.5px !important; padding: 0 6px !important; }
.sort-pill .v-select__selection { font-weight: 650; color: #334155; }
.sort-pill .v-icon { color: var(--brand-1) !important; }

/* 移动端：排序控件不再限宽，避免与其他筛选控件挤在一起 */
@media (max-width: 768px) {
    .sort-pill { max-width: none; min-width: 0; width: 100%; }
}

/* 排序下拉面板 */
.sort-menu .v-list-item { border-radius: 10px !important; margin: 2px 6px !important; }
.sort-menu .v-list-item--active { background: rgba(79, 70, 229, .10) !important; color: var(--brand-1) !important; font-weight: 650; }

/* ============================================================
 * 17. 移动端列表：外层容器透明 + 行卡片更精致
 * ============================================================ */
@media (max-width: 768px) {
    /* 外层 v-card 变透明容器，避免"白卡套白卡" */
    .card-plain { background: transparent !important; border: none !important; box-shadow: none !important; }
    .card-plain > .v-divider { display: none !important; }
    .card-plain.v-card { overflow: visible !important; }

    /* 行卡片 */
    .rtable > .v-table__wrapper > table > tbody > tr {
        border-radius: 16px !important;
        padding: 2px 0 !important;
        margin-bottom: 12px !important;
        border: 1px solid #EDF0F6 !important;
        box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 4px 14px rgba(16, 24, 40, .05) !important;
    }
    .rtable > .v-table__wrapper > table > tbody > tr > td {
        border-bottom: 1px solid #F4F6FB !important;
        padding: 11px 14px !important;
        font-size: 13.5px !important;
    }
    .rtable > .v-table__wrapper > table > tbody > tr > td::before { color: #8B93A3; }

    /* 透明容器里的分页 */
    .card-plain .v-pagination { margin-top: 6px; }

    /* 工具条卡片：圆角与内边距更紧凑 */
    .page-container > .v-card:first-child .v-card-text { padding: 14px !important; }
}

/* ============================================================
 * 18. ROM 已选状态提示条
 * ============================================================ */
.rom-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 12px;
    background: #F0FDF4;
    border: 1px solid #BBF7D0;
    color: #166534;
    font-size: 13px;
    font-weight: 600;
    max-width: 100%;
    overflow: hidden;
}
.rom-chip .text-truncate { min-width: 0; }

/* ============================================================
 * 19. 会员剩余时间倒计时（精确到秒）
 * ============================================================ */
.vip-wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.vip-count { display: flex; align-items: flex-end; gap: 5px; flex-wrap: wrap; }

.vip-count .vc-group {
    display: inline-flex; align-items: baseline; gap: 1px;
    padding: 4px 9px; border-radius: 10px;
    background: #F1F3F9; border: 1px solid #E9EDF5;
}
.vip-count .vc-num {
    font-size: 19px; font-weight: 800; line-height: 1;
    letter-spacing: -.5px; color: #1E293B;
    font-variant-numeric: tabular-nums;   /* 秒数跳动时宽度不抖 */
}
.vip-count .vc-unit { font-size: 11px; font-weight: 700; color: #8B93A3; }

.vip-count .vc-perm {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px; border-radius: 999px;
    background: linear-gradient(135deg, #F59E0B, #FBBF24);
    color: #fff; font-size: 14px; font-weight: 800;
    box-shadow: 0 4px 12px rgba(245, 158, 11, .32);
}
.vip-count .vc-none { font-size: 17px; font-weight: 700; color: #94A3B8; }
.vip-count .vc-none.is-expired { color: #EF4444; }
.vc-expiry { font-size: 11.5px; color: var(--muted); }

/* 仪表盘统计卡里的倒计时更紧凑 */
.stat-tile .stat-main { min-width: 0; }
.stat-tile .stat-value.stat-vip { font-size: 15px; margin-top: 6px; }
.stat-vip .vip-count .vc-num { font-size: 17px; }
.stat-vip .vip-count .vc-group { padding: 3px 7px; border-radius: 8px; }
.stat-vip .vip-count .vc-unit { font-size: 10.5px; }

@media (max-width: 768px) {
    .vip-count .vc-num { font-size: 17px; }
    .vip-count .vc-group { padding: 3px 7px; }
    .stat-vip .vip-count .vc-num { font-size: 16px; }
}

/* ============================================================
 * 20. 危险操作卡片（注销账号）
 * ============================================================ */
.danger-card {
    border: 1px solid #FECACA !important;
    background: linear-gradient(180deg, #FFF7F7 0%, #FFFFFF 62%) !important;
}
.danger-card .v-card-title { font-size: 15px; font-weight: 700; }
.danger-card .v-card-text { padding-top: 14px !important; }
.danger-list {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.danger-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.8px;
    color: #7F1D1D;
}
.danger-list li .v-icon { color: #F87171; flex: 0 0 auto; }

/* ============================================================
 * 21. 编辑用户弹窗：永久会员 / 管理员提示条
 * ============================================================ */
.perm-note {
    padding: 10px 14px;
    border-radius: 12px;
    background: #F5F3FF;
    border: 1px solid #E4DDFB;
    color: #5B21B6;
    font-size: 13px;
    font-weight: 600;
}
.perm-note.muted {
    background: #F4F6FB;
    border-color: #E6EAF2;
    color: #7B8494;
}

/* ============================================================
 * 22. 趋势图 / 热门榜 / 驳回理由
 * ============================================================ */
.trend-svg { width: 100%; height: auto; display: block; overflow: visible; }
.trend-axis { font-size: 11px; fill: #94A3B8; font-weight: 600; }

/* 热门榜名次 */
.rank-badge {
    width: 26px; height: 26px; border-radius: 9px;
    display: grid; place-items: center;
    font-size: 12.5px; font-weight: 800;
    background: #F1F3F9; color: #64748B;
    margin-right: 12px;
}
.rank-badge.rank-1 { background: linear-gradient(135deg, #F59E0B, #FBBF24); color: #fff; }
.rank-badge.rank-2 { background: linear-gradient(135deg, #94A3B8, #CBD5E1); color: #fff; }
.rank-badge.rank-3 { background: linear-gradient(135deg, #D97706, #F59E0B); color: #fff; }

/* 我的游戏：驳回理由 */
.reject-note {
    display: flex; align-items: center; gap: 6px;
    padding: 8px 12px; border-radius: 10px;
    background: #FEF2F2; border: 1px solid #FECACA;
    color: #B91C1C; font-size: 12.5px;
}
.reject-note .v-icon { color: #EF4444; flex: 0 0 auto; }

/* 操作日志：详情列不撑破布局 */
.log-detail { font-size: 12.5px; word-break: break-all; }

/* ============================================================
 * 23. 公告 / 会员套餐卡片
 * ============================================================ */
.ann-item {
    padding: 12px 14px;
    border-radius: 12px;
    background: #F8F9FC;
    border: 1px solid #EDF0F6;
    margin-bottom: 10px;
}
.ann-item:last-child { margin-bottom: 0; }
.ann-text { font-size: 13.5px; line-height: 1.65; white-space: pre-wrap; word-break: break-word; }

.plan-card { cursor: pointer; border: 1.5px solid #EDF0F6 !important; transition: all .18s ease; }
.plan-card:hover { border-color: #C7D0E0 !important; transform: translateY(-2px); }
.plan-card.plan-on {
    border-color: var(--brand-1) !important;
    box-shadow: 0 6px 20px rgba(79, 70, 229, .16) !important;
    background: linear-gradient(180deg, #F6F5FF 0%, #FFFFFF 60%);
}
.plan-price { font-size: 30px; font-weight: 800; color: #1E293B; letter-spacing: -.8px; line-height: 1; }
.plan-price .plan-cur { font-size: 16px; font-weight: 700; margin-right: 2px; }

/* ============================================================
 * 24. 签到排行榜 / 邀请 / 运维 / 邮件模板（第四批）
 * ============================================================ */

/* 排行榜名次 */
.rank-no {
    width: 24px; height: 24px; border-radius: 8px;
    display: grid; place-items: center;
    font-size: 12px; font-weight: 800;
    background: #F1F3F9; color: #64748B;
    margin-right: 12px;
}
.rank-no.rank-top3 { background: linear-gradient(135deg, #F59E0B, #FBBF24); color: #fff; }

/* 邀请页 */
.invite-hero { background: linear-gradient(135deg, #F5F3FF 0%, #FFFFFF 70%); }
.invite-code-box {
    padding: 14px 16px; border-radius: 14px;
    background: #FFFFFF; border: 1px solid #EDF0F6;
}
.invite-code {
    font-size: 22px; font-weight: 800; letter-spacing: 2px;
    color: var(--brand-1);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.stat-big { font-size: 26px; font-weight: 800; color: #1E293B; line-height: 1.2; }

/* 系统日志查看器 */
.log-box {
    margin: 0;
    max-height: 420px;
    overflow: auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    line-height: 1.7;
    white-space: pre-wrap;
    word-break: break-all;
    color: #334155;
}
.log-box .log-error { color: #DC2626; font-weight: 600; }
.log-box .log-fatal { color: #B91C1C; font-weight: 700; background: #FEF2F2; }
.log-box .log-warn  { color: #D97706; }

/* 邮件模板卡片 */
.tpl-card { cursor: pointer; transition: all .16s ease; }
.tpl-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(15, 23, 42, .08) !important; }

/* 邮件模板预览用的 iframe（移动端要矮一些，否则弹窗会被撑满） */
.tpl-frame { width: 100%; height: 60vh; border: 1px solid #eee; border-radius: 8px; background: #fff; }

/* ============================================================
 * 25. 第四批功能的移动端适配
 * ============================================================ */
@media (max-width: 768px) {
    /* 统计大数字（邀请页等）：26px 在 3 列布局下太挤 */
    .stat-big { font-size: 20px; line-height: 1.25; }

    /* 邀请码：缩小字号 + 收紧字距，避免把操作按钮挤到下一行 */
    .invite-code { font-size: 18px; letter-spacing: 1px; }
    .invite-code-box { padding: 12px 13px; }

    /* 系统日志：手机上不需要那么高 */
    .log-box { max-height: 300px; font-size: 11.5px; }

    /* 邮件模板预览 iframe */
    .tpl-frame { height: 46vh; }

    /* 筛选/导出用的定宽输入框：手机上改为占满一行 */
    .filter-field { max-width: none !important; width: 100%; }

    /* 卡片式表格里的操作按钮不要换行成两行 */
    .rtable .v-btn + .v-btn { margin-left: 2px; }
}
.rom-chip .text-muted { color: #4B7A5E !important; }

/* ============================================================
 * 26. 移动端通用兜底（横滚 / 换行 / 弹窗 / 输入框）
 * 目的：不管哪个页面，手机上都不会出现"内容被挤出屏幕 / 只能横向拖"
 * ============================================================ */
@media (max-width: 768px) {
    /* 1) 页面内的横向排列容器一律允许换行（.flex-nowrap 例外，写死不换行的保持原样） */
    .page-container .d-flex:not(.flex-nowrap):not(.flex-column):not(.rom-chip):not(.drawer-foot) {
        flex-wrap: wrap;
    }
    /* 2) 卡片底部按钮行：允许换行 + 行间距，避免按钮被压扁 */
    .v-card-actions { flex-wrap: wrap; row-gap: 6px; }
    /* 3) 表单控件字号 ≥16px：iOS 上小于 16px 会触发页面自动放大 */
    .page-container .v-field__input,
    .page-container input,
    .page-container textarea,
    .page-container select { font-size: 16px; }
    /* 4) 弹窗：宽度绝不超出屏幕；正文超高时弹窗内部滚动（不把整个页面撑长） */
    .v-dialog > .v-overlay__content { max-width: calc(100vw - 24px) !important; }
    .v-dialog .v-card-text { max-height: 72vh; overflow-y: auto; }
    /* 5) 图片一律不溢出容器 */
    .page-container img, .page-container .v-img { max-width: 100%; }
    /* 6) 长文本 / 长链接 / 长邮箱：强制断行，别撑破卡片 */
    .page-container .text-break, .page-container .break-anywhere,
    .rtable td, .rtable .text-muted { overflow-wrap: anywhere; word-break: break-word; }
    /* 7) 分页控件在窄屏允许换行 */
    .v-pagination { flex-wrap: wrap; row-gap: 6px; }
    /* 8) 代码块 / 长串（订单号、邀请码、密钥）允许横滚而不是溢出 */
    .page-container code, .page-container pre { word-break: break-all; }
}

@media (max-width: 480px) {
    .page-container { padding: 12px 12px 26px; }
    .v-card-title { font-size: 15px; line-height: 1.4; }
    .v-btn { letter-spacing: 0; }
    /* 工具条里的搜索框：手机上整行显示，不再挤成一团 */
    .page-container .v-card:first-child .v-text-field { max-width: none !important; width: 100%; }
    /* 统计大数字再收一点 */
    .stat-big { font-size: 18px; }
}

/* 超过屏幕宽度的表格（没做卡片化的）：允许横向滑动，别撑破页面 */
@media (max-width: 768px) {
    .v-table > .v-table__wrapper { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
}

/* ============================================================
 * 27. 手机端紧凑卡片 v1（主行 + 2 列小字 + 摘要 + 展开）
 * ------------------------------------------------------------
 * 用法：v-table 加 class="rtable cards"，每行加 class="mrow"，
 *      td 按内容加语义 class：
 *        c-main  主标题（用户名/游戏名/订单号…）
 *        c-chip  状态、分组等 chip（跟在主标题同一行）
 *        c-kv    键值对（手机上自动两列一行，标签取 data-label）
 *        c-sub   一行灰色摘要（自动省略号）
 *        c-more  次要字段（默认收起，点「展开」才显示）
 *        c-act   操作行（左边「展开」，右边按钮）
 *      展开状态用 modules/mcard.js 的 useCards()。
/* 桌面端：仍是完整表格，列顺序与改动前完全一致。
 * 只有「展开」按钮和它的空表头是手机端专用的，**仅在宽屏隐藏**。 */
td.c-act, th.c-act { display: table-cell; vertical-align: middle; }
td.c-act:empty { display: none; }

@media (min-width: 769px) {
    th.c-act { display: none; }
    td.c-act > .c-toggle { display: none; }
    /* 只装了「展开」按钮的那种操作列（或空列），桌面端整列不显示，避免多出一个空白列 */
    td.c-act:not(:has(.v-btn)) { display: none; }
}

@media (max-width: 768px) {
    /* ============================================================
     * 0) 先让位：关掉第 15 节那套「一行一个字段、标签在左值在右」的旧手机卡片样式
     *    （旧规则会给每个 td 自动加 data-label 标签 + 虚线分隔，
     *      不关掉的话 .rtable.cards 会出现两套样式打架 → 就是“位置都不对”的原因）
     *    这里的优先级：本段(.rtable.cards …) > 第 15 节(.rtable …)；
     *    而下面 c-kv / c-more 的标签规则优先级又高于本段，所以该有标签的仍然有。
     * ============================================================ */
    /* 优先级说明：本条只用了 3 个 class（.rtable.cards + .v-table__wrapper），
     * 刻意做得比下面所有 .rtable.cards tr.mrow > td.c-X 规则（4 个 class）都低，
     * 因此它只能压住第 15 节的老样式，绝不会再盖掉新样式（之前"按钮不靠右"就是这里打架）。 */
    .rtable.cards > .v-table__wrapper > table > tbody > tr > td {
        display: block !important;
        width: auto !important;
        height: auto !important;
        text-align: left !important;
        justify-content: flex-start !important;
        gap: 0 !important;
        border-bottom: 0 !important;
        padding: 0 !important;
        white-space: normal !important;
    }
    .rtable.cards > .v-table__wrapper > table > tbody > tr > td::before {
        content: none !important;
    }
    /* 空状态行（colspan）：整行居中的一段灰字，不要标签 */
    .rtable.cards > .v-table__wrapper > table > tbody > tr > td[colspan] {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        padding: 24px 14px !important;
        border-bottom: 0 !important;
        color: #94A3B8 !important;
    }
    .rtable.cards > .v-table__wrapper > table > tbody > tr > td[colspan]::before { content: none !important; }

    /* 1) 拆掉表格骨架：表头隐藏，table/tbody 变普通块 */
    .rtable.cards > .v-table__wrapper > table,
    .rtable.cards > .v-table__wrapper > table > tbody { display: block !important; }
    .rtable.cards > .v-table__wrapper > table > thead { display: none !important; }

    /* 2) 一条记录 = 一张紧凑卡片 */
    .rtable.cards tr.mrow {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 2px 10px !important;
        padding: 12px !important;
        margin: 0 0 10px 0 !important;
        border: 1px solid #EDF0F6 !important;
        border-radius: 14px !important;
        background: #fff !important;
        box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 4px 14px rgba(16, 24, 40, .05) !important;
    }
    .rtable.cards tr.mrow > td {
        display: block !important;
        border-bottom: 0 !important;
        padding: 0 !important;
        font-size: 12.5px !important;
        color: #334155;
    }

    /* 3) 主标题：占满第一行剩余宽度 */
    .rtable.cards tr.mrow > td.c-main { flex: 1 1 auto !important; min-width: 0 !important; }
    .rtable.cards tr.mrow > td.c-main .c-title {
        font-size: 14px !important; font-weight: 650 !important; line-height: 1.35 !important;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .rtable.cards tr.mrow > td.c-main .c-mail {
        font-size: 11.5px !important; line-height: 1.3 !important; color: #94A3B8 !important;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
/* 4) chip：跟在主标题后面同一行，做得小一点更精致 */
    .rtable.cards tr.mrow > td.c-chip { flex: 0 0 auto !important; }

    /* 4.5) 卡片内固定排列顺序：标题 → chip → 副行(邮箱等) → 小字 → 摘要 → 展开项 → 操作行
     *      这样 DOM 里的列顺序可以完全保持原样（桌面不受影响），手机端照样好看。 */
    .rtable.cards tr.mrow > td.c-main { order: 1; }
    .rtable.cards tr.mrow > td.c-chip { order: 2; }
    .rtable.cards tr.mrow > td.c-mail { order: 3; }
    .rtable.cards tr.mrow > td.c-kv   { order: 4; }
    .rtable.cards tr.mrow > td.c-sub  { order: 5; }
    .rtable.cards tr.mrow > td.c-more { order: 6; }
    .rtable.cards tr.mrow > td.c-act  { order: 7; }

    /* 独立的副行（原来是单独一列的邮箱 / rom_code / 订单号…）：
     * 手机上独占一行、贴着主标题下面，灰字小一号 */
    .rtable.cards tr.mrow > td.c-mail {
        flex: 1 1 100% !important; min-width: 0 !important; margin-top: 2px !important;
        font-size: 11.5px !important; color: #94A3B8 !important; padding: 0 !important;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .rtable.cards tr.mrow > td.c-kv {
        flex: 1 1 42% !important; min-width: 0 !important; margin-top: 8px !important;
    }
    .rtable.cards tr.mrow > td.c-kv::before {
        content: attr(data-label) !important;
        display: block !important; font-size: 11px !important; line-height: 1.3 !important; color: #94A3B8 !important;
    }
    .rtable.cards tr.mrow > td.c-kv > * {
        font-size: 12.5px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }

    /* 6) 摘要 / 展开项 / 操作行：各占一整行 */
    .rtable.cards tr.mrow > td.c-sub,
    .rtable.cards tr.mrow > td.c-more,
    .rtable.cards tr.mrow > td.c-act { flex: 1 1 100% !important; min-width: 0 !important; }

    .rtable.cards tr.mrow > td.c-sub {
        margin-top: 8px !important; font-size: 12px !important; color: #64748B !important;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }

    /* 7) 次要字段默认收起 */
    .rtable.cards tr.mrow > td.c-more { display: none !important; margin-top: 6px !important; }
    .rtable.cards tr.mrow.open > td.c-more { display: block !important; }
    .rtable.cards tr.mrow.open > td.c-more::before {
        content: attr(data-label) !important; display: inline-block !important;
        min-width: 66px; font-size: 11px !important; color: #94A3B8 !important;
    }
    .rtable.cards tr.mrow.open > td.c-more > * { display: inline; font-size: 12.5px !important; }

    /* 8) 操作行：按钮一律靠右 */
    .rtable.cards tr.mrow > td.c-act {
        display: flex !important; align-items: center !important; justify-content: flex-end !important;
        gap: 6px !important; width: 100% !important;
        margin-top: 10px !important; padding: 9px 0 0 !important;
        border-top: 1px solid #F4F6FB !important; border-bottom: 0 !important;
        text-align: right !important;
    }
    /* 双保险：就算 justify-content 被别处的规则盖掉，第一个按钮用 auto 左边距也能顶到最右 */
    .rtable.cards tr.mrow > td.c-act > *:first-child { margin-left: auto !important; }
    /* 万一某页将来还有「展开」按钮：让它留在左边，操作按钮继续靠右 */
    .rtable.cards tr.mrow > td.c-act > .c-toggle:first-child { margin-left: 0 !important; margin-right: auto !important; }
    /* 操作列里什么都没有 → 整行不显示，别留一条空白线 */
    .rtable.cards tr.mrow > td.c-act:empty { display: none !important; }
    .rtable.cards .c-toggle {
        font-size: 12.5px; font-weight: 600; color: #64748B;
        background: none; border: 0; padding: 4px 6px; border-radius: 8px; cursor: pointer;
    }
    .rtable.cards .c-toggle:hover { background: #F8FAFC; color: var(--brand-1); }

    /* 主标题块：头像 + 文字（两行） */
    .rtable.cards tr.mrow > td.c-main .c-user { display: flex; align-items: center; gap: 8px; min-width: 0; width: 100%; }
    .rtable.cards tr.mrow > td.c-main .c-user > div { min-width: 0; }

    /* ============================================================
     * 9) 对齐样张观感（2026-10 追加）
     *    样张是「浅灰底 + 白色浮起卡片」，这里把真实页面也调成一致：
     *    a) 页面底色改成浅灰，白卡片才“浮”得起来
     *    b) 包着表格的那层 v-card 透明化，避免“白底套白卡”
     *    c) chip 压缩成样张那种 18px 小胶囊（Vuetify 默认偏大）
     * ============================================================ */
    /* a) 页面底色本来就已经是浅灰（body 的 --bg），这里不再覆盖，
     *    否则会把 .v-application 上的品牌光晕盖掉。 */

    /* b) 包着表格的那层 v-card 透明化，避免“白底套白卡” */
    .v-card:has(.rtable.cards) {
        background: transparent !important;
        box-shadow: none !important;
        border: 0 !important;
    }
    .v-card:has(.rtable.cards) > .v-divider { display: none !important; }

    .rtable.cards tr.mrow .v-chip {
        height: 18px !important;
        font-size: 11px !important;
        font-weight: 650 !important;
        border-radius: 999px !important;
    }
    .rtable.cards tr.mrow .v-chip .v-chip__content { padding: 0 8px !important; }
}

/* ============================================================
 * 28. 个人设置：背景图预览
 * ============================================================ */
.bg-preview {
    height: 130px;
    border-radius: 12px;
    border: 1px solid var(--line-strong);
    background-color: #F4F6FB;
    background-image: linear-gradient(135deg, rgba(79, 70, 229, .10), rgba(124, 58, 237, .10));
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
}