.setting-container {
    padding: 20px;
    background-color: #f4f5f7;
}

.setting-tabs {
    margin-top: calc(0px + 8px);
    margin-top: calc(var(--safe-area-top, 0px) + 8px); /* 顶部安全区（NavBar 已移除） */
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    min-height: calc(100vh - 130px);
    min-height: calc(100dvh - 130px - var(--safe-area-bottom));
}

.ant-empty {
    margin-top: 50px;
}

/* ---------- 保存悬浮按钮 ---------- */
.setting-container .ant-float-btn-primary .ant-float-btn-body {
    background: linear-gradient(135deg, #f472b6 0%, #c026d3 100%);
    box-shadow: 0 4px 20px rgba(192, 38, 211, 0.55), 0 0 0 0 rgba(244, 114, 182, 0.6);
    animation: save-btn-pulse 2.2s ease-in-out infinite;
}

.setting-container .ant-float-btn-primary .ant-float-btn-body:hover {
    background: linear-gradient(135deg, #f9a8d4 0%, #a21caf 100%);
    transform: scale(1.12);
}

@keyframes save-btn-pulse {
    0%, 100% { box-shadow: 0 4px 20px rgba(192, 38, 211, 0.55), 0 0 0 0 rgba(244, 114, 182, 0.6); }
    50%       { box-shadow: 0 4px 28px rgba(192, 38, 211, 0.70), 0 0 0 10px rgba(244, 114, 182, 0); }
}

/* ---------- 导入悬浮按钮（冰封） ---------- */
.setting-container .import-float-btn .ant-float-btn-body {
    background: linear-gradient(135deg, #67e8f9 0%, #0369a1 100%);
    box-shadow: 0 4px 20px rgba(3, 105, 161, 0.50), 0 0 0 0 rgba(103, 232, 249, 0.6);
    animation: import-btn-pulse 2.2s ease-in-out infinite;
}

.setting-container .import-float-btn .ant-float-btn-body .ant-float-btn-icon {
    color: #fff;
}

.setting-container .import-float-btn .ant-float-btn-body:hover {
    background: linear-gradient(135deg, #a5f3fc 0%, #0284c7 100%);
    transform: scale(1.12);
}

@keyframes import-btn-pulse {
    0%, 100% { box-shadow: 0 4px 20px rgba(3, 105, 161, 0.50), 0 0 0 0 rgba(103, 232, 249, 0.6); }
    50%       { box-shadow: 0 4px 28px rgba(3, 105, 161, 0.70), 0 0 0 10px rgba(103, 232, 249, 0); }
}

/* ============================
   活动配置页
   Mobile-first responsive
   ============================ */

/* 页面容器 */
.activityPage {
    position: relative;
}

/* 搜索栏 - 吸顶 */
.searchBar {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 10;
    padding: 8px 0 12px;
    background: linear-gradient(to bottom, #fff 85%, transparent);
}

.searchBar .ant-input-search {
    max-width: 100%;
}

/* 无结果 */
.emptyResult {
    padding: 40px 0;
    text-align: center;
    color: #bfbfbf;
    font-size: 14px;
}

/* ── 分类区块 ── */
.categorySection {
    margin-bottom: 20px;
}

.categoryHeader {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    font-weight: 700;
    color: #262626;
    padding: 8px 0 6px;
    margin-bottom: 8px;
    border-bottom: 2px solid #e8e8e8;
    letter-spacing: 1px;
    -webkit-user-select: none;
            user-select: none;
}

.categoryCount {
    margin-left: auto;
    font-size: 12px;
    font-weight: 400;
    color: #bfbfbf;
}

/* 活动面板内 FormItem 居中对齐 */
.activityCollapse .ant-collapse-content-box .formItemCenter {
    align-items: center;
}

/* ── 活动折叠面板 ── */
.activityCollapse {
    background: transparent;
    border: none;
}

.activityCollapse .ant-collapse-item {
    margin-bottom: 8px;
    border: 1px solid #f0f0f0;
    border-radius: 8px !important;
    overflow: hidden;
    background: #fff;
    transition: box-shadow 0.2s;
}

.activityCollapse .ant-collapse-item:last-child {
    border-radius: 8px !important;
}

.activityCollapse .ant-collapse-item-active {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.activityCollapse .ant-collapse-header {
    padding: 10px 16px !important;
    font-weight: 500;
    font-size: 15px;
    align-items: center !important;
}

.activityCollapse .ant-collapse-content-box {
    padding: 4px 16px 12px !important;
}

/* 面板标题中的副标题 */
.panelSubtitle {
    font-size: 12px;
    font-weight: 400;
    color: #8c8c8c;
    margin-left: 8px;
}

/* 面板标题中的标签 (如"测试版") */
.panelTag {
    margin-left: 8px;
}

/* 面板标题前的绿色标识：该活动已开启自动化 */
.panelActiveDot {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 8px;
    border-radius: 50%;
    background: #52c41a;
    box-shadow: 0 0 0 3px rgba(82, 196, 26, 0.18);
    vertical-align: middle;
    position: relative;
    top: -1px;
    cursor: help;
}

/* ── 子分组标题 (如深空纪元) ── */
.subSectionHeader {
    display: flex;
    align-items: center;
    gap: 8px;
    border-left: 3px solid #69b1ff;
    padding-left: 10px;
    padding-top: 4px;
    padding-bottom: 4px;
    margin: 12px 0 8px;
    background: #f0f5ff;
    border-radius: 0 6px 6px 0;
}

.subSectionTitle {
    font-size: 13px;
    font-weight: 500;
    color: #1d39c4;
}

.subSectionSubtitle {
    font-size: 11px;
    color: #8c8c8c;
}

/* ── 提示信息条 ── */
.infoTip {
    background: #f0f5ff;
    border: 1px solid #d6e4ff;
    border-radius: 6px;
    padding: 6px 12px;
    margin: 8px 0 4px;
    font-size: 12px;
}

.warningTip {
    background: #fffbe6;
    border: 1px solid #ffe58f;
    border-radius: 6px;
    padding: 8px 12px;
    margin-bottom: 12px;
    font-size: 13px;
}

/* ── 明星对对碰技能组件 ── */
.skillGrid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.skillItem {
    display: flex;
    align-items: center;
    background: #fafafa;
    border-radius: 6px;
    padding: 6px 10px;
    min-width: 130px;
}

.skillName {
    margin-right: 8px;
    white-space: nowrap;
}

.skillInput {
    width: 55px;
}

/* ── 第六号当铺事件选择 ── */
.eventSelectRow {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* ── 功夫英雄黑名单标签 ── */
.blacklistTag {
    display: inline-flex;
    align-items: center;
    background: #f5f5f5;
    border-radius: 4px;
    padding: 0 6px;
    margin: 2px 4px 2px 0;
    font-size: 12px;
    line-height: 22px;
}

.blacklistTagClose {
    margin-left: 4px;
    cursor: pointer;
    color: #999;
}

/* ── 重置按钮 ── */
.resetLink {
    font-size: 12px;
    color: #8bb0d6;
    cursor: pointer;
}

.resetLink:hover {
    color: #1890ff;
}

/* ── 通用 ── */
.todoPlaceholder {
    font-style: italic;
    color: #888;
}

/* ── 活动页 Responsive ── */

/* 小屏手机 (≤375px) */
@media (max-width: 375px) {
    .activityCollapse .ant-collapse-header {
        padding: 8px 10px !important;
        font-size: 14px;
    }

    .activityCollapse .ant-collapse-content-box {
        padding: 4px 10px 10px !important;
    }

    .skillGrid {
        flex-direction: column;
    }

    .skillItem {
        min-width: 0;
        min-width: initial;
        width: 100%;
    }

    .eventSelectRow {
        flex-wrap: wrap;
    }

    .categoryHeader {
        font-size: 14px;
    }
}

/* 普通移动端 (≤768px) */
@media (max-width: 768px) {
    .searchBar {
        padding: 6px 0 10px;
    }

    .activityCollapse .ant-collapse-header {
        padding: 8px 12px !important;
        font-size: 14px;
    }

    .activityCollapse .ant-collapse-content-box {
        padding: 4px 12px 10px !important;
    }

    .subSectionHeader {
        margin: 8px 0 6px;
    }

    .skillGrid {
        gap: 6px;
    }

    .skillItem {
        min-width: 120px;
        padding: 4px 8px;
    }
}

/* 模态框样式 */
.hero-beauty-viewer-modal .ant-modal-content {
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.hero-beauty-viewer-modal .ant-modal-body {
    flex: 1 1;
    overflow: hidden;
    padding: 16px;
}

/* 加载和空状态 */
.viewer-loading,
.viewer-empty {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 200px;
}

/* 内容区域 */
.viewer-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* 统计卡片 */
.viewer-stats .ant-card-body {
    padding: 12px;
}

.viewer-stats .ant-statistic-title {
    font-size: 12px;
    margin-bottom: 4px;
}

.viewer-stats .ant-statistic-content {
    font-size: 20px;
}

/* 工具栏 */
.viewer-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.viewer-search {
    flex: 1 1;
    max-width: 200px;
}

/* 内容体 */
.viewer-body {
    flex: 1 1;
    overflow-y: auto;
    max-height: 350px;
}

/* 卡片网格 */
.viewer-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    grid-gap: 12px;
    gap: 12px;
}

.viewer-card {
    transition: all 0.2s;
}

.viewer-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.viewer-card.top-card {
    border-color: #faad14;
}

.viewer-card .card-title {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100px;
    display: inline-block;
    vertical-align: middle;
}

.viewer-card .rank-badge {
    color: #999;
    font-size: 12px;
}

.viewer-card .card-body {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.top-rank {
    font-weight: bold;
}

/* 移动端适配 */
@media (max-width: 576px) {
    .hero-beauty-viewer-modal .ant-modal {
        margin: 0;
        max-width: 100%;
        top: 0;
        padding: 0;
    }

    .hero-beauty-viewer-modal .ant-modal-content {
        border-radius: 0;
        height: 100vh;
        height: var(--app-vh, 100vh);
        max-height: 100vh;
        max-height: var(--app-vh, 100vh);
    }

    .viewer-stats .ant-statistic-content {
        font-size: 16px;
    }

    .viewer-stats .ant-statistic-title {
        font-size: 11px;
    }

    .viewer-toolbar {
        flex-wrap: wrap;
    }

    .viewer-search {
        max-width: none;
        flex-basis: 100%;
        order: 2;
    }

    .viewer-body {
        max-height: calc(100vh - 380px);
        max-height: calc(var(--app-vh, 100vh) - 380px);
    }

    .viewer-card-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .viewer-card .card-title {
        max-width: 80px;
    }

    .viewer-card .ant-card-head-title {
        font-size: 13px;
    }

    .viewer-card .ant-tag {
        font-size: 11px;
        padding: 0 4px;
    }
}

/* TeamBuilder 组件样式 */

.TeamBuilder_teamBuilder__02J1h {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.TeamBuilder_teamCard__kM8C5 {
  background: #fafafa;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  padding: 12px;
}

.TeamBuilder_teamHeader__vtWU- {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.TeamBuilder_teamTitle__Gz0aP {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.TeamBuilder_teamName__vdpFn {
  font-weight: 600;
  font-size: 14px;
  color: #333;
}

.TeamBuilder_teamCount__jKlmC {
  font-size: 12px;
  color: #999;
}

.TeamBuilder_teamAbility__MdIPD {
  font-size: 11px;
  color: #52c41a;
  margin-bottom: 8px;
}

.TeamBuilder_teamActions__P1Iiu {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.TeamBuilder_teamActions__P1Iiu .ant-btn-link {
  padding: 0 4px;
  height: 22px;
  font-size: 14px;
}

.TeamBuilder_heroList__l9LV6 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 6px;
  gap: 6px;
  min-height: 32px;
}

.TeamBuilder_heroTag__hwxJl {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 6px;
  border-radius: 4px;
  background-color: #e6f7ff;
  border-color: #91d5ff;
  margin: 0;
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
}

.TeamBuilder_heroTag__hwxJl .ant-tag-close-icon {
  margin-left: 4px;
  font-size: 10px;
}

.TeamBuilder_heroTagName__IRbZW {
  font-weight: 500;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
}

.TeamBuilder_heroTagLevel__noFMZ {
  font-size: 10px;
  color: #888;
  flex-shrink: 0;
}

.TeamBuilder_addTag__xmQSL {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 3px 6px;
  border-radius: 4px;
  border: 1px dashed #d9d9d9;
  background: transparent;
  cursor: pointer;
  font-size: 11px;
  color: #999;
  margin: 0;
  grid-column: span 2;
}

.TeamBuilder_addTag__xmQSL:hover {
  border-color: #1890ff;
  color: #1890ff;
}

.TeamBuilder_inspireCheckbox__LLvEv {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed #e8e8e8;
}

.TeamBuilder_inspireCheckbox__LLvEv .ant-checkbox-wrapper {
  font-size: 12px;
}

.TeamBuilder_newTeamButton__yZwO4 {
  margin-top: 4px;
}

.TeamBuilder_modalTitle__Cku0G {
  display: flex;
  align-items: center;
  gap: 16px;
}

.TeamBuilder_searchInput__9naky {
  width: 240px;
}

.TeamBuilder_modal__eF6i1 {
  width: 760px;
}


/* 模态框样式 */
.hero-beauty-picker-modal .ant-modal-content {
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.hero-beauty-picker-modal .ant-modal-body {
    flex: 1 1;
    overflow: hidden;
    padding: 16px;
}

/* 加载状态 */
.picker-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
}

/* 空状态 */
.picker-empty {
    text-align: center;
    padding: 20px;
}

.picker-empty .tip {
    color: #52c41a;
    font-size: 12px;
    margin-top: 8px;
}

/* 内容区域 */
.picker-content {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* 工具栏 */
.picker-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    gap: 12px;
}

.picker-search {
    flex: 1 1;
    max-width: 200px;
}

/* 内容体 */
.picker-body {
    flex: 1 1;
    overflow-y: auto;
    max-height: 400px;
}

/* 卡片网格视图 */
.picker-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    grid-gap: 8px;
    gap: 8px;
    padding: 4px;
}

.picker-card {
    position: relative;
    padding: 12px 8px;
    border: 2px solid #f0f0f0;
    border-radius: 8px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    background: #fff;
}

.picker-card:hover {
    border-color: #1890ff;
    box-shadow: 0 2px 8px rgba(24, 144, 255, 0.15);
}

.picker-card.checked {
    border-color: #52c41a;
    background: #f6ffed;
}

.picker-card .check-icon {
    position: absolute;
    top: 4px;
    right: 4px;
    color: #52c41a;
    font-size: 16px;
}

.picker-card .card-name {
    font-weight: 500;
    font-size: 13px;
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.picker-card .card-stats {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
}

.picker-card .card-tag {
    margin: 0;
    font-size: 11px;
    padding: 0 4px;
    line-height: 18px;
}

/* 列表视图 */
.picker-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.picker-list-item {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid #f0f0f0;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    gap: 12px;
}

.picker-list-item:hover {
    background: #fafafa;
}

.picker-list-item.checked {
    background: #f6ffed;
    border-color: #b7eb8f;
}

.picker-list-item .list-name {
    flex: 1 1;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.picker-list-item .list-tags {
    flex-shrink: 0;
}

/* 底部按钮 */
.picker-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-left {
    display: flex;
    gap: 8px;
}

.footer-right {
    display: flex;
    gap: 8px;
}

/* 移动端适配 */
@media (max-width: 576px) {
    .hero-beauty-picker-modal .ant-modal {
        margin: 0;
        max-width: 100%;
        top: 0;
        padding: 0;
    }

    .hero-beauty-picker-modal .ant-modal-content {
        border-radius: 0;
        height: 100vh;
        height: var(--app-vh, 100vh);
        max-height: 100vh;
        max-height: var(--app-vh, 100vh);
    }

    .picker-toolbar {
        flex-wrap: wrap;
    }

    .picker-search {
        max-width: none;
        order: 2;
        flex-basis: 100%;
    }

    .picker-body {
        max-height: calc(100vh - 280px);
        max-height: calc(var(--app-vh, 100vh) - 280px);
    }

    .picker-card-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .picker-card {
        padding: 10px 6px;
    }

    .picker-card .card-name {
        font-size: 12px;
    }

    .picker-list-item .list-tags .ant-tag {
        font-size: 11px;
        padding: 0 4px;
    }

    .picker-footer {
        flex-direction: column;
        gap: 12px;
    }

    .footer-left, .footer-right {
        width: 100%;
        justify-content: center;
    }
}

/* 超小屏幕 */
@media (max-width: 375px) {
    .picker-card-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 工会副业配置组件样式 - 移动端优化 */
.union-trade-route-config {
  margin-bottom: 16px;
}

.union-trade-route-config .ant-card {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  border: 1px solid #e8e8e8;
}

.union-trade-route-config .ant-card-head {
  background: #fafafa;
  border-bottom: 1px solid #e8e8e8;
  font-weight: 500;
  padding: 8px 16px;
  min-height: auto;
}

.union-trade-route-config .ant-card-head-title {
  font-size: 14px;
  font-weight: 500;
}

.union-trade-route-config .ant-card-body {
  padding: 12px;
}

/* 移动端优化：减小间距和字体 */
.union-trade-route-config .ant-form-item {
  margin-bottom: 8px;
}

.union-trade-route-config .ant-form-item-label {
  font-size: 12px;
}

.union-trade-route-config .ant-input-number {
  font-size: 12px;
}

.union-trade-route-config .ant-radio-button-wrapper {
  font-size: 11px;
  padding: 2px 8px;
  height: 28px;
  line-height: 24px;
}

.union-trade-route-config .ant-switch {
  transform: scale(0.9);
}

/* 副业卡片样式 */
.union-trade-route-config .sideline-card {
  border: 1px solid #f0f0f0;
  border-radius: 6px;
  padding: 8px;
  margin-bottom: 8px;
  transition: all 0.2s;
}

.union-trade-route-config .sideline-card:hover {
  border-color: #d9d9d9;
}

.union-trade-route-config .sideline-card.has-config {
  background: #fafafa;
  border-color: #d9d9d9;
}

.union-trade-route-config .sideline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
}

.union-trade-route-config .sideline-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.union-trade-route-config .sideline-name {
  font-size: 14px;
  font-weight: 500;
  color: #333;
}

.union-trade-route-config .sideline-source {
  font-size: 10px;
  color: #999;
  padding: 1px 4px;
  border-radius: 2px;
}

.union-trade-route-config .sideline-source.personal {
  background: #e6f7ff;
  color: #1890ff;
}

.union-trade-route-config .sideline-source.global {
  background: #f6f6f6;
  color: #666;
}

.union-trade-route-config .sideline-status {
  display: flex;
  align-items: center;
  gap: 8px;
}

.union-trade-route-config .sideline-status-text {
  font-size: 12px;
}

.union-trade-route-config .sideline-status-text.enabled {
  color: #52c41a;
}

.union-trade-route-config .sideline-status-text.disabled {
  color: #ff4d4f;
}

.union-trade-route-config .sideline-expand-icon {
  font-size: 12px;
  color: #999;
}

.union-trade-route-config .sideline-summary {
  font-size: 11px;
  color: #666;
  margin-top: 4px;
}

.union-trade-route-config .sideline-config {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #f0f0f0;
}

.union-trade-route-config .config-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 8px;
  gap: 8px;
  margin-bottom: 8px;
}

.union-trade-route-config .config-item {
  margin-bottom: 8px;
}

.union-trade-route-config .config-label {
  font-size: 12px;
  color: #666;
  margin-bottom: 4px;
}

.union-trade-route-config .config-switches {
  display: flex;
  align-items: center;
  gap: 8px;
}

.union-trade-route-config .config-switches span {
  font-size: 10px;
  color: #666;
}

.union-trade-route-config .reset-button {
  padding: 0;
  height: auto;
  font-size: 11px;
}

/* 状态预览网格 */
.union-trade-route-config .status-preview {
  font-size: 12px;
  color: #999;
}

.union-trade-route-config .status-preview-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 4px;
  gap: 4px;
  margin-top: 8px;
}

.union-trade-route-config .status-preview-item {
  padding: 4px 6px;
  background: #f5f5f5;
  border-radius: 4px;
  font-size: 11px;
}

.union-trade-route-config .status-preview-item .name {
  font-weight: 500;
  color: #333;
}

.union-trade-route-config .status-preview-item .status {
  color: #666;
}

/* 批量操作按钮 */
.union-trade-route-config .batch-controls {
  margin-bottom: 12px;
}

.union-trade-route-config .batch-controls .ant-btn {
  margin-right: 8px;
}

/* 响应式：小屏幕优化 */
@media (max-width: 480px) {
  .union-trade-route-config .config-grid {
    grid-template-columns: 1fr;
  }
  
  .union-trade-route-config .ant-radio-button-wrapper {
    font-size: 10px;
    padding: 2px 6px;
  }
  
  .union-trade-route-config .sideline-name {
    font-size: 13px;
  }
  
  .union-trade-route-config .status-preview-grid {
    grid-template-columns: 1fr;
  }
}

/* AutoFeatureTip 组件样式 */

/* Modal 覆盖样式 */
.auto-feature-tip-modal .ant-modal-content {
    border-radius: 16px;
    padding: 24px 20px;
}

.auto-feature-tip-confirm .ant-modal-content {
    border-radius: 16px;
    padding: 0;
}

.auto-feature-tip-confirm .ant-modal-confirm-body {
    display: block;
}

.auto-feature-tip-confirm .ant-modal-confirm-btns {
    margin-top: 0;
    display: flex;
    gap: 12px;
    justify-content: center;
    padding: 0 20px 20px;
}

.auto-feature-tip-confirm .ant-btn {
    flex: 1 1;
    height: 40px;
    border-radius: 20px;
    font-size: 15px;
}

/* 内容区域 */
.auto-feature-tip-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.auto-feature-tip-content.standalone {
    padding: 24px 20px 16px;
}

/* 图标 */
.auto-feature-tip-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.auto-feature-tip-icon .anticon {
    font-size: 28px;
    color: #fff;
}

/* 标题 */
.auto-feature-tip-title {
    font-size: 18px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.85);
    margin-bottom: 12px;
}

/* 描述文字 */
.auto-feature-tip-desc {
    line-height: 1.8;
    margin-bottom: 8px;
}

/* 额外描述 */
.auto-feature-tip-extra {
    background: #f5f5f5;
    border-radius: 8px;
    padding: 8px 12px;
    margin-top: 8px;
    max-width: 100%;
}

/* 按钮组 */
.auto-feature-tip-actions {
    display: flex;
    gap: 12px;
    width: 100%;
    margin-top: 20px;
}

.auto-feature-tip-btn {
    flex: 1 1;
    height: 40px;
    border-radius: 20px;
    border: none;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.auto-feature-tip-btn.cancel {
    background: #f0f0f0;
    color: rgba(0, 0, 0, 0.65);
}

.auto-feature-tip-btn.cancel:hover {
    background: #e8e8e8;
}

.auto-feature-tip-btn.confirm {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
}

.auto-feature-tip-btn.confirm:hover {
    opacity: 0.9;
}

/* 移动端适配 */
@media screen and (max-width: 480px) {
    .auto-feature-tip-modal .ant-modal-content,
    .auto-feature-tip-confirm .ant-modal-content {
        border-radius: 12px;
        padding: 20px 16px;
    }

    .auto-feature-tip-content.standalone {
        padding: 20px 16px 12px;
    }

    .auto-feature-tip-icon {
        width: 48px;
        height: 48px;
        margin-bottom: 12px;
    }

    .auto-feature-tip-icon .anticon {
        font-size: 24px;
    }

    .auto-feature-tip-title {
        font-size: 16px;
        margin-bottom: 10px;
    }

    .auto-feature-tip-desc {
        font-size: 13px;
    }

    .auto-feature-tip-btn {
        height: 36px;
        font-size: 14px;
    }
}

*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}/*
! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com
*//*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */ /* 3 */
  tab-size: 4; /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
  /* iOS Safe Area 支持 */
  body {
    padding-left: env(safe-area-inset-left, 0px);
    padding-left: var(--safe-area-left);
    padding-right: env(safe-area-inset-right, 0px);
    padding-right: var(--safe-area-right);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    padding-bottom: var(--safe-area-bottom);
  }

  /* iOS/PWA 窗口才使用顶部安全区 */
  @media (display-mode: standalone) {
    body {
      padding-top: env(safe-area-inset-top, 0px);
      padding-top: var(--safe-area-top);
    }
  }

  /* iOS 平滑滚动 */
  * {
    -webkit-overflow-scrolling: touch;
  }

  /* 防止 iOS 输入框放大 */
  input,
  textarea,
  select {
    font-size: 16px !important;
  }
.visible {
  visibility: visible;
}
.static {
  position: static;
}
.fixed {
  position: fixed;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.-right-2 {
  right: -0.5rem;
}
.-top-2 {
  top: -0.5rem;
}
.mx-2 {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}
.my-2 {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.my-3 {
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}
.my-4 {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.mb-0 {
  margin-bottom: 0px;
}
.mb-1 {
  margin-bottom: 0.25rem;
}
.mb-2 {
  margin-bottom: 0.5rem;
}
.mb-3 {
  margin-bottom: 0.75rem;
}
.mb-4 {
  margin-bottom: 1rem;
}
.ml-1 {
  margin-left: 0.25rem;
}
.ml-2 {
  margin-left: 0.5rem;
}
.ml-auto {
  margin-left: auto;
}
.mr-0 {
  margin-right: 0px;
}
.mr-2 {
  margin-right: 0.5rem;
}
.mt-0\.5 {
  margin-top: 0.125rem;
}
.mt-1 {
  margin-top: 0.25rem;
}
.mt-2 {
  margin-top: 0.5rem;
}
.mt-4 {
  margin-top: 1rem;
}
.mt-8 {
  margin-top: 2rem;
}
.block {
  display: block;
}
.inline-block {
  display: inline-block;
}
.inline {
  display: inline;
}
.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}
.table {
  display: table;
}
.\!grid {
  display: grid !important;
}
.grid {
  display: grid;
}
.hidden {
  display: none;
}
.h-12 {
  height: 3rem;
}
.h-8 {
  height: 2rem;
}
.min-h-screen {
  min-height: 100vh;
}
.w-12 {
  width: 3rem;
}
.w-2\/5 {
  width: 40%;
}
.w-20 {
  width: 5rem;
}
.w-24 {
  width: 6rem;
}
.w-28 {
  width: 7rem;
}
.w-3\/5 {
  width: 60%;
}
.w-32 {
  width: 8rem;
}
.w-40 {
  width: 10rem;
}
.w-44 {
  width: 11rem;
}
.w-5 {
  width: 1.25rem;
}
.w-8 {
  width: 2rem;
}
.w-full {
  width: 100%;
}
.min-w-0 {
  min-width: 0px;
}
.min-w-44 {
  min-width: 11rem;
}
.min-w-\[200px\] {
  min-width: 200px;
}
.flex-1 {
  flex: 1 1;
}
.flex-shrink-0 {
  flex-shrink: 0;
}
.shrink-0 {
  flex-shrink: 0;
}
.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.cursor-help {
  cursor: help;
}
.cursor-pointer {
  cursor: pointer;
}
.resize {
  resize: both;
}
.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.flex-col {
  flex-direction: column;
}
.flex-wrap {
  flex-wrap: wrap;
}
.\!flex-nowrap {
  flex-wrap: nowrap !important;
}
.flex-nowrap {
  flex-wrap: nowrap;
}
.items-start {
  align-items: flex-start;
}
.items-center {
  align-items: center;
}
.items-baseline {
  align-items: baseline;
}
.items-stretch {
  align-items: stretch;
}
.justify-start {
  justify-content: flex-start;
}
.justify-end {
  justify-content: flex-end;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.gap-1 {
  gap: 0.25rem;
}
.gap-1\.5 {
  gap: 0.375rem;
}
.gap-2 {
  gap: 0.5rem;
}
.gap-3 {
  gap: 0.75rem;
}
.gap-4 {
  gap: 1rem;
}
.space-x-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(1rem * var(--tw-space-x-reverse));
  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-y-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.space-y-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}
.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.space-y-6 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-x-auto {
  overflow-x: auto;
}
.whitespace-normal {
  white-space: normal;
}
.whitespace-nowrap {
  white-space: nowrap;
}
.whitespace-pre-wrap {
  white-space: pre-wrap;
}
.break-words {
  overflow-wrap: break-word;
}
.break-all {
  word-break: break-all;
}
.rounded {
  border-radius: 0.25rem;
}
.rounded-full {
  border-radius: 9999px;
}
.rounded-lg {
  border-radius: 0.5rem;
}
.rounded-r {
  border-top-right-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
}
.rounded-t-lg {
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}
.border {
  border-width: 1px;
}
.border-2 {
  border-width: 2px;
}
.border-b {
  border-bottom-width: 1px;
}
.border-l {
  border-left-width: 1px;
}
.border-l-2 {
  border-left-width: 2px;
}
.border-l-4 {
  border-left-width: 4px;
}
.border-r {
  border-right-width: 1px;
}
.border-t {
  border-top-width: 1px;
}
.border-dashed {
  border-style: dashed;
}
.border-blue-400 {
  --tw-border-opacity: 1;
  border-color: rgb(96 165 250 / 1);
  border-color: rgb(96 165 250 / var(--tw-border-opacity, 1));
}
.border-blue-500 {
  --tw-border-opacity: 1;
  border-color: rgb(59 130 246 / 1);
  border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
}
.border-gray-100 {
  --tw-border-opacity: 1;
  border-color: rgb(243 244 246 / 1);
  border-color: rgb(243 244 246 / var(--tw-border-opacity, 1));
}
.border-gray-200 {
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / 1);
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}
.border-gray-300 {
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / 1);
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}
.border-green-200 {
  --tw-border-opacity: 1;
  border-color: rgb(187 247 208 / 1);
  border-color: rgb(187 247 208 / var(--tw-border-opacity, 1));
}
.border-orange-500 {
  --tw-border-opacity: 1;
  border-color: rgb(249 115 22 / 1);
  border-color: rgb(249 115 22 / var(--tw-border-opacity, 1));
}
.border-red-500 {
  --tw-border-opacity: 1;
  border-color: rgb(239 68 68 / 1);
  border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
}
.bg-blue-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(239 246 255 / 1);
  background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
}
.bg-gray-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / 1);
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}
.bg-gray-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / 1);
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.bg-green-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(240 253 244 / 1);
  background-color: rgb(240 253 244 / var(--tw-bg-opacity, 1));
}
.bg-orange-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(249 115 22 / 1);
  background-color: rgb(249 115 22 / var(--tw-bg-opacity, 1));
}
.bg-red-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 226 226 / 1);
  background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
}
.bg-red-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 242 242 / 1);
  background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
}
.bg-red-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / 1);
  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
}
.bg-red-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / 1);
  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
}
.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / 1);
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.p-2 {
  padding: 0.5rem;
}
.p-3 {
  padding: 0.75rem;
}
.p-4 {
  padding: 1rem;
}
.px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
.px-1\.5 {
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}
.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}
.py-0\.5 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}
.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.pb-2 {
  padding-bottom: 0.5rem;
}
.pb-20 {
  padding-bottom: 5rem;
}
.pl-3 {
  padding-left: 0.75rem;
}
.pt-2 {
  padding-top: 0.5rem;
}
.pt-3 {
  padding-top: 0.75rem;
}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}
.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}
.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}
.font-bold {
  font-weight: 700;
}
.font-medium {
  font-weight: 500;
}
.font-normal {
  font-weight: 400;
}
.font-semibold {
  font-weight: 600;
}
.italic {
  font-style: italic;
}
.tabular-nums {
  --tw-numeric-spacing: tabular-nums;
  font-feature-settings: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}
.leading-relaxed {
  line-height: 1.625;
}
.text-blue-500 {
  --tw-text-opacity: 1;
  color: rgb(59 130 246 / 1);
  color: rgb(59 130 246 / var(--tw-text-opacity, 1));
}
.text-blue-700 {
  --tw-text-opacity: 1;
  color: rgb(29 78 216 / 1);
  color: rgb(29 78 216 / var(--tw-text-opacity, 1));
}
.text-gray-400 {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / 1);
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.text-gray-500 {
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / 1);
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.text-gray-600 {
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / 1);
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.text-gray-700 {
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / 1);
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.text-gray-800 {
  --tw-text-opacity: 1;
  color: rgb(31 41 55 / 1);
  color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}
.text-gray-900 {
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / 1);
  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.text-green-700 {
  --tw-text-opacity: 1;
  color: rgb(21 128 61 / 1);
  color: rgb(21 128 61 / var(--tw-text-opacity, 1));
}
.text-orange-500 {
  --tw-text-opacity: 1;
  color: rgb(249 115 22 / 1);
  color: rgb(249 115 22 / var(--tw-text-opacity, 1));
}
.text-red-500 {
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / 1);
  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}
.text-red-600 {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / 1);
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}
.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / 1);
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.line-through {
  -webkit-text-decoration-line: line-through;
          text-decoration-line: line-through;
}
.shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-md {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.outline {
  outline-style: solid;
}
.ring-2 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-indigo-600 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(79 70 229 / var(--tw-ring-opacity, 1));
}
.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.grayscale {
  --tw-grayscale: grayscale(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.transition {
  transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-colors {
  transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
/* 全局视口高度工具类 - 自动回退 */
/* 带 Safe Area 的高度 */
/* Safe Area 边距工具类 */

/* 移动端适配 - CSS 变量 */
:root {
  /* 动态视口高度（兼容旧浏览器） */
  --vh-fallback: 1vh;
  --vh-dynamic: 1dvh;
  
  /* 安全区域 */
  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-left: env(safe-area-inset-left, 0px);
  --safe-area-right: env(safe-area-inset-right, 0px);
}
.hover\:border-gray-300:hover {
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / 1);
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}
.hover\:border-red-300:hover {
  --tw-border-opacity: 1;
  border-color: rgb(252 165 165 / 1);
  border-color: rgb(252 165 165 / var(--tw-border-opacity, 1));
}
.hover\:bg-orange-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(234 88 12 / 1);
  background-color: rgb(234 88 12 / var(--tw-bg-opacity, 1));
}
.hover\:bg-red-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(185 28 28 / 1);
  background-color: rgb(185 28 28 / var(--tw-bg-opacity, 1));
}
.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.active\:bg-gray-50:active {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / 1);
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.disabled\:text-gray-400:disabled {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / 1);
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
@media (min-width: 640px) {

  .sm\:mx-6 {
    margin-left: 1.5rem;
    margin-right: 1.5rem;
  }

  .sm\:w-28 {
    width: 7rem;
  }

  .sm\:w-32 {
    width: 8rem;
  }

  .sm\:w-40 {
    width: 10rem;
  }

  .sm\:w-auto {
    width: auto;
  }

  .sm\:flex-none {
    flex: none;
  }

  .sm\:flex-row {
    flex-direction: row;
  }

  .sm\:items-center {
    align-items: center;
  }

  .sm\:gap-3 {
    gap: 0.75rem;
  }
}
@media (min-width: 768px) {

  .md\:flex-row {
    flex-direction: row;
  }
}
@media (prefers-color-scheme: dark) {

  .dark\:border-gray-700 {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / 1);
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
  }
}
/* 全局样式 */
body {
    margin: 0;
    font-family: "Arial", sans-serif;
    background-color: #f4f5f7;
    
}

/* 登录页面容器 */
.login-page {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    min-height: 100dvh;
    min-height: var(--app-vh, 100vh);
}

/* 登录表单容器 */
.login-container {
    background-color: #ffffff;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    width: 400px;
    backdrop-filter: blur(10px); /* 磨砂模糊效果 */
    -webkit-backdrop-filter: blur(10px); /* 兼容Safari */
}

@media (max-width: 430px) {
    .login-container {
        padding: 1rem;
        width: 80%; /* 减少宽度以适应小屏 */
    }
}

/* Tabs样式 */
.auth-tabs {
    width: 100%;
}

.auth-tabs .ant-tabs-tab {
    font-size: 16px;
    font-weight: 500;
    padding: 12px 24px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 8px 8px 0 0;
    position: relative;
    overflow: hidden;
}

.auth-tabs .ant-tabs-tab:hover {
    color: #1890ff;
}

.auth-tabs .ant-tabs-tab-active {
    color: #1890ff !important;
}

.auth-tabs .ant-tabs-ink-bar {
    background-color: #1890ff;
    height: 3px;
    border-radius: 2px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.auth-tabs .ant-tabs-content-holder {
    padding-top: 1rem;
}

.auth-tabs .ant-tabs-content {
    transition: all 0.3s ease-in-out;
}

.auth-tabs .ant-tabs-tabpane {
    animation: fadeInUp 0.4s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Tab内容区域 */
.tab-content {
    width: 100%;
}

/* 表单样式 */
.auth-form {
    width: 100%;
}

.auth-input {
    height: 45px;
    border-radius: 5px;
}

.login-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

/* 认证按钮 */
.auth-button {
    width: 100%;
    height: 45px;
    border-radius: 10px;
    border: none;
    font-size: 1rem;
    font-weight: bold;
    color: white;
    transition: all 0.3s;
    background-color: #e63946;
}

.auth-button:hover {
    background-color: #d63384 !important;
}

/* 注册链接 */
.register-link {
    margin-top: 1rem;
}

.register-link a {
    color: #007bff;
    text-decoration: none;
    font-size: 0.9rem;
}

.register-link a:hover {
    text-decoration: underline;
}

/* 调整警告message的样式 */
.ant-form-item {
    margin-bottom: 1.5rem;
}

.ant-form-item-explain {
    text-align: left; /* 左对齐 */
    padding-left: 10px; /* 与输入框的 padding-left 对齐 */
    color: #e63946; /* 自定义错误信息颜色（红色） */
    font-size: 0.85rem; /* 调整字体大小 */
}

/* 背景 */
.background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    z-index: -1;
}

/* 磨砂玻璃蒙版 */
.glass-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.15); /* 半透明白色覆盖 */
    backdrop-filter: blur(15px); /* 背景模糊 */
    -webkit-backdrop-filter: blur(15px); /* 兼容 Safari */
    border: 1px solid rgba(255, 255, 255, 0.3); /* 边框效果 */
    z-index: 0; /* 放置在背景和内容之间 */
}

/* 注册按钮样式 */
.register-button {
    background-color: #07c044 !important; /* 绿色背景 */
}

.register-button:hover {
    background-color: #06a337 !important; /* 悬停时的深绿色 */
}

/* 注册成功弹窗倒计时 */
.close-timer {
    text-align: center;
    color: #666;
    margin-top: 16px;
    font-size: 14px;
}

/* 移除RegisterForm原有的CSS类名引用 */
.RegisterForm .form {
    width: 100%;
}

/* 重置视图样式 */
.reset-view {
    width: 100%;
}

.reset-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;
    min-height: 40px;
}

.back-button {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #1890ff;
    cursor: pointer;
    font-size: 14px;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.3s;
}

.back-button:hover {
    color: #40a9ff;
    background-color: rgba(24, 144, 255, 0.05);
}

.reset-title {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    color: #333;
    text-align: center;
}

.reset-content {
    width: 100%;
}

/* ============================================================
   Garden 私有登录页样式
   色板来源：garden loginBackground（commit 545da7b）
   主调：暖粉 #FFF2F7 → 玫瑰粉 #D985AF
   点缀：蜜桃橙 #FFCBA4、薰衣草 #E8D5F5
   ============================================================ */

.garden-login-page {
    display: flex;
    min-height: 100vh;
    min-height: 100dvh;
    min-height: var(--app-vh, 100vh);
    /* 与 config_game.js 的 loginBackground 同色系 */
    background: radial-gradient(120% 120% at 50% 40%, #FFF2F7 0%, #FDE3EF 30%, #F3DCEC 42%, #E9BCD8 70%, #D985AF 100%);
}

/* ---------- 左侧装饰区 ---------- */
.garden-login-left {
    flex: 1 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.garden-login-bg {
    position: relative;
    z-index: 3;
    display: block;
    max-width: 360px;
    width: 80%;
    height: auto;
    object-fit: contain;
    -webkit-user-select: none;
            user-select: none;
    pointer-events: none;
    filter: drop-shadow(0 12px 28px rgba(176, 80, 128, 0.30));
}

/* ---------- 主体外壳容器 ---------- */
.garden-bg-shell {
    position: relative;
    width: 480px;
    height: 520px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

/* 浮动主容器：上下漂浮 */
.garden-bg-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: garden-bg-float 3.4s ease-in-out infinite;
    z-index: 2;
}

/* 投影：随漂浮缩放 */
.garden-bg-shadow {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    width: 220px;
    height: 28px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(140, 50, 95, 0.28) 0%, transparent 72%);
    animation: garden-bg-shadow 3.4s ease-in-out infinite;
    z-index: 1;
    pointer-events: none;
}

/* ---------- 玫瑰花瓣粒子系统 ---------- */
.garden-particles {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 320px;
    height: 320px;
    pointer-events: none;
    z-index: 4;
}

.garden-petal {
    position: absolute;
    /* 花瓣形状：上尖下圆，左右对称 */
    border-radius: 100% 0 100% 0;
    transform: rotate(0deg);
    animation: garden-petal-fall 4s ease-in-out infinite;
    animation: garden-petal-fall var(--d, 4s) ease-in-out infinite;
    animation-delay: 0s;
    animation-delay: var(--delay, 0s);
    box-shadow: 0 1px 3px rgba(176, 80, 128, 0.25);
}

/* 玫瑰红：饱满 */
.petal-rose {
    background:
        radial-gradient(circle at 30% 30%,
            #ffe1ee 0%,
            #ff8fb8 40%,
            #d65a8e 100%);
}
/* 浅腮红色 */
.petal-blush {
    background:
        radial-gradient(circle at 30% 30%,
            #fff4f8 0%,
            #ffc4dd 50%,
            #f08fb6 100%);
}
/* 深酒红 */
.petal-wine {
    background:
        radial-gradient(circle at 30% 30%,
            #ffb5d0 0%,
            #d65f8e 45%,
            #973859 100%);
}

/* ---------- 关键帧 ---------- */
@keyframes garden-bg-float {
    0%   { transform: translateY(  0px); }
    50%  { transform: translateY(-22px); }
    100% { transform: translateY(  0px); }
}

@keyframes garden-bg-shadow {
    0%, 100% { transform: translateX(-50%) scaleX(0.62); opacity: 0.70; }
    50%       { transform: translateX(-50%) scaleX(1.00); opacity: 0.30; }
}

@keyframes garden-petal-fall {
    0%   { transform: translate(0px, 0px) rotate(0deg);                                opacity: 0; }
    12%  { opacity: 1; }
    88%  { opacity: 1; }
    100% { transform: translate(0px, 60px) rotate(180deg); transform: translate(var(--tx, 0px), var(--ty, 60px)) rotate(var(--rot, 180deg)); opacity: 0; }
}

/* 品牌文字 */
.garden-login-brand {
    position: relative;
    z-index: 1;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.garden-brand-title {
    font-size: 2rem;
    font-weight: 700;
    color: #b05080;
    letter-spacing: 0.03em;
    text-shadow: 0 2px 12px rgba(176, 80, 128, 0.18);
}

.garden-brand-sub {
    font-size: 1rem;
    color: #c07898;
    letter-spacing: 0.05em;
}

/* ---------- 右侧卡片区 ---------- */
.garden-login-right {
    flex: 0 0 460px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 56px 40px 16px;
}

.garden-login-card {
    width: 100%;
    padding: 2rem 2rem 1.5rem;
}

.garden-card-header {
    text-align: center;
    margin-bottom: 1.25rem;
}

.garden-welcome-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: #b05080;
    margin: 0 0 6px 0;
}

.garden-welcome-sub {
    font-size: 0.85rem;
    color: #c07898;
    margin: 0;
}

/* Tabs 胶囊风格 */
.garden-tabs .ant-tabs-nav::before {
    border-bottom: none;
}

.garden-tabs .ant-tabs-nav {
    margin-bottom: 1.25rem;
}

.garden-tabs .ant-tabs-nav-wrap {
    background: rgba(255, 220, 235, 0.45);
    border-radius: 50px;
    padding: 4px 6px;
    width: 100%;
}

.garden-tabs .ant-tabs-nav-list {
    width: 100%;
}

.garden-tabs .ant-tabs-tab {
    border-radius: 50px !important;
    padding: 6px 0 !important;
    font-size: 15px;
    font-weight: 500;
    color: #c07898;
    transition: all 0.25s ease;
    flex: 1 1;
    justify-content: center;
    margin: 0 !important;
}

.garden-tabs .ant-tabs-tab-active .ant-tabs-tab-btn {
    color: #b05080 !important;
}

.garden-tabs .ant-tabs-tab-active {
    background: rgba(255, 255, 255, 0.88) !important;
    box-shadow: 0 2px 8px rgba(176, 80, 128, 0.12);
}

.garden-tabs .ant-tabs-ink-bar {
    display: none;
}

/* ---------- 移动端：隐藏左侧，全屏卡片 ---------- */
@media (max-width: 768px) {
    .garden-login-page {
        background: radial-gradient(160% 140% at 50% 30%, #FFF2F7 0%, #FDE3EF 50%, #E9BCD8 100%);
    }

    .garden-login-left {
        display: none;
    }

    .garden-login-right {
        flex: 1 1;
        padding: 40px 20px;
    }

    .garden-login-footer {
        display: none !important;
    }
}

/* ---------- 页脚 ---------- */
.garden-login-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px 2px;
    padding: 10px 16px;
    font-size: 12px;
    color: rgba(176, 80, 128, 0.65);
    background: rgba(255, 242, 247, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    -webkit-user-select: none;
            user-select: none;
}

.garden-login-footer a {
    color: rgba(176, 80, 128, 0.75);
    text-decoration: none;
    transition: color 0.2s;
}

.garden-login-footer a:hover {
    color: #b05080;
    text-decoration: underline;
}

.garden-footer-sep {
    color: rgba(176, 80, 128, 0.35);
    margin: 0 4px;
}



/* -------- 整页布局 -------- */
.lhs-login-page {
    display: flex;
    min-height: 100vh;
    min-height: 100dvh;
    min-height: var(--app-vh, 100vh);
    background: radial-gradient(120% 120% at 50% 40%,
        #EAF3FF 0%,
        #C4DAFF 28%,
        #8AB4EE 50%,
        #3A7ACC 74%,
        #0D3A8A 100%
    );
    overflow: hidden;
    position: relative;
}

/* -------- 水墨云 -------- */
.ink-clouds {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

/*
  每朵云由一个 div + ::before + ::after 三个圆叠成，
  用 border-radius + filter:blur 营造毛边墨晕感，
  颜色为白色/极淡蓝，半透明。
*/
.ink-cloud {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    filter: blur(22px);
    animation: ink-cloud-drift 18s ease-in-out infinite;
    animation: ink-cloud-drift var(--cd, 18s) ease-in-out infinite;
    animation-delay: 0s;
    animation-delay: var(--cdl, 0s);
}
.ink-cloud::before,
.ink-cloud::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: inherit;
}

/* 云 1 — 左上，大而淡 */
.c1 {
    width: 280px; height: 110px;
    top: 6%;  left: -60px;
    --cd: 22s; --cdl: 0s;
    --dx: 28px;
}
.c1::before { width: 180px; height: 90px;  top: -40px; left:  50px; }
.c1::after  { width: 130px; height: 70px;  top: -20px; left: 150px; }

/* 云 2 — 左中，细长 */
.c2 {
    width: 200px; height: 70px;
    top: 38%; left: -30px;
    background: rgba(255, 255, 255, 0.13);
    --cd: 26s; --cdl: -6s;
    --dx: 20px;
}
.c2::before { width: 110px; height: 55px; top: -26px; left: 30px; }
.c2::after  { width:  80px; height: 45px; top: -14px; left: 110px; }

/* 云 3 — 右上，中等 */
.c3 {
    width: 240px; height: 90px;
    top: 10%; right: 420px;
    background: rgba(220, 238, 255, 0.20);
    --cd: 19s; --cdl: -4s;
    --dx: -22px;
}
.c3::before { width: 150px; height: 70px; top: -32px; left:  40px; }
.c3::after  { width: 100px; height: 55px; top: -16px; left: 130px; }

/* 云 4 — 底部左，宽扁飘渺 */
.c4 {
    width: 320px; height: 80px;
    bottom: 12%; left: 20px;
    background: rgba(255, 255, 255, 0.10);
    filter: blur(30px);
    --cd: 30s; --cdl: -10s;
    --dx: 35px;
}
.c4::before { width: 200px; height: 65px; top: -28px; left:  60px; }
.c4::after  { width: 140px; height: 50px; top: -14px; left: 170px; }

/* 云 5 — 右侧中部，小而清淡 */
.c5 {
    width: 160px; height: 60px;
    top: 55%; right: 430px;
    background: rgba(200, 228, 255, 0.15);
    filter: blur(18px);
    --cd: 24s; --cdl: -14s;
    --dx: -18px;
}
.c5::before { width:  90px; height: 48px; top: -22px; left: 25px; }
.c5::after  { width:  65px; height: 38px; top: -12px; left: 90px; }

@keyframes ink-cloud-drift {
    0%   { transform: translateX(0px);                    opacity: 0.85; }
    50%  { transform: translateX(20px); transform: translateX(var(--dx, 20px));        opacity: 1;    }
    100% { transform: translateX(0px);                    opacity: 0.85; }
}

.lhs-login-left {
    flex: 1 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* 背景星光（深色场景下使用，亮色背景已隐藏） */
.lhs-login-left::before {
    content: none;
}

/* -------- 包子外壳容器 -------- */
.lhs-bao-shell {
    position: relative;
    width: 420px;
    height: 480px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

/* -------- 浮动主容器 -------- */
.lhs-bao-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: lhs-bao-float 3.2s ease-in-out infinite;
    z-index: 2;
}

/* -------- 包子图片 -------- */
.bao-img {
    position: relative;
    z-index: 3;
    display: block;
    width: 280px;
    height: auto;
    pointer-events: none;
    -webkit-user-select: none;
            user-select: none;
    /* 白底融入蓝色背景：mix-blend-mode 让白色透明 */
    mix-blend-mode: multiply;
    filter:
        saturate(0.85)
        brightness(1.05)
        drop-shadow(0 8px 24px rgba(30, 80, 180, 0.25));
}

/* -------- 金色粒子系统 -------- */
.lhs-particles {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 280px;
    height: 280px;
    pointer-events: none;
    z-index: 4;
}

.lhs-particle {
    position: absolute;
    border-radius: 50%;
    animation: lhs-particle-float 2.2s ease-in-out infinite;
    animation: lhs-particle-float var(--d, 2.2s) ease-in-out infinite;
    animation-delay: 0s;
    animation-delay: var(--delay, 0s);
}

.p-gold  {
    background: radial-gradient(circle, #fffce0 20%, #ffd030 100%);
    box-shadow: 0 0  7px rgba(255, 200, 30,  0.95),
                0 0 16px rgba(255, 155, 10,  0.55);
}
.p-warm  {
    background: radial-gradient(circle, #fff4cc, #ffaa20);
    box-shadow: 0 0  6px rgba(255, 170, 40,  0.88),
                0 0 14px rgba(255, 120, 10,  0.45);
}
.p-white {
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 0  5px rgba(255, 255, 220, 0.90);
}

/* -------- 投影 -------- */
.bao-shadow {
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    width: 140px;
    height: 22px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(100, 80, 40, 0.22) 0%, transparent 72%);
    animation: lhs-bao-shadow 3.2s ease-in-out infinite;
    z-index: 1;
    pointer-events: none;
}

/* -------- 右侧卡片区 -------- */
.lhs-login-right {
    flex: 0 0 460px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 56px 40px 16px;
}

.lhs-login-card {
    width: 100%;
    padding: 2rem 2rem 1.5rem;
}

.lhs-tabs .ant-tabs-nav::before { border-bottom: none; }
.lhs-tabs .ant-tabs-nav         { margin-bottom: 1.25rem; }
.lhs-tabs .ant-tabs-nav-wrap {
    background: rgba(160, 205, 255, 0.32);
    border-radius: 50px;
    padding: 4px 6px;
    width: 100%;
}
.lhs-tabs .ant-tabs-nav-list { width: 100%; }
.lhs-tabs .ant-tabs-tab {
    border-radius: 50px !important;
    padding: 6px 0 !important;
    font-size: 15px;
    font-weight: 500;
    color: #2a68a8;
    transition: all 0.25s ease;
    flex: 1 1;
    justify-content: center;
    margin: 0 !important;
}
.lhs-tabs .ant-tabs-tab-active .ant-tabs-tab-btn { color: #1a4a88 !important; }
.lhs-tabs .ant-tabs-tab-active {
    background: rgba(255, 255, 255, 0.92) !important;
    box-shadow: 0 2px 8px rgba(40, 105, 175, 0.14);
}
.lhs-tabs .ant-tabs-ink-bar { display: none; }

/* ============================================================
   关键帧
   ============================================================ */
@keyframes lhs-bao-float {
    0%   { transform: translateY(  0px); }
    50%  { transform: translateY(-22px); }
    100% { transform: translateY(  0px); }
}
@keyframes lhs-bao-shadow {
    0%, 100% { transform: translateX(-50%) scaleX(0.62); opacity: 0.70; }
    50%       { transform: translateX(-50%) scaleX(1.00); opacity: 0.28; }
}
@keyframes lhs-particle-float {
    0%   { transform: translate(0px, 0px);                                   opacity: 0; }
    12%  { opacity: 1; }
    88%  { opacity: 1; }
    100% { transform: translate(0px, -45px); transform: translate(var(--tx, 0px), var(--ty, -45px));           opacity: 0; }
}

/* -------- 移动端 -------- */
@media (max-width: 768px) {
    .lhs-login-page  { background: radial-gradient(160% 140% at 50% 30%, #EAF3FF 0%, #C4DAFF 50%, #3A7ACC 100%); }
    .lhs-login-left  { display: none; }
    .lhs-login-right { flex: 1 1; padding: 40px 20px; }
}

/* ============================================================
   ZMSL 私有登录页样式
   主调：深林墨绿 #0a2e18 → 森绿 #1a6b35 → 嫩芽 #4ade80
   点缀：萤光黄绿 #a3ff6e、薄荷白 #e4fded
   氛围：林间晨雾 + 萤火孢子漂浮
   ============================================================ */

.zmsl-login-page {
    display: flex;
    min-height: 100vh;
    min-height: 100dvh;
    min-height: var(--app-vh, 100vh);
    background: radial-gradient(
        120% 120% at 50% 40%,
        #e8faf0 0%,
        #9de8b8 22%,
        #3aad68 45%,
        #176b35 68%,
        #062415 100%
    );
    overflow: hidden;
    position: relative;
}

/* -------- 林间晨雾层 -------- */
.zmsl-mist {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.zmsl-mist-band {
    position: absolute;
    border-radius: 50%;
    filter: blur(28px);
    animation: zmsl-mist-drift 20s ease-in-out infinite;
    animation: zmsl-mist-drift var(--md, 20s) ease-in-out infinite;
    animation-delay: 0s;
    animation-delay: var(--mdl, 0s);
    background: rgba(190, 255, 210, 0.14);
}
.zmsl-mist-band::before,
.zmsl-mist-band::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: inherit;
}

/* 雾带 1 — 左上，宽而淡 */
.b1 {
    width: 300px; height: 100px;
    top: 5%; left: -50px;
    --md: 24s; --mdl: 0s;
    --mx: 30px;
}
.b1::before { width: 190px; height: 80px;  top: -38px; left:  55px; }
.b1::after  { width: 130px; height: 62px;  top: -20px; left: 155px; }

/* 雾带 2 — 左中，细长 */
.b2 {
    width: 210px; height: 65px;
    top: 40%; left: -25px;
    background: rgba(160, 255, 190, 0.11);
    --md: 28s; --mdl: -7s;
    --mx: 22px;
}
.b2::before { width: 120px; height: 50px; top: -24px; left: 35px; }
.b2::after  { width:  80px; height: 40px; top: -12px; left: 118px; }

/* 雾带 3 — 右上，中等 */
.b3 {
    width: 250px; height: 85px;
    top: 8%; right: 440px;
    background: rgba(200, 255, 220, 0.16);
    --md: 20s; --mdl: -5s;
    --mx: -24px;
}
.b3::before { width: 160px; height: 65px; top: -30px; left:  45px; }
.b3::after  { width: 105px; height: 50px; top: -14px; left: 135px; }

/* 雾带 4 — 底部，宽扁飘渺 */
.b4 {
    width: 340px; height: 75px;
    bottom: 10%; left: 15px;
    background: rgba(140, 255, 170, 0.09);
    filter: blur(36px);
    --md: 32s; --mdl: -12s;
    --mx: 38px;
}
.b4::before { width: 210px; height: 60px; top: -26px; left:  65px; }
.b4::after  { width: 145px; height: 46px; top: -12px; left: 178px; }

@keyframes zmsl-mist-drift {
    0%   { transform: translateX(0px);              opacity: 0.80; }
    50%  { transform: translateX(20px); transform: translateX(var(--mx, 20px));  opacity: 1.00; }
    100% { transform: translateX(0px);              opacity: 0.80; }
}

/* -------- 左侧角色区 -------- */
.zmsl-login-left {
    flex: 1 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    z-index: 1;
}

/* -------- 角色外壳容器 -------- */
.zmsl-char-shell {
    position: relative;
    width: 420px;
    height: 480px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

/* -------- 浮动主容器 -------- */
.zmsl-char-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: zmsl-char-float 3.6s ease-in-out infinite;
    z-index: 2;
}

/* -------- 角色图片 -------- */
.zmsl-char-img {
    position: relative;
    z-index: 3;
    display: block;
    width: 300px;
    height: auto;
    pointer-events: none;
    -webkit-user-select: none;
            user-select: none;
    filter:
        saturate(1.1)
        brightness(1.05)
        drop-shadow(0 10px 28px rgba(20, 120, 60, 0.38));
}

/* -------- 萤火孢子粒子系统 -------- */
.zmsl-spores {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 300px;
    pointer-events: none;
    z-index: 4;
}

.zmsl-spore {
    position: absolute;
    border-radius: 50%;
    animation: zmsl-spore-rise 3.2s ease-in-out infinite;
    animation: zmsl-spore-rise var(--d, 3.2s) ease-in-out infinite;
    animation-delay: 0s;
    animation-delay: var(--delay, 0s);
}

/* 萤火：明亮黄绿，强发光 */
.spore-firefly {
    background: radial-gradient(circle, #f0ffe0 15%, #aaff50 55%, #62e818 100%);
    box-shadow:
        0 0  8px rgba(150, 255, 60,  0.95),
        0 0 18px rgba(100, 220, 20,  0.60),
        0 0 32px rgba(60,  180, 10,  0.30);
}

/* 孢子光球：翠绿，柔和光晕 */
.spore-glow {
    background: radial-gradient(circle, #e0fff0 20%, #5ddd96 60%, #1fb86a 100%);
    box-shadow:
        0 0  6px rgba(80,  220, 130, 0.90),
        0 0 14px rgba(30,  180, 90,  0.50);
}

/* 嫩叶：深森绿，点缀 */
.spore-leaf {
    background: radial-gradient(circle, #c8ffd8 20%, #36c66a 55%, #148040 100%);
    box-shadow:
        0 0  5px rgba(50,  200, 100, 0.80),
        0 0 12px rgba(20,  140, 60,  0.40);
}

/* -------- 地面光晕投影 -------- */
.zmsl-char-shadow {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    width: 160px;
    height: 24px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(20, 120, 60, 0.30) 0%, transparent 72%);
    animation: zmsl-char-shadow 3.6s ease-in-out infinite;
    z-index: 1;
    pointer-events: none;
}

/* ============================================================
   关键帧
   ============================================================ */
@keyframes zmsl-char-float {
    0%   { transform: translateY(  0px); }
    50%  { transform: translateY(-20px); }
    100% { transform: translateY(  0px); }
}

@keyframes zmsl-char-shadow {
    0%, 100% { transform: translateX(-50%) scaleX(0.65); opacity: 0.70; }
    50%       { transform: translateX(-50%) scaleX(1.00); opacity: 0.28; }
}

@keyframes zmsl-spore-rise {
    0%   { transform: translate(0px, 0px);                                         opacity: 0; }
    12%  { opacity: 1; }
    88%  { opacity: 1; }
    100% { transform: translate(0px, -50px); transform: translate(var(--tx, 0px), var(--ty, -50px));                 opacity: 0; }
}

/* -------- 右侧卡片区 -------- */
.zmsl-login-right {
    flex: 0 0 460px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 56px 40px 16px;
    position: relative;
    z-index: 1;
}

.zmsl-login-card {
    width: 100%;
    padding: 2rem 2rem 1.5rem;
}

/* -------- Tabs 胶囊风格 -------- */
.zmsl-tabs .ant-tabs-nav::before { border-bottom: none; }
.zmsl-tabs .ant-tabs-nav         { margin-bottom: 1.25rem; }
.zmsl-tabs .ant-tabs-nav-wrap {
    background: rgba(80, 200, 130, 0.28);
    border-radius: 50px;
    padding: 4px 6px;
    width: 100%;
}
.zmsl-tabs .ant-tabs-nav-list { width: 100%; }
.zmsl-tabs .ant-tabs-tab {
    border-radius: 50px !important;
    padding: 6px 0 !important;
    font-size: 15px;
    font-weight: 500;
    color: #1a6b35;
    transition: all 0.25s ease;
    flex: 1 1;
    justify-content: center;
    margin: 0 !important;
}
.zmsl-tabs .ant-tabs-tab-active .ant-tabs-tab-btn { color: #0e4a24 !important; }
.zmsl-tabs .ant-tabs-tab-active {
    background: rgba(255, 255, 255, 0.92) !important;
    box-shadow: 0 2px 8px rgba(20, 140, 70, 0.16);
}
.zmsl-tabs .ant-tabs-ink-bar { display: none; }

/* -------- 移动端 -------- */
@media (max-width: 768px) {
    .zmsl-login-page  {
        background: radial-gradient(160% 140% at 50% 30%, #e8faf0 0%, #9de8b8 45%, #176b35 100%);
    }
    .zmsl-login-left  { display: none; }
    .zmsl-login-right { flex: 1 1; padding: 40px 20px; }
}

/* ============================================================
   SGZHD 战国烽烟 私有登录页样式
   色板：深褐 #2e1000 → 暗赤铜 #7a3a00 → 铸铜金 #c07820 → 亮金 #f0c060 → 象牙白 #fff8e0
   氛围：战火余烟飘荡 + 金币翻滚飞散
   ============================================================ */

.sgzhd-login-page {
    display: flex;
    min-height: 100vh;
    min-height: 100dvh;
    min-height: var(--app-vh, 100vh);
    background: radial-gradient(
        120% 120% at 50% 40%,
        #fff8e0 0%,
        #f0c060 22%,
        #c07820 45%,
        #7a3a00 68%,
        #2e1000 100%
    );
    overflow: hidden;
    position: relative;
}

/* -------- 战火余烟层 -------- */
.sgzhd-embers {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.sgzhd-ember {
    position: absolute;
    border-radius: 50%;
    filter: blur(28px);
    animation: sgzhd-ember-drift 18s ease-in-out infinite;
    animation: sgzhd-ember-drift var(--ef, 18s) ease-in-out infinite;
    animation-delay: 0s;
    animation-delay: var(--efl, 0s);
    background: rgba(220, 120, 20, 0.12);
}
.sgzhd-ember::before,
.sgzhd-ember::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: inherit;
}

/* 余烟 1 — 左上，宽而淡 */
.e1 {
    width: 280px; height: 100px;
    top: 6%; left: -50px;
    --ef: 22s; --efl: 0s;
    --ex: 26px;
}
.e1::before { width: 180px; height: 80px;  top: -36px; left:  52px; }
.e1::after  { width: 125px; height: 60px;  top: -18px; left: 148px; }

/* 余烟 2 — 左中，细长 */
.e2 {
    width: 200px; height: 65px;
    top: 38%; left: -25px;
    background: rgba(200, 100, 10, 0.10);
    --ef: 26s; --efl: -6s;
    --ex: 20px;
}
.e2::before { width: 115px; height: 50px; top: -22px; left: 32px; }
.e2::after  { width:  78px; height: 40px; top: -12px; left: 112px; }

/* 余烟 3 — 右上，中等 */
.e3 {
    width: 240px; height: 88px;
    top: 10%; right: 440px;
    background: rgba(240, 160, 30, 0.14);
    --ef: 19s; --efl: -4s;
    --ex: -22px;
}
.e3::before { width: 152px; height: 68px; top: -30px; left: 42px; }
.e3::after  { width: 102px; height: 52px; top: -14px; left: 132px; }

/* 余烟 4 — 底部，宽扁飘渺 */
.e4 {
    width: 320px; height: 78px;
    bottom: 10%; left: 18px;
    background: rgba(180, 80, 10, 0.09);
    filter: blur(36px);
    --ef: 30s; --efl: -10s;
    --ex: 35px;
}
.e4::before { width: 205px; height: 62px; top: -26px; left: 62px; }
.e4::after  { width: 140px; height: 48px; top: -12px; left: 174px; }

/* 余烟 5 — 右侧中部，小而清淡 */
.e5 {
    width: 160px; height: 60px;
    top: 55%; right: 450px;
    background: rgba(210, 140, 20, 0.12);
    filter: blur(20px);
    --ef: 24s; --efl: -14s;
    --ex: -18px;
}
.e5::before { width:  90px; height: 48px; top: -20px; left: 24px; }
.e5::after  { width:  62px; height: 36px; top: -10px; left: 88px; }

@keyframes sgzhd-ember-drift {
    0%   { transform: translateX(0px);             opacity: 0.80; }
    50%  { transform: translateX(20px); transform: translateX(var(--ex, 20px)); opacity: 1.00; }
    100% { transform: translateX(0px);             opacity: 0.80; }
}

/* -------- 左侧角色区 -------- */
.sgzhd-login-left {
    flex: 1 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    z-index: 1;
}

/* -------- 角色外壳容器 -------- */
.sgzhd-char-shell {
    position: relative;
    width: 420px;
    height: 480px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

/* -------- 浮动主容器 -------- */
.sgzhd-char-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: sgzhd-char-float 3.6s ease-in-out infinite;
    z-index: 2;
}

/* -------- 角色图片 -------- */
.sgzhd-char-img {
    position: relative;
    z-index: 3;
    display: block;
    width: 300px;
    height: auto;
    pointer-events: none;
    -webkit-user-select: none;
            user-select: none;
    filter:
        saturate(1.05)
        brightness(1.05)
        drop-shadow(0 10px 28px rgba(160, 80, 10, 0.40));
}

/* -------- 金币粒子系统 -------- */
.sgzhd-coins {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 300px;
    pointer-events: none;
    z-index: 4;
}

.sgzhd-coin {
    position: absolute;
    border-radius: 50%;
    animation: sgzhd-coin-fly 3.6s ease-in-out infinite;
    animation: sgzhd-coin-fly var(--d, 3.6s) ease-in-out infinite;
    animation-delay: 0s;
    animation-delay: var(--delay, 0s);
}

/* 亮金：高光强烈，如新铸金币 */
.coin-bright {
    background: radial-gradient(circle at 35% 30%,
        #fffce0 0%,
        #ffe866 18%,
        #ffc820 48%,
        #c88000 76%,
        #7a4e00 100%
    );
    box-shadow:
        0 0  8px rgba(255, 215, 30,  0.95),
        0 0 18px rgba(255, 160, 10,  0.65),
        0 0 32px rgba(200, 120, 0,   0.35);
    border: 1px solid rgba(255, 230, 80, 0.50);
}

/* 暖金：偏橙，如古铜战国金币 */
.coin-warm {
    background: radial-gradient(circle at 35% 30%,
        #fff4cc 0%,
        #ffd060 20%,
        #f4a020 50%,
        #b06800 78%,
        #6a3800 100%
    );
    box-shadow:
        0 0  7px rgba(255, 190, 40,  0.90),
        0 0 16px rgba(220, 130, 10,  0.55),
        0 0 28px rgba(170, 90,  0,   0.28);
    border: 1px solid rgba(255, 200, 60, 0.40);
}

/* 深金：偏深，如磨损的战国铜钱 */
.coin-deep {
    background: radial-gradient(circle at 35% 30%,
        #ffe8a0 0%,
        #f0b840 20%,
        #c88010 50%,
        #885000 78%,
        #4a2800 100%
    );
    box-shadow:
        0 0  6px rgba(220, 170, 30,  0.85),
        0 0 14px rgba(180, 110, 10,  0.50),
        0 0 24px rgba(130, 70,  0,   0.25);
    border: 1px solid rgba(220, 170, 50, 0.35);
}

/* -------- 地面光晕投影 -------- */
.sgzhd-char-shadow {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    width: 160px;
    height: 24px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(140, 70, 10, 0.32) 0%, transparent 72%);
    animation: sgzhd-char-shadow 3.6s ease-in-out infinite;
    z-index: 1;
    pointer-events: none;
}

/* ============================================================
   关键帧
   ============================================================ */
@keyframes sgzhd-char-float {
    0%   { transform: translateY(  0px); }
    50%  { transform: translateY(-20px); }
    100% { transform: translateY(  0px); }
}

@keyframes sgzhd-char-shadow {
    0%, 100% { transform: translateX(-50%) scaleX(0.65); opacity: 0.70; }
    50%       { transform: translateX(-50%) scaleX(1.00); opacity: 0.28; }
}

/* 金币飞散：平移 + 旋转（模拟硬币翻滚） */
@keyframes sgzhd-coin-fly {
    0%   { transform: translate(0px, 0px) rotate(0deg);                                         opacity: 0; }
    12%  { opacity: 1; }
    88%  { opacity: 1; }
    100% { transform: translate(0px, -50px) rotate(360deg); transform: translate(var(--tx, 0px), var(--ty, -50px)) rotate(var(--rot, 360deg));   opacity: 0; }
}

/* -------- 右侧卡片区 -------- */
.sgzhd-login-right {
    flex: 0 0 460px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 56px 40px 16px;
    position: relative;
    z-index: 1;
}

.sgzhd-login-card {
    width: 100%;
    padding: 2rem 2rem 1.5rem;
}

/* -------- Tabs 胶囊风格（金色调） -------- */
.sgzhd-tabs .ant-tabs-nav::before { border-bottom: none; }
.sgzhd-tabs .ant-tabs-nav         { margin-bottom: 1.25rem; }
.sgzhd-tabs .ant-tabs-nav-wrap {
    background: rgba(200, 140, 30, 0.25);
    border-radius: 50px;
    padding: 4px 6px;
    width: 100%;
}
.sgzhd-tabs .ant-tabs-nav-list { width: 100%; }
.sgzhd-tabs .ant-tabs-tab {
    border-radius: 50px !important;
    padding: 6px 0 !important;
    font-size: 15px;
    font-weight: 500;
    color: #8b4a00;
    transition: all 0.25s ease;
    flex: 1 1;
    justify-content: center;
    margin: 0 !important;
}
.sgzhd-tabs .ant-tabs-tab-active .ant-tabs-tab-btn { color: #5a2e00 !important; }
.sgzhd-tabs .ant-tabs-tab-active {
    background: rgba(255, 255, 255, 0.92) !important;
    box-shadow: 0 2px 8px rgba(160, 90, 10, 0.16);
}
.sgzhd-tabs .ant-tabs-ink-bar { display: none; }

/* -------- 移动端：隐藏左侧，全屏卡片 -------- */
@media (max-width: 768px) {
    .sgzhd-login-page {
        background: radial-gradient(160% 140% at 50% 30%, #fff8e0 0%, #f0c060 45%, #7a3a00 100%);
    }
    .sgzhd-login-left  { display: none; }
    .sgzhd-login-right { flex: 1 1; padding: 40px 20px; }
}

/* ============================================================
   XDDQ 寻道大千 私有登录页样式
   色板：深紫 #0d001a → 暗紫 #4B0082 → 道仙紫 #8A2BE2 → 粉紫 #d8a8ff → 象牙白 #f8f0ff
   点缀：翡翠青 #20c080（角色项链色）、亮金 #ffd040（灵气金）
   氛围：玄空灵云飘荡 + 金色灵气粒子上升
   ============================================================ */

.xddq-login-page {
    display: flex;
    min-height: 100vh;
    min-height: 100dvh;
    min-height: var(--app-vh, 100vh);
    background: radial-gradient(
        120% 120% at 50% 40%,
        #f8f0ff 0%,
        #d8a8ff 20%,
        #8A2BE2 44%,
        #4B0082 68%,
        #0d001a 100%
    );
    overflow: hidden;
    position: relative;
}

/* -------- 玄空灵云层 -------- */
.xddq-clouds {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.xddq-cloud {
    position: absolute;
    border-radius: 50%;
    filter: blur(26px);
    animation: xddq-cloud-drift 20s ease-in-out infinite;
    animation: xddq-cloud-drift var(--xcd, 20s) ease-in-out infinite;
    animation-delay: 0s;
    animation-delay: var(--xcdl, 0s);
    background: rgba(190, 130, 255, 0.14);
}
.xddq-cloud::before,
.xddq-cloud::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: inherit;
}

/* 灵云 1 — 左上，宽而淡 */
.xc1 {
    width: 280px; height: 100px;
    top: 6%; left: -50px;
    --xcd: 22s; --xcdl: 0s;
    --xcx: 28px;
}
.xc1::before { width: 180px; height: 80px;  top: -36px; left:  52px; }
.xc1::after  { width: 125px; height: 60px;  top: -18px; left: 148px; }

/* 灵云 2 — 左中，细长 */
.xc2 {
    width: 200px; height: 65px;
    top: 38%; left: -25px;
    background: rgba(160, 100, 255, 0.11);
    --xcd: 26s; --xcdl: -6s;
    --xcx: 20px;
}
.xc2::before { width: 115px; height: 50px; top: -22px; left: 32px; }
.xc2::after  { width:  78px; height: 40px; top: -12px; left: 112px; }

/* 灵云 3 — 右上，中等，带金紫晕 */
.xc3 {
    width: 240px; height: 88px;
    top: 10%; right: 440px;
    background: rgba(210, 160, 255, 0.16);
    --xcd: 19s; --xcdl: -4s;
    --xcx: -22px;
}
.xc3::before { width: 152px; height: 68px; top: -30px; left: 42px; }
.xc3::after  { width: 102px; height: 52px; top: -14px; left: 132px; }

/* 灵云 4 — 底部，宽扁飘渺 */
.xc4 {
    width: 320px; height: 78px;
    bottom: 10%; left: 18px;
    background: rgba(140, 80, 230, 0.09);
    filter: blur(36px);
    --xcd: 30s; --xcdl: -10s;
    --xcx: 35px;
}
.xc4::before { width: 205px; height: 62px; top: -26px; left: 62px; }
.xc4::after  { width: 140px; height: 48px; top: -12px; left: 174px; }

/* 灵云 5 — 右中，小而清淡 */
.xc5 {
    width: 160px; height: 60px;
    top: 55%; right: 450px;
    background: rgba(180, 120, 255, 0.13);
    filter: blur(20px);
    --xcd: 24s; --xcdl: -14s;
    --xcx: -18px;
}
.xc5::before { width:  90px; height: 48px; top: -20px; left: 24px; }
.xc5::after  { width:  62px; height: 36px; top: -10px; left: 88px; }

@keyframes xddq-cloud-drift {
    0%   { transform: translateX(0px);              opacity: 0.80; }
    50%  { transform: translateX(20px); transform: translateX(var(--xcx, 20px)); opacity: 1.00; }
    100% { transform: translateX(0px);              opacity: 0.80; }
}

/* -------- 左侧角色区 -------- */
.xddq-login-left {
    flex: 1 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    z-index: 1;
}

/* -------- 角色外壳容器 -------- */
.xddq-char-shell {
    position: relative;
    width: 420px;
    height: 480px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

/* -------- 浮动主容器 -------- */
.xddq-char-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: xddq-char-float 3.4s ease-in-out infinite;
    z-index: 2;
}

/* -------- 角色图片 -------- */
.xddq-char-img {
    position: relative;
    z-index: 3;
    display: block;
    width: 300px;
    height: auto;
    pointer-events: none;
    -webkit-user-select: none;
            user-select: none;
    filter:
        saturate(1.1)
        brightness(1.08)
        drop-shadow(0 10px 28px rgba(100, 30, 200, 0.45));
}

/* -------- 金色灵气粒子系统 -------- */
.xddq-spirits {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 300px;
    pointer-events: none;
    z-index: 4;
}

.xddq-spirit {
    position: absolute;
    border-radius: 50%;
    animation: xddq-spirit-rise 3.4s ease-in-out infinite;
    animation: xddq-spirit-rise var(--d, 3.4s) ease-in-out infinite;
    animation-delay: 0s;
    animation-delay: var(--delay, 0s);
}

/* 金色灵气：如道仙法力，明亮耀眼 */
.spirit-gold {
    background: radial-gradient(circle, #fffce0 15%, #ffe050 50%, #ffa800 85%, #c06000 100%);
    box-shadow:
        0 0  8px rgba(255, 210, 30,  0.95),
        0 0 18px rgba(255, 160, 10,  0.65),
        0 0 30px rgba(200, 100, 0,   0.35);
}

/* 翡翠灵气：角色项链的翠绿，点缀仙气 */
.spirit-jade {
    background: radial-gradient(circle, #e0fff4 18%, #40e8a0 55%, #10b868 88%, #006838 100%);
    box-shadow:
        0 0  7px rgba(40,  220, 140, 0.90),
        0 0 16px rgba(10,  180, 100, 0.55),
        0 0 26px rgba(0,   130, 70,  0.28);
}

/* 紫色灵气：修仙紫，与背景融合 */
.spirit-purple {
    background: radial-gradient(circle, #f8e8ff 15%, #d080ff 50%, #9020e0 85%, #5800a0 100%);
    box-shadow:
        0 0  7px rgba(200, 100, 255, 0.88),
        0 0 16px rgba(150,  50, 230, 0.55),
        0 0 26px rgba(100,  20, 180, 0.28);
}

/* -------- 地面灵光投影 -------- */
.xddq-char-shadow {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    width: 160px;
    height: 24px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(100, 30, 200, 0.32) 0%, transparent 72%);
    animation: xddq-char-shadow 3.4s ease-in-out infinite;
    z-index: 1;
    pointer-events: none;
}

/* ============================================================
   关键帧
   ============================================================ */
@keyframes xddq-char-float {
    0%   { transform: translateY(  0px); }
    50%  { transform: translateY(-22px); }
    100% { transform: translateY(  0px); }
}

@keyframes xddq-char-shadow {
    0%, 100% { transform: translateX(-50%) scaleX(0.65); opacity: 0.70; }
    50%       { transform: translateX(-50%) scaleX(1.00); opacity: 0.28; }
}

/* 灵气上升：轻柔漂移，向上消散 */
@keyframes xddq-spirit-rise {
    0%   { transform: translate(0px, 0px);                                     opacity: 0; }
    12%  { opacity: 1; }
    88%  { opacity: 1; }
    100% { transform: translate(0px, -52px); transform: translate(var(--tx, 0px), var(--ty, -52px));             opacity: 0; }
}

/* -------- 右侧卡片区 -------- */
.xddq-login-right {
    flex: 0 0 460px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 56px 40px 16px;
    position: relative;
    z-index: 1;
}

.xddq-login-card {
    width: 100%;
    padding: 2rem 2rem 1.5rem;
}

/* -------- Tabs 胶囊风格（紫色调） -------- */
.xddq-tabs .ant-tabs-nav::before { border-bottom: none; }
.xddq-tabs .ant-tabs-nav         { margin-bottom: 1.25rem; }
.xddq-tabs .ant-tabs-nav-wrap {
    background: rgba(160, 80, 240, 0.28);
    border-radius: 50px;
    padding: 4px 6px;
    width: 100%;
}
.xddq-tabs .ant-tabs-nav-list { width: 100%; }
.xddq-tabs .ant-tabs-tab {
    border-radius: 50px !important;
    padding: 6px 0 !important;
    font-size: 15px;
    font-weight: 500;
    color: #6a20b0;
    transition: all 0.25s ease;
    flex: 1 1;
    justify-content: center;
    margin: 0 !important;
}
.xddq-tabs .ant-tabs-tab-active .ant-tabs-tab-btn { color: #3d0880 !important; }
.xddq-tabs .ant-tabs-tab-active {
    background: rgba(255, 255, 255, 0.92) !important;
    box-shadow: 0 2px 8px rgba(120, 40, 200, 0.18);
}
.xddq-tabs .ant-tabs-ink-bar { display: none; }

/* -------- 移动端：隐藏左侧，全屏卡片 -------- */
@media (max-width: 768px) {
    .xddq-login-page {
        background: radial-gradient(160% 140% at 50% 30%, #f8f0ff 0%, #d8a8ff 45%, #4B0082 100%);
    }
    .xddq-login-left  { display: none; }
    .xddq-login-right { flex: 1 1; padding: 40px 20px; }
}

/* ============================================================
   SGDBZ 时光大爆炸 私有登录页样式
   色板（石器时代）：焦土黑 #140d08 → 岩褐 #3a2416 → 陶土棕 #7a4a24 →
                    砂岩黄 #c8955a → 骨白 #f2e4cf
   点缀：火药橙 #ff7a1a（火星）、余烬红 #c23a12、火药烟 #241a12
   氛围：远古烟尘飘荡 + 黑火药向四周炸开的火星
   ============================================================ */

.sgdbz-login-page {
    display: flex;
    min-height: 100vh;
    min-height: 100dvh;
    min-height: var(--app-vh, 100vh);
    background: radial-gradient(
        120% 120% at 50% 40%,
        #f2e4cf 0%,
        #c8955a 20%,
        #7a4a24 44%,
        #3a2416 68%,
        #140d08 100%
    );
    overflow: hidden;
    position: relative;
}

/* -------- 远古烟尘层 -------- */
.sgdbz-clouds {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.sgdbz-cloud {
    position: absolute;
    border-radius: 50%;
    filter: blur(26px);
    animation: sgdbz-cloud-drift 20s ease-in-out infinite;
    animation: sgdbz-cloud-drift var(--scd, 20s) ease-in-out infinite;
    animation-delay: 0s;
    animation-delay: var(--scdl, 0s);
    background: rgba(90, 60, 36, 0.16);
}
.sgdbz-cloud::before,
.sgdbz-cloud::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: inherit;
}

/* 烟尘 1 — 左上，宽而淡 */
.sc1 {
    width: 280px; height: 100px;
    top: 6%; left: -50px;
    --scd: 22s; --scdl: 0s;
    --scx: 28px;
}
.sc1::before { width: 180px; height: 80px;  top: -36px; left:  52px; }
.sc1::after  { width: 125px; height: 60px;  top: -18px; left: 148px; }

/* 烟尘 2 — 左中，细长 */
.sc2 {
    width: 200px; height: 65px;
    top: 38%; left: -25px;
    background: rgba(120, 80, 44, 0.13);
    --scd: 26s; --scdl: -6s;
    --scx: 20px;
}
.sc2::before { width: 115px; height: 50px; top: -22px; left: 32px; }
.sc2::after  { width:  78px; height: 40px; top: -12px; left: 112px; }

/* 烟尘 3 — 右上，中等，带火药橙晕 */
.sc3 {
    width: 240px; height: 88px;
    top: 10%; right: 440px;
    background: rgba(200, 110, 50, 0.15);
    --scd: 19s; --scdl: -4s;
    --scx: -22px;
}
.sc3::before { width: 152px; height: 68px; top: -30px; left: 42px; }
.sc3::after  { width: 102px; height: 52px; top: -14px; left: 132px; }

/* 烟尘 4 — 底部，宽扁飘渺，浓黑火药烟 */
.sc4 {
    width: 320px; height: 78px;
    bottom: 10%; left: 18px;
    background: rgba(36, 26, 18, 0.22);
    filter: blur(36px);
    --scd: 30s; --scdl: -10s;
    --scx: 35px;
}
.sc4::before { width: 205px; height: 62px; top: -26px; left: 62px; }
.sc4::after  { width: 140px; height: 48px; top: -12px; left: 174px; }

/* 烟尘 5 — 右中，小而清淡 */
.sc5 {
    width: 160px; height: 60px;
    top: 55%; right: 450px;
    background: rgba(160, 96, 48, 0.14);
    filter: blur(20px);
    --scd: 24s; --scdl: -14s;
    --scx: -18px;
}
.sc5::before { width:  90px; height: 48px; top: -20px; left: 24px; }
.sc5::after  { width:  62px; height: 36px; top: -10px; left: 88px; }

@keyframes sgdbz-cloud-drift {
    0%   { transform: translateX(0px);              opacity: 0.78; }
    50%  { transform: translateX(20px); transform: translateX(var(--scx, 20px)); opacity: 1.00; }
    100% { transform: translateX(0px);              opacity: 0.78; }
}

/* -------- 左侧角色区 -------- */
.sgdbz-login-left {
    flex: 1 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    z-index: 1;
}

/* -------- 角色外壳容器 -------- */
.sgdbz-char-shell {
    position: relative;
    width: 420px;
    height: 480px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

/* -------- 浮动主容器 -------- */
.sgdbz-char-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: sgdbz-char-float 3.4s ease-in-out infinite;
    z-index: 2;
}

/* -------- 角色图片 -------- */
.sgdbz-char-img {
    position: relative;
    z-index: 3;
    display: block;
    width: 300px;
    height: auto;
    pointer-events: none;
    -webkit-user-select: none;
            user-select: none;
    filter:
        saturate(1.12)
        brightness(1.06)
        drop-shadow(0 10px 28px rgba(60, 30, 10, 0.55));
}

/* -------- 黑火药爆炸系统 -------- */
.sgdbz-blast {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 300px;
    pointer-events: none;
    z-index: 4;
}

/* 爆心闪光：周期性亮起，与火星错峰形成连环爆炸 */
.sgdbz-flash {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 90px;
    height: 90px;
    margin: -45px 0 0 -45px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 244, 214, 0.95) 0%, rgba(255, 150, 40, 0.6) 35%, rgba(200, 60, 18, 0.25) 60%, transparent 78%);
    animation: sgdbz-flash 2.0s ease-out infinite;
}

.sgdbz-shard {
    position: absolute;
    border-radius: 50%;
    animation: sgdbz-shard-burst 1.6s cubic-bezier(0.15, 0.6, 0.25, 1) infinite;
    animation: sgdbz-shard-burst var(--d, 1.6s) cubic-bezier(0.15, 0.6, 0.25, 1) infinite;
    animation-delay: 0s;
    animation-delay: var(--delay, 0s);
}

/* 亮橙火星：黑火药引燃的明亮飞星 */
.shard-spark {
    background: radial-gradient(circle, #fff6d8 12%, #ffb43a 45%, #ff7a1a 80%, #c23a12 100%);
    box-shadow:
        0 0  8px rgba(255, 150, 30,  0.95),
        0 0 18px rgba(255, 110, 20,  0.65),
        0 0 30px rgba(200, 60,  10,  0.35);
}

/* 暗红余烬：燃尽的火药碎屑 */
.shard-ember {
    background: radial-gradient(circle, #ffd9a0 15%, #e8722a 50%, #c23a12 82%, #6e1e08 100%);
    box-shadow:
        0 0  7px rgba(226, 90,  24,  0.85),
        0 0 15px rgba(180, 50,  12,  0.5),
        0 0 24px rgba(120, 30,  6,   0.26);
}

/* 黑火药烟尘：炸开后翻滚的浓烟 */
.shard-smoke {
    background: radial-gradient(circle, rgba(70, 52, 38, 0.85) 20%, rgba(40, 28, 18, 0.7) 60%, rgba(20, 13, 8, 0.35) 100%);
    box-shadow: 0 0 14px rgba(20, 13, 8, 0.5);
    filter: blur(1.5px);
}

/* -------- 地面焦土投影 -------- */
.sgdbz-char-shadow {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    width: 160px;
    height: 24px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(60, 30, 10, 0.42) 0%, transparent 72%);
    animation: sgdbz-char-shadow 3.4s ease-in-out infinite;
    z-index: 1;
    pointer-events: none;
}

/* ============================================================
   关键帧
   ============================================================ */
@keyframes sgdbz-char-float {
    0%   { transform: translateY(  0px); }
    50%  { transform: translateY(-22px); }
    100% { transform: translateY(  0px); }
}

@keyframes sgdbz-char-shadow {
    0%, 100% { transform: translateX(-50%) scaleX(0.65); opacity: 0.72; }
    50%       { transform: translateX(-50%) scaleX(1.00); opacity: 0.30; }
}

/* 爆心闪光：瞬间炸亮再收缩 */
@keyframes sgdbz-flash {
    0%   { transform: scale(0.2); opacity: 0; }
    8%   { transform: scale(1.0); opacity: 1; }
    30%  { transform: scale(1.3); opacity: 0.35; }
    55%  { transform: scale(1.0); opacity: 0; }
    100% { transform: scale(0.2); opacity: 0; }
}

/* 火星炸开：从爆心猛地飞出，边飞边坠、渐熄 */
@keyframes sgdbz-shard-burst {
    0%   { transform: translate(0px, 0px) scale(0.35);                          opacity: 0; }
    6%   { opacity: 1; }
    18%  { transform: translate(calc(var(--tx) * 0.5), calc(var(--ty) * 0.5)) scale(1.05); opacity: 1; }
    70%  { opacity: 0.85; }
    100% { transform: translate(0px, calc(0px + 34px)) scale(0.7); transform: translate(var(--tx, 0px), calc(var(--ty, 0px) + 34px)) scale(0.7);   opacity: 0; }
}

/* -------- 右侧卡片区 -------- */
.sgdbz-login-right {
    flex: 0 0 460px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 56px 40px 16px;
    position: relative;
    z-index: 1;
}

.sgdbz-login-card {
    width: 100%;
    padding: 2rem 2rem 1.5rem;
}

/* -------- Tabs 胶囊风格（石器陶土调） -------- */
.sgdbz-tabs .ant-tabs-nav::before { border-bottom: none; }
.sgdbz-tabs .ant-tabs-nav         { margin-bottom: 1.25rem; }
.sgdbz-tabs .ant-tabs-nav-wrap {
    background: rgba(122, 74, 36, 0.28);
    border-radius: 50px;
    padding: 4px 6px;
    width: 100%;
}
.sgdbz-tabs .ant-tabs-nav-list { width: 100%; }
.sgdbz-tabs .ant-tabs-tab {
    border-radius: 50px !important;
    padding: 6px 0 !important;
    font-size: 15px;
    font-weight: 500;
    color: #8a5322;
    transition: all 0.25s ease;
    flex: 1 1;
    justify-content: center;
    margin: 0 !important;
}
.sgdbz-tabs .ant-tabs-tab-active .ant-tabs-tab-btn { color: #5a2f0c !important; }
.sgdbz-tabs .ant-tabs-tab-active {
    background: rgba(255, 250, 240, 0.94) !important;
    box-shadow: 0 2px 8px rgba(90, 47, 12, 0.2);
}
.sgdbz-tabs .ant-tabs-ink-bar { display: none; }

/* -------- 移动端：隐藏左侧，全屏卡片 -------- */
@media (max-width: 768px) {
    .sgdbz-login-page {
        background: radial-gradient(160% 140% at 50% 30%, #f2e4cf 0%, #c8955a 45%, #3a2416 100%);
    }
    .sgdbz-login-left  { display: none; }
    .sgdbz-login-right { flex: 1 1; padding: 40px 20px; }
}

/* ============================================================
   DDXE 大店小二 私有登录页样式
   色板：暗朱 #3a0c08 → 深红 #8a1e12 → 朱红 #d4462a → 暖金 #f0b048 → 米黄 #fff4d8
   氛围：灯笼暖雾飘荡 + 铜钱翻滚飞散
   ============================================================ */

.ddxe-login-page {
    display: flex;
    min-height: 100vh;
    min-height: 100dvh;
    min-height: var(--app-vh, 100vh);
    background: radial-gradient(
        120% 120% at 50% 40%,
        #fff4d8 0%,
        #f0b048 22%,
        #d4462a 45%,
        #8a1e12 68%,
        #3a0c08 100%
    );
    overflow: hidden;
    position: relative;
}

/* -------- 灯笼暖雾层 -------- */
.ddxe-embers {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.ddxe-ember {
    position: absolute;
    border-radius: 50%;
    filter: blur(28px);
    animation: ddxe-ember-drift 18s ease-in-out infinite;
    animation: ddxe-ember-drift var(--ef, 18s) ease-in-out infinite;
    animation-delay: 0s;
    animation-delay: var(--efl, 0s);
    background: rgba(240, 130, 40, 0.12);
}
.ddxe-ember::before,
.ddxe-ember::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: inherit;
}

/* 暖雾 1 — 左上，宽而淡 */
.e1 {
    width: 280px; height: 100px;
    top: 6%; left: -50px;
    --ef: 22s; --efl: 0s;
    --ex: 26px;
}
.e1::before { width: 180px; height: 80px;  top: -36px; left:  52px; }
.e1::after  { width: 125px; height: 60px;  top: -18px; left: 148px; }

/* 暖雾 2 — 左中，细长 */
.e2 {
    width: 200px; height: 65px;
    top: 38%; left: -25px;
    background: rgba(220, 80, 40, 0.10);
    --ef: 26s; --efl: -6s;
    --ex: 20px;
}
.e2::before { width: 115px; height: 50px; top: -22px; left: 32px; }
.e2::after  { width:  78px; height: 40px; top: -12px; left: 112px; }

/* 暖雾 3 — 右上，中等 */
.e3 {
    width: 240px; height: 88px;
    top: 10%; right: 440px;
    background: rgba(245, 175, 60, 0.14);
    --ef: 19s; --efl: -4s;
    --ex: -22px;
}
.e3::before { width: 152px; height: 68px; top: -30px; left: 42px; }
.e3::after  { width: 102px; height: 52px; top: -14px; left: 132px; }

/* 暖雾 4 — 底部，宽扁飘渺 */
.e4 {
    width: 320px; height: 78px;
    bottom: 10%; left: 18px;
    background: rgba(200, 50, 30, 0.09);
    filter: blur(36px);
    --ef: 30s; --efl: -10s;
    --ex: 35px;
}
.e4::before { width: 205px; height: 62px; top: -26px; left: 62px; }
.e4::after  { width: 140px; height: 48px; top: -12px; left: 174px; }

/* 暖雾 5 — 右侧中部，小而清淡 */
.e5 {
    width: 160px; height: 60px;
    top: 55%; right: 450px;
    background: rgba(230, 150, 40, 0.12);
    filter: blur(20px);
    --ef: 24s; --efl: -14s;
    --ex: -18px;
}
.e5::before { width:  90px; height: 48px; top: -20px; left: 24px; }
.e5::after  { width:  62px; height: 36px; top: -10px; left: 88px; }

@keyframes ddxe-ember-drift {
    0%   { transform: translateX(0px);             opacity: 0.80; }
    50%  { transform: translateX(20px); transform: translateX(var(--ex, 20px)); opacity: 1.00; }
    100% { transform: translateX(0px);             opacity: 0.80; }
}

/* -------- 左侧角色区 -------- */
.ddxe-login-left {
    flex: 1 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    z-index: 1;
}

/* -------- 角色外壳容器 -------- */
.ddxe-char-shell {
    position: relative;
    width: 420px;
    height: 480px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

/* -------- 浮动主容器 -------- */
.ddxe-char-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: ddxe-char-float 3.6s ease-in-out infinite;
    z-index: 2;
}

/* -------- 角色图片 -------- */
.ddxe-char-img {
    position: relative;
    z-index: 3;
    display: block;
    width: 300px;
    height: auto;
    pointer-events: none;
    -webkit-user-select: none;
            user-select: none;
    filter:
        saturate(1.05)
        brightness(1.05)
        drop-shadow(0 10px 28px rgba(180, 40, 20, 0.40));
}

/* -------- 铜钱粒子系统 -------- */
.ddxe-coins {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 300px;
    pointer-events: none;
    z-index: 4;
}

.ddxe-coin {
    position: absolute;
    border-radius: 50%;
    animation: ddxe-coin-fly 3.6s ease-in-out infinite;
    animation: ddxe-coin-fly var(--d, 3.6s) ease-in-out infinite;
    animation-delay: 0s;
    animation-delay: var(--delay, 0s);
}

/* 亮金：高光强烈，如新铸铜钱 */
.coin-bright {
    background: radial-gradient(circle at 35% 30%,
        #fffce0 0%,
        #ffe866 18%,
        #ffc820 48%,
        #c88000 76%,
        #7a4e00 100%
    );
    box-shadow:
        0 0  8px rgba(255, 215, 30,  0.95),
        0 0 18px rgba(255, 160, 10,  0.65),
        0 0 32px rgba(200, 120, 0,   0.35);
    border: 1px solid rgba(255, 230, 80, 0.50);
}

/* 暖金：偏橙，如古铜钱 */
.coin-warm {
    background: radial-gradient(circle at 35% 30%,
        #fff4cc 0%,
        #ffd060 20%,
        #f4a020 50%,
        #b06800 78%,
        #6a3800 100%
    );
    box-shadow:
        0 0  7px rgba(255, 190, 40,  0.90),
        0 0 16px rgba(220, 130, 10,  0.55),
        0 0 28px rgba(170, 90,  0,   0.28);
    border: 1px solid rgba(255, 200, 60, 0.40);
}

/* 深金：偏深，如磨损的铜钱 */
.coin-deep {
    background: radial-gradient(circle at 35% 30%,
        #ffe8a0 0%,
        #f0b840 20%,
        #c88010 50%,
        #885000 78%,
        #4a2800 100%
    );
    box-shadow:
        0 0  6px rgba(220, 170, 30,  0.85),
        0 0 14px rgba(180, 110, 10,  0.50),
        0 0 24px rgba(130, 70,  0,   0.25);
    border: 1px solid rgba(220, 170, 50, 0.35);
}

/* -------- 地面光晕投影 -------- */
.ddxe-char-shadow {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    width: 160px;
    height: 24px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(160, 40, 20, 0.32) 0%, transparent 72%);
    animation: ddxe-char-shadow 3.6s ease-in-out infinite;
    z-index: 1;
    pointer-events: none;
}

/* ============================================================
   关键帧
   ============================================================ */
@keyframes ddxe-char-float {
    0%   { transform: translateY(  0px); }
    50%  { transform: translateY(-20px); }
    100% { transform: translateY(  0px); }
}

@keyframes ddxe-char-shadow {
    0%, 100% { transform: translateX(-50%) scaleX(0.65); opacity: 0.70; }
    50%       { transform: translateX(-50%) scaleX(1.00); opacity: 0.28; }
}

/* 铜钱飞散：平移 + 旋转（模拟硬币翻滚） */
@keyframes ddxe-coin-fly {
    0%   { transform: translate(0px, 0px) rotate(0deg);                                         opacity: 0; }
    12%  { opacity: 1; }
    88%  { opacity: 1; }
    100% { transform: translate(0px, -50px) rotate(360deg); transform: translate(var(--tx, 0px), var(--ty, -50px)) rotate(var(--rot, 360deg));   opacity: 0; }
}

/* -------- 右侧卡片区 -------- */
.ddxe-login-right {
    flex: 0 0 460px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 56px 40px 16px;
    position: relative;
    z-index: 1;
}

.ddxe-login-card {
    width: 100%;
    padding: 2rem 2rem 1.5rem;
}

/* -------- Tabs 胶囊风格（红金调） -------- */
.ddxe-tabs .ant-tabs-nav::before { border-bottom: none; }
.ddxe-tabs .ant-tabs-nav         { margin-bottom: 1.25rem; }
.ddxe-tabs .ant-tabs-nav-wrap {
    background: rgba(212, 70, 42, 0.25);
    border-radius: 50px;
    padding: 4px 6px;
    width: 100%;
}
.ddxe-tabs .ant-tabs-nav-list { width: 100%; }
.ddxe-tabs .ant-tabs-tab {
    border-radius: 50px !important;
    padding: 6px 0 !important;
    font-size: 15px;
    font-weight: 500;
    color: #9a2810;
    transition: all 0.25s ease;
    flex: 1 1;
    justify-content: center;
    margin: 0 !important;
}
.ddxe-tabs .ant-tabs-tab-active .ant-tabs-tab-btn { color: #6a1408 !important; }
.ddxe-tabs .ant-tabs-tab-active {
    background: rgba(255, 255, 255, 0.92) !important;
    box-shadow: 0 2px 8px rgba(180, 50, 20, 0.16);
}
.ddxe-tabs .ant-tabs-ink-bar { display: none; }

/* -------- 移动端：隐藏左侧，全屏卡片 -------- */
@media (max-width: 768px) {
    .ddxe-login-page {
        background: radial-gradient(160% 140% at 50% 30%, #fff4d8 0%, #f0b048 45%, #8a1e12 100%);
    }
    .ddxe-login-left  { display: none; }
    .ddxe-login-right { flex: 1 1; padding: 40px 20px; }
}

/* ============================================================
   CRAZY（疯狂水世界）私有登录页样式
   主调：深海墨蓝 #02121f → 海蓝 #0e7ab8 → 亮青 #22d3ee
   点缀：浪花白 #e0fbff、狂欢琥珀 #ffb703
   氛围：水下光束 + 上浮气泡
   注：与 zmsl 的森绿系（#1a6b35 / #4ade80 / #a3ff6e）刻意区分，
       色相走蓝青 190°~205°，点缀用暖琥珀而非黄绿。
   ============================================================ */

.cw-login-page {
    display: flex;
    min-height: 100vh;
    min-height: 100dvh;
    min-height: var(--app-vh, 100vh);
    background: radial-gradient(
        120% 120% at 50% 32%,
        #e6fbff 0%,
        #8fe4f7 20%,
        #29a6dc 44%,
        #0b5c95 68%,
        #02121f 100%
    );
    overflow: hidden;
    position: relative;
}

/* -------- 水下光束层 -------- */
.cw-caustics {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

/* 光束：自上而下的斜向光柱，缓慢摆动 */
.cw-ray {
    position: absolute;
    top: -12%;
    height: 132%;
    background: linear-gradient(
        to bottom,
        rgba(224, 251, 255, 0.30) 0%,
        rgba(150, 232, 255, 0.16) 42%,
        rgba(100, 210, 250, 0.00) 100%
    );
    filter: blur(14px);
    transform-origin: 50% 0%;
    animation: cw-ray-sway 14s ease-in-out infinite;
    animation: cw-ray-sway var(--rd, 14s) ease-in-out infinite;
    animation-delay: 0s;
    animation-delay: var(--rdl, 0s);
}

/* 光束 1 — 左侧，宽 */
.cw-caustics .r1 {
    width: 120px; left: 6%;
    --rd: 15s; --rdl: 0s;
    --ra: 8deg; --rb: 14deg;
}
/* 光束 2 — 左中，窄而亮 */
.cw-caustics .r2 {
    width: 62px; left: 22%;
    background: linear-gradient(to bottom,
        rgba(224, 251, 255, 0.40) 0%,
        rgba(160, 240, 255, 0.18) 46%,
        rgba(120, 220, 255, 0.00) 100%);
    --rd: 12s; --rdl: -4s;
    --ra: 12deg; --rb: 6deg;
}
/* 光束 3 — 中部，宽而淡 */
.cw-caustics .r3 {
    width: 156px; left: 40%;
    background: linear-gradient(to bottom,
        rgba(210, 248, 255, 0.22) 0%,
        rgba(140, 228, 255, 0.11) 40%,
        rgba(90, 200, 245, 0.00) 100%);
    filter: blur(20px);
    --rd: 18s; --rdl: -7s;
    --ra: 6deg; --rb: 13deg;
}
/* 光束 4 — 右侧（卡片外缘），细 */
.cw-caustics .r4 {
    width: 78px; right: 34%;
    --rd: 16s; --rdl: -10s;
    --ra: -10deg; --rb: -4deg;
}

@keyframes cw-ray-sway {
    0%   { transform: rotate(8deg); transform: rotate(var(--ra, 8deg));  opacity: 0.55; }
    50%  { transform: rotate(14deg); transform: rotate(var(--rb, 14deg)); opacity: 1.00; }
    100% { transform: rotate(8deg); transform: rotate(var(--ra, 8deg));  opacity: 0.55; }
}

/* -------- 左侧图标区 -------- */
.cw-login-left {
    flex: 1 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    z-index: 1;
}

/* -------- 图标外壳容器 -------- */
.cw-icon-shell {
    position: relative;
    width: 420px;
    height: 480px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

/* -------- 浮动主容器 -------- */
.cw-icon-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: cw-icon-float 4.2s ease-in-out infinite;
    z-index: 2;
}

/* -------- 图标相框（icon.jpg 仅 120×120，故按 App 图标质感呈现，不当立绘放大） -------- */
.cw-icon-frame {
    position: relative;
    z-index: 3;
    width: 168px;
    height: 168px;
    padding: 6px;
    border-radius: 38px;
    background: linear-gradient(150deg, rgba(224, 251, 255, 0.92) 0%, rgba(120, 214, 245, 0.55) 100%);
    box-shadow:
        0 0  0 1px rgba(255, 255, 255, 0.55) inset,
        0 10px 30px rgba(3, 60, 100, 0.42),
        0 0  38px rgba(34, 211, 238, 0.45);
}

/* 相框外发光环 */
.cw-icon-frame::after {
    content: '';
    position: absolute;
    inset: -10px;
    border-radius: 48px;
    border: 2px solid rgba(103, 232, 249, 0.55);
    animation: cw-ring-pulse 3.0s ease-in-out infinite;
    pointer-events: none;
}

.cw-icon-img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 32px;
    object-fit: cover;
    pointer-events: none;
    -webkit-user-select: none;
            user-select: none;
    filter: saturate(1.12) contrast(1.04);
}

/* -------- 上浮气泡粒子系统 -------- */
.cw-bubbles {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 300px;
    pointer-events: none;
    z-index: 4;
}

.cw-bubble {
    position: absolute;
    border-radius: 50%;
    animation: cw-bubble-rise 4.0s ease-in-out infinite;
    animation: cw-bubble-rise var(--d, 4.0s) ease-in-out infinite;
    animation-delay: 0s;
    animation-delay: var(--delay, 0s);
}

/* 气泡：透明水泡，带高光边 */
.bubble-bubble {
    background: radial-gradient(circle at 32% 28%,
        rgba(255, 255, 255, 0.95) 0%,
        rgba(190, 244, 255, 0.42) 38%,
        rgba(90, 200, 240, 0.16) 70%,
        rgba(40, 160, 215, 0.10) 100%);
    border: 1px solid rgba(224, 251, 255, 0.65);
    box-shadow:
        0 0  8px rgba(120, 226, 255, 0.55),
        0 0 16px rgba(34, 211, 238, 0.28);
}

/* 浪沫：小而亮的白青点 */
.bubble-foam {
    background: radial-gradient(circle, #f2feff 18%, #7fe6fb 58%, #22b8e0 100%);
    box-shadow:
        0 0  6px rgba(130, 235, 255, 0.92),
        0 0 14px rgba(34, 190, 235, 0.52);
}

/* 琥珀火花：狂欢暖色点缀（与 zmsl 的黄绿萤火区分） */
.bubble-spark {
    background: radial-gradient(circle, #fff4d6 18%, #ffb703 58%, #f08c00 100%);
    box-shadow:
        0 0  7px rgba(255, 183, 3,  0.90),
        0 0 16px rgba(240, 140, 0,  0.45);
}

/* -------- 水面涟漪 -------- */
.cw-ripple {
    position: absolute;
    bottom: 26px;
    left: 50%;
    transform: translateX(-50%);
    width: 170px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid rgba(160, 238, 255, 0.42);
    background: radial-gradient(ellipse, rgba(34, 180, 235, 0.26) 0%, transparent 72%);
    animation: cw-ripple-spread 4.2s ease-in-out infinite;
    z-index: 1;
    pointer-events: none;
}

/* ============================================================
   关键帧
   ============================================================ */
@keyframes cw-icon-float {
    0%   { transform: translateY(  0px); }
    50%  { transform: translateY(-18px); }
    100% { transform: translateY(  0px); }
}

@keyframes cw-ring-pulse {
    0%, 100% { transform: scale(0.96); opacity: 0.40; }
    50%      { transform: scale(1.05); opacity: 0.95; }
}

@keyframes cw-ripple-spread {
    0%, 100% { transform: translateX(-50%) scaleX(0.62); opacity: 0.78; }
    50%      { transform: translateX(-50%) scaleX(1.05); opacity: 0.26; }
}

/* 气泡上浮：边升边轻微横向摆动，接近水面时破裂消失 */
@keyframes cw-bubble-rise {
    0%   { transform: translate(0px, 0px) scale(0.82);                       opacity: 0; }
    14%  { opacity: 1; }
    86%  { opacity: 1; }
    100% { transform: translate(0px, -70px) scale(1.1); transform: translate(var(--tx, 0px), var(--ty, -70px)) scale(1.1); opacity: 0; }
}

/* -------- 右侧卡片区 -------- */
.cw-login-right {
    flex: 0 0 460px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 56px 40px 16px;
    position: relative;
    z-index: 1;
}

.cw-login-card {
    width: 100%;
    padding: 2rem 2rem 1.5rem;
}

/* -------- Tabs 胶囊风格（蓝青系） -------- */
.cw-tabs .ant-tabs-nav::before { border-bottom: none; }
.cw-tabs .ant-tabs-nav         { margin-bottom: 1.25rem; }
.cw-tabs .ant-tabs-nav-wrap {
    background: rgba(70, 190, 230, 0.28);
    border-radius: 50px;
    padding: 4px 6px;
    width: 100%;
}
.cw-tabs .ant-tabs-nav-list { width: 100%; }
.cw-tabs .ant-tabs-tab {
    border-radius: 50px !important;
    padding: 6px 0 !important;
    font-size: 15px;
    font-weight: 500;
    color: #0b5c95;
    transition: all 0.25s ease;
    flex: 1 1;
    justify-content: center;
    margin: 0 !important;
}
.cw-tabs .ant-tabs-tab-active .ant-tabs-tab-btn { color: #063a63 !important; }
.cw-tabs .ant-tabs-tab-active {
    background: rgba(255, 255, 255, 0.92) !important;
    box-shadow: 0 2px 8px rgba(10, 90, 145, 0.18);
}
.cw-tabs .ant-tabs-ink-bar { display: none; }

/* -------- 移动端 -------- */
@media (max-width: 768px) {
    .cw-login-page  {
        background: radial-gradient(160% 140% at 50% 26%, #e6fbff 0%, #8fe4f7 44%, #0b5c95 100%);
    }
    .cw-login-left  { display: none; }
    .cw-login-right { flex: 1 1; padding: 40px 20px; }
}

/* 卡片样式 */
.custom-card {
    background: #fff;
    padding: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* 增加阴影效果 */
    border-radius: 8px;
    margin-bottom: 20px;
    width: 388px; /* 固定宽度 */
    max-width: 100%; /* 响应式：最大宽度不超过父容器 */
    box-sizing: border-box; /* 包含 padding 和 border */
}

/* 移动端适配 - 400px以下 */
@media screen and (max-width: 400px) {
    .custom-card {
        width: 100%;
        padding: 12px;
        margin-bottom: 16px;
    }
}

/* 卡片头部 */
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.card-title {
    font-size: 24px;
    color: #000;
    display: flex;
    align-items: center; /* 垂直居中对齐 */
}

/* 350px-400px 区间 */
@media screen and (min-width: 350px) and (max-width: 400px) {
    .card-title {
        font-size: 22px;
    }
}

/* 小于 350px */
@media screen and (max-width: 349px) {
    .card-title {
        font-size: 20px;
    }
}

/* 卡片主体 */
.card-body {
    font-size: 14px; /* 缩小字体 */
    color: #666; /* 灰色字体 */
    margin-bottom: 16px;
}

/* 350px-400px 区间 */
@media screen and (min-width: 350px) and (max-width: 400px) {
    .card-body {
        font-size: 13px;
    }
}

/* 小于 350px */
@media screen and (max-width: 349px) {
    .card-body {
        font-size: 12px;
    }
}

/* 分割条 */
.divider {
    height: 1px;
    background-color: #f0f0f0;
    margin: 10px 0;
}

/* 卡片操作按钮 */
.card-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.card-actions .ant-btn {
    flex: 1 1;
}

/* 状态指示器 */
.status-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* 350px-400px 区间 */
@media screen and (min-width: 350px) and (max-width: 400px) {
    .card-actions {
        gap: 7px;
    }
    
    .card-actions .ant-btn {
        flex: 1 1;
        font-size: 13px;
        padding: 7px 11px;
        height: 34px;
        min-width: auto;
    }
    
    .status-indicator {
        width: 9px;
        height: 9px;
    }
}

/* 小于 350px */
@media screen and (max-width: 349px) {
    .card-actions {
        gap: 6px;
    }
    
    .card-actions .ant-btn {
        flex: 1 1;
        font-size: 12px;
        padding: 6px 10px;
        height: 33px;
        min-width: auto;
    }
    
    .status-indicator {
        width: 8px;
        height: 8px;
    }
}

/* 服务器 */
.server-name .ant-btn {
    margin-left: 8px; /* 保持间距 */
    font-size: 12px; /* 增大字体 */
    padding: 4px 8px; /* 减小内边距，让文字占更多空间 */
    height: auto; /* 自动调整高度以适应文字 */
    line-height: 1.2; /* 调整文字行高 */
}

.status-indicator.green {
    background-color: green;
}

.status-indicator.orange {
    background-color: orange;
}

.status-indicator.red {
    background-color: red;
}

@keyframes statusPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.25; }
}

.status-indicator.loading {
    background-color: #bfbfbf;
    animation: statusPulse 1.2s ease-in-out infinite;
}

/* 霓虹发光效果 - 有版本更新时 */
@keyframes neonGlow {
    0%, 100% {
        box-shadow: 0 0 6px 2px rgba(210, 180, 190, 0.35);
        border-color: #d2b4be;
    }
    50% {
        box-shadow: 0 0 12px 5px rgba(210, 180, 190, 0.6);
        border-color: #c49aa8;
    }
}

.custom-card.neon-update {
    border: 2px solid #d2b4be;
    animation: neonGlow 2s ease-in-out infinite;
}

/* Ant Design Dropdown 样式调整 */
.ant-dropdown-menu-item {
    font-size: 14px;
}

.ant-dropdown-menu-item:hover {
    background-color: #f0f0f0;
}

.game-status.expired {
    color: #fff;
}

/* 排队/启动中全卡蒙版粒子效果 */
.queue-overlay {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
        160deg,
        rgba(255, 228, 242, 0.38) 0%,
        rgba(232, 212, 255, 0.32) 100%
    );
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    z-index: 10;
    overflow: hidden;
    pointer-events: none;
}

/* 扫光层 */
.queue-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        transparent 30%,
        rgba(255, 255, 255, 0.18) 50%,
        transparent 70%
    );
    background-size: 200% 100%;
    animation: overlay-sweep 2.8s ease-in-out infinite;
    border-radius: inherit;
}

@keyframes overlay-sweep {
    0%   { background-position: -100% 0; }
    100% { background-position: 200% 0; }
}

/* 文字下方波浪点 */
.queue-dots {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 5px;
}

.queue-dots span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #f9a8d4;
    animation: dot-wave 1.2s ease-in-out infinite;
}

.queue-dots span:nth-child(2) { animation-delay: 0.15s; background: #d8b4fe; }
.queue-dots span:nth-child(3) { animation-delay: 0.30s; background: #f9a8d4; }
.queue-dots span:nth-child(4) { animation-delay: 0.45s; background: #d8b4fe; }
.queue-dots span:nth-child(5) { animation-delay: 0.60s; background: #f9a8d4; }

@keyframes dot-wave {
    0%, 100% { transform: translateY(0);   opacity: 0.5; }
    50%       { transform: translateY(-5px); opacity: 1; }
}

.particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* 浮起粒子：玫瑰粉 */
.particle {
    position: absolute;
    bottom: -8px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: radial-gradient(circle, #f9a8d4, #ec4899);
    opacity: 0;
    left: calc(var(--i) * 8.5% + 1%);
    animation: particle-float 2.6s ease-in infinite;
    animation-delay: calc(var(--i) * 0.22s);
    box-shadow: 0 0 6px rgba(236, 72, 153, 0.5);
}

/* 奇数：淡紫 */
.particle:nth-child(odd) {
    width: 5px;
    height: 5px;
    background: radial-gradient(circle, #e9d5ff, #a855f7);
    box-shadow: 0 0 5px rgba(168, 85, 247, 0.5);
}

/* 3n：浅玫瑰闪烁，不上浮，原地twinkle */
.particle:nth-child(3n) {
    width: 4px;
    height: 4px;
    background: #fda4af;
    bottom: auto;
    top: calc(var(--i) * 9% + 5%);
    left: calc(var(--i) * 7% + 3%);
    animation: particle-twinkle 1.8s ease-in-out infinite;
    animation-delay: calc(var(--i) * 0.3s);
    box-shadow: 0 0 4px rgba(253, 164, 175, 0.8);
}

@keyframes particle-float {
    0%   { transform: translateY(0) scale(1); opacity: 0.9; }
    60%  { opacity: 0.5; }
    100% { transform: translateY(-130px) translateX(calc((var(--i) % 5 - 2) * 10px)) scale(0.1); opacity: 0; }
}

@keyframes particle-twinkle {
    0%, 100% { opacity: 0; transform: scale(0.5); }
    50%       { opacity: 1; transform: scale(1.4); }
}
.home-content {
    padding-top: 24px; /* 顶部留白；safe-area 由 body 统一处理，勿重复叠加 */
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: calc(56px + 0px + 12px);
    padding-bottom: calc(var(--tabbar-height, 56px) + var(--safe-area-bottom, 0px) + 12px); /* 底部让位 TabBar */
    display: flex;
    flex-wrap: wrap; /* 允许子项换行 */
    justify-content: center; /* 水平居中排列卡片 */
}

.no-accounts {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    height: 100dvh;
    height: var(--app-vh, 100vh);
}

@media (min-width: 768px) {
    .home-content {
        justify-content: flex-start; /* 宽屏时卡片从左向右排列 */
        margin-left: 40px;
        gap: 20px;
    }
}
/* Home 样式 */
.home-container {
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    background-color: #f0f2f5;
    display: flex;
    flex-direction: column;
}

.qr-container {
    display: flex;
    flex-direction: column;
    align-items: center; /* 水平居中 */
    justify-content: center; /* 垂直居中 */
    height: 100%; /* 设置高度，以确保内容在容器内居中 */
    text-align: center; /* 文字居中 */
}

.qr-blur {
    filter: blur(3px);
    opacity: 0.5;
    transition: all 0.3s ease;
}

/* 空状态 / 加载态（自解释引导，替代漫游式导航） */
.home-empty {
    flex: 1 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
    padding-top: 24px; /* safe-area 由 body 统一处理，勿重复叠加 */
    min-height: calc(100vh - 56px);
    min-height: calc(100vh - var(--tabbar-height, 56px));
    min-height: calc(100dvh - 56px - 0px);
    min-height: calc(100dvh - var(--tabbar-height, 56px) - var(--safe-area-bottom, 0px));
    min-height: calc(100vh - 56px - 0px);
    min-height: calc(var(--app-vh, 100vh) - var(--tabbar-height, 56px) - var(--safe-area-bottom, 0px));
}

.home-empty-title {
    font-size: 16px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 4px;
}

.home-empty-hint {
    font-size: 13px;
    color: #999;
}

/* 空状态引导按钮 */
.home-empty-cta {
    margin-top: 16px;
}

/* 个人中心整体样式 */
.profile-container {
    padding: 20px;
    padding-top: 24px; /* 顶部留白；safe-area 由 body 统一处理，勿重复叠加 */
    padding-bottom: calc(56px + 0px + 20px);
    padding-bottom: calc(var(--tabbar-height, 56px) + var(--safe-area-bottom, 0px) + 20px); /* 底部让位 TabBar */
    background-color: #f4f5f7;
    min-height: 100vh;
    min-height: 100dvh;
}

/* 顶部卡片样式 */
.profile-header-card {
    margin-bottom: 16px;
    background: rgba(128, 0, 128, 0.3); /* 半透明紫色背景 */
    background: linear-gradient(135deg, rgba(128, 0, 128, 0.3), rgba(102, 51, 153, 0.3)); /* 紫色渐变 */
    color: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加阴影 */
    position: relative; /* 为绝对定位子元素提供参照 */
    padding-bottom: 120px; /* 预留底部空间, 给 stats 卡片腾位置 */
    backdrop-filter: blur(10px); /* 毛玻璃效果 */
    -webkit-backdrop-filter: blur(10px); /* 兼容 Safari */
    border: 1px solid rgba(255, 255, 255, 0.2); /* 半透明边框 */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* 添加过渡效果 */
}

/* 卡片内容布局 */
.profile-header-content {
    display: flex;
    align-items: center;
    position: relative;
}

.profile-avatar {
    width: 80px; /* 设置固定宽度 */
    height: 80px; /* 设置固定高度 */
    border-radius: 50%; /* 圆形头像 */
    object-fit: cover; /* 确保图片按比例缩放并填充容器 */
    background: linear-gradient(135deg, #ffffff, #e0e0e0); /* 添加渐变背景，模拟质感 */
    border: 2px solid transparent; /* 边框透明，配合背景渐变 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), /* 外部阴影 */
                inset 0 2px 4px rgba(255, 255, 255, 0.6); /* 内部高光阴影 */
    padding: 2px; /* 为渐变边框留出空间 */
    /* 新增定位样式 */
    position: absolute; /* 绝对定位 */
    top: -20px; /* 向上移动 */
    left: -20px; /* 向左移动 */
}

/* 用户信息样式 */
.profile-user-info {
    margin-left: 80px; /* 与头像的间距 */
    margin-top: -10px; /* 向上移动 */
    position: relative; /* 确保定位不会影响其他元素 */
}

/* profile-username 样式调整 */
.profile-username .username-text {
    font-size: clamp(18px, 2vw, 36px); /* 根据宽度动态调整字体大小 */
    font-weight: bold; /* 加粗 */
    color:rgb(0, 0, 0);
}

.profile-invite-code {
    margin-top: 8px; /* 增加与 profile-username 的距离 */
    display: flex;
    align-items: center;
    gap: 8px; /* 图标与文字之间的间距 */
}

.profile-invite-code .anticon-question-circle {
    color: #1890ff;
}

.invite-copy-btn {
    background: linear-gradient(135deg, #7c3aed 0%, #3b82f6 100%);
    color: #fff;
    border: none;
    border-radius: 20px;
    padding: 4px 14px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: box-shadow 0.2s, transform 0.15s, background 0.35s;
    box-shadow: 0 0 10px rgba(124, 58, 237, 0.35), 0 2px 4px rgba(0, 0, 0, 0.1);
    outline: none;
}

.invite-copy-btn:hover {
    box-shadow: 0 0 18px rgba(124, 58, 237, 0.6), 0 3px 8px rgba(0, 0, 0, 0.15);
    transform: translateY(-1px);
}

.invite-copy-btn:active {
    transform: scale(0.96);
    box-shadow: 0 0 8px rgba(124, 58, 237, 0.25);
}

.invite-copy-btn.is-copied {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.45), 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 个人信息卡片 */
/* 悬浮在卡片底部的统计信息区域 */
.profile-stats {
    position: absolute;
    /* 让这个白色卡片居中且浮在底部 */
    left: 50%;
    transform: translateX(-50%);
    bottom: 18px;

    display: flex;
    align-items: center;
    justify-content: space-around;

    width: 93%;                /* 可自行调整宽度 */
    background-color: #fff;
    border-radius: 10px;
    padding: 10px 0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    z-index: 1;                /* 保证在头像等元素前显示 */
}

/* 统计项容器 */
.stat-item {
    flex: 1 1;                   /* 平均分配宽度 */
    text-align: center;
}

/* 数字部分 */
.stat-value {
    display: block;
    font-size: 16px;
    font-weight: bold;
    color: #333; /* 或你想要的颜色 */
}

/* 标签文字 */
.stat-label {
    font-size: 14px; /* 默认字体大小 */
    color: #888;
    margin-top: 4px;
}

@media (max-width: 400px) {
    .stat-label {
        font-size: 12px;
    }
}

/* 功能列表（设置页风格行，移动端自解释） */
.profile-options-list {
    display: flex;
    flex-direction: column;
}

.option-row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 6px 4px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.2s ease;
}

.option-row:last-child {
    border-bottom: none;
}

.option-row:hover {
    background: #fafafa;
}

.option-row:active {
    background: #f0f0f0;
}

.option-row-icon {
    width: 20px;
    height: 20px;
    font-size: 20px;
    color: #3b5bdb;
    flex-shrink: 0;
}

/* svg 图片图标沿用原有蓝紫着色 */
img.option-row-icon {
    filter: invert(34%) sepia(83%) saturate(747%) hue-rotate(210deg) brightness(90%) contrast(90%);
}

.option-row-label {
    flex: 1 1;
    font-size: 15px;
}

.option-row-arrow {
    font-size: 12px;
    color: #c0c4cc;
}

/* 退出登录行：危险色 */
.option-row-danger .option-row-icon,
.option-row-danger .option-row-label {
    color: #ff4d4f;
}

/* 管理员入口沿用原 NavBar 下拉的橙色强调 */
.option-row-admin .option-row-icon,
.option-row-admin .option-row-label {
    color: #fa8c16;
    font-weight: 600;
}

/* 邀请码标签 */
.invite-code-label {
    color: #888;
    font-size: 13px;
}

/* 可点击的收益切换标签 */
.stat-label-switch {
    cursor: pointer;
    color: #1677ff;
}

.stat-label-switch .anticon {
    font-size: 11px;
    margin-left: 2px;
}

/* 子用户列表空提示 */
.sub-users-empty-hint {
    padding: 32px 0;
    text-align: center;
    color: #999;
    font-size: 13px;
}

/* 子用户列表容器样式 - 覆盖 HomeCards 的默认样式 */
.profile-sub-users-container .home-content {
    margin-top: 0 !important; /* 移除顶部边距 */
    padding: 0 !important; /* 移除内边距 */
    justify-content: center; /* 居中排列 */
    /* gap: 16px; 卡片之间的间距 */
}

/* 在 Profile 页面中使用缩放效果调整 AccountCard */
.profile-sub-users-container .custom-card {
    transform: scale(0.85) !important; /* 缩放到95%，保持较大尺寸 */
    transform-origin: center !important; /* 从中心缩放 */
    transition: transform 0.3s ease !important; /* 添加过渡效果 */
    margin-bottom:0px !important;
}
/* 配额展示（图3 样式：总量大数字 + 含赠送，与原 NavBar QuotaDisplay 一致） */
.quota-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.15;
}

.quota-total-value {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.quota-gift {
    font-size: 10px;
    color: #b0b0b0;
    white-space: nowrap;
    margin-top: 2px;
}

.quota-gift b {
    font-weight: 600;
    color: #eb2f96;
}

/* Empty state styles */
.log-empty {
    padding: 64px 0;
    text-align: center;
}

/* Content section styles */
.log-content {
    flex: 1 1;
    overflow: hidden;
}

/* Tag filter bar */
.log-tag-filter {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    padding: 8px 10px;
    background-color: #E3DFFF;
    border-bottom: 1px solid #ccc8f5;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 10;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.log-tag-filter::-webkit-scrollbar {
    display: none;
}

.log-tag-btn {
    flex-shrink: 0;
    padding: 5px 16px;
    border-radius: 999px;
    border: 1.5px solid #b0aad8;
    background: transparent;
    color: #111;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.log-tag-btn.active {
    background: #6c5ce7;
    color: #fff;
    border-color: #6c5ce7;
}

/* Card styles for logs */
.log-card {
    height: calc(100vh - var(--safe-area-top) - var(--safe-area-bottom)); /* 兜底：不识别 dvh 的浏览器 */
    height: calc(100dvh - var(--safe-area-top) - var(--safe-area-bottom)); /* 此页无 NavBar/TabBar */
    height: calc(var(--app-vh, 100vh) - var(--safe-area-top) - var(--safe-area-bottom)); /* JS 实测可视高度 */
    overflow-y: auto;
    background-color: #E3DFFF;
    color: #111;
    padding: 0;
}

.log-entries {
    padding: 8px;
}

/* Log entry styles */
.log-entry {
    white-space: pre-wrap;
    font-size: 14px; /* 调整字体大小 */
    line-height: 1.5;
    margin-bottom: 8px; /* 减少日志条目的间距 */
}

/* Float button styles（定位用 inline style，antd 5.22 不读 --initial-position-* 变量） */
.log-float-button {
    z-index: 1000;
}

/* ANSI color styles for log entries */
.log-entry .ansi-red {
    color: red;
    font-weight: bold;
}

.log-entry .ansi-green {
    color: green;
    font-weight: bold;
}

.log-entry .ansi-yellow {
    color: #d8a627;
    font-weight: bold;
}

.log-entry .ansi-blue {
    color: blue;
    font-weight: bold;
}

.log-entry .ansi-magenta {
    color: magenta;
    font-weight: bold;
}

.log-entry .ansi-cyan {
    color: #079393;
    font-weight: bold;
}

.log-entry .ansi-white {
    color: white;
    font-weight: bold;
}

/* Events page - 结构化事件卡片视图（聚合）
 *
 * 布局策略：脱离 flex 链路，避免 antd Watermark 包装层破坏滚动容器。
 *   .events-page                全屏容器，本身不可滚
 *     ├─ NavBar                  fixed 在顶部，高 50px
 *     └─ .events-watermark-host  绝对定位铺满 NavBar 之下区域
 *         └─ Watermark 根 div    强制 height:100% 撑满 host
 *             └─ .events-scroll  唯一滚动容器（overflow-y: auto）
 *                 ├─ .events-toolbar  sticky top:0
 *                 └─ .events-list     普通流式
 */

.events-empty {
    padding: 64px 0;
    text-align: center;
}

.events-page {
    position: relative;
    height: calc(100vh - 0px - 0px);
    height: calc(100vh - var(--safe-area-top, 0px) - var(--safe-area-bottom, 0px)); /* 兜底：Safari < 15.4 / 老 iOS 不识别 dvh */
    height: calc(100dvh - 0px - 0px);
    height: calc(100dvh - var(--safe-area-top, 0px) - var(--safe-area-bottom, 0px)); /* 扣除 body 的安全区 padding */
    height: calc(var(--app-vh, 100vh) - var(--safe-area-top, 0px) - var(--safe-area-bottom, 0px)); /* JS 实测可视高度，兼容不支持 dvh 的浏览器 */
    overflow: hidden;
}

/* 内容区：safe-area 由 body 统一处理，此处 top 为 0 即可（此页无 NavBar/TabBar） */
.events-watermark-host {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

/* antd Watermark 渲染出的根 div 默认高度由 children 撑开。
 * 强制铺满 host，让内部滚动容器拿到正确高度。 */
.events-watermark-host > div {
    height: 100%;
    overflow: hidden;
}

/* 真正的滚动容器 */
.events-scroll {
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* 顶部工具栏：模块过滤 */
.events-toolbar {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px 8px;
    background-color: rgba(255, 255, 255, 0.85);
    -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
    border-bottom: 1px solid rgba(42, 112, 192, 0.12);
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 10;
}

.events-filter-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.events-filter-row::-webkit-scrollbar {
    display: none;
}

.events-filter-btn {
    flex-shrink: 0;
    padding: 4px 12px;
    border-radius: 999px;
    border: 1.5px solid rgba(42, 112, 192, 0.3);
    background: transparent;
    color: #1a1a1a;
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.events-filter-btn.active {
    background: #2a70c0;
    color: #fff;
    border-color: #2a70c0;
}

/* 事件列表容器（不滚动，由 events-scroll 滚动）
 * 限最大宽度并居中：超宽屏(桌面)不把卡片拉满边到边，内容有最佳阅读宽度，
 * 也避免 70 格建筑网格横贯整屏。手机窄屏下 max-width 不触发，照常占满。 */
.events-list {
    padding: 12px;
    box-sizing: border-box;
    max-width: 880px;
    margin: 0 auto;
}

/* ============ 卡片样式 ============ */

.event-card {
    position: relative;
    background: #fff;
    border-radius: 14px;
    padding: 14px 14px 14px 18px;
    margin-bottom: 10px;
    box-shadow: 0 2px 10px rgba(40, 100, 200, 0.08);
    overflow: hidden;
}

/* 左侧状态色带 */
.event-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: #2a70c0;
}

.event-card.status-success::before { background: #34d399; }
.event-card.status-failed::before  { background: #f87171; }
.event-card.status-pending::before { background: #fbbf24; }

.event-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

.event-card-title {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
    line-height: 1.4;
    word-break: break-word;
    flex: 1 1;
}

.event-card-title .module {
    color: #2a70c0;
    margin-right: 4px;
}

.event-card-status {
    flex-shrink: 0;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    white-space: nowrap;
}

.event-card-status.success { background: #d1fae5; color: #059669; }
.event-card-status.failed  { background: #fee2e2; color: #dc2626; }
.event-card-status.pending { background: #fef3c7; color: #d97706; }

.event-card-time {
    font-size: 11px;
    color: #8b95a9;
    margin-bottom: 6px;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}

.event-card-desc {
    font-size: 13px;
    color: #374151;
    margin-bottom: 6px;
    line-height: 1.45;
    word-break: break-word;
}

.event-card-items {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    font-size: 12px;
    color: #4b5563;
    line-height: 1.5;
}

.event-card-items .label {
    color: #6b7280;
    margin-right: 2px;
}

.event-card-items .gain { color: #059669; }
.event-card-items .cost { color: #9ca3af; }

/* ============ 聚合卡专属元素 ============ */

.event-card.event-group .event-card-title .group-count {
    margin-left: 6px;
    color: #6b7280;
    font-weight: 500;
    font-size: 12px;
}

.event-card.event-group .event-card-title .group-sub-count {
    margin-left: 6px;
    font-size: 11px;
    font-weight: 600;
}

.event-card.event-group .event-card-title .group-sub-count.failed {
    color: #dc2626;
}

.event-card.event-group .event-card-title .group-sub-count.pending {
    color: #d97706;
}

/* title+status 统计芯片（如 "炼制修为丹 x3"） */
.event-group-titles {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 6px;
    margin: 8px 0 6px;
}

.group-title-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 11.5px;
    background: #f1f5f9;
    color: #334155;
    border: 1px solid rgba(42, 112, 192, 0.08);
    white-space: nowrap;
}

.group-title-chip.status-success {
    background: #ecfdf5;
    color: #047857;
    border-color: rgba(5, 150, 105, 0.18);
}

.group-title-chip.status-failed {
    background: #fef2f2;
    color: #b91c1c;
    border-color: rgba(220, 38, 38, 0.22);
}

.group-title-chip.status-pending {
    background: #fffbeb;
    color: #b45309;
    border-color: rgba(217, 119, 6, 0.22);
}

/* ============ 棋盘 / 布局 Grid ============ */

.event-grid {
    margin: 8px 0 4px;
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
}

.event-grid-row {
    display: flex;
    gap: 2px;
}

.event-grid-cell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    min-width: 28px;
    height: 26px;
    background: #f1f5f9;
    color: #334155;
}

/* 2048 数字格 */
.event-grid.grid-number .event-grid-cell {
    width: 36px;
    height: 30px;
    font-size: 10px;
    border-radius: 4px;
}

/* 象棋格 */
.event-grid.grid-chess .event-grid-cell {
    width: 26px;
    height: 24px;
    font-size: 13px;
}
.event-grid.grid-chess .cell-player { background: #fee2e2; color: #dc2626; }
.event-grid.grid-chess .cell-enemy  { background: #fef3c7; color: #92400e; }
.event-grid.grid-chess .cell-empty  { background: #f8fafc; color: #d1d5db; }

/* 小妖卫道守卫格 */
.event-grid.grid-defend .event-grid-cell {
    width: 28px;
    height: 26px;
    font-size: 12px;
}
.event-grid.grid-defend .cell-locked { background: #374151; color: #6b7280; }
.event-grid.grid-defend .cell-open   { background: #ecfdf5; color: #34d399; }
.event-grid.grid-defend .cell-guard  { background: #eff6ff; color: #2563eb; }

/* 沙场点兵棋盘（type:"dbzMusterArmy"）*/
.event-grid.grid-dbzMusterArmy .event-grid-cell {
    width: 30px;
    height: 28px;
    font-size: 12px;
    border-radius: 5px;
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08);
}
.event-grid.grid-dbzMusterArmy .cell-muster-yellow { background: #eab308; }
.event-grid.grid-dbzMusterArmy .cell-muster-blue   { background: #3b82f6; }
.event-grid.grid-dbzMusterArmy .cell-muster-green  { background: #22c55e; }
.event-grid.grid-dbzMusterArmy .cell-muster-red    { background: #ef4444; }
.event-grid.grid-dbzMusterArmy .cell-muster-flag   { background: #f472b6; }
.event-grid.grid-dbzMusterArmy .cell-muster-drum   { background: #d6b08c; }
.event-grid.grid-dbzMusterArmy .cell-muster-empty  { background: #f1f5f9; color: #94a3b8; }

/* 建筑视图分两层：上方活跃明细列表（信息全），下方概览网格（整齐）。 */
.building-view { margin: 8px 0 4px; }

/* ---- ① 活跃明细列表：在产/可收的建筑，一行一条，完整信息不截断 ---- */
.building-active-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 10px;
}
.building-active-item {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 12px;
    line-height: 1.3;
    background: #f8fafc;
    border: 1px solid rgba(148, 163, 184, 0.16);
}
/* 状态点：可收=绿、在产=蓝 */
.building-active-item .ba-dot {
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #94a3b8;
}
.building-active-item.cell-collect  { background: #ecfdf5; border-color: rgba(5, 150, 105, 0.22); }
.building-active-item.cell-collect  .ba-dot { background: #10b981; }
.building-active-item.cell-building { background: #eff6ff; border-color: rgba(37, 99, 235, 0.2); }
.building-active-item.cell-building .ba-dot { background: #3b82f6; }
/* 建筑名：主信息，不截断 */
.building-active-item .ba-name { font-weight: 600; color: #1f2937; white-space: nowrap; }
.building-active-item .ba-lv {
    flex-shrink: 0;
    font-size: 10.5px;
    font-weight: 500;
    color: #94a3b8;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}
/* 副行内容（在产物·倒计时·队列）：占据中间弹性空间，太长才省略 */
.building-active-item .ba-sub {
    flex: 1 1;
    min-width: 0;
    color: #475569;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}
/* 右侧状态标签：生产中 / 可领取 */
.building-active-item .ba-tag {
    flex-shrink: 0;
    font-size: 10.5px;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 999px;
}
.building-active-item.cell-collect  .ba-tag { background: rgba(16, 185, 129, 0.15); color: #059669; }
.building-active-item.cell-building .ba-tag { background: rgba(59, 130, 246, 0.14); color: #2563eb; }

/* ---- ② 概览网格：紧凑 chip，只放 名 + 等级，一眼看全局分布 ---- */
/* 空闲建筑是纯背景信息，不该每个占大方块。做成密排小 chip：横向一行一个建筑，
 * 名 + 等级同行，弱化空闲态、点亮活跃态。auto-fill + 固定 chip 宽让排列整齐且信息密。 */
.event-grid.grid-building {
    display: block;
    width: 100%;
}
.event-grid.grid-building .grid-building-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
    grid-gap: 5px;
    gap: 5px;
}
.event-grid.grid-building .building-cell {
    display: flex;
    flex-direction: row;      /* 名 + 等级同一行，chip 更矮更密 */
    align-items: baseline;
    justify-content: space-between;
    gap: 4px;
    min-width: 0;
    min-height: 24px;
    padding: 3px 8px;
    border-radius: 6px;
    line-height: 1.3;
}
.event-grid.grid-building .building-name {
    font-size: 11px;
    font-weight: 500;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.event-grid.grid-building .building-lv {
    flex-shrink: 0;
    font-size: 9.5px;
    font-weight: 500;
    opacity: 0.65;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}
/* 空闲：最弱，几乎无背景，只靠淡边框成型，不抢眼 */
.event-grid.grid-building .cell-idle {
    background: #fbfcfd;
    color: #64748b;
    border: 1px solid #eef1f5;
}
/* 在建：蓝 chip，明确"在动" */
.event-grid.grid-building .cell-building {
    background: #eff6ff;
    color: #2563eb;
    border: 1px solid rgba(37, 99, 235, 0.2);
    font-weight: 600;
}
/* 可收：绿 chip，最醒目（上方明细列表有对应条目） */
.event-grid.grid-building .cell-collect {
    background: #ecfdf5;
    color: #059669;
    border: 1px solid rgba(16, 185, 129, 0.4);
    font-weight: 600;
}

/* ============ 两列资源表（type:"table"，「资源」卡用）============ */
.event-table {
    border-collapse: collapse;
    margin: 8px 0 4px;
    font-size: 12px;
}
.event-table th {
    text-align: left;
    color: #64748b;
    font-weight: 600;
    padding: 3px 16px 3px 0;
    border-bottom: 1px solid #e2e8f0;
}
.event-table td {
    padding: 3px 16px 3px 0;
    border-bottom: 1px solid #f1f5f9;
}
.event-table tr:last-child td {
    border-bottom: none;
}
.event-table-name {
    color: #334155;
}
.event-table-val {
    color: #0f172a;
    font-weight: 400;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}

/* ============ 进度条网格(type:"meter", 原料卡) ============ */
/* 每行: 名 | 进度条 | 值 | (满标记)。按占比上色: 足=蓝 / ≥85%=橙 / 满=红。 */
.event-meter {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 8px 0 4px;
    font-size: 12px;
}
.event-meter-row {
    display: grid;
    grid-template-columns: 52px 1fr auto auto;
    align-items: center;
    grid-gap: 8px;
    gap: 8px;
}
.event-meter-name {
    color: #334155;
    white-space: nowrap;
}
.event-meter-track {
    position: relative;
    height: 8px;
    border-radius: 4px;
    background: #eef2f7;
    overflow: hidden;
}
.event-meter-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    border-radius: 4px;
    transition: width 0.3s ease;
    background: #3b82f6; /* 余量充足=蓝 */
}
.event-meter-row.tone-high .event-meter-fill {
    background: #f59e0b; /* ≥85% 接近满=橙 */
}
.event-meter-row.tone-full .event-meter-fill {
    background: #ef4444; /* 满仓=红 */
}
.event-meter-val {
    color: #0f172a;
    font-weight: 600;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.event-meter-row.tone-full .event-meter-val {
    color: #ef4444;
}
.event-meter-flag {
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    background: #ef4444;
    border-radius: 4px;
    padding: 1px 5px;
    line-height: 1.4;
}

/* ============ 工厂网格(type:"factory", 工厂卡) ============ */
/* 每厂一块: 厂头(名+Lv) → 6 制造位格(在造带产物+ETA) → 可领绿标 → 可造配方目录(未解锁灰显/缺料红)。 */
.event-factory {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 12px;
}
.factory-block {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px 10px;
    background: #f8fafc;
}
.factory-head {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 6px;
}
.factory-name {
    font-weight: 600;
    color: #0f172a;
}
.factory-lv {
    font-size: 11px;
    color: #64748b;
}
/* 游戏内自动生产(服务器真值): 厂头右侧蓝标, 同在造格的蓝; 没开不显示 */
.factory-auto {
    margin-left: auto;
    font-size: 10px;
    font-weight: 600;
    color: #1d4ed8;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 4px;
    padding: 1px 5px;
    white-space: nowrap;
}
/* 6 制造位: 等宽格, 在造=蓝底 / 空位=灰虚线 */
.factory-slots {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-gap: 4px;
    gap: 4px;
    margin-bottom: 6px;
}
.factory-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    border-radius: 6px;
    padding: 3px 2px;
    text-align: center;
    overflow: hidden;
}
.factory-slot.slot-busy {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
}
.factory-slot.slot-empty {
    background: #f1f5f9;
    border: 1px dashed #cbd5e1;
}
.slot-item {
    color: #1d4ed8;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    font-size: 11px;
}
.slot-eta {
    color: #64748b;
    font-size: 10px;
    margin-top: 1px;
}
.slot-dash {
    color: #cbd5e1;
}
/* 可领成品绿标 */
.factory-collect {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin-bottom: 6px;
}
.fc-tag {
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    background: #16a34a;
    border-radius: 4px;
    padding: 1px 5px;
}
.fc-item {
    color: #15803d;
    font-weight: 600;
}
/* 可造配方目录 */
.factory-recipes {
    display: flex;
    flex-direction: column;
    gap: 3px;
    border-top: 1px dashed #e2e8f0;
    padding-top: 6px;
}
.factory-recipe {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
}
.factory-recipe.locked {
    opacity: 0.45;
}
.fr-name {
    color: #334155;
    font-weight: 600;
    min-width: 56px;
}
.fr-stock {
    color: #64748b;
    font-size: 11px;
}
.fr-cost {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-left: auto;
}
.fr-cost-item {
    color: #64748b;
    font-size: 11px;
    white-space: nowrap;
}
.fr-cost-item.cost-lack {
    color: #ef4444;
    font-weight: 600;
}
.fr-lock {
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    background: #94a3b8;
    border-radius: 4px;
    padding: 1px 5px;
}

/* ============ 居民需求网格(type:"resident", 工单卡) ============ */
/* 参照游戏「居民需求」面板: 顶部 OTD 进度条 → 每订单一块(需求格, 缺料红 / 可交付绿标 / 刷新中灰角标)。 */
.event-resident {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 12px;
}
/* 顶部 OTD 进度条: 复用 meter 那套(蓝→橙→红), 只调网格列(名字略宽一点放"今日满足需求") */
.event-meter-row.resident-otd {
    grid-template-columns: 84px 1fr auto;
}
.resident-order-stats {
    padding: 8px 10px;
    border: 1px solid #dbe4ee;
    border-radius: 8px;
    background: #fff;
}
.resident-order-stats-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding-bottom: 6px;
    border-bottom: 1px dashed #e2e8f0;
}
.resident-order-stats-head h4,
.resident-order-stat-group h5 {
    margin: 0;
    color: #334155;
    font-size: 12px;
    font-weight: 700;
}
.resident-order-stats-summary {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 4px 10px;
    color: #64748b;
    font-size: 11px;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}
.resident-order-stat-groups {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-gap: 8px;
    gap: 8px;
    padding-top: 7px;
}
.resident-order-stat-group {
    min-width: 0;
}
.resident-order-stat-group h5 {
    margin-bottom: 4px;
    color: #475569;
    font-size: 11px;
}
.resident-order-stat-group ul {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.resident-order-stat-group li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 20px;
    padding: 2px 6px;
    border-radius: 4px;
    background: #f8fafc;
    color: #64748b;
    font-size: 11px;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}
.resident-order-stat-group li b {
    flex: none;
    color: #334155;
    font-weight: 700;
}
.resident-order-stats-empty {
    margin: 0;
    padding: 2px 6px;
    color: #94a3b8;
    font-size: 11px;
}
@media (max-width: 560px) {
    .resident-order-stat-groups {
        grid-template-columns: 1fr;
    }
}
.resident-orders {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
/* 每个订单一块: 灰蓝底 + 左侧色条(可交付=绿 / 刷新中=灰 / 缺料=默认) */
.resident-order {
    border: 1px solid #e2e8f0;
    border-left-width: 3px;
    border-radius: 8px;
    padding: 6px 10px;
    background: #f8fafc;
}
.resident-order.can-finish {
    border-left-color: #16a34a;
    background: #f0fdf4;
}
.resident-order.refreshing {
    border-left-color: #cbd5e1;
    opacity: 0.7;
}
.resident-order.material-blocked {
    border-left-color: #d97706;
    background: #fffbeb;
}
.resident-order.reward-blocked {
    border-left-color: #dc2626;
    background: #fff1f2;
}
.resident-order-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-height: 14px;
    margin-bottom: 4px;
}
.resident-order-head:empty {
    display: none;
}
.ro-tag {
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    border-radius: 4px;
    padding: 1px 6px;
}
.ro-tag.ro-ok {
    background: #16a34a;
}
.ro-tag.ro-refresh {
    background: #94a3b8;
}
.ro-tag.ro-blocked {
    background: #d97706;
}
.ro-tag.ro-reward-blocked {
    background: #dc2626;
}
.resident-reward {
    margin-left: auto;
    color: #64748b;
    font-size: 11px;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
/* 需求格: 一个物品一格(名 + 拥有/需要), 缺料标红 */
.resident-reqs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.resident-req {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 6px;
    background: #eef2f7;
}
.resident-req .rr-name {
    color: #334155;
    font-weight: 600;
}
.resident-req .rr-count {
    color: #64748b;
    font-size: 11px;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}
/* 缺料(have<need): 复用工厂 cost-lack 的红, 整格红底提醒该补 */
.resident-req.cost-lack {
    background: #fef2f2;
}
.resident-req.cost-lack .rr-name,
.resident-req.cost-lack .rr-count {
    color: #ef4444;
    font-weight: 600;
}
.resident-req.not-allowed {
    background: #fff7ed;
    box-shadow: inset 0 0 0 1px #fed7aa;
}
.resident-req.not-allowed .rr-name,
.resident-req.not-allowed .rr-count,
.resident-req.not-allowed .rr-policy {
    color: #c2410c;
}
.resident-req .rr-policy {
    font-size: 10px;
    font-weight: 700;
}

/* ============ 货船贸易网格(type:"cargo", 货船卡) ============ */
/* 参照游戏「贸易港口」面板: 每条船一块 → 三态头标(到港绿/运输中蓝带 ETA/在港灰) + 货物槽行(缺料红 / 已装打勾灰显)。 */
.event-cargo {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 12px;
}
/* 每条船一块: 灰蓝底 + 左侧色条(到港=绿 / 运输中=蓝 / 在港=灰) */
.cargo-block {
    border: 1px solid #e2e8f0;
    border-left-width: 3px;
    border-radius: 8px;
    padding: 6px 10px;
    background: #f8fafc;
}
.cargo-block.cargo-arrived {
    border-left-color: #16a34a;
    background: #f0fdf4;
}
.cargo-block.cargo-transport {
    border-left-color: #3b82f6;
    background: #eff6ff;
}
.cargo-block.cargo-order {
    border-left-color: #cbd5e1;
}
.cargo-head {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}
/* 三态头标: 到港绿 / 运输中蓝 / 在港灰 */
.cargo-status {
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    border-radius: 4px;
    padding: 1px 6px;
    background: #94a3b8;
}
.cargo-block.cargo-arrived .cargo-status {
    background: #16a34a;
}
.cargo-block.cargo-transport .cargo-status {
    background: #3b82f6;
}
/* 货物槽行: 每格 物品名 ×数量; 缺料红 / 已装打勾灰显 */
.cargo-slots {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.cargo-slot {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 6px;
    background: #eef2f7;
}
.cargo-slot .cs-name {
    color: #334155;
    font-weight: 600;
}
.cargo-slot .cs-count {
    color: #64748b;
    font-size: 11px;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}
/* 缺料(ok=false 且未装): 复用 cost-lack 的红, 整格红底提醒该补 */
.cargo-slot.cost-lack {
    background: #fef2f2;
}
.cargo-slot.cost-lack .cs-name,
.cargo-slot.cost-lack .cs-count {
    color: #ef4444;
    font-weight: 600;
}
/* 已装的格: 灰显打勾, 不再是待办 */
.cargo-slot.slot-filled {
    background: #f1f5f9;
    opacity: 0.6;
}
.cargo-slot .cs-check {
    color: #16a34a;
    font-weight: 700;
}

/* ============ 闯关网格(type:"stage", 闯关卡) ============ */
/* 参照游戏底部关卡带: 当前关号是主角(大数字) + 已过/当前/未开的关卡带 + 一行状态说明。 */
.event-stage {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12px;
}
.stage-hero-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
/* 当前关号: 卡里最该被看到的数字 */
.stage-big {
    font-size: 30px;
    font-weight: 800;
    line-height: 1;
    color: #2563eb;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}
.stage-side {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.stage-state {
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    border-radius: 4px;
    padding: 1px 6px;
    align-self: flex-start;
}
.stage-state.st-fighting { background: #3b82f6; }
.stage-state.st-stuck    { background: #ef4444; }
.stage-state.st-gated    { background: #f59e0b; }
.stage-state.st-cleared  { background: #16a34a; }
.stage-state.st-off      { background: #cbd5e1; color: #64748b; }
.stage-power {
    color: #b45309;
    font-weight: 600;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}
/* 关卡带: 已过绿 / 当前蓝(放大) / 未开灰 */
.stage-strip {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}
.stage-chip {
    min-width: 34px;
    text-align: center;
    padding: 2px 6px;
    border-radius: 6px;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
    background: #f1f5f9;
    color: #94a3b8;
}
.stage-chip.sc-passed { background: #f0fdf4; color: #16a34a; }
.stage-chip.sc-current {
    background: #2563eb;
    color: #fff;
    font-weight: 700;
    transform: scale(1.1);
}
.stage-note {
    color: #64748b;
    font-size: 11px;
}
.stage-afk-claims {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    padding: 0 8px;
    font-size: 11px;
    line-height: 1.6;
    color: #475569;
    overflow-wrap: anywhere;
}
.stage-afk-claim-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 8px;
    align-items: baseline;
}
.stage-afk-claim-label { color: #0369a1; font-weight: 600; }
.stage-afk-claim-ago { color: #64748b; }
.stage-afk-claim-reward { white-space: normal; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }

/* ============ 竞技场网格(type:"arena", 竞技场卡) ============ */
/* 头部: 我的排名 + 挑战券(余量/上限/恢复倒计时); 下面对手表(可打绿/偏强灰/翻车红)。 */
.event-arena {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 12px;
}
.arena-hero-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
/* 排名/券 两个盒子: 标签在上、数值在下, 数值放大 —— 一眼抓住 */
.arena-rank-box,
.arena-ticket {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    padding: 3px 10px;
    border-radius: 8px;
    background: #f1f5f9;
    line-height: 1.2;
}
.ar-label,
.at-label {
    font-size: 10px;
    color: #94a3b8;
}
.ar-value {
    font-size: 20px;
    font-weight: 800;
    color: #2563eb;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}
.at-value {
    font-size: 18px;
    font-weight: 800;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}
/* 有券=绿(能打), 没券=压暗(等恢复) */
.arena-ticket.has { background: #f0fdf4; }
.arena-ticket.has .at-value { color: #16a34a; }
.arena-ticket.none .at-value { color: #cbd5e1; }
.at-eta {
    font-size: 10px;
    color: #94a3b8;
}
.arena-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-left: auto;
    color: #64748b;
    font-size: 11px;
    text-align: right;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}
/* 对手表: 一行一个, 左侧色条区分三态 */
.arena-foes {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.arena-foes-head {
    font-size: 10px;
    color: #94a3b8;
}
.arena-foe {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 3px 8px;
    border-radius: 6px;
    border-left: 3px solid #cbd5e1;
    background: #f8fafc;
}
.arena-foe.af-win  { border-left-color: #16a34a; background: #f0fdf4; }
.arena-foe.af-lost { border-left-color: #ef4444; background: #fef2f2; }
.af-rank {
    color: #94a3b8;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
    min-width: 34px;
}
.af-name {
    font-weight: 600;
    color: #334155;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 40%;
}
.af-power {
    margin-left: auto;
    color: #b45309;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}
.af-tag {
    font-size: 10px;
    font-weight: 700;
    border-radius: 4px;
    padding: 0 5px;
    color: #64748b;
    background: #eef2f7;
    white-space: nowrap;
}
.arena-foe.af-win .af-tag  { color: #fff; background: #16a34a; }
.arena-foe.af-lost .af-tag { color: #fff; background: #ef4444; }

/* ============ 试炼网格(type:"trial", 试炼卡) ============ */
/* 三副本进度独立 → 按副本分块: 左侧当前挑战等级(大数字) + 中间名/门槛 + 右侧扫荡剩余。 */
.event-trial {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12px;
}
.trial-power {
    font-size: 11px;
    color: #b45309;
    font-weight: 600;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}
.trial-block {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 10px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    border-left-width: 3px;
    border-left-color: #cbd5e1;
    background: #f8fafc;
}
.trial-block.tr-ok      { border-left-color: #16a34a; background: #f0fdf4; }
.trial-block.tr-weak    { border-left-color: #f59e0b; }
.trial-block.tr-stuck   { border-left-color: #ef4444; }
.trial-block.tr-cleared { border-left-color: #3b82f6; }
/* 当前挑战等级: 游戏面板上那个大数字 */
.trial-level {
    font-size: 24px;
    font-weight: 800;
    line-height: 1;
    color: #334155;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
    min-width: 34px;
    text-align: center;
}
.trial-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.trial-head {
    display: flex;
    align-items: baseline;
    gap: 6px;
}
.trial-name {
    font-weight: 700;
    color: #334155;
}
.trial-tag {
    font-size: 10px;
    font-weight: 700;
    border-radius: 4px;
    padding: 0 5px;
    color: #64748b;
    background: #eef2f7;
    white-space: nowrap;
}
.trial-block.tr-ok .trial-tag      { color: #fff; background: #16a34a; }
.trial-block.tr-weak .trial-tag    { color: #fff; background: #f59e0b; }
.trial-block.tr-stuck .trial-tag   { color: #fff; background: #ef4444; }
.trial-block.tr-cleared .trial-tag { color: #fff; background: #3b82f6; }
.trial-sub {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 11px;
    color: #64748b;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}
/* 扫荡剩余: 有可白嫖的次数=绿, 否则压暗 */
.trial-sweep {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    margin-left: auto;
    padding: 2px 8px;
    border-radius: 6px;
    background: #f1f5f9;
    line-height: 1.25;
}
.trial-sweep.can { background: #f0fdf4; }
.tw-label {
    font-size: 10px;
    color: #94a3b8;
}
.tw-value {
    font-weight: 700;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
    color: #64748b;
}
.trial-sweep.can .tw-value { color: #16a34a; }
.tw-free {
    font-size: 9px;
    font-weight: 700;
    color: #16a34a;
}
.tw-note {
    font-size: 9px;
    color: #94a3b8;
}

/* ============ 雷达事件网格(type:"radar", 雷达卡) ============ */
/* 逐事件一行: 事件名(品质上色) + 状态标签 + 类型/战斗标记, 副行 奖(必有) / 付(只有难民有)。
   头行是汽油: 余量 + 派一次的单价, 不够一次就标红 —— bot 端正是按单价预检, 剩 1~499 时一条都不派。 */
.event-radar {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 12px;
}
.radar-row {
    display: flex;
    padding: 4px 10px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    border-left-width: 3px;
    border-left-color: #cbd5e1;
    background: #f8fafc;
}
/* 状态配色: 可领=绿(该收了) 可派=蓝(能动) 交战/行军=灰蓝(在途) 已领=压暗 */
.radar-row.rd-claimable { border-left-color: #16a34a; background: #f0fdf4; }
.radar-row.rd-ready     { border-left-color: #2563eb; }
.radar-row.rd-fighting  { border-left-color: #f59e0b; }
.radar-row.rd-moving    { border-left-color: #94a3b8; }
.radar-row.rd-got       { opacity: 0.6; }
/* 子开关没开(难民): 压暗 + 虚线左边, 表示"看得见但 bot 不会去动" */
.radar-row.radar-off {
    opacity: 0.65;
    border-left-style: dashed;
}
/* 路易斯(固定事件)恒定橙: 它是全场最肥的一发, 位置也固定在最上面, 该一眼认出来。
   必须写成【两个类】的复合选择器 —— 单写 .radar-fixed 只有一层特异性, 会输给上面
   .radar-row.rd-claimable 的两层, 于是"橙还是绿"要看它当前什么状态, 是不确定的。
   同为两层时由源码顺序决定, 这条在后 → 稳定赢。状态仍由右边的标签文字交代。 */
.radar-row.radar-fixed { border-left-color: #ea580c; background: #fff7ed; }
.radar-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1;
}
.radar-line {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
}
.radar-name { font-weight: 700; }
.radar-tag {
    font-size: 10px;
    font-weight: 700;
    border-radius: 4px;
    padding: 0 5px;
    color: #64748b;
    background: #eef2f7;
    white-space: nowrap;
}
.radar-row.rd-claimable .radar-tag { color: #fff; background: #16a34a; }
.radar-row.rd-ready .radar-tag     { color: #fff; background: #2563eb; }
.radar-row.rd-fighting .radar-tag  { color: #fff; background: #f59e0b; }
.radar-kind {
    font-size: 10px;
    color: #94a3b8;
}
.radar-fight {
    font-size: 10px;
    font-weight: 600;
    color: #dc2626;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}
/* 奖/付 明细行 */
.radar-assets {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 11px;
    color: #64748b;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}
.ra-label {
    font-size: 10px;
    color: #94a3b8;
}
.ra-item { white-space: nowrap; }
.ra-num { color: #94a3b8; }
/* 凑不齐的物资(have<num): 整项红, 一眼看出卡在哪一样料上 */
.ra-item.cost-lack,
.ra-item.cost-lack .ra-num {
    color: #ef4444;
    font-weight: 600;
}
.radar-more {
    font-size: 10px;
    color: #94a3b8;
}

/* ============ 联盟科技网格(type:"tech", 联盟科技卡) ============ */
/* 与游戏内面板同构: 按 group 分块, 组内逐条 `等级/当前档上限` + 效果(本级→下一级) + 花费。
   上限由【赛季任务阶段】挑档算出(客户端 unlockCfg 同款), 不是绝对上限。 */
.event-tech {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12px;
}
.tech-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.tech-stat {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    padding: 2px 8px;
    border-radius: 6px;
    background: #f1f5f9;
}
.tc-label {
    font-size: 10px;
    color: #94a3b8;
}
.tc-value {
    font-weight: 700;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
    color: #334155;
}
.tech-points {
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    margin-left: auto;
    font-size: 11px;
    color: #64748b;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}
.tc-pt { white-space: nowrap; }
.tc-stage {
    font-size: 10px;
    color: #94a3b8;
}
.tech-group {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.tech-group-name {
    display: flex;
    align-items: baseline;
    gap: 5px;
    font-size: 10px;
    font-weight: 700;
    color: #94a3b8;
}
/* 组所属 type: "资源" 组世界系/职级系各一份, 靠这个区分(货币也不同) */
.tech-group-kind {
    font-weight: 600;
    color: #cbd5e1;
}
.tech-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 3px 10px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    border-left-width: 3px;
    border-left-color: #cbd5e1;
    background: #f8fafc;
}
/* 状态配色: 可升=绿(点够了) 攒点=灰蓝 满级=蓝 未解锁=压暗虚线 */
.tech-row.tc-can    { border-left-color: #16a34a; background: #f0fdf4; }
.tech-row.tc-wait   { border-left-color: #94a3b8; }
.tech-row.tc-max    { border-left-color: #3b82f6; }
.tech-row.tc-locked {
    opacity: 0.6;
    border-left-style: dashed;
}
/* 等级/上限: 面板上那个 3/10 */
.tech-lv {
    font-weight: 800;
    font-size: 16px;
    line-height: 1;
    color: #334155;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
    min-width: 46px;
    text-align: right;
    white-space: nowrap;
}
.tech-lv-max {
    font-size: 11px;
    font-weight: 600;
    color: #94a3b8;
}
.tech-body {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1 1;
}
.tech-line {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
}
.tech-name {
    font-weight: 700;
    color: #334155;
}
.tech-tag {
    font-size: 10px;
    font-weight: 700;
    border-radius: 4px;
    padding: 0 5px;
    color: #64748b;
    background: #eef2f7;
    white-space: nowrap;
}
.tech-row.tc-can .tech-tag { color: #fff; background: #16a34a; }
.tech-row.tc-max .tech-tag { color: #fff; background: #3b82f6; }
.tech-note {
    font-size: 10px;
    color: #94a3b8;
}
.tech-sub {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 11px;
    color: #64748b;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}
.tech-eff { white-space: nowrap; }
.tech-eff-cur {
    color: #16a34a;
    font-weight: 600;
    margin-left: 3px;
}
.tech-eff-next {
    color: #94a3b8;
    margin-left: 3px;
}
.tech-cost { white-space: nowrap; }
/* 点不够: 复用 cost-lack 的红(必须带父类, 单写 .cost-lack 不生效) */
.tech-cost.cost-lack,
.tech-cost.cost-lack .tech-have {
    color: #ef4444;
    font-weight: 600;
}
.tech-have { color: #94a3b8; }
.tech-empty {
    color: #94a3b8;
    font-size: 12px;
}

/* ============ 资源地网格(type:"resField", 资源地卡) ============ */
/* 逐格一行: 等级(大数字) + 类型/城名/盟城标记, 副行 每日产出 + 格号。
   等级与产量【服务器都不下发】, 是 bot 端照客户端算法推的; 超出配置表的按 300+60×lv 外推并标"估算"。
   三类按产出配色: 工厂(科技点)=紫 / 绿洲(种子)=绿 / 油罐(汽油)=橙。 */
.event-resfield {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 12px;
}
/* .rf-oil 这个类名跟 RESFIELD_KIND_CLASS 里"油罐"类型的逐块地行(.rf-row.rf-oil)撞名，
   摘要区旧的占一次徽章(.rf-head 那一套)删掉后，这条规则还得留着给行级配色用。 */
.rf-oil {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    padding: 2px 8px;
    border-radius: 6px;
    background: #f1f5f9;
}
/* 日产出汇总: 所有已占地按道具合并 */
.rf-totals {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 11px;
    color: #64748b;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}
.rf-total-item { white-space: nowrap; }
.rf-total-num {
    color: #16a34a;
    font-weight: 600;
    margin-left: 2px;
}
/* 估算标记: 产量是表外外推的, 别让人当成配置权威值 */
.rf-est {
    font-size: 9px;
    font-weight: 600;
    color: #f59e0b;
    border: 1px dashed #fbbf24;
    border-radius: 4px;
    padding: 0 3px;
}
.rf-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 10px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    border-left-width: 3px;
    border-left-color: #cbd5e1;
    background: #f8fafc;
}
/* 按产出类型配色。两层特异性 —— 下面 .rf-row.rf-taking 也是两层且写在后面, 故在途态稳定覆盖。 */
.rf-row.rf-factory { border-left-color: #9333ea; }
.rf-row.rf-oasis   { border-left-color: #16a34a; }
.rf-row.rf-oil     { border-left-color: #ea580c; }
/* 攻占中: 还没入账, 压暗 + 虚线, 与已占的区分开 */
.rf-row.rf-taking {
    opacity: 0.7;
    border-left-color: #94a3b8;
    border-left-style: dashed;
}
/* 城战丢城后的僵尸地: 已经不产出, bot 会自动放弃 —— 红色警示, 跟按产出类型的配色区分开
   (写在 .rf-factory/.rf-oasis/.rf-oil 后面, 同特异性靠源码顺序覆盖它们)。 */
.rf-row.rf-stale {
    border-left-color: #dc2626;
    background: #fef2f2;
}
/* 等级: 游戏面板上那个大数字 */
.rf-lv {
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
    color: #334155;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
    min-width: 30px;
    text-align: center;
}
.rf-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1;
}
.rf-line {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
}
.rf-kind {
    font-weight: 700;
    color: #334155;
}
.rf-city { color: #64748b; }
.rf-tag-guild {
    font-size: 9px;
    font-weight: 700;
    color: #fff;
    background: #2563eb;
    border-radius: 4px;
    padding: 0 4px;
}
/* 满上限时优先放弃这块 —— 解释"为什么丢了一块地" */
.rf-tag-drop {
    font-size: 9px;
    font-weight: 700;
    color: #ea580c;
    border: 1px solid #fdba74;
    border-radius: 4px;
    padding: 0 4px;
}
/* 城已经不是我盟的了, 僵尸地待放弃 */
.rf-tag-stale {
    font-size: 9px;
    font-weight: 700;
    color: #fff;
    background: #dc2626;
    border-radius: 4px;
    padding: 0 4px;
}
.rf-tag-taking {
    font-size: 9px;
    font-weight: 700;
    color: #fff;
    background: #94a3b8;
    border-radius: 4px;
    padding: 0 4px;
}
.rf-sub {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 11px;
    color: #64748b;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}
.rf-out { white-space: nowrap; }
.rf-out-num {
    color: #16a34a;
    font-weight: 600;
    margin-left: 2px;
}
.rf-grid { color: #cbd5e1; }
.rf-empty {
    color: #94a3b8;
    font-size: 12px;
}

/* ============ 英雄网格(type:"hero", 英雄卡) ============ */
/* 参照游戏「英雄」面板: 每英雄一块 → 头行(名/职业/等级/星级/战力/技能视频态) + 穿戴两行(徽章4槽 / 装备3槽)。
   槽位三态: 已戴(品质上色实底) / 已解锁空槽(虚线框, 该去戴) / 未解锁(灰显 + Lv 门槛角标)。 */
.event-hero {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 12px;
}
.hero-block {
    border: 1px solid #e2e8f0;
    border-left: 3px solid #cbd5e1;
    border-radius: 8px;
    padding: 6px 10px;
    background: #f8fafc;
}
.hero-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 6px;
}
/* 所在舰队角标: 蓝色小徽章，出现在英雄名左侧，只有上了远征船的英雄才渲染 */
.hero-fleet {
    font-size: 9px;
    font-weight: 700;
    color: #1d4ed8;
    background: rgba(59, 130, 246, 0.12);
    border: 1px solid rgba(59, 130, 246, 0.35);
    border-radius: 3px;
    padding: 1px 3px;
    flex-shrink: 0;
    letter-spacing: 0;
}
.hero-name {
    font-weight: 700;
    font-size: 13px;
    color: #334155;
}
.hero-career {
    font-size: 10px;
    color: #64748b;
    background: #eef2f7;
    border-radius: 4px;
    padding: 1px 5px;
}
.hero-lv {
    color: #64748b;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}
/* 星级：5小星凑1大星。每组(.hsg)包5颗小星(.hss)，满组背景发光，半满淡边框，空组全灰 */
.hero-star {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 10px;
    line-height: 1;
}
.hsg {
    display: inline-flex;
    align-items: center;
    gap: 0;
    padding: 1px 2px;
    border-radius: 3px;
    border: 1px solid transparent;
}
.hsg.full {
    background: rgba(245, 158, 11, 0.18);
    border-color: #f59e0b;
}
.hsg.part {
    background: rgba(245, 158, 11, 0.07);
    border-color: rgba(245, 158, 11, 0.45);
}
.hsg.empty {
    border-color: #cbd5e1;
}
.hss.lit { color: #f59e0b; }
.hss.dim { color: #cbd5e1; }
/* 战力: 卡里最该被看到的数字, 右推并加粗 */
.hero-power {
    margin-left: auto;
    font-weight: 700;
    color: #b45309;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}
/* 技能视频三态: 已看灰勾 / 可领绿(有白嫖钻石没拿) / 无奖压到最暗 */
.hero-show {
    font-size: 10px;
    font-weight: 700;
    border-radius: 4px;
    padding: 1px 6px;
    white-space: nowrap;
}
.hero-show.hs-done {
    color: #64748b;
    background: #f1f5f9;
}
.hero-show.hs-todo {
    color: #fff;
    background: #16a34a;
}
.hero-show.hs-none {
    color: #cbd5e1;
    background: #f8fafc;
}
/* 穿戴两行: 行首小标签(徽章/装备) + 槽位格 */
.hero-wear {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.hero-wear-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
}
.hw-tag {
    font-size: 10px;
    color: #94a3b8;
    width: 24px;
    flex-shrink: 0;
}
.hero-slot {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    padding: 2px 7px;
    border-radius: 6px;
    background: #eef2f7;
    border: 1px solid transparent;
}
.hero-slot .hs-slot {
    font-size: 10px;
    color: #94a3b8;
}
.hero-slot .hs-name {
    font-weight: 600;
    color: #334155;
}
.hero-slot .hs-lv,
.hero-slot .hs-star {
    font-size: 11px;
    color: #64748b;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}
/* 已解锁的空槽: 虚线框 —— "这里可以戴东西"的信号, 比灰底更像待办 */
.hero-slot.empty {
    background: transparent;
    border: 1px dashed #cbd5e1;
}
.hero-slot.empty .hs-dash {
    color: #cbd5e1;
}
/* 未解锁槽: 压到最暗, 只留 Lv 门槛(不是待办, 是还没到) */
.hero-slot.locked {
    background: #f8fafc;
    opacity: 0.5;
}
.hero-slot.locked .hs-lock {
    font-size: 10px;
    color: #94a3b8;
}
/* 品质配色(绿<蓝<紫<橙<红): 英雄名走文字色, 已戴槽走浅底+同色字 */
.q-green  { color: #16a34a; }
.q-blue   { color: #2563eb; }
.q-purple { color: #9333ea; }
.q-orange { color: #ea580c; }
.q-red    { color: #dc2626; }
.hero-slot.worn.q-green  { background: #f0fdf4; }
.hero-slot.worn.q-blue   { background: #eff6ff; }
.hero-slot.worn.q-purple { background: #faf5ff; }
.hero-slot.worn.q-orange { background: #fff7ed; }
.hero-slot.worn.q-red    { background: #fef2f2; }
.hero-slot.worn.q-green  .hs-name { color: #16a34a; }
.hero-slot.worn.q-blue   .hs-name { color: #2563eb; }
.hero-slot.worn.q-purple .hs-name { color: #9333ea; }
.hero-slot.worn.q-orange .hs-name { color: #ea580c; }
.hero-slot.worn.q-red    .hs-name { color: #dc2626; }

/* ============ 详情展开按钮 ============ */

.event-card-head-right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.event-detail-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 1.5px solid rgba(42, 112, 192, 0.25);
    background: transparent;
    color: #6b7280;
    font-size: 9px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    line-height: 1;
    padding: 0;
}

.event-detail-btn:hover {
    background: #eff6ff;
    color: #2a70c0;
    border-color: #2a70c0;
}

.event-detail-btn.active {
    background: #2a70c0;
    color: #fff;
    border-color: #2a70c0;
}

/* ============ 今日详情列表 ============ */

.event-detail-list {
    margin-top: 10px;
    border-top: 1px solid rgba(42, 112, 192, 0.1);
    display: flex;
    flex-direction: column;
}

.event-detail-list-inner {
    max-height: 240px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.event-detail-item {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 12px;
    line-height: 1.45;
}

.event-detail-time {
    flex-shrink: 0;
    color: #9ca3af;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
    font-size: 11px;
    padding-top: 1px;
    min-width: 54px;
}

.event-detail-dot {
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-top: 4px;
    background: #d1d5db;
}

.event-detail-dot.status-success { background: #34d399; }
.event-detail-dot.status-failed  { background: #f87171; }
.event-detail-dot.status-pending { background: #fbbf24; }

.event-detail-content {
    flex: 1 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.event-detail-title {
    color: #374151;
    font-weight: 500;
    word-break: break-word;
}

.event-detail-desc {
    color: #6b7280;
    word-break: break-word;
}

.event-detail-desc.patch {
    color: #9333ea;
    font-style: italic;
}

.event-detail-collapse-btn {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 5px 0;
    border: none;
    border-top: 1px solid rgba(42, 112, 192, 0.1);
    background: transparent;
    color: #9ca3af;
    font-size: 12px;
    text-align: center;
    cursor: pointer;
    transition: color 0.15s;
}

.event-detail-collapse-btn:hover {
    color: #2a70c0;
}

/* ============ 模块快照摘要 ============ */

.event-summary-badges {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px 6px;
    margin-left: 8px;
    vertical-align: middle;
}

.summary-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    background: #eff6ff;
    color: #2563eb;
    border: 1px solid rgba(37, 99, 235, 0.15);
    white-space: nowrap;
}

/* 徽章语义分档：让"要行动的数字"跳出来，背景信息压暗（配 badgeTone） */
/* gain：有收益/待处理 —— 绿底，最醒目，还带个圆点强调 */
.summary-badge.tone-gain {
    background: #ecfdf5;
    color: #059669;
    border-color: rgba(5, 150, 105, 0.25);
}
.summary-badge.tone-gain::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #10b981;
    margin-right: 5px;
}
/* warn：要玩家去处理（福利卡「需处理」）—— 红底，同 gain 带圆点 */
.summary-badge.tone-warn {
    background: #fef2f2;
    color: #dc2626;
    border-color: #fecaca;
}
.summary-badge.tone-warn::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #ef4444;
    margin-right: 5px;
}
/* active：进行中 —— 蓝底（沿用默认蓝，显式写出以示语义） */
.summary-badge.tone-active {
    background: #eff6ff;
    color: #2563eb;
    border-color: rgba(37, 99, 235, 0.18);
}
/* neutral：总量/容量/开关等背景信息 —— 中性灰，不抢眼 */
.summary-badge.tone-neutral {
    background: #f1f5f9;
    color: #475569;
    border-color: rgba(71, 85, 105, 0.12);
}
/* zero：数值为 0 的占位 —— 压到最暗，几乎隐入背景 */
.summary-badge.tone-zero {
    background: #f8fafc;
    color: #b6bfcc;
    border-color: rgba(148, 163, 184, 0.15);
    font-weight: 500;
}

/* 悬浮日志跳转按钮 */
.events-float-log-btn {
    position: fixed;
    right: 20px;
    bottom: 28px;
    z-index: 1100;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #1677ff;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    border: none;
    box-shadow: 0 4px 14px rgba(22, 119, 255, 0.45);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
    -webkit-user-select: none;
            user-select: none;
}

.events-float-log-btn:hover {
    background: #4096ff;
    box-shadow: 0 6px 18px rgba(22, 119, 255, 0.55);
    transform: scale(1.08);
}

.events-float-log-btn:active {
    transform: scale(0.95);
}

/* ============ 手机窄屏适配（主力场景） ============ */
@media (max-width: 480px) {
    .events-list { padding: 10px 8px; }

    .event-card {
        border-radius: 12px;
        padding: 12px 12px 12px 16px;
        margin-bottom: 8px;
    }

    /* 卡头在窄屏竖排：标题一行、徽章整块换行到下方，不再和标题挤一行。
     * 改块级 flex（桌面是 inline-flex 跟在标题后），width:100% 才可靠生效。 */
    .event-summary-badges {
        display: flex;
        margin-left: 0;
        margin-top: 6px;
        width: 100%;
    }

    /* 概览网格：窄屏缩小 chip 宽下限，一行多放几个 */
    .event-grid.grid-building .grid-building-row {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
        gap: 4px;
    }
    .event-grid.grid-building .building-cell { padding: 2px 6px; }
    .event-grid.grid-building .building-name { font-size: 10.5px; }

    /* 活跃明细列表：窄屏收紧内边距、字号 */
    .building-active-item { padding: 5px 8px; gap: 6px; font-size: 11.5px; }
    .building-active-item .ba-tag { font-size: 10px; padding: 1px 6px; }

    /* 详情列表时间列在窄屏收窄，给内容让位 */
    .event-detail-time { min-width: 46px; }

    /* 战斗三卡：窄屏缩小主数字、收紧内边距；竞技场对手名给足省略空间。 */
    .stage-big { font-size: 26px; }
    .stage-chip { min-width: 30px; padding: 2px 5px; }
    .ar-value { font-size: 18px; }
    .at-value { font-size: 16px; }
    .arena-meta { margin-left: 0; text-align: left; flex-direction: row; gap: 8px; }
    .af-name { max-width: 32%; }
    .trial-level { font-size: 20px; min-width: 28px; }
    .trial-block { gap: 8px; padding: 5px 8px; }

    /* 英雄卡：窄屏收紧内边距/字号；战力不再右推（否则头行挤成两截），跟在星级后自然换行。 */
    .event-hero { font-size: 11.5px; }
    .hero-block { padding: 5px 8px; }
    .hero-head { gap: 5px; }
    .hero-name { font-size: 12.5px; }
    .hero-power { margin-left: 0; }
    .hero-slot { padding: 2px 6px; gap: 3px; }
    .hw-tag { width: 22px; }
}

/* ============ 装备厂网格(type:"forge") ============ */
/* 参照游戏「装备厂」面板: 每座厂一格(锻造中蓝/可领取绿/空闲灰), 底部三类当前可负担档目录。 */
.event-forge {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.forge-cells {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    grid-gap: 6px;
    gap: 6px;
}
.forge-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-radius: 6px;
    padding: 6px 8px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
}
.forge-cell.forge-making { background: #eff6ff; border-color: #bfdbfe; }
.forge-cell.forge-ready { background: #f0fdf4; border-color: #bbf7d0; }
.forge-cell.forge-idle { background: #f1f5f9; border-style: dashed; }
.forge-cell-name { font-weight: 600; color: #0f172a; font-size: 12px; }
.forge-cell-detail { color: #1d4ed8; font-size: 11px; font-weight: 600; }
.forge-cell.forge-ready .forge-cell-detail { color: #15803d; }
.forge-cell.forge-idle .forge-cell-detail { color: #94a3b8; font-weight: 500; }
.forge-cell-eta { color: #64748b; font-size: 10px; }
.forge-recipes {
    display: flex;
    flex-direction: column;
    gap: 3px;
    border-top: 1px dashed #e2e8f0;
    padding-top: 6px;
}
.forge-recipe {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
}
.forge-recipe.locked { opacity: 0.45; }

/* 材料阶梯（grid.recipes）: 每类一行, 4 档蓝/紫/橙/红平铺, 对上游戏装备厂三个材料页签。 */
.forge-ladder {
    display: flex;
    flex-direction: column;
    gap: 4px;
    border-top: 1px dashed #e2e8f0;
    padding-top: 6px;
}
.fl-row {
    display: flex;
    align-items: stretch;
    gap: 6px;
}
.fl-row.fl-type-off { opacity: 0.5; }
.fl-type {
    flex: none;
    width: 40px;
    font-weight: 700;
    font-size: 11px;
    color: #334155;
    display: flex;
    align-items: center;
}
.fl-tiers {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 4px;
    gap: 4px;
    flex: 1 1;
    min-width: 0;
}
.fl-tier {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 3px 2px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #f8fafc;
    line-height: 1.2;
}
.fl-tier.fl-ok { background: #f0fdf4; border-color: #bbf7d0; }
.fl-tier.fl-lack { background: #fef2f2; border-color: #fecaca; }
.fl-tier.fl-dim { opacity: 0.4; }
.fl-tier.fl-pick { border-color: #2563eb; border-width: 2px; box-shadow: 0 0 0 1px #bfdbfe inset; }
.fl-q { font-size: 10px; font-weight: 700; color: #475569; }
.fl-count { font-size: 11px; font-weight: 600; color: #0f172a; }
.fl-tier.fl-lack .fl-count { color: #ef4444; }
.fl-meta { font-size: 9px; color: #94a3b8; }

/* ============ 海兽培育室网格(type:"breed") ============ */
/* 参照游戏「海兽培育室」面板: 每个培育槽一块(海兽名/星级/ETA + 所需食物 have/need, 缺料红)。 */
.event-breed {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.breed-slot {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px 10px;
    background: #f8fafc;
}
.breed-slot.breed-ripe { background: #f0fdf4; border-color: #bbf7d0; }
.breed-slot-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px;
    margin-bottom: 6px;
}
.breed-pet { font-weight: 600; color: #0f172a; }
.breed-eta { color: #64748b; font-size: 11px; }
.breed-slot.breed-ripe .breed-eta { color: #15803d; font-weight: 600; }
.breed-feed {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
.bf-tag {
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    background: #0ea5e9;
    border-radius: 4px;
    padding: 1px 5px;
}
.bf-item {
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    font-size: 11px;
    color: #475569;
}
.bf-name { font-weight: 600; }
.bf-count { color: #64748b; }
.bf-item.cost-lack,
.bf-item.cost-lack .bf-name,
.bf-item.cost-lack .bf-count { color: #ef4444; font-weight: 600; }
/* 战备室驻场升级（grid.serve）: 同一套 breed-slot 视觉, 顶格/满级的调暗以跟"可升级"区分开。 */
.breed-serve { margin-top: 8px; padding-top: 8px; border-top: 1px dashed #e2e8f0; }
.breed-serve-tag { background: #6366f1; margin-bottom: 4px; display: inline-block; }
.breed-slot.breed-capped { opacity: 0.6; }
.breed-empty {
    color: #94a3b8;
    font-size: 12px;
    text-align: center;
    padding: 10px;
}
/* 培育策略行（grid.policy）: island.pet 定向/留底旋钮回显, 顶部一条淡蓝底 */
.breed-policy {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
    background: #f0f9ff;
    border: 1px solid #e0f2fe;
    border-radius: 6px;
    padding: 4px 8px;
}
.breed-policy .bf-tag { background: #0ea5e9; }
.breed-policy-text { font-size: 11px; color: #475569; }
/* 培育配方目录: 复用 .forge-recipes / .forge-recipe 样式, 只多一个标题行 */
.breed-recipes-head {
    font-size: 10px;
    font-weight: 700;
    color: #64748b;
    letter-spacing: 0.02em;
}

/* ============ 海兽进阶网格(type:"petAdvance") ============ */
/* 每座战备室一块：进阶状态用左侧色带区分，材料沿用培育卡的 bf-item，
   进度条只表示本阶属性喂养次数，不把海兽等级或培育等级混在一起。 */
.event-pet-advance {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.pet-advance-policy {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
    padding: 4px 8px;
    border: 1px solid #e0f2fe;
    border-radius: 6px;
    background: #f0f9ff;
}
.pet-advance-policy .bf-tag { background: #6366f1; }
.pet-advance-policy-text { color: #475569; font-size: 11px; }
.pet-advance-room {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 8px 10px;
    border: 1px solid #e2e8f0;
    border-left-width: 3px;
    border-radius: 8px;
    background: #f8fafc;
}
.pet-advance-room-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}
.pet-advance-building { color: #334155; font-size: 12px; font-weight: 700; }
.pet-advance-status { color: #64748b; font-size: 11px; font-weight: 600; white-space: nowrap; }
.pet-advance-selection {
    display: inline-block;
    margin-right: 4px;
    padding: 0 4px;
    border-radius: 3px;
    background: #e2e8f0;
    color: #64748b;
    font-size: 10px;
    font-weight: 500;
}
.pet-advance-room.pet-advance-unselected { opacity: 0.68; }
.pet-advance-pet {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
}
.pet-advance-pet-name { color: #0f172a; font-size: 12px; font-weight: 600; }
.pet-advance-pet-detail { color: #64748b; font-size: 11px; }
.pet-advance-progress {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}
.pet-advance-progress-track {
    display: block;
    height: 7px;
    min-width: 40px;
    flex: 1 1;
    overflow: hidden;
    border-radius: 99px;
    background: #e2e8f0;
}
.pet-advance-progress-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #60a5fa, #2563eb);
}
.pet-advance-progress-value,
.pet-advance-next-level { color: #475569; font-size: 11px; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pet-advance-next-level { color: #b45309; }
.pet-advance-costs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding-top: 2px;
}
.pet-advance-costs .bf-tag { background: #0ea5e9; }
.pet-advance-note { color: #94a3b8; font-size: 11px; }
.pet-advance-room.pet-advance-feeding { border-left-color: #2563eb; background: #eff6ff; }
.pet-advance-feeding .pet-advance-status { color: #2563eb; }
.pet-advance-room.pet-advance-ready { border-color: #bbf7d0; border-left-color: #16a34a; background: #f0fdf4; }
.pet-advance-ready .pet-advance-status { color: #15803d; }
.pet-advance-room.pet-advance-missing { border-color: #fecaca; border-left-color: #dc2626; background: #fef2f2; }
.pet-advance-missing .pet-advance-status { color: #dc2626; }
.pet-advance-room.pet-advance-level { border-left-color: #d97706; background: #fffbeb; }
.pet-advance-level .pet-advance-status { color: #b45309; }
.pet-advance-room.pet-advance-max { border-left-color: #16a34a; opacity: 0.72; }
.pet-advance-max .pet-advance-status { color: #15803d; }
.pet-advance-room.pet-advance-empty,
.pet-advance-room.pet-advance-waiting,
.pet-advance-room.pet-advance-locked,
.pet-advance-room.pet-advance-unknown { border-left-color: #cbd5e1; }
.pet-advance-room.pet-advance-locked,
.pet-advance-room.pet-advance-unknown { opacity: 0.62; }
.pet-advance-empty-state { color: #94a3b8; font-size: 12px; padding: 8px; text-align: center; }

/* —— 成长任务卡（growth）—— */
/* 任务状态色点：可领=绿 / 已领=灰 / 进行中=蓝 / 锁=暗灰 */
.task-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #cbd5e1; flex: none;
}
.ts-claimable .task-dot { background: #22c55e; }
.ts-got .task-dot { background: #cbd5e1; }
.ts-doing .task-dot { background: #3b82f6; }
.ts-locked .task-dot { background: #94a3b8; opacity: 0.5; }
.task-state {
    font-size: 11px; font-weight: 600; white-space: nowrap;
    color: #64748b;
}
.ts-claimable .task-state { color: #16a34a; }
.ts-doing .task-state { color: #2563eb; }
.ts-got .task-state, .ts-locked .task-state { color: #94a3b8; }
.task-prog {
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums; font-size: 12px;
    color: #475569; white-space: nowrap;
}

/* 成长任务：分区 + 单行 */
.event-growth { display: flex; flex-direction: column; gap: 10px; }
.growth-section { display: flex; flex-direction: column; gap: 4px; }
.growth-title {
    font-size: 11px; font-weight: 700; color: #94a3b8;
    text-transform: uppercase; letter-spacing: 0.04em;
}
.growth-line {
    display: grid;
    grid-template-columns: 8px 1fr auto auto;
    align-items: center; grid-gap: 8px; gap: 8px;
}
.growth-desc {
    color: #334155; font-size: 12px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── welfare grid ── */
.welfare-grid {
    display: flex; flex-direction: column; gap: 4px;
    padding: 4px 0;
}
.welfare-row {
    display: flex; align-items: center; gap: 6px;
    padding: 3px 6px; border-radius: 4px;
    font-size: 12px;
}
.welfare-row.ts-claimable { background: rgba(34,197,94,.08); }
.welfare-row.ts-got       { background: rgba(148,163,184,.06); }
.welfare-row.ts-locked    { background: transparent; }
.welfare-label {
    flex: 1 1; color: #334155;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.welfare-row.ts-locked .welfare-label { color: #94a3b8; }
.welfare-badge {
    font-size: 11px; font-weight: 600; white-space: nowrap;
    color: #64748b;
}
.welfare-row.ts-claimable .welfare-badge { color: #16a34a; }
.welfare-row.ts-got       .welfare-badge { color: #94a3b8; }

/* ============ 藏品卡(type:"antique") ============ */
/* 大师进度条复用 .event-meter；可操作藏品复用 .breed-slot(同海兽驻场卡片)；
   品质/套装用 .summary-badge 加个颜色(同顶部摘要 badge)。这里只补三块自己独有的样式，
   以及给复用的 .summary-badge/.breed-pet 追加品质配色(它们自己写死了 color，靠复合选择器
   .xxx.q-blue 提高优先级才能盖过去，跟源码里谁先谁后无关)。 */
.event-antique { display: flex; flex-direction: column; gap: 8px; }
.aq-recruit { font-size: 11px; color: #64748b; }
.aq-tiers, .aq-suits { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.aq-tier-hot { margin-left: 3px; font-weight: 700; color: #dc2626; }
.aq-suit.aq-suit-full { border-color: rgba(22, 163, 74, 0.35); }
.aq-suit.aq-suit-empty { opacity: 0.5; }
.summary-badge.q-green,  .breed-pet.q-green  { color: #16a34a; }
.summary-badge.q-blue,   .breed-pet.q-blue   { color: #2563eb; }
.summary-badge.q-purple, .breed-pet.q-purple { color: #9333ea; }
.summary-badge.q-orange, .breed-pet.q-orange { color: #ea580c; }
.summary-badge.q-red,    .breed-pet.q-red    { color: #dc2626; }

/* ============ 远征副本卡(type:"expedition") ============ */
/* 头部风格照抄 .event-stage(当前副本名当"大数字"位置的主角), 下面一行细节 + 待选 Buff 单独一块。 */
.event-expedition { display: flex; flex-direction: column; gap: 6px; font-size: 12px; }
.expedition-hero-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* status 是玩家每次打开卡片最该先看到的东西(现在什么情况/要不要管), 给它闯关大数字那个视觉级别;
   副本名+进度 48 小时才变一次, 降格成旁边的小字副标题。 */
.expedition-status {
    font-size: 16px;
    font-weight: 800;
    color: #fff;
    border-radius: 6px;
    padding: 2px 10px;
    background: #94a3b8;
    line-height: 1.4;
}
.expedition-status.ex-ready    { background: #16a34a; }
.expedition-status.ex-fighting { background: #3b82f6; }
.expedition-status.ex-wait     { background: #f59e0b; }
.expedition-status.ex-blocked  { background: #ef4444; }
.expedition-status.ex-idle     { background: #cbd5e1; color: #64748b; }
.expedition-raid {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}
.expedition-sub {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    color: #64748b;
    font-size: 11px;
}
.expedition-hp.ex-hp-ok   { color: #16a34a; }
.expedition-hp.ex-hp-low  { color: #ea580c; font-weight: 600; }
.expedition-hp.ex-hp-dead { color: #dc2626; font-weight: 700; }
.expedition-final { color: #16a34a; font-weight: 600; }
.expedition-buffs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.expedition-buff-chip {
    font-size: 11px;
    color: #7c3aed;
    background: #faf5ff;
    border: 1px solid rgba(124, 58, 237, 0.2);
    border-radius: 4px;
    padding: 1px 6px;
}
.expedition-buff-chip.picked {
    color: #fff;
    background: #7c3aed;
    border-color: #7c3aed;
    font-weight: 700;
}

/* ============ 跨服积分赛卡(type:"league", 联盟卡) ============ */
/* 头部风格照抄 .event-expedition：段位当"大数字"位置的主角，下面一行细节，
   目标/卡关原因单独一行（互斥），待领标单独一块（chip 组，绿色强调"有便宜可占"）。 */
.event-league { display: flex; flex-direction: column; gap: 6px; font-size: 12px; }
.league-hero-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.league-dan {
    font-size: 18px;
    font-weight: 800;
    color: #2563eb;
}
.league-settle { color: #64748b; font-size: 11px; }
.league-sub {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    color: #64748b;
    font-size: 11px;
}
.league-teams.ok   { color: #16a34a; }
.league-teams.warn { color: #ea580c; font-weight: 600; }
.league-tickets.has  { color: #16a34a; }
.league-tickets.none { color: #cbd5e1; }
.lt-eta { color: #94a3b8; margin-left: 2px; }
.league-target {
    font-size: 11px;
    color: #b45309;
}
.league-blocked {
    font-size: 11px;
    color: #dc2626;
}
.league-claims { display: flex; flex-wrap: wrap; gap: 6px; }
.league-claim-chip {
    font-size: 11px;
    font-weight: 600;
    color: #16a34a;
    background: #f0fdf4;
    border: 1px solid rgba(22, 163, 74, 0.25);
    border-radius: 4px;
    padding: 1px 6px;
}

/* ============ 海商王卡(type:"trade") ============ */
/* 头部风格跟 league/expedition 一致：船级当"大数字"位置的主角，下面一行状态细节，
   非贸易时段单独一行提示（红色，跟 league-blocked 同色），待领标复用绿色 chip 组样式。 */
.event-trade { display: flex; flex-direction: column; gap: 6px; font-size: 12px; }
.trade-hero-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.trade-ship {
    font-size: 18px;
    font-weight: 800;
    color: #2563eb;
}
.trade-end-eta { color: #64748b; font-size: 11px; }
.trade-sub {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    color: #64748b;
    font-size: 11px;
}
.trade-status.tr-moving  { color: #3b82f6; }
.trade-status.tr-holding { color: #b45309; font-weight: 600; }
.trade-status.tr-idle    { color: #64748b; }
.trade-off-hours {
    font-size: 11px;
    color: #dc2626;
}
.trade-speed-item.has  { color: #b45309; }
.trade-speed-item.none { color: #dc2626; }
.trade-claims { display: flex; flex-wrap: wrap; gap: 6px; }
.trade-claim-chip {
    font-size: 11px;
    font-weight: 600;
    color: #16a34a;
    background: #f0fdf4;
    border: 1px solid rgba(22, 163, 74, 0.25);
    border-radius: 4px;
    padding: 1px 6px;
}
/* 已知港口情报(哪港缺啥盛产啥): 联盟情报用蓝色, 只有自己缓存的(联盟情报还没覆盖到)用灰色区分。 */
.trade-ports { display: flex; flex-wrap: wrap; gap: 6px; }
.trade-port-chip {
    font-size: 11px;
    color: #1e40af;
    background: #eff6ff;
    border: 1px solid rgba(37, 99, 235, 0.2);
    border-radius: 4px;
    padding: 1px 6px;
}
.trade-port-chip.self {
    color: #64748b;
    background: #f8fafc;
    border-color: rgba(100, 116, 139, 0.2);
}
.trade-port-chip .tp-rare { color: #b45309; font-weight: 600; }

/* 2026-09-11 海商王卡重做后的分区：规划 / 货舱 / 本港货架 / 港口情报 / 领奖 / 开发者，每区一个小标题（跟海盗卡 pr-section 同款）。 */
.trade-section { display: flex; flex-direction: column; gap: 3px; padding-top: 4px; border-top: 1px dashed #e2e8f0; }
.trade-section-label { font-size: 10px; font-weight: 700; color: #94a3b8; letter-spacing: 1px; }
.trade-row { display: flex; align-items: center; flex-wrap: wrap; gap: 3px 8px; font-size: 11px; color: #334155; }
.trade-row em { font-style: normal; font-size: 10px; margin-left: 2px; }
.trade-item { font-weight: 600; }
.trade-dim { color: #94a3b8; }
.trade-gain { color: #16a34a; font-weight: 600; }
.trade-loss { color: #dc2626; font-weight: 600; }
.trade-tag { font-size: 10px; background: #f1f5f9; border-radius: 3px; padding: 0 4px; color: #475569; }
.trade-tag.tag-spec { background: #ecfdf5; color: #047857; }
.trade-tag.tag-rare { background: #fff7ed; color: #b45309; }
.trade-plan { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 6px; font-size: 11px; color: #1e40af; }
.trade-plan b { color: #1d4ed8; }
.trade-cands { font-size: 10px; }
.trade-upgrade { font-size: 11px; color: #64748b; }
.trade-upgrade em { color: #dc2626; font-style: normal; }
.trade-progress { display: inline-block; width: 80px; height: 6px; margin-left: 6px; background: #e2e8f0; border-radius: 3px; vertical-align: middle; overflow: hidden; }
.trade-progress-fill { display: block; height: 100%; background: #3b82f6; }
.trade-claim-chip.ready { color: #fff; background: #16a34a; border-color: #16a34a; }
.trade-port-chip.here { border-color: #2563eb; font-weight: 700; }
.trade-port-chip.dest { border-color: #b45309; }
.trade-port-chip .tp-spec, .trade-status .tp-spec { color: #047857; }
.trade-status .tp-rare { color: #b45309; font-weight: 600; }
/* 货舱 / 本港货架 / 全港表: 复用通用 .event-table 的线框, 只把首列 30% 的固定宽度放开(这几张表有 4~6 列) */
.crazy-cards-page .trade-table { font-size: 11px; margin-top: 2px; }
.crazy-cards-page .trade-table th:first-child { width: auto; }
.crazy-cards-page .trade-table th { font-weight: 600; color: #94a3b8; font-size: 10px; }
.crazy-cards-page .trade-table td { padding-top: 3px; padding-bottom: 3px; white-space: nowrap; }
.crazy-cards-page .trade-table td.trade-item, .crazy-cards-page .trade-table td.trade-wrap { white-space: normal; }
/* 货舱/货架/全港表列多、数字长: 按内容排版(不用通用 event-table 的等宽 fixed 布局), 窄屏放不下就在卡片里横向滚动, 不叠字;
   货名/表头不折行(中文会被挤成一字一行), 去向只在"亏本留船"和"本港价"之间折行 */
.crazy-cards-page .trade-table-scroll > .trade-table { table-layout: auto; width: auto; min-width: 100%; }
.crazy-cards-page .trade-table-scroll > .trade-table th,
.crazy-cards-page .trade-table-scroll > .trade-table td.trade-item { white-space: nowrap; }
.trade-nowrap { white-space: nowrap; }
.trade-table .trade-tag { margin-right: 4px; }
.trade-table tr.trade-row-here td { background: #eff6ff; font-weight: 600; }
.trade-table tr.trade-row-dest td { background: #fff7ed; }
.trade-table tr.trade-row-plan td { background: #f0fdf4; }
.trade-table-scroll { overflow-x: auto; min-width: 0; }
/* 2026-10-12 交易记录(航次账本): 每趟一行, 买/卖两列里每批一行 */
.trade-hist-line { line-height: 1.35; }
.trade-hist-line em { font-style: normal; font-size: 10px; margin-left: 2px; }
.trade-hist-toggle { align-self: flex-start; background: none; border: 0; padding: 0; font-size: 10px; color: #2563eb; cursor: pointer; }
.trade-hist-toggle:hover { text-decoration: underline; }
.crazy-cards-page .trade-hist-table td { vertical-align: top; }
.trade-section-label .trade-phase { color: #2563eb; letter-spacing: 0; }
.trade-table tr.trade-dim td { color: #94a3b8; }

/* ============ 海盗卡(type:"pirate") —— 讨伐 + 扫荡合并 ============ */
.event-pirate { display: flex; flex-direction: column; gap: 6px; font-size: 12px; }
.pr-section { display: flex; flex-direction: column; gap: 3px; }
.pr-section-label { font-size: 10px; font-weight: 700; color: #94a3b8; letter-spacing: 1px; }
.pr-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    padding: 1px 0;
}
.pr-row.pr-busy { color: #3b82f6; }
.pr-name { font-weight: 700; color: #1e293b; min-width: 64px; }
.pr-name em { font-style: normal; font-weight: 400; color: #64748b; }
.pr-next { color: #b45309; }
.pr-can { color: #16a34a; }
.pr-none { color: #94a3b8; }

/* ============ 世界BOSS卡(type:"worldBoss") ============ */
.event-wboss { display: flex; flex-direction: column; gap: 6px; font-size: 12px; }
.wb-hero-row { display: flex; align-items: center; gap: 10px; }
.wb-boss-id { font-size: 16px; font-weight: 800; color: #2563eb; }
.wb-sub { display: flex; align-items: center; gap: 10px; color: #64748b; font-size: 11px; }
.wb-today.done { color: #16a34a; }
.wb-today.wait { color: #ea580c; }

/* ============ 城战卡(type:"cityWar") ============ */
.event-citywar { display: flex; flex-direction: column; gap: 6px; font-size: 12px; }
.cw-hero-row { display: flex; align-items: center; gap: 10px; }
.cw-roles-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 11px; color: #475569; }
.cw-roles-row > span { background: #f1f5f9; border-radius: 3px; padding: 0 5px; }
.cw-status.active { color: #16a34a; font-weight: 700; }
.cw-status.idle   { color: #94a3b8; }
.cw-cities { display: flex; flex-direction: column; gap: 3px; }
.cw-city-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: #64748b;
}
.cw-city-row.cw-mine-attack  { color: #dc2626; }
.cw-city-row.cw-mine-defence { color: #2563eb; }
.cw-city-name { font-weight: 700; color: #1e293b; min-width: 50px; }
.cw-city-side { font-size: 10px; border-radius: 3px; padding: 0 4px; background: #f1f5f9; }
.cw-city-row.cw-battling { background: #fef2f2; border-radius: 4px; }
.cw-tag-battling {
    font-size: 10px;
    font-weight: 700;
    color: #dc2626;
    background: #fee2e2;
    border-radius: 3px;
    padding: 0 4px;
}
.cw-tag-defending {
    font-size: 10px;
    font-weight: 700;
    color: #2563eb;
    background: #dbeafe;
    border-radius: 3px;
    padding: 0 4px;
}
/* 黑潮城(只有剧本2「黑潮侵袭」): 挂在城名后面, 集结城/已宣战敌城/被宣战己城那行是行内文字, 所以自带一点左间距 */
.cw-tag-blackwater {
    font-size: 10px;
    font-weight: 700;
    color: #f8fafc;
    background: #334155;
    border-radius: 3px;
    padding: 0 4px;
    margin-left: 2px;
    white-space: nowrap;
}
.cw-battles { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 2px; }
.cw-battles-label { font-size: 11px; color: #94a3b8; }
.cw-battle-chip {
    font-size: 11px;
    border-radius: 4px;
    padding: 1px 6px;
}
.cw-battle-chip.win  { color: #16a34a; background: #f0fdf4; border: 1px solid rgba(22, 163, 74, 0.25); }
.cw-battle-chip.lose { color: #dc2626; background: #fef2f2; border: 1px solid rgba(220, 38, 38, 0.2); }
/* 城战任务(BountyCity, 赏金城市): 跟宣战/集结完全独立的另一套数据, 不共用 cw-city-* 样式避免暗示有关联。
   2026-09-12 用户反馈标题跟第一座城挤在同一行(标题和 chip 背景色一样, 视觉上只跟第一个 chip 粘在一起,
   后面几座城换行后又看不到标题了)——改成标题独占一行, 每座城各自一整行, 不再用 flex-wrap 挤在一起。 */
.cw-bounty { margin-top: 4px; }
.cw-bounty-label {
    display: block;
    width: -webkit-fit-content;
    width: fit-content;
    font-size: 10px; font-weight: 700; color: #b45309;
    background: #fffbeb; border-radius: 3px; padding: 1px 5px;
    margin-bottom: 4px;
}
.cw-bounty-list { display: flex; flex-direction: column; gap: 4px; }
.cw-bounty-row {
    font-size: 11px;
    border-radius: 4px;
    padding: 3px 8px;
    color: #92400e; background: #fffbeb; border: 1px solid rgba(180, 83, 9, 0.2);
}
.cw-bounty-row.mine { color: #16a34a; background: #f0fdf4; border: 1px solid rgba(22, 163, 74, 0.25); }
.cw-bounty-city { font-weight: 700; }
.cw-bounty-reward { margin-left: 6px; opacity: 0.9; }
/* 20:00 在线奖行(并入城战卡) */
.cw-online { display: flex; align-items: center; gap: 8px; font-size: 11px; color: #64748b; }
.cw-online-label {
    font-size: 10px; font-weight: 700; color: #7c3aed;
    background: #f5f3ff; border-radius: 3px; padding: 0 4px;
}
.cw-online-done .cw-online-label { color: #16a34a; background: #f0fdf4; }
.cw-online-status { color: #94a3b8; }

/* ============ 战报卡(type:"report") ============ */
.event-report { display: flex; flex-direction: column; gap: 6px; font-size: 12px; }
.rp-head { display: flex; align-items: center; gap: 10px; color: #64748b; flex-wrap: wrap; }
.rp-status { font-weight: 700; color: #1e293b; }
.rp-last { color: #94a3b8; }
.rp-list { display: flex; flex-direction: column; gap: 3px; }
.rp-row { display: flex; align-items: center; gap: 8px; font-size: 11px; }
.rp-res {
    font-size: 9px; font-weight: 800; letter-spacing: 0.5px;
    border-radius: 3px; padding: 1px 5px; min-width: 38px; text-align: center;
}
.rp-row.rp-win  .rp-res { color: #ea580c; background: #fff7ed; }
.rp-row.rp-lose .rp-res { color: #16a34a; background: #f0fdf4; }
.rp-fleet { flex: none; padding: 0 5px; border-radius: 3px; background: #f1f5f9; color: #475569; white-space: nowrap; }
.rp-target { font-weight: 700; color: #1e293b; min-width: 120px; }
.rp-reward { color: #b45309; }
.rp-reward.rp-noreward { color: #94a3b8; }
.rp-got { font-style: normal; color: #16a34a; }
.rp-time { margin-left: auto; color: #94a3b8; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.rp-empty { color: #94a3b8; font-size: 11px; }
/* 兑换码卡(type:"redeem", 2026-10-04)：沿用战报行；奖励占满中间、太长就换行，兑换码和时间不折行 */
.redeem-row { align-items: baseline; }
.redeem-row .redeem-code { flex: none; white-space: nowrap; }
.redeem-row .redeem-reward { flex: 1 1; min-width: 0; overflow-wrap: anywhere; }
.redeem-row .rp-time { flex: none; white-space: nowrap; }

/* ============ 搁浅货轮卡(type:"treasureLoot") ============ */
.event-treasure { display: flex; flex-direction: column; gap: 6px; font-size: 12px; }
.tr-head { display: flex; align-items: center; gap: 10px; color: #64748b; }
.tr-ships { display: flex; flex-direction: column; gap: 3px; }
.tr-ship-row { display: flex; align-items: center; gap: 8px; font-size: 11px; color: #64748b; }
.tr-ship-row.tr-locked { opacity: 0.55; }
.tr-owner.tr-无主 { color: #16a34a; }
.tr-owner.tr-己盟 { color: #2563eb; }
.tr-owner.tr-敌盟 { color: #dc2626; }
.tr-mine { color: #7c3aed; font-weight: 600; }
.tr-reward { color: #b45309; }
.tr-more { font-size: 10px; color: #94a3b8; }

/* ============ 硅矿卡(type:"chipMine") ============ */
.event-chipmine { display: flex; flex-direction: column; gap: 6px; font-size: 12px; }
.cm-head { display: flex; align-items: center; gap: 10px; color: #64748b; }
.cm-mining.has { color: #16a34a; font-weight: 600; }
.cm-mines { display: flex; flex-direction: column; gap: 3px; }
.cm-mine-row { display: flex; align-items: center; gap: 8px; font-size: 11px; color: #64748b; }
.cm-mine-row.cm-locked { opacity: 0.55; }
.cm-slots.full { color: #dc2626; }
.cm-status { display: flex; align-items: center; gap: 10px; font-size: 11px; color: #64748b; }
.cm-cap.hit { color: #dc2626; font-weight: 600; }
.cm-plan { display: flex; flex-direction: column; gap: 3px; }
.cm-plan-row { display: flex; align-items: center; gap: 8px; font-size: 11px; color: #475569; }
.cm-plan-idx { font-weight: 600; color: #334155; }
.cm-plan-on { color: #16a34a; font-weight: 600; }
.cm-plan-blocked { color: #b45309; background: #fef3c7; border-radius: 3px; padding: 0 4px; font-size: 10px; }

/* 舰队详情卡 (type:"fleet") */
.event-fleet { display: flex; flex-direction: column; gap: 6px; font-size: 12px; }
.fl-ships { display: flex; flex-direction: column; gap: 3px; }
.fl-ship { display: flex; align-items: center; gap: 8px; font-size: 11px; color: #64748b; }
.fl-ship.hold { color: #7c3aed; }
.fl-ship.busy { color: #2563eb; }
.fl-ship.idle { color: #16a34a; }
.fl-ship.repair { color: #d97706; }
.fl-id { font-weight: 600; min-width: 72px; }
.fl-pow { color: #94a3b8; }
.crazy-cards-page .fl-dura { color: #64748b; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fl-to { flex: 1 1; }
.fl-at { color: #94a3b8; font-size: 10px; background: #f1f5f9; border-radius: 3px; padding: 0 4px; }
.fl-lock { color: #f59e0b; }
.fl-empty, .fl-demands, .fl-recalls { font-size: 11px; color: #64748b; }
.fl-demands { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 2px; border-top: 1px dashed #e2e8f0; }
.fl-demand { display: flex; align-items: center; gap: 4px; }
.fl-dm-mod { font-weight: 600; color: #334155; }
.fl-dm-tag { background: #f1f5f9; border-radius: 3px; padding: 0 4px; color: #475569; }
.fl-dm-min { color: #94a3b8; }
.fl-recalls { display: flex; flex-direction: column; gap: 2px; color: #dc2626; }
.cards-sync-status { margin: 8px 12px; color: #64748b; font-size: 12px; }
.crazy-cards-page .event-table { width: 100%; table-layout: fixed; font-size: 13px; }
.crazy-cards-page .event-table th:first-child { width: 30%; }
.crazy-cards-page .event-table td { overflow-wrap: anywhere; vertical-align: top; padding-top: 5px; padding-bottom: 5px; }
.crazy-cards-page .fl-demand, .crazy-cards-page .fl-ship { flex-wrap: wrap; overflow-wrap: anywhere; }
.crazy-cards-page .factory-recipe { flex-wrap: wrap; }
.crazy-cards-page .event-fleet + .event-table, .crazy-cards-page .event-resident + .event-table, .crazy-cards-page .event-factory + .event-table { margin-top: 10px; }
.crazy-cards-page .card-star-icon {
    width: 1em;
    height: 1em;
    display: inline-block;
    vertical-align: -0.12em;
    flex: none;
}
.crazy-cards-page .card-stars {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    color: #e5a900;
    vertical-align: middle;
    white-space: nowrap;
}

/* 迁移版世界卡片：详情行保持紧凑，进度条在窄屏自动收缩。 */
.crazy-cards-page .crazy-details { display: flex; flex-direction: column; gap: 7px; font-size: 12px; }
.crazy-cards-page .crazy-detail-summary, .crazy-cards-page .crazy-world-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: #64748b; }
.crazy-cards-page .crazy-world-card { display: flex; flex-direction: column; justify-content: flex-start; gap: 5px; height: auto; min-height: 0; padding: 7px 8px; border: 1px solid rgba(100,116,139,.16); border-radius: 6px; background: rgba(248,250,252,.62); }
.crazy-cards-page .crazy-world-head b { color: #334155; }
.crazy-cards-page .crazy-detail-reward { color: #64748b; overflow-wrap: anywhere; }
.crazy-cards-page .crazy-participants { display: flex; flex-direction: column; gap: 3px; padding-left: 6px; color: #64748b; }
.crazy-cards-page .crazy-participant { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; overflow-wrap: anywhere; }
.crazy-cards-page .crazy-participant b, .crazy-cards-page .crazy-fleet-line b { color: #475569; }
.crazy-cards-page .crazy-fleet-line { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; padding-top: 3px; border-top: 1px dashed rgba(100,116,139,.2); color: #64748b; }
.crazy-cards-page .crazy-progress { display: inline-flex; align-items: center; gap: 6px; min-width: 118px; flex: 1 1 150px; }
.crazy-cards-page .crazy-progress-track { display: block; height: 6px; min-width: 40px; flex: 1 1; overflow: hidden; border-radius: 99px; background: #e2e8f0; }
.crazy-cards-page .crazy-progress-fill { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #38bdf8, #2563eb); }
.crazy-cards-page .crazy-progress-label { white-space: nowrap; color: #475569; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.crazy-cards-page .crazy-treasures .crazy-world-head > .crazy-progress { width: min(55%, 320px); max-width: 320px; flex: 0 1 320px; }
.crazy-cards-page .crazy-museum-summary { gap: 14px; }
.crazy-cards-page .crazy-museum-summary em { font-style: normal; color: #94a3b8; margin-right: 4px; }
.crazy-cards-page .crazy-museum-stage .crazy-world-head > .crazy-progress { flex: 1 1 180px; max-width: 320px; }
.crazy-cards-page .crazy-museum-stage .crazy-progress-fill { background: linear-gradient(90deg, #34d399, #0ea5e9); }
.crazy-cards-page .crazy-museum-progress { color: #475569; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.crazy-cards-page .crazy-museum-stage { overflow-wrap: anywhere; }
.crazy-cards-page .crazy-detail-status { font-size: 11px; white-space: nowrap; }
.crazy-cards-page .status-ready { color: #d97706; font-weight: 600; }
.crazy-cards-page .status-warn { color: #dc2626; font-weight: 600; }
.crazy-cards-page .status-done { color: #16a34a; }
.crazy-cards-page .status-run, .crazy-cards-page .crazy-detail-empty, .crazy-cards-page .crazy-unlimited { color: #94a3b8; }
/* 机械蛞蝓：血量条占满标题行余下宽度；要点一行排开、窄屏自动换行；舰队用小标签 */
.crazy-cards-page .crazy-slug .crazy-world-head > .crazy-progress { flex: 1 1 220px; max-width: none; }
.crazy-cards-page .crazy-slug .crazy-progress-fill { background: linear-gradient(90deg, #fb923c, #dc2626); }
.crazy-cards-page .crazy-slug-facts { display: flex; flex-wrap: wrap; gap: 4px 14px; color: #475569; }
.crazy-cards-page .crazy-slug-facts em { font-style: normal; color: #94a3b8; margin-right: 4px; }
.crazy-cards-page .crazy-slug-facts .status-ready em { color: #d97706; }
.crazy-cards-page .crazy-slug-facts .status-warn em { color: #dc2626; }
.crazy-cards-page .crazy-slug-rank { display: flex; flex-direction: column; gap: 4px; padding-top: 5px; border-top: 1px dashed rgba(100,116,139,.2); color: #475569; }
.crazy-cards-page .crazy-rank-title, .crazy-cards-page .crazy-rank-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; grid-gap: 8px; gap: 8px; min-width: 0; }
.crazy-cards-page .crazy-rank-title { color: #64748b; font-size: 11px; }
.crazy-cards-page .crazy-rank-title b { color: #334155; font-size: 12px; }
.crazy-cards-page .crazy-rank-title span { grid-column: 3; text-align: right; }
.crazy-cards-page .crazy-rank-mine { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 4px 7px; border-radius: 5px; background: #fff7ed; color: #9a3412; }
.crazy-cards-page .crazy-rank-mine > em { flex: none; font-style: normal; font-weight: 600; color: #c2410c; }
.crazy-cards-page .crazy-rank-unlisted { color: #9a3412; }
.crazy-cards-page .crazy-rank-mine .crazy-rank-row { flex: 1 1 210px; }
.crazy-cards-page .crazy-rank-top3 { display: flex; flex-direction: column; gap: 2px; padding-left: 7px; }
.crazy-cards-page .crazy-rank-row { font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.crazy-cards-page .crazy-rank-place { color: #64748b; white-space: nowrap; }
.crazy-cards-page .crazy-rank-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #475569; font-weight: 500; }
.crazy-cards-page .crazy-rank-mine .crazy-rank-name { color: #9a3412; font-weight: 600; }
.crazy-cards-page .crazy-rank-damage { color: #334155; text-align: right; white-space: nowrap; }
.crazy-cards-page .crazy-activity .crazy-slug-facts .fact-heading { flex-basis: 100%; color: #2563eb; font-weight: 600; }
.crazy-cards-page .crazy-activity .crazy-slug-facts .fact-heading em { color: #2563eb; }
.crazy-cards-page .crazy-activity .crazy-slug-facts .fact-rank { flex-basis: 100%; padding-left: 12px; border-left: 2px solid #dbeafe; }
.crazy-cards-page .crazy-activity .crazy-slug-facts .fact-rank em { color: #64748b; }
.crazy-cards-page .crazy-slug-fleets { display: flex; flex-wrap: wrap; gap: 6px; }
.crazy-cards-page .crazy-slug-fleet { display: inline-flex; align-items: center; gap: 4px; padding: 1px 6px; border-radius: 4px; background: #f1f5f9; color: #475569; }
.crazy-cards-page .crazy-slug-fleet b { color: #334155; font-weight: 600; }
.crazy-cards-page .crazy-slug-fleet i { font-style: normal; font-size: 11px; color: #64748b; }
.crazy-cards-page .crazy-slug-fleet i::before { content: "·"; margin-right: 4px; color: #cbd5e1; }
/* 节日活动分区：状态胶囊(按 tone 着色) + 进度条同一行、窄屏换行；要点复用蛞蝓的 facts 排版 */
.crazy-cards-page .crazy-activity .crazy-world-head > .crazy-progress { flex: 1 1 200px; max-width: none; }
.crazy-cards-page .crazy-activity-status { display: inline-flex; align-items: center; gap: 6px; padding: 1px 9px; border-radius: 11px; font-weight: 600; line-height: 20px; overflow-wrap: anywhere; }
.crazy-cards-page .crazy-activity-status::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.crazy-cards-page .crazy-activity-status.tone-run { color: #2563eb; background: #eff6ff; }
.crazy-cards-page .crazy-activity-status.tone-ready { color: #b45309; background: #fffbeb; }
.crazy-cards-page .crazy-activity-status.tone-done { color: #15803d; background: #f0fdf4; }
.crazy-cards-page .crazy-activity-status.tone-idle { color: #64748b; background: #f1f5f9; }
.crazy-cards-page .crazy-activity-status.tone-warn { color: #dc2626; background: #fef2f2; }
.crazy-cards-page .crazy-activity-recent { color: #94a3b8; font-size: 11px; overflow-wrap: anywhere; }
.crazy-cards-page .event-fleet-overview { display: flex; flex-direction: column; gap: 10px; }
.crazy-cards-page .fleet-overview-section { display: flex; flex-direction: column; gap: 6px; padding-bottom: 8px; border-bottom: 1px solid rgba(100,116,139,.16); }
/* 福利卡全领完的分区(grid.compact)：状态胶囊进标题行、不出正文，只占一行；胶囊字重降一档，不跟要处理的分区抢眼 */
.crazy-cards-page .fleet-overview-section.is-compact { padding-bottom: 6px; }
.crazy-cards-page .fleet-overview-section.is-compact .crazy-activity-status { font-weight: 500; }
.crazy-cards-page .fleet-overview-section:last-child { padding-bottom: 0; border-bottom: 0; }
.crazy-cards-page .fleet-overview-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: #334155; }
.crazy-cards-page .fleet-overview-title .event-summary-badges { margin-left: auto; }
@media (max-width: 520px) {
    .crazy-cards-page .crazy-world-card { padding: 6px; }
    .crazy-cards-page .crazy-progress { min-width: 96px; }
    .crazy-cards-page .crazy-treasures .crazy-world-head > .crazy-progress { width: 100%; max-width: none; flex-basis: 100%; }
}
.crazy-cards-page .card-stars.empty { color: #89919e; }

/* 外框、分区、材料和状态标签复用动态页的工厂 / 居民 / 货船样式。 */
.commerce-card { min-width: 0; color: #334155; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.commerce-card h4 { margin: 0; color: #334155; font-size: 12px; font-weight: 600; }
.commerce-card p { margin: 0; }
.commerce-muted { color: #94a3b8; font-size: 11px; }
.commerce-section, .merchant-last-reward, .commerce-my-seats, .commerce-my-seat, .commerce-ship {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.commerce-section-heading, .commerce-ship-heading, .commerce-seat-heading {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 6px;
}
.commerce-section-heading time { margin-left: auto; color: #94a3b8; font-size: 10px; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.commerce-material-heading { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-bottom: 4px; color: #94a3b8; font-size: 10px; }
.commerce-materials ul, .commerce-rewards { padding: 0; margin: 0; list-style: none; }
.commerce-materials .resident-req { flex-wrap: wrap; max-width: 100%; box-sizing: border-box; }
.commerce-item-name { min-width: 0; }
.commerce-amount, .commerce-shortage { white-space: nowrap; }
.commerce-rewards li { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 4px; }
.commerce-rewards b { font-weight: 600; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.commerce-reward-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.commerce-reward-line > .commerce-muted { flex: none; }
.commerce-my-seat > .commerce-section-heading > span { font-size: 11px; color: #64748b; }
.commerce-ship-status, .commerce-occupancy { margin-left: auto; }
.commerce-seats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); grid-gap: 6px; gap: 6px; padding-top: 6px; border-top: 1px dashed #e2e8f0; }
.commerce-seat { display: flex; flex-direction: column; gap: 5px; padding: 6px 8px; background: #fff; border: 1px solid #e2e8f0; border-radius: 6px; min-width: 0; }
.commerce-seat-mine { background: #eff6ff; border-color: #bfdbfe; }
.commerce-seat-heading b { font-size: 11px; font-weight: 600; }
.commerce-conditions { display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: #64748b; }
@media (max-width: 520px) {
    .commerce-seats { grid-template-columns: 1fr; }
    .commerce-ship-heading > .commerce-muted { flex-basis: 100%; }
}

.diamond-spend-card {
    color: #334155;
    font-size: 12px;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}

.diamond-spend-period,
.diamond-spend-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4px 12px;
    color: #64748b;
    font-size: 11px;
    line-height: 1.5;
}

.diamond-spend-totals {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-gap: 12px;
    gap: 12px;
    margin: 8px 0 10px;
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #f8fafc;
}

.diamond-spend-totals > div + div {
    padding-left: 12px;
    border-left: 1px solid #e2e8f0;
}

.diamond-spend-totals dt { color: #64748b; }
.diamond-spend-totals dd {
    margin: 3px 0 0;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.3;
    overflow-wrap: anywhere;
}
.diamond-spend-totals dd > span { font-size: 11px; font-weight: 400; }
.diamond-spend-total dd { color: #0e7490; }

.diamond-spend-table { width: 100%; table-layout: fixed; border-collapse: collapse; }
.diamond-spend-table th,
.diamond-spend-table td { padding: 6px 4px; text-align: right; }
.diamond-spend-table thead th { color: #64748b; font-size: 11px; font-weight: 400; }
.diamond-spend-table th:first-child { width: 50%; padding-left: 0; text-align: left; overflow-wrap: anywhere; }
.diamond-spend-table tbody tr { border-top: 1px solid #e2e8f0; }
.diamond-spend-table tbody th { font-weight: 400; }
.diamond-spend-table td { overflow-wrap: anywhere; }
.diamond-spend-table td:last-child { color: #0e7490; font-weight: 600; }
.diamond-spend-empty { margin: 4px 0 10px; color: #64748b; }
.diamond-spend-footer { margin-top: 8px; }
.diamond-spend-note { color: #0e7490; }
.diamond-spend-note.is-warning { color: #b45309; }

@media (max-width: 400px) {
    .diamond-spend-totals { gap: 8px; padding: 8px; }
    .diamond-spend-totals > div + div { padding-left: 8px; }
    .diamond-spend-totals dd { font-size: 20px; }
}

/* 管理台：PC 端布局（顶部 Header + 左侧垂直菜单 + 内容区） */
.admin-layout {
    height: 100vh;
    height: 100dvh;
    height: var(--app-vh, 100vh);
}

/* 顶部 Header（白色） */
.admin-header {
    background: #fff;
    height: 56px;
    line-height: normal;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
    z-index: 10;
}

.admin-header-title {
    font-size: 16px;
    font-weight: 600;
    color: #1a1a1a;
}

.admin-header-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.admin-header-avatar:hover {
    opacity: 0.85;
}

/* 中间行：左侧菜单 + 内容区，占满剩余视口高度 */
.admin-body {
    flex: 1 1;
    min-height: 0;
}

/* 左侧白色垂直菜单 */
.admin-sider {
    border-right: 1px solid #f0f0f0;
}

.admin-sider .ant-layout-sider-children {
    overflow-y: auto;
}

/* 原生收起 trigger：贴合亮色侧栏的分割线 */
.admin-sider .ant-layout-sider-trigger {
    border-top: 1px solid #f0f0f0;
}

.admin-sider .ant-menu {
    -webkit-border-end: none;
            border-inline-end: none; /* Sider 自带分割线，去掉 Menu 默认右边线 */
    padding-top: 8px;
}

/* 分组固定展开：隐藏折叠箭头，组名不可点 */
.admin-sider .ant-menu-submenu-arrow {
    display: none;
}

.admin-sider .ant-menu-submenu-title {
    cursor: default;
}

/* 内容区（宽表格内部滚动，不撑破布局） */
.admin-content {
    flex: 1 1;
    min-width: 0;
    overflow: auto;
    padding: 16px 20px;
    background: #f4f5f7;
}

/* 用户列表页面样式 - 移动端优化，参考assign_record页面 */

/* 页面容器样式 */
.users-page {
    min-height: calc(100vh - 200px);
    min-height: calc(100dvh - 200px - var(--safe-area-bottom));
}

/* 移动端适配 (< 768px) */
@media (max-width: 767px) {    
    /* 表格滚动容器 */
    .users-page .ant-table-container {
        overflow-x: auto;
    }
    
    /* 表格内容适配 */
    .users-page .ant-table-content {
        min-width: 100%;
    }
    
    /* 表格移动端适配 - 参考assign_record */
    .users-page .ant-table {
        font-size: 14px;
    }
    
    .users-page .ant-table-thead > tr > th {
        font-size: 14px;
        padding: 12px 8px;
        white-space: nowrap;
    }
    
    .users-page .ant-table-tbody > tr > td {
        padding: 12px 8px;
        font-size: 14px;
        word-break: break-word;
        line-height: 1.4;
    }
    
    /* 固定列样式优化 */
    .users-page .ant-table-thead > tr > th.ant-table-cell-fix-left,
    .users-page .ant-table-tbody > tr > td.ant-table-cell-fix-left {
        background-color: #fafafa;
        border-right: 1px solid #f0f0f0;
    }
    
    .users-page .ant-table-thead > tr > th.ant-table-cell-fix-right,
    .users-page .ant-table-tbody > tr > td.ant-table-cell-fix-right {
        background-color: #fafafa;
        border-left: 1px solid #f0f0f0;
    }
    
    /* 调整列的宽度 - 优化固定列后的空间分配 */
    .users-page .ant-table-thead > tr > th:nth-child(1),
    .users-page .ant-table-tbody > tr > td:nth-child(1) {
        min-width: 80px;
        max-width: 80px;
    }
    
    .users-page .ant-table-thead > tr > th:nth-child(2),
    .users-page .ant-table-tbody > tr > td:nth-child(2) {
        min-width: 60px;
        width: 80px;
    }
    
    .users-page .ant-table-thead > tr > th:nth-child(3),
    .users-page .ant-table-tbody > tr > td:nth-child(3) {
        min-width: 60px;
        width: 80px;
    }
    
    .users-page .ant-table-thead > tr > th:nth-child(4),
    .users-page .ant-table-tbody > tr > td:nth-child(4) {
        min-width: 80px;
        width: 100px;
    }
    
    .users-page .ant-table-thead > tr > th:nth-child(5),
    .users-page .ant-table-tbody > tr > td:nth-child(5) {
        min-width: 60px;
        width: 80px;
    }
    
    .users-page .ant-table-thead > tr > th:nth-child(6),
    .users-page .ant-table-tbody > tr > td:nth-child(6) {
        min-width: 20px;
        max-width: 20px;
    }
    
    /* 分页器移动端样式 - 参考assign_record */
    .users-page .ant-pagination {
        margin-top: 16px;
        text-align: center;
    }
    
    .users-page .ant-pagination .ant-pagination-item,
    .users-page .ant-pagination .ant-pagination-prev,
    .users-page .ant-pagination .ant-pagination-next {
        min-width: 32px;
        height: 32px;
        line-height: 30px;
        margin: 0 4px;
        font-size: 14px;
    }
    
    /* 隐藏部分分页功能以节省空间 */
    .users-page .ant-pagination .ant-pagination-total-text {
        display: none;
    }
    
    .users-page .ant-pagination .ant-pagination-options {
        display: none;
    }
}
.account-card-list {
    width: calc(100% + 40px);
    max-width: calc(100% + 40px);
    background-color: #f9f9f9;
    margin: -20px -20px 0 -20px;
    padding: 20px 20px 0 20px;
    padding-bottom: max(60px, env(safe-area-inset-bottom) + 24px);
    box-sizing: border-box;
    position: relative;
}

.filter-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 20px;
    width: 100%;
}

.filter-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.run-pod-count {
    font-size: 14px;
    color: #555;
    text-align: center;
    padding: 8px;
    background-color: #fff;
    border-radius: 6px;
    border: 1px solid #d9d9d9;
}

/* 父容器样式调整 - 让 HomeCards 在子账户页面垂直排列并撑满宽度 */
.account-card-list .home-content {
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 20px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* 确保所有卡片都能撑满宽度 */
.account-card-list .custom-card {
    max-width: 100% !important;
    align-self: stretch !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
}

/* 为移动端添加触摸友好的样式 */
.account-card-list .custom-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}

.account-card-list .custom-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.account-card-list .custom-card:active {
    transform: translateY(0);
}

/* 平板端适配 (768px - 1024px) */
@media (min-width: 768px) {
    .account-card-list {
        padding: 20px;
    }
    
    .filter-container {
        flex-direction: row;
        align-items: flex-start;
    }
    
    .filter-options {
        flex-direction: row;
        align-items: center;
        gap: 16px;
        width: auto;
    }
    
    .run-pod-count {
        min-width: 120px;
    }
    
    .account-card-list .home-content {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
        margin-top: 20px !important;
        margin-left: 0px !important;
        gap: 20px !important;
        align-items: flex-start !important;
    }
}

/* 桌面端适配 (1024px+) */
@media (min-width: 1024px) {
    .account-card-list {
        padding: 24px;
    }
    
    .filter-options {
        gap: 20px;
    }
    
    .account-card-list .home-content {
        gap: 24px !important;
    }
}

/* 分页器样式 */
.pagination-container {
    display: flex;
    justify-content: center;
}

/* 移动端优化 */
@media (max-width: 767px) {
    .account-card-list {
        width: calc(100% + 40px);
        max-width: calc(100% + 40px);
        margin: -20px -20px 0 -20px;
        padding: 12px 12px 0 12px;
        /* padding-bottom: max(60px, env(safe-area-inset-bottom) + 24px); */
    }
    
    .account-card-list .home-content {
        margin: 0 !important;
        padding: 0 !important;
        gap: 16px !important;
        width: 100% !important;
        max-width: 100% !important;
        align-items: stretch !important;
    }
    
    .filter-container {
        margin-bottom: 16px;
    }
    
    /* 移动端卡片宽度撑满可用空间，消除留白 */
    .account-card-list .custom-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
        flex-shrink: 0 !important;
        align-self: stretch !important;
    }
    
}

/* 平板和桌面端分页器右对齐 */
@media (min-width: 768px) {
    .pagination-container {
        justify-content: flex-end;
    }
}

/* 订单列表页面样式 - 移动端优化 */

/* 页面容器样式 */
.orders-page {
    min-height: calc(100vh - 200px);
    min-height: calc(100dvh - 200px - var(--safe-area-bottom));
    padding: 8px;
}

/* 搜索按钮样式 */
.search-buttons {
    width: 100%;
}

/* 移动端适配 */
@media (max-width: 767px) {
    .orders-page {
        padding: 4px;
    }
    
    /* 移动端搜索按钮居中对齐 */
    .search-buttons {
        justify-content: center !important;
        margin-top: 8px !important;
    }
    
    /* 移动端表格横向滚动 */
    .ant-table-wrapper {
        overflow-x: auto;
    }
    
    /* 移动端卡片内边距调整 */
    .ant-card-body {
        padding: 8px !important;
    }
    
    /* 移动端输入框样式 */
    .ant-input {
        font-size: 16px; /* 防止iOS缩放 */
    }
    
    /* 移动端按钮样式 */
    .ant-btn {
        height: 36px;
        font-size: 14px;
    }
}

/* 平板和桌面端 */
@media (min-width: 768px) {
    .orders-page {
        padding: 16px;
    }
    
    .search-buttons {
        justify-content: flex-start !important;
    }
} 
/* 配额分配记录页面样式 - 移动端优化 */

/* 页面容器样式 */
.assign-record-page {
    min-height: calc(100vh - 200px);
    min-height: calc(100dvh - 200px - var(--safe-area-bottom));
}

/* 给assign_record添加特定类名的样式 */
.assign-record-page .ant-card {
    border-radius: 0;
    box-shadow: none;
    border: none;
    background-color: transparent; /* Card透明背景 */
}

.assign-record-page .ant-card-body {
    background-color: transparent; /* Card内容区域也透明 */
    padding: 0; /* 移除内边距，让内容直接贴合 */
}

/* 搜索区域样式 */
.assign-record-page .ant-row {
    margin-bottom: 16px;
}

.assign-record-page .ant-input {
    border-radius: 6px;
    font-size: 14px;
}

/* 表格样式 */
.assign-record-page .ant-table {
    font-size: 14px;
}


/* 移动端适配 (< 768px) */
@media (max-width: 767px) {
    
    .assign-record-page .ant-card {
        background-color: transparent; /* 移动端Card也保持透明 */
        box-shadow: none;
        border: none;
    }
    
    .assign-record-page .ant-card-body {
        padding: 0; /* 移动端也移除内边距 */
        background-color: transparent; /* 移动端Card内容区域也透明 */
    }
    
    /* 搜索框移动端适配 */
    .assign-record-page .ant-row {
        margin-bottom: 12px;
    }
  
    
    .assign-record-page .ant-col {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .assign-record-page .ant-input {
        font-size: 16px; /* 防止iOS缩放 */
    }
    
    /* 表格移动端适配 */
    .assign-record-page .ant-table {
        font-size: 14px;
    }
    
    .assign-record-page .ant-table-thead > tr > th {
        font-size: 14px;
        padding: 12px 8px;
        white-space: nowrap;
    }
    
    .assign-record-page .ant-table-tbody > tr > td {
        padding: 12px 8px;
        font-size: 14px;
        word-break: break-word;
        line-height: 1.4;
    }
    
    /* 移动端隐藏昵称列以节省空间 */
    .assign-record-page .ant-table-thead > tr > th:nth-child(3),
    .assign-record-page .ant-table-tbody > tr > td:nth-child(3) {
        display: none;
    }
    
    /* 调整剩余列的宽度 */
    .assign-record-page .ant-table-thead > tr > th:nth-child(1),
    .assign-record-page .ant-table-tbody > tr > td:nth-child(1) {
        width: 25%;
        min-width: 80px;
    }
    
    .assign-record-page .ant-table-thead > tr > th:nth-child(2),
    .assign-record-page .ant-table-tbody > tr > td:nth-child(2) {
        width: 35%;
        min-width: 100px;
    }
    
    .assign-record-page .ant-table-thead > tr > th:nth-child(4),
    .assign-record-page .ant-table-tbody > tr > td:nth-child(4) {
        width: 20%;
        min-width: 60px;
    }
    
    .assign-record-page .ant-table-thead > tr > th:nth-child(5),
    .assign-record-page .ant-table-tbody > tr > td:nth-child(5) {
        width: 20%;
        min-width: 70px;
    }
    
    /* 分页器移动端优化 */
    .assign-record-page .ant-pagination {
        margin-top: 16px;
        margin-bottom: 20px;
        text-align: center;
    }
    
    .assign-record-page .ant-pagination .ant-pagination-item,
    .assign-record-page .ant-pagination .ant-pagination-prev,
    .assign-record-page .ant-pagination .ant-pagination-next {
        min-width: 32px;
        height: 32px;
        line-height: 30px;
        margin: 0 4px;
        font-size: 14px;
    }
    
    /* 隐藏部分分页功能以节省空间 */
    .assign-record-page .ant-pagination .ant-pagination-total-text {
        display: none;
    }
    
    .assign-record-page .ant-pagination .ant-pagination-options {
        display: none;
    }
}

/* 平板端适配 (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    .assign-record-page .ant-table {
        font-size: 13px;
    }
    
    .assign-record-page .ant-table-thead > tr > th {
        font-size: 13px;
        padding: 14px 10px;
    }
    
    .assign-record-page .ant-table-tbody > tr > td {
        padding: 14px 10px;
        font-size: 13px;
    }
}

/* 桌面端适配 (> 1024px) */
@media (min-width: 1025px) {
    .assign-record-page .ant-table-thead > tr > th,
    .assign-record-page .ant-table-tbody > tr > td {
        padding: 18px 16px;
    }
}

/* 表格行交互效果 */
.assign-record-page .ant-table-tbody > tr {
    transition: background-color 0.2s;
}

.assign-record-page .ant-table-tbody > tr:hover {
    background-color: #f8f9fa;
}

/* 空数据状态 */
.assign-record-page .ant-empty {
    padding: 40px 20px;
}

.assign-record-page .ant-empty-description {
    color: #999;
    font-size: 12px;
}

/* 搜索框样式优化 */
.assign-record-page .ant-input-affix-wrapper {
    border-radius: 6px;
    transition: box-shadow 0.2s;
}

.assign-record-page .ant-input-affix-wrapper:focus,
.assign-record-page .ant-input-affix-wrapper-focused {
    box-shadow: 0 2px 6px rgba(24, 144, 255, 0.2);
} 
/* 代理盈利统计页面样式 - 移动端优化 */

/* 页面容器样式 */
.agent-stats-page {
    min-height: calc(100vh - 200px);
    min-height: calc(100dvh - 200px - var(--safe-area-bottom));
}

/* 代理转移弹窗样式 */
.agent-stats-page .ant-modal-header {
    border-bottom: 1px solid #f0f0f0;
    padding: 16px 24px;
}

.agent-stats-page .ant-modal-body {
    padding: 24px;
}

/* 步骤条样式 */
.agent-stats-page .ant-steps {
    margin-bottom: 24px;
}

/* 表单项样式 */
.agent-stats-page .ant-form-item-label > label {
    font-weight: 600;
}

/* 提示信息框样式 */
.agent-stats-page .transfer-notice {
    background: #fff7e6;
    border: 1px solid #ffd591;
    border-radius: 6px;
    padding: 12px;
    margin-bottom: 16px;
}

.agent-stats-page .transfer-confirm {
    background: #f6ffed;
    border: 1px solid #b7eb8f;
    border-radius: 6px;
    padding: 16px;
    margin-bottom: 24px;
}

.agent-stats-page .transfer-warning {
    background: #fff2f0;
    border: 1px solid #ffccc7;
    border-radius: 6px;
    padding: 16px;
    margin-bottom: 24px;
    text-align: center;
}

/* 倒计时样式 */
.agent-stats-page .countdown-text {
    margin: 8px 0 0 0;
    font-size: 16px;
    color: #ff4d4f;
}

.agent-stats-page .countdown-number {
    font-size: 20px;
    font-weight: bold;
}

/* 移动端适配 */
@media (max-width: 767px) {
   
    /* 查询条件区域移动端样式 */
    .agent-stats-page .ant-row {
        margin-bottom: 12px;
    }
    
    /* 统计卡片区域移动端样式 */
    .agent-stats-page .ant-spin-container > .ant-row {
        margin-bottom: 16px;
    }
    
    /* 表格移动端样式 */
    .agent-stats-page .ant-table {
        margin-bottom: 16px;
    }
    
    /* 空数据状态移动端样式 */
    .agent-stats-page .ant-empty {
        margin: 20px 0;
        padding-bottom: 20px;
    }
    
    /* 代理转移弹窗移动端样式 */
    .agent-stats-page .ant-modal {
        margin: 0;
        max-width: calc(100vw - 32px);
    }
    
    .agent-stats-page .ant-modal-content {
        border-radius: 8px;
    }
    
    .agent-stats-page .ant-modal-body {
        padding: 16px;
    }
    
    .agent-stats-page .ant-steps {
        margin-bottom: 16px;
    }
    
    .agent-stats-page .transfer-notice,
    .agent-stats-page .transfer-confirm,
    .agent-stats-page .transfer-warning {
        padding: 12px;
        margin-bottom: 16px;
    }
}

/* ============================================================
   用户协议 / 隐私政策 通用样式
   ============================================================ */

.legal-page {
    min-height: 100vh;
    background: #f7f8fa;
    padding: 40px 16px 60px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", sans-serif;
    color: #333;
}

.legal-container {
    max-width: 760px;
    margin: 0 auto;
    background: #fff;
    border-radius: 12px;
    padding: 40px 48px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.legal-back {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    color: #888;
    font-size: 14px;
    cursor: pointer;
    padding: 0;
    margin-bottom: 24px;
    transition: color 0.2s;
}

.legal-back:hover {
    color: #333;
}

.legal-container h1 {
    font-size: 26px;
    font-weight: 700;
    color: #111;
    margin: 0 0 6px;
}

.legal-updated {
    font-size: 13px;
    color: #aaa;
    margin: 0 0 32px;
}

.legal-container section {
    margin-bottom: 28px;
}

.legal-container h2 {
    font-size: 16px;
    font-weight: 600;
    color: #222;
    margin: 0 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid #f0f0f0;
}

.legal-container p {
    font-size: 14px;
    line-height: 1.8;
    color: #555;
    margin: 0 0 10px;
}

.legal-container ul {
    margin: 8px 0 10px 0;
    padding-left: 20px;
}

.legal-container ul li {
    font-size: 14px;
    line-height: 1.8;
    color: #555;
    margin-bottom: 4px;
}

.legal-footer {
    margin-top: 40px;
    font-size: 12px;
    color: #bbb;
    text-align: center;
}

@media (max-width: 600px) {
    .legal-container {
        padding: 24px 20px;
    }

    .legal-container h1 {
        font-size: 20px;
    }
}

/* 标题 */
.modal-title-with-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.modal-title-with-icon .title-icon {
    font-size: 30px;
    color: #000;
}

.modal-title-with-icon .info-icon {
    font-size: 16px;
    color: #86868b;
    cursor: pointer;
    transition: color 0.2s;
}

/* Modal */
.redemption-modal.ios-style .ant-modal {
    width: 90% !important;
    max-width: 480px;
    min-width: 280px;
}

.redemption-modal.ios-style .ant-modal-header {
    border-bottom: none;
    padding: 20px 24px 16px;
}

.redemption-modal.ios-style .ant-modal-title {
    font-size: 20px;
    font-weight: 600;
    text-align: center;
}

.redemption-modal.ios-style .ant-modal-body {
    padding: 0 24px 24px;
    max-height: calc(90vh - 100px);
    overflow-y: auto;
}

/* 输入框 */
.redemption-input {
    border-radius: 10px;
    border: 1px solid #e5e5e7;
    background: #f5f5f7;
    transition: all 0.2s;
}

.redemption-input:hover,
.redemption-input:focus {
    background: #fff;
    border-color: #007aff;
}

.redemption-input input {
    background: transparent;
    font-size: 15px;
}

.redemption-input input::placeholder {
    color: #86868b;
}

/* 多行输入（批量兑换码）：antd TextArea 可能把 className 放在 textarea 本身或外层包裹上，两种都覆盖 */
textarea.redemption-input,
.redemption-input textarea {
    font-size: 15px;
    line-height: 1.6;
    padding: 10px 12px;
    resize: none;
}

textarea.redemption-input::placeholder,
.redemption-input textarea::placeholder {
    color: #86868b;
}

/* 识别结果提示 */
.redemption-hint {
    margin-top: 6px;
    font-size: 12px;
    color: #86868b;
}

.redemption-hint.is-error {
    color: #ff4d4f;
}

/* 按钮 */
.redemption-button {
    margin-top: 16px;
    height: 44px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 500;
    background: #007aff;
    border: none;
}

.redemption-button:hover:not(:disabled) {
    background: #0051d5;
}

.redemption-button:active:not(:disabled) {
    background: #004fc4;
}

/* 移动端 */
@media (max-width: 480px) {
    .redemption-modal.ios-style .ant-modal {
        width: 90% !important;
        min-width: auto;
    }
    
    .redemption-modal.ios-style .ant-modal-header {
        padding: 16px;
    }
    
    .redemption-modal.ios-style .ant-modal-title {
        font-size: 18px;
    }
    
    .redemption-modal.ios-style .ant-modal-body {
        padding: 0 16px 16px;
        max-height: calc(80vh - 80px);
    }
    
    .modal-title-with-icon .title-icon {
        font-size: 24px;
    }

}

/* 全局底部 TabBar（登录后页面） */
:root {
    --tabbar-height: 56px;
}

.global-tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(56px + var(--safe-area-bottom));
    height: calc(var(--tabbar-height) + var(--safe-area-bottom));
    padding-bottom: var(--safe-area-bottom);
    display: flex;
    align-items: stretch;
    box-shadow: 0 -1px 8px rgba(0, 0, 0, 0.08);
    z-index: 999; /* 低于 antd Modal/Drawer（1000），弹窗时遮住 TabBar */
}

.tabbar-item {
    flex: 1 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border: none;
    background: none;
    padding: 0;
    font-size: 20px;
    color: #999;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.tabbar-item span {
    font-size: 11px;
    line-height: 1.2;
}

.tabbar-item.active {
    color: #1677ff;
    color: var(--tabbar-active, #1677ff);
}

/* 中央凸起功能按钮（主题渐变圆，无图标） */
.tabbar-center {
    flex: 1 1;
    position: relative;
}

.tabbar-center-btn {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -14px);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    padding: 0;
    color: #fff;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(22, 119, 255, 0.45);
    transition: transform 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

/* 宫格功能图标：2×2 圆角方块，右上角旋转 45° 成菱形 */
.tabbar-apps-icon {
    display: grid;
    grid-template-columns: repeat(2, 8px);
    grid-auto-rows: 8px;
    grid-gap: 4px;
    gap: 4px;
}

.tabbar-apps-icon i {
    background: #fff;
    border-radius: 2px;
}

.tabbar-apps-icon i:nth-child(2) {
    transform: rotate(45deg) scale(0.92);
}

.tabbar-center-btn:active {
    transform: translate(-50%, -14px) scale(0.92);
}

/* 功能面板宫格 */
.action-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 18px 8px;
    gap: 18px 8px;
    padding-bottom: var(--safe-area-bottom);
}

.action-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.action-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: #f5f7fa;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #1677ff;
    transition: background 0.15s ease;
}

.action-cell:active .action-icon {
    background: #e6f4ff;
}

.action-label {
    font-size: 12px;
    color: #333;
}

.action-empty {
    padding: 32px 0;
    text-align: center;
    color: #999;
    font-size: 13px;
}

/* ===== Setting 页补丁 =====
   说明：Setting 页有 8 套游戏专属 css（按构建注入其一），逐个改不现实，
   这里用更高优先级统一覆盖。
   - margin-top：原 50px 是给已移除的 NavBar 的；safe-area 由 body 统一处理，勿重复叠加。
   - min-height：扣掉 body 的安全区 padding，否则渐变背景填不满视口、底部露一截白色。 */
body .setting-tabs {
    margin-top: 8px;
}

body .setting-container {
    min-height: calc(100vh - 0px - 0px);
    min-height: calc(100vh - var(--safe-area-top, 0px) - var(--safe-area-bottom, 0px));
    min-height: calc(100dvh - 0px - 0px);
    min-height: calc(100dvh - var(--safe-area-top, 0px) - var(--safe-area-bottom, 0px));
}