/* ====== 设计令牌（Design Tokens）====== */
/* 字号 */
:root {
    --fs-xs: 11px;
    --fs-sm: 12px;
    --fs-base: 14px;
    --fs-md: 14px;
    --fs-lg: 16px;
    --fs-xl: 18px;
    --fs-2xl: 20px;
    --fs-3xl: 24px;

    /* 间距 */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;

    /* 圆角 */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-xl: 24px;
    --radius-pill: 999px;

    /* 层级（z-index）*/
    --z-bg: -1;
    --z-base: 1;
    --z-card: 10;
    --z-nav: 100;
    --z-toast: 300;
    --z-popout: 500;
    --z-overlay: 1000;
    --z-modal: 2000;
    --z-loading: 5000;
    --z-emergency: 9999;
    --z-max: 99999;

    /* 布局：侧边栏宽度 */
    --nav-width: 60px;
    --nav-safe: 76px;
}

/* ====== 昼夜模式 — CSS 变量 ====== */
:root {
    --font-game: "ZCOOL KuaiLe", system-ui, sans-serif;
    --bg-body: linear-gradient(175deg, #f7f3ed 0%, #f0ece5 40%, #ede8e0 100%);
    --bg-body-deco: radial-gradient(circle at 20% 80%, rgba(255,179,71,0.06) 0%, transparent 50%),
                    radial-gradient(circle at 80% 20%, rgba(102,126,234,0.04) 0%, transparent 50%),
                    radial-gradient(circle at 40% 40%, rgba(255,255,255,0.3) 0%, transparent 30%);
    --text-primary: #3a2e2a;
    --text-secondary: #5a4a42;
    --text-heading: #2d3436;
    --text-muted: #888;
    --text-light: #666;
    --bg-card: linear-gradient(160deg, #fefcf9 0%, #faf7f2 100%);
    --bg-card-solid: rgba(255,255,255,0.85);
    --bg-input: rgba(255,255,255,0.7);
    --border-card: 1px solid rgba(255,255,255,0.6);
    --shadow-card: 0 1px 0 rgba(255,255,255,0.8) inset, 0 4px 16px rgba(0,0,0,0.05), 0 1px 3px rgba(0,0,0,0.04);
    --shadow-card-hover: 0 2px 8px rgba(0,0,0,0.06);
    --bg-modal: linear-gradient(165deg, rgba(255,255,255,0.95) 0%, rgba(250,247,242,0.95) 100%);
    --bg-overlay: rgba(30, 25, 20, 0.35);
    --bg-chat: linear-gradient(165deg, rgba(255,255,255,0.96) 0%, rgba(250,247,242,0.96) 100%);
    --bg-material: linear-gradient(155deg, #f6faf3 0%, #edf5e8 100%);
    --color-material: #4a5a42;
    --bg-btn-default: #f5f5f5;
    --color-btn-default: #666;
    --bg-btn-hover: rgba(255,255,255,0.4);
    --bg-aquarium-header: linear-gradient(135deg, rgba(30, 80, 120, 0.25), rgba(20, 60, 90, 0.2));
    --border-aquarium: 2px solid rgba(100, 160, 200, 0.15);
    --color-log-text: #5a4a42;
    --chat-header-bg: #fafafa;
    --chat-msg-other-bg: #e8e8e8;
    --color-quality-label: gray;
    --color-common-label: green;
    --color-rare-label: blue;
    --color-epic-label: purple;
    --color-legendary-label: orange;
    --sidebar-bg: #ede8e0;
    --sidebar-btn-bg: rgba(255,255,255,0.7);
    --sidebar-btn-color: #5a4a42;
    --sidebar-btn-active-bg: #2ABFA4;
    --sidebar-btn-active-color: #ffffff;
    --sidebar-separator: rgba(0,0,0,0.1);
    --sidebar-scrollbar: rgba(0,0,0,0.15);
    --bg-popout: #faf8f6;
}

/* 夜间模式 */
body.dark-mode {
    --bg-body: linear-gradient(175deg, #0f0f1a 0%, #141420 40%, #1a1a2e 100%);
    --bg-body-deco: radial-gradient(circle at 20% 80%, rgba(88,101,242,0.08) 0%, transparent 50%),
                    radial-gradient(circle at 80% 20%, rgba(88,101,242,0.05) 0%, transparent 50%),
                    radial-gradient(circle at 40% 40%, rgba(255,255,255,0.05) 0%, transparent 30%);
    --text-primary: #dbdee1;
    --text-secondary: #b5bac1;
    --text-heading: #e0e0e0;
    --text-muted: #6d6f78;
    --text-light: #949ba4;
    --bg-card: linear-gradient(160deg, #2b2d31 0%, #232428 100%);
    --bg-card-solid: rgba(30, 31, 34, 0.9);
    --bg-input: rgba(60, 60, 70, 0.7);
    --border-card: 1px solid rgba(255,255,255,0.08);
    --shadow-card: 0 1px 0 rgba(255,255,255,0.04) inset, 0 4px 16px rgba(0,0,0,0.3), 0 1px 3px rgba(0,0,0,0.15);
    --shadow-card-hover: 0 2px 12px rgba(0,0,0,0.4);
    --bg-modal: linear-gradient(165deg, rgba(35,37,42,0.96) 0%, rgba(30,31,36,0.96) 100%);
    --bg-overlay: rgba(0, 0, 0, 0.6);
    --bg-chat: linear-gradient(165deg, rgba(35,37,42,0.96) 0%, rgba(30,31,36,0.96) 100%);
    --bg-material: linear-gradient(155deg, #2b2d31 0%, #232428 100%);
    --color-material: #b5bac1;
    --bg-btn-default: #35373c;
    --color-btn-default: #b5bac1;
    --bg-btn-hover: rgba(255,255,255,0.08);
    --bg-aquarium-header: linear-gradient(135deg, rgba(0,0,0,0.4), rgba(0,0,0,0.3));
    --border-aquarium: 2px solid rgba(255,255,255,0.06);
    --sidebar-bg: #1e1f22;
    --sidebar-btn-bg: #313338;
    --sidebar-btn-color: #dbdee1;
    --sidebar-btn-active-bg: #5865f2;
    --sidebar-btn-active-color: #ffffff;
    --sidebar-separator: #3f4147;
    --sidebar-scrollbar: #1a1b1e;
    --color-log-text: #b5bac1;
    --chat-header-bg: #2b2d31;
    --chat-msg-other-bg: #3f4147;
    --color-quality-label: #aaa;
    --color-common-label: #66BB6A;
    --color-rare-label: #64B5F6;
    --color-epic-label: #CE93D8;
    --color-legendary-label: #FFB74D;
    --bg-popout: #1e1f22;
}

/* ====== 私信系统样式 ====== */

/* 私信面板遮罩 */
.dm-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal);
}

.dm-panel {
    background: var(--bg-chat);
    backdrop-filter: blur(24px);
    border-radius: 32px;
    width: 420px;
    max-width: 95vw;
    height: 580px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.6) inset,
        0 20px 60px rgba(0,0,0,0.12),
        0 8px 20px rgba(0,0,0,0.06);
    overflow: hidden;
    animation: slideUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 1px solid rgba(255,255,255,0.5);
}

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

.dm-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid #eee;
    background: #fafafa;
    flex-shrink: 0;
}

.dm-header-left {
    display: flex;
    align-items: center;
    gap: 4px;
}

.dm-header-left h3 {
    font-size: 16px;
    color: #333;
}

/* 会话列表 */
.dm-conversation-view {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.dm-conversation-list {
    flex: 1;
}

.dm-conversation-item {
    display: flex;
    align-items: center;
    padding: 14px 18px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.15s;
    gap: 12px;
}

.dm-conversation-item:hover {
    background: #f5f7ff;
}

.dm-conversation-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: normal;
    flex-shrink: 0;
}

.dm-conversation-info {
    flex: 1;
    min-width: 0;
}

.dm-conversation-name {
    font-weight: normal;
    font-size: 14px;
    color: #333;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dm-conversation-name .unread-badge {
    background: #f44336;
    color: white;
    font-size: 11px;
    padding: 1px 7px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
    font-weight: normal;
}

.dm-conversation-preview {
    font-size: 13px;
    color: #888;
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dm-conversation-time {
    font-size: 11px;
    color: #aaa;
    flex-shrink: 0;
    align-self: flex-start;
}

/* 聊天视图 */
.dm-chat-view {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.dm-messages {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px;
    background: #f8f9fc;
}

.dm-message {
    display: flex;
    margin-bottom: 12px;
    flex-direction: column;
}

.dm-message.mine {
    align-items: flex-end;
}

.dm-message.other {
    align-items: flex-start;
}

.dm-message-bubble {
    max-width: 80%;
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 14px;
    line-height: 1.4;
    word-break: break-word;
    position: relative;
}

.dm-message.mine .dm-message-bubble {
    background: #2196F3;
    color: white;
    border-bottom-right-radius: 4px;
}

.dm-message.other .dm-message-bubble {
    background: #e8e8e8;
    color: #333;
    border-bottom-left-radius: 4px;
}

.dm-message-time {
    font-size: 11px;
    color: #aaa;
    margin-top: 4px;
    padding: 0 4px;
}

/* 礼物消息在私信中 */
.dm-message-gift {
    text-align: center;
    padding: 12px 16px;
    min-width: 160px;
}

.dm-message-gift .gift-icon {
    font-size: 32px;
    display: block;
    margin-bottom: 6px;
}

.dm-message-gift .gift-name {
    font-weight: normal;
    font-size: 14px;
    display: block;
    margin-bottom: 4px;
}

.dm-message-gift .gift-status {
    font-size: 12px;
    color: #888;
    display: block;
}

.dm-message-gift .gift-claim-btn {
    margin-top: 8px;
    padding: 6px 16px;
    border-radius: 6px;
    background: #ff9800;
    color: white;
    border: none;
    cursor: pointer;
    font-size: 13px;
    font-weight: normal;
}

.dm-message-gift .gift-claim-btn:disabled {
    background: #ccc;
    cursor: default;
}

.dm-message-claim-notice {
    font-size: 12px;
    color: #4CAF50;
    margin-top: 4px;
    font-weight: normal;
}

/* 输入区域 */
.dm-input-container {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-top: 1px solid #eee;
    background: #fff;
    flex-shrink: 0;
}

.dm-input {
    flex: 1;
    border: 1px solid #ddd;
    border-radius: 20px;
    padding: 10px 16px;
    font-size: 14px;
    resize: none;
    outline: none;
    max-height: 80px;
    font-family: inherit;
}

.dm-input:focus {
    border-color: #2196F3;
    box-shadow: 0 0 0 2px rgba(33,150,243,0.15);
}

.dm-gift-btn, .dm-send-btn {
    border: none;
    border-radius: 20px;
    cursor: pointer;
    font-size: 14px;
    flex-shrink: 0;
}

.dm-gift-btn {
    width: 40px;
    height: 40px;
    background: #f5f5f5;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dm-gift-btn:hover {
    background: #eee;
}

.dm-send-btn {
    padding: 10px 20px;
    background: #2196F3;
    color: white;
    font-weight: normal;
}

.dm-send-btn:hover {
    background: #1976D2;
}

/* 用户昵称可点击 */
.chat-username.clickable {
    cursor: pointer;
    transition: color 0.15s;
}

.chat-username.clickable:hover {
    color: #2196F3;
    text-decoration: underline;
}

/* 时间显示样式 */
.time-display-container {
    position: relative;
    display: inline-block;
    margin-bottom: 15px;
}

.time-display {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 40px;
    padding: 0 20px;
    min-width: 110px;
    box-sizing: border-box;
    background: linear-gradient(155deg, #7c6df0, #6c5ce7);
    color: white;
    border-radius: 28px;
    font-size: 16px;
    font-weight: normal;
    cursor: pointer;
    box-shadow:
        0 2px 0 rgba(255,255,255,0.15) inset,
        0 4px 20px rgba(108, 92, 231, 0.3);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s;
    letter-spacing: 0.02em;
}

.time-display:hover {
    transform: translateY(-3px);
    box-shadow:
        0 2px 0 rgba(255,255,255,0.15) inset,
        0 8px 30px rgba(108, 92, 231, 0.4);
}

.time-tooltip {
    position: absolute;
    bottom: -48px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(40,35,30,0.9);
    backdrop-filter: blur(8px);
    color: rgba(255,255,255,0.9);
    padding: 10px 18px;
    border-radius: 16px;
    font-size: 13px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s, transform 0.3s;
    z-index: var(--z-overlay);
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

.time-tooltip::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-bottom-color: rgba(40,35,30,0.9);
}

.time-display-container:hover .time-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-2px);
}

/* 不同时间段的颜色 */
.time-phase-凌晨 {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
}

.time-phase-清晨 {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.time-phase-白天 {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.time-phase-傍晚 {
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

.time-phase-夜晚 {
    background: linear-gradient(135deg, #3a1c71 0%, #d76d77 100%);
}

.time-phase-深夜 {
    background: linear-gradient(135deg, #0c0c0c 0%, #2d3436 100%);
}

/* 头部容器 - 时间和天气并排显示 */
.header-container {
    display: flex;
    justify-content: center;
    gap: 15px;
    align-items: flex-start;
    margin-bottom: 15px;
}

/* ========== 新顶部栏布局：左上角在线人数 + 中间时间/天气 + 下方资源栏 ========== */
.top-bar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    position: relative;
    gap: 10px;
    margin-bottom: 10px;
    min-height: 36px;
}

/* 左上角在线人数 */
.online-count-top-left {
    margin: 0;
    flex-shrink: 0;
    z-index: 2;
}

/* 中间区域：时间胶囊 + 天气胶囊 并排绝对居中 */
.top-bar-center {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    display: flex;
    align-items: flex-start;
    gap: 10px;
    z-index: 1;
}

/* 顶部资源栏（更紧凑） */
.stats-container-top {
    margin-top: 8px;
    margin-bottom: 8px;
}

@media (max-width: 768px) {
    .top-bar {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 6px;
        flex-wrap: nowrap;
    }
    .top-bar-center {
        position: static;
        transform: none;
        flex: 1;
        justify-content: center;
        gap: 6px;
    }
    .online-count-top-left {
        flex-shrink: 0;
        font-size: 11px !important;
        padding: 4px 8px !important;
    }
    .time-display,
    .weather-display {
        padding: 4px 10px !important;
        font-size: 12px !important;
    }
    .time-display-container .time-tooltip,
    .weather-display-container .weather-tooltip {
        display: none !important;
    }
}

/* 在线人数显示 */
.online-count {
    font-size: 13px;
    color: #666;
    background: rgba(255,255,255,0.85);
    padding: 6px 12px;
    border-radius: 16px;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    line-height: 1;
}

/* 天气显示样式 */
.weather-display-container {
    position: relative;
    display: inline-block;
}

.weather-display {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 40px;
    padding: 0 20px;
    min-width: 110px;
    box-sizing: border-box;
    background: linear-gradient(155deg, #72b876, #5aa85e);
    color: white;
    border-radius: 28px;
    font-size: 16px;
    font-weight: normal;
    cursor: pointer;
    box-shadow:
        0 2px 0 rgba(255,255,255,0.15) inset,
        0 4px 20px rgba(90, 168, 94, 0.3);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s;
    letter-spacing: 0.02em;
}

.weather-display:hover {
    transform: translateY(-3px);
    box-shadow:
        0 2px 0 rgba(255,255,255,0.15) inset,
        0 8px 30px rgba(90, 168, 94, 0.4);
}

.weather-tooltip {
    position: absolute;
    bottom: -48px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(40,35,30,0.9);
    backdrop-filter: blur(8px);
    color: rgba(255,255,255,0.9);
    padding: 10px 18px;
    border-radius: 16px;
    font-size: 13px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s, transform 0.3s;
    z-index: var(--z-overlay);
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

.weather-tooltip::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-bottom-color: rgba(40,35,30,0.9);
}

.weather-display-container:hover .weather-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-2px);
}

/* 天气状态样式 */
.weather-start {
    animation: pulse 1s ease-in-out;
}

.weather-ending {
    animation: fadeOut 1s ease-out;
}

.weather-changing {
    animation: pulse 0.5s ease-in-out;
}

/* 天气粒子动画画布 - 全屏覆盖但不可交互 */
#weatherCanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: var(--z-emergency);
    display: block;
}



/* ==================== 邮箱系统样式 ==================== */

/* 邮箱按钮（聊天室头部） */
.mailbox-btn {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    font-size: 20px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    transition: background 0.2s, transform 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.mailbox-btn:hover {
    background: rgba(255, 255, 255, 0.35);
    transform: scale(1.1);
}

/* 未读徽章 */
.mail-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #ef4444;
    color: white;
    font-size: 10px;
    font-weight: normal;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    border: 2px solid #667eea;
    line-height: 1;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* 聊天头部左侧容器 */
.chat-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 邮箱弹窗覆盖层 */
.mailbox-overlay {
    z-index: var(--z-modal);
}

/* 邮箱弹窗面板 */
.mailbox-panel {
    background: var(--bg-chat);
    backdrop-filter: blur(24px);
    border-radius: 32px;
    width: 92%;
    max-width: 520px;
    max-height: 82vh;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.6) inset,
        0 20px 60px rgba(0,0,0,0.12),
        0 8px 20px rgba(0,0,0,0.06);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.5);
}

/* 弹窗头部 */
.mailbox-header {
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
    flex-shrink: 0;
}
.mailbox-header h2 {
    margin: 0;
    font-size: 18px;
    color: #333;
}
.mailbox-close-btn {
    background: none;
    border: none;
    font-size: 22px;
    color: #999;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background 0.15s;
}
.mailbox-close-btn:hover {
    background: #f3f4f6;
    color: #333;
}

/* 邮件列表 */
.mailbox-list {
    flex: 1;
    overflow-y: auto;
    padding: 4px 0;
    min-height: 200px;
}

/* 单封邮件 */
.mail-item {
    padding: 14px 20px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: background 0.15s;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}
.mail-item:hover {
    background: #f8fafc;
}
.mail-item:last-child {
    border-bottom: none;
}
.mail-item.unread {
    background: #f0f4ff;
}
.mail-item.unread:hover {
    background: #e8edff;
}

.mail-item-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.mail-unread-dot {
    width: 8px;
    height: 8px;
    min-width: 8px;
    background: #667eea;
    border-radius: 50%;
    flex-shrink: 0;
}
.mail-unread-dot.read {
    background: #d1d5db;
}

.mail-item-title {
    font-weight: normal;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
}
.mail-item.unread .mail-item-title {
    font-weight: normal;
}

.mail-item-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.mail-item-time {
    font-size: 11px;
    color: #9ca3af;
    white-space: nowrap;
}

.mail-claimed-badge {
    font-size: 11px;
    color: #22c55e;
    background: #f0fdf4;
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
    font-weight: normal;
}

/* 邮件详情视图 */
.mailbox-detail {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.mailbox-detail-header {
    padding: 12px 20px;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
.mailbox-back-btn {
    background: #f3f4f6;
    border: none;
    color: #555;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.15s;
    flex-shrink: 0;
}
.mailbox-back-btn:hover {
    background: #e5e7eb;
}
.mailbox-detail-header h3 {
    margin: 0;
    font-size: 16px;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mailbox-detail-content {
    padding: 16px 20px;
    color: #555;
    font-size: 14px;
    line-height: 1.7;
    flex: 1;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

/* 奖励物品列表 */
.mailbox-detail-items {
    padding: 12px 20px;
    border-top: 1px solid #eee;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    flex-shrink: 0;
}
.mail-reward-item {
    background: #fef3c7;
    border: 1px solid #f59e0b;
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 13px;
    color: #92400e;
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: normal;
}

/* 底部操作栏 */
.mailbox-detail-footer {
    padding: 12px 20px;
    border-top: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}
.mail-detail-time {
    font-size: 12px;
    color: #9ca3af;
}

/* 领取按钮 */
.mail-claim-btn {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
    border: none;
    padding: 10px 24px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: normal;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s;
}
.mail-claim-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
}
.mail-claim-btn:active:not(:disabled) {
    transform: translateY(0);
}
.mail-claim-btn:disabled {
    background: #d1d5db;
    color: #9ca3af;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}
.mail-claim-btn.claimed {
    background: #22c55e;
}
.mail-claim-btn.claimed:hover {
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.4);
}

/* 邮箱空状态 */
.mailbox-list .empty-state {
    padding: 50px 20px;
    text-align: center;
    color: #9ca3af;
}
.mailbox-list .empty-state-icon {
    font-size: 52px;
    margin-bottom: 12px;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

@keyframes fadeOut {
    0% { opacity: 1; }
    100% { opacity: 0.5; }
}

@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes scaleIn {
    0% { transform: scale(0.8); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes slideDown {
    0% { transform: translateY(-20px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

/* 基本样式 */
body {
    background: var(--bg-body);
    min-height: 100vh;
    margin: 0;
    padding: 0;
    padding-bottom: 16px;
    padding-left: var(--nav-safe);
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    font-family: var(--font-game);
    color: var(--text-primary);
    position: relative;
}

body.page-index {
    padding-left: 0;
}

/* 背景微纹理 - 亚麻质感 */
body::before {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: var(--bg-body-deco);
    pointer-events: none;
    z-index: 0;
}

/* 移动端响应式布局 */
@media (max-width: 1024px) {
    .inventory-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
    }

    .trade-items {
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
    }
}

@media (max-width: 768px) {
    .header-container {
        flex-direction: column;
        gap: 10px;
    }
    
    .login-prompt {
        position: static;
        margin: 10px;
        width: calc(100% - 40px);
        box-sizing: border-box;
    }
    
    .inventory-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }
    
    .inventory-item {
        width: 100%;
        aspect-ratio: 1;
        height: auto;
    }
    
    .aquarium {
        height: 250px;
    }
    
    .trade-items {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }
    
    .trade-item {
        width: 100%;
        aspect-ratio: 1;
        height: auto;
    }
    
    .nav-bar {
        width: 52px;
        padding: 8px 0;
    }

    .nav-button {
        width: 36px;
        height: 36px;
        min-height: 36px;
        font-size: 15px;
    }

    .nav-button .tooltip {
        display: none;
    }

    body {
        padding-left: 68px;
    }

    body.page-index {
        padding-left: 0;
    }
    
    .log-container {
        max-height: 150px;
    }
}

@media (max-width: 480px) {
    .page {
        padding: 10px;
    }

    .time-display {
        padding: 10px 16px;
        font-size: 15px;
    }

    .weather-display {
        padding: 10px 16px;
        font-size: 15px;
    }

    .inventory-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .aquarium {
        height: 200px;
    }

    .trade-tabs {
        flex-direction: column;
    }

    .trade-tab {
        width: 100%;
    }

    .listed-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .listed-item-price {
        margin-right: 0;
        text-align: left;
        padding: 0;
        min-width: auto;
    }

    .listed-item-media {
        width: 100%;
        height: 72px;
    }

    .listed-item-media img {
        width: 56px;
        height: 56px;
    }

    .listed-item-action {
        width: 100%;
    }

    .listed-item-unlist-btn {
        width: 100%;
        padding: 8px 12px;
    }

    .login-modal {
        width: 95%;
        padding: 20px;
    }

    /* 移动端 - 下拉选择优化 */
    .select-row {
        gap: 8px;
    }

    .custom-select-trigger {
        padding: 8px 8px 8px 8px;
        border-radius: 22px;
        gap: 6px;
    }

    .select-field-icon {
        width: 28px;
        height: 28px;
        border-radius: 10px;
        font-size: 14px;
    }

    .custom-select-label {
        font-size: 12px;
    }

    .custom-select-sub {
        font-size: 10px;
    }

    .custom-select-arrow {
        font-size: 12px;
    }

    .custom-select-option {
        padding: 9px 10px;
        gap: 8px;
    }

    .custom-select-option-icon {
        font-size: 16px;
        width: 20px;
    }

    .custom-select-option-name {
        font-size: 12px;
    }

    .custom-select-option-meta {
        font-size: 10px;
    }

    .custom-select-option-check {
        width: 14px;
        height: 14px;
        font-size: 9px;
    }

    /* 移动端 - 钓鱼主按钮 */
    .btn-primary-fish {
        padding: 0;
        font-size: 16px;
        border-radius: 24px;
    }
    .btn-primary-fish .fish-progress-text {
        padding: 16px;
    }
}

/* 页面容器 */
/* ===== 页面切换动画 ===== */
@keyframes pageFadeIn {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes navButtonGlow {
    0% {
        box-shadow: 0 0 0 0 rgba(108, 92, 231, 0.35);
    }
    70% {
        box-shadow: 0 0 0 12px rgba(108, 92, 231, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(108, 92, 231, 0);
    }
}

.page {
    display: none !important;
    padding: 20px;
}

.page.active {
    display: block !important;
}

.page.page-switching {
    display: block !important;
    animation: pageFadeIn 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.page.page-switching#page-inventory {
    display: flex !important;
    flex-direction: column;
    animation: pageFadeIn 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.nav-bar .nav-button {
    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.nav-bar .nav-button.nav-flash {
    animation: navButtonGlow 0.6s ease;
}

.nav-bar .nav-button.nav-switch:focus-visible,
.nav-bar .nav-button.nav-switch {
    outline: none;
}

#page-inventory.page.active {
    display: flex !important;
    flex-direction: column;
    min-height: calc(100vh - 100px);
    box-sizing: border-box;
}

.page h2 {
    margin-top: 0;
    font-size: 22px;
    color: var(--text-heading);
    font-weight: normal;
    margin-bottom: 16px;
}

button {
    margin-top: 8px;
    padding: 8px 20px;
    position: relative;
    z-index: var(--z-nav);
    cursor: pointer;
    border-radius: 24px;
    border: none;
    font-family: inherit;
    font-size: 14px;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    outline: none;
    letter-spacing: 0.01em;
}

button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}

button:active {
    transform: translateY(1px) scale(0.97);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06), inset 0 1px 2px rgba(0,0,0,0.05);
}

.log-container {
    margin-top: 20px;
    max-height: 200px;
    overflow-y: auto;
    background: var(--bg-card);
    border-radius: 20px;
    padding: 16px 20px;
    box-shadow: var(--shadow-card);
    text-align: left;
    border: var(--border-card);
    position: relative;
    /* 日志边缘微渐变 */
    mask-image: linear-gradient(to bottom, transparent 0%, black 8px, black calc(100% - 8px), transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 8px, black calc(100% - 8px), transparent 100%);
}

/* 日志容器顶部微光条 */
.log-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 20px;
    right: 20px;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(42, 191, 164, 0.4), transparent);
    border-radius: 2px;
}

.log-item {
    margin: 10px 0;
    font-family: var(--font-game);
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.7;
    padding: 6px 12px;
    border-radius: 10px;
    transition: all 0.2s ease;
    position: relative;
    animation: fadeInUp 0.3s ease;
}

/* 新日志高亮效果 */
.log-item:first-child,
.log-item.log-summary {
    background: rgba(42, 191, 164, 0.08);
    color: var(--text-primary);
    border-left: 3px solid var(--sidebar-btn-active-bg);
    padding-left: 12px;
}

.log-item:hover {
    background: rgba(0, 0, 0, 0.04);
}

body.dark-mode .log-item:hover {
    background: rgba(255, 255, 255, 0.04);
}

body.dark-mode .log-item:first-child,
body.dark-mode .log-item.log-summary {
    background: rgba(42, 191, 164, 0.12);
}

/* 金币与建材资源栏（横向排布：金币居左，建材居右 */
.stats-container {
    margin-top: 16px;
    padding: 5px 20px;
    background: var(--bg-card);
    border-radius: 28px;
    box-shadow: var(--shadow-card);
    border: var(--border-card);
    display: flex;
    align-items: center;
    gap: 16px;
}

/* 资源栏顶部渐变装饰线（已移除） */
.stats-container::before {
    display: none;
}

/* 金币区块 */
.gold-section {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: linear-gradient(155deg, rgba(255, 215, 0, 0.18) 0%, rgba(255, 193, 7, 0.12) 100%);
    border-radius: 18px;
    border: 1px solid rgba(255, 193, 7, 0.25);
    flex-shrink: 0;
}

.gold-icon {
    font-size: 18px;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.15));
}

.gold-label {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 500;
}

.gold-value {
    font-size: 17px;
    font-weight: 600;
    color: #d4a017;
    min-width: 36px;
    text-align: left;
}

/* 交易行页面头部：标题 + 金币 同行显示 */
.trade-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.trade-page-header h2 {
    margin: 0;
}

/* 交易行金币栏（紧凑版，贴合右上角） */
.trade-gold-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: linear-gradient(155deg, rgba(255, 215, 0, 0.18) 0%, rgba(255, 193, 7, 0.12) 100%);
    border: 1px solid rgba(255, 193, 7, 0.25);
    border-radius: 18px;
    margin: 0;
    font-size: 14px;
    transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
    flex-shrink: 0;
}

.trade-gold-icon {
    font-size: 18px;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.15));
}

.trade-gold-label {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 500;
}

.trade-gold-value {
    font-size: 17px;
    font-weight: 700;
    color: #d4a017;
    min-width: 40px;
    text-align: left;
    font-variant-numeric: tabular-nums;
}

body.dark-mode .trade-gold-value { color: #ffd700; }
body.dark-mode .trade-gold-bar {
    background: linear-gradient(155deg, rgba(255, 193, 7, 0.15) 0%, rgba(255, 167, 38, 0.08) 100%);
    border-color: rgba(255, 193, 7, 0.3);
}

.trade-gold-bar.flash {
    animation: goldFlash 0.6s ease;
}

@keyframes goldFlash {
    0%   { transform: scale(1);    box-shadow: 0 0 0 rgba(255, 215, 0, 0); }
    30%  { transform: scale(1.06); box-shadow: 0 0 18px rgba(255, 215, 0, 0.35); }
    100% { transform: scale(1);    box-shadow: 0 0 0 rgba(255, 215, 0, 0); }
}

/* 建材显示区域 */
.materials-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: none;
    flex: 1;
    justify-content: flex-end;
}

.material-item {
    padding: 6px 12px;
    background: var(--bg-material);
    border-radius: 14px;
    font-size: 13px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-material);
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    border: 1px solid rgba(255,255,255,0.5);
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.material-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0,0,0,0.08);
}

.material-icon {
    width: 20px;
    height: 40px;
    object-fit: contain;
}

.material-emoji {
    font-size: 16px;
}

.material-count {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    min-width: 18px;
}

/* 深色模式适配 */
body.dark-mode .gold-value {
    color: #ffd700;
}

body.dark-mode .gold-section {
    background: linear-gradient(155deg, rgba(255, 193, 7, 0.15) 0%, rgba(255, 167, 38, 0.08) 100%);
    border-color: rgba(255, 193, 7, 0.3);
}

body.dark-mode .material-item {
    border-color: rgba(255,255,255,0.08);
}

body.dark-mode .material-count {
    color: #ffffff;
}

/* 响应式：小屏幕自动换行 */
@media (max-width: 560px) {
    .stats-container {
        flex-direction: column;
        padding: 14px;
        gap: 12px;
    }
    .gold-section {
            width: 100%;
            justify-content: center;
        }
    .materials-container {
        justify-content: center;
        width: 100%;
    }
    .material-item {
        padding: 5px 10px;
        font-size: 12px;
    }
}

/* 建造弹窗 — 毛玻璃质感 */
/* 建造内容 — 合并展示 */
.build-content {
    display: block;
}

.build-section {
    background: rgba(255,255,255,0.6);
    border-radius: 16px;
    padding: 16px 20px;
    margin-bottom: 16px;
    border: 1px solid rgba(255,255,255,0.8);
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

.build-section-title {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    color: #444;
}

.build-content .upgrade-info {
    margin-bottom: 16px;
    padding: 14px;
    background-color: #f8f9fa;
    border-radius: 16px;
    line-height: 1.6;
}

.build-content .upgrade-cost {
    margin-bottom: 16px;
}

.build-content .upgrade-cost h3 {
    margin-bottom: 10px;
    font-size: 14px;
    color: #555;
}

.build-content .upgrade-cost p {
    margin: 5px 0;
    font-size: 14px;
    color: #666;
}

.build-content .upgrade-status {
    margin-bottom: 16px;
    font-weight: normal;
    color: #4CAF50;
}

.build-content button {
    width: 100%;
    padding: 14px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 24px;
    font-size: 15px;
    font-weight: normal;
    cursor: pointer;
    transition: all 0.2s;
}

.build-content button:hover:not(:disabled) {
    background-color: #43a047;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
}

.build-content button:disabled {
    background-color: #e0e0e0;
    color: #aaa;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* 进度条 */
.progress-bar {
    width: 100%;
    height: 10px;
    background-color: #f0f0f0;
    border-radius: 24px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background-color: #FFB347;
    width: 0%;
    border-radius: 24px;
    transition: width 1s linear;
}

#buildProgressText {
    text-align: center;
    margin-top: 10px;
    color: #888;
    font-size: 13px;
}

/* 物品栏容器 */
.inventory-container {
    margin-top: 10px;
    padding: 18px;
    background: var(--bg-card);
    border-radius: 28px;
    box-shadow: var(--shadow-card);
    flex: 1;
    border: var(--border-card);
}

/* 首页渔获区父容器（保持与上方按钮距离） */
.home-inventory-section {
    margin-top: 14px;
}

.inventory-container h3 {
    margin-bottom: 12px;
    font-size: 16px;
    color: var(--text-primary);
    font-weight: normal;
}

.inventory-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    max-width: 400px;
}

.inventory-item {
    position: relative;
    width: 64px;
    height: 64px;
    border: 2px solid #eee;
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    background: linear-gradient(155deg, #ffffff, #f3f0f0);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 不同品质的边框颜色 + 品质色背景/光效 */
.inventory-item.quality-普通 {
    border-color: #c8c8c8;
    background: linear-gradient(155deg, #ffffff, #f0f0f0);
    box-shadow: inset 0 0 0 1px rgba(200, 200, 200, 0.15);
}

.inventory-item.quality-常见 {
    border-color: #66BB6A;
    background: linear-gradient(155deg, #ffffff, #e8f5e9);
    box-shadow: inset 0 0 0 1px rgba(102, 187, 106, 0.18);
}

.inventory-item.quality-罕见 {
    border-color: #42A5F5;
    background: linear-gradient(155deg, #ffffff, #e3f2fd);
    box-shadow: inset 0 0 0 1px rgba(66, 165, 245, 0.2);
}

.inventory-item.quality-稀有 {
    border-color: #AB47BC;
    background: linear-gradient(155deg, #ffffff, #f3e5f5);
    box-shadow: inset 0 0 0 1px rgba(171, 71, 188, 0.22);
}

.inventory-item.quality-史诗 {
    border-color: #FF9800;
    background: linear-gradient(155deg, #ffffff, #fff3e0);
    box-shadow: inset 0 0 0 1px rgba(255, 152, 0, 0.25);
}

.inventory-item.quality-传说 {
    border-color: #EF5350;
    background: linear-gradient(155deg, #fff5f5, #ffebee);
    box-shadow:
        0 0 0 1px rgba(239, 83, 80, 0.2) inset,
        0 0 12px rgba(239, 83, 80, 0.25);
    animation: legendaryPulse 2.2s ease-in-out infinite;
}

@keyframes legendaryPulse {
    0%, 100% {
        box-shadow:
            0 0 0 1px rgba(239, 83, 80, 0.2) inset,
            0 0 8px rgba(239, 83, 80, 0.2);
    }
    50% {
        box-shadow:
            0 0 0 1px rgba(239, 83, 80, 0.25) inset,
            0 0 18px rgba(239, 83, 80, 0.4);
    }
}

.inventory-item:hover {
    transform: translateY(-2px);
    box-shadow:
        0 4px 14px rgba(0, 0, 0, 0.1),
        0 0 0 1px rgba(0, 0, 0, 0.04);
}

.inventory-item.quality-传说:hover {
    transform: translateY(-2px) scale(1.02);
}

.inventory-item:active {
    transform: scale(0.97);
}

.inventory-item img {
    width: 44px;
    height: 44px;
    object-fit: contain;
    object-position: center;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.15));
    transition: transform 0.2s ease;
}

.inventory-item:hover img {
    transform: scale(1.08);
}

.inventory-item .item-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.8));
    color: white;
    font-size: 10px;
    padding: 4px 2px 2px;
    text-align: center;
    display: none;
    line-height: 1.2;
    font-weight: normal;
}

.inventory-item:hover .item-info {
    display: block;
}

/* ====== 批量选择模式 ====== */
.inventory-item.batch-selectable {
    cursor: pointer;
}

.inventory-item.batch-selected {
    outline: 3px solid #4CAF50;
    outline-offset: 2px;
    box-shadow: 0 0 8px rgba(76, 175, 80, 0.6);
}

.inventory-item.batch-legendary {
    cursor: not-allowed;
    opacity: 0.5;
}

.inventory-item.batch-disabled {
    cursor: not-allowed;
    opacity: 0.4;
    filter: grayscale(0.6);
}

.inventory-item.batch-legendary::before {
    content: '🔒';
    position: absolute;
    top: 2px;
    right: 2px;
    font-size: 14px;
    z-index: 2;
}

.inventory-item.batch-selected::after {
    content: '✓';
    position: absolute;
    top: 2px;
    left: 2px;
    font-size: 14px;
    font-weight: normal;
    color: #4CAF50;
    background: white;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    z-index: 2;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

#batchSellActions {
    display: none;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

#batchSellActions .quality-buttons {
    display: flex;
    gap: 4px;
    margin: 0;
}

#batchSellActions .quality-btn {
    padding: 4px 10px;
    min-width: unset;
    font-size: 12px;
    border-width: 1.5px;
    border-radius: 6px;
}

/* =================== 点击鱼后弹出的弹窗（出售/详情） =================== */
.sell-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(30, 25, 20, 0.5);
    backdrop-filter: blur(14px) saturate(1.1);
    -webkit-backdrop-filter: blur(14px) saturate(1.1);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: var(--z-emergency);
    padding: 20px;
    box-sizing: border-box;
    animation: fadeIn 0.2s ease;
}

.sell-overlay[style*="display: flex"],
.sell-overlay[style*="display:flex"] {
    animation: fadeIn 0.2s ease;
}

#fishDetailOverlay.sell-overlay {
    z-index: var(--z-emergency);
}

.sell-modal {
    background: var(--bg-card, #fff);
    padding: 20px 24px 22px;
    border-radius: 22px;
    text-align: center;
    box-shadow: 0 20px 50px rgba(0,0,0,0.15);
    max-width: 360px;
    width: 100%;
    border: 1px solid var(--border-light, rgba(0,0,0,0.08));
    animation: sellModalPop 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-sizing: border-box;
    color: var(--text-primary, #2c2825);
}

@keyframes sellModalPop {
    from { opacity: 0; transform: scale(0.94) translateY(10px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

.sell-modal-header {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 16px;
    position: relative;
}

.sell-modal-title {
    margin: 0;
    font-size: 17px;
    font-weight: 500;
    color: var(--text-heading, #2c2825);
    letter-spacing: 0.01em;
}

.sell-modal-close {
    position: absolute;
    right: -6px;
    top: 0;
    bottom: 0;
    margin: auto 0;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    border: none;
    background: var(--bg-chip, #f5f3ff);
    color: var(--text-muted, #8a7a72);
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.sell-modal-close:hover {
    background: var(--bg-chip, #f5f3ff);
    color: var(--text-muted, #8a7a72);
}

.sell-modal-image {
    width: 140px;
    height: 140px;
    object-fit: contain;
    border-radius: 18px;
    margin: 6px auto 14px;
    background: linear-gradient(155deg, #f5f3ff 0%, #ede9fe 100%);
    padding: 12px;
    display: block;
    border: 1px solid rgba(108,92,231,0.1);
}

.sell-modal-image-lg {
    width: 180px !important;
    height: 180px !important;
}

.sell-modal-info {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-secondary, #5a4a42);
    margin-bottom: 10px;
}

.sell-modal-info strong {
    color: var(--text-heading, #2c2825);
    font-weight: 500;
}

.sell-modal-gold {
    font-size: 16px;
    font-weight: 500;
    color: #d97706;
    margin-bottom: 18px;
}

.sell-modal-actions {
    display: flex;
    gap: 10px;
    margin-bottom: 8px;
}

/* ---------- sell-modal 按钮（统一紫色系） ---------- */
.sell-btn {
    flex: 1;
    height: 42px;
    padding: 0 18px;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, opacity 0.15s ease;
    font-family: inherit;
    border: none;
}

.sell-btn-success {
    background: var(--accent, #6c5ce7);
    color: #fff;
}
.sell-btn-success:hover {
    background: #5b4dd4;
}

.sell-btn-info {
    background: var(--bg-chip, #f5f3ff);
    color: var(--accent, #6c5ce7);
    border: 1px solid rgba(108,92,231,0.18);
}
.sell-btn-info:hover {
    background: #ede9fe;
}

.sell-btn-vault {
    background: rgba(255,215,0,0.12);
    color: #b8860b;
    border: 1px solid rgba(255,215,0,0.25);
}
.sell-btn-vault:hover {
    background: rgba(255,215,0,0.22);
}

.sell-btn-secondary {
    background: transparent;
    color: var(--text-muted, #8a7a72);
    border: 1px solid var(--border-light, rgba(0,0,0,0.08));
    margin-top: 6px;
    width: 100%;
}
.sell-btn-secondary:hover {
    background: var(--bg-chip, #f5f3ff);
    color: var(--text-primary, #2c2825);
}

/* --- 弹窗内容元素（出售/详情/通用） --- */
.legendary-badge {
    display: inline-block;
    padding: 4px 10px;
    background: linear-gradient(135deg, #fff5f5, #fde4e4);
    border: 1px solid #f4a8a8;
    color: #d64545;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    margin: 4px 0 8px;
    line-height: 1.5;
}
.modal-meta-row {
    font-size: 12px;
    color: var(--text-muted, #888);
    margin: 2px 0;
    line-height: 1.6;
}
.modal-fish-title {
    display: block;
    font-size: 17px;
    font-weight: 600;
    margin: 6px 0 4px;
    letter-spacing: 0.3px;
    line-height: 1.4;
}
.modal-fish-stats {
    font-size: 13px;
    color: var(--text-muted, #888);
    line-height: 1.6;
}
.modal-gold-text {
    color: #f5c774;
    font-weight: 700;
    font-size: 18px;
}

body.dark-mode .legendary-badge {
    background: rgba(229, 57, 53, 0.12);
    border-color: rgba(229, 57, 53, 0.3);
    color: #ff6b6b;
}
body.dark-mode .modal-meta-row {
    color: var(--text-muted);
}
body.dark-mode .modal-fish-stats {
    color: var(--text-muted);
}
body.dark-mode .modal-gold-text {
    color: #f5c774;
}

/* ====== 左侧导航栏 — Discord 风格（参照 chuangkou.html）====== */
.nav-bar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--nav-width);
    background: var(--sidebar-bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 0;
    gap: 4px;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: var(--z-nav);
    flex-shrink: 0;
    transition: background 0.3s ease;
}

.nav-bar::-webkit-scrollbar {
    width: 3px;
}
.nav-bar::-webkit-scrollbar-thumb {
    background: var(--sidebar-scrollbar);
    border-radius: 3px;
}

.nav-button {
    width: 40px;
    height: 40px;
    min-height: 40px;
    border-radius: 50%;
    background: var(--sidebar-btn-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sidebar-btn-color);
    font-size: 18px;
    font-weight: normal;
    transition: all 0.2s ease;
    cursor: pointer;
    border: 2px solid transparent;
    position: relative;
    margin: 1px 0;
    padding: 0;
    text-decoration: none;
    flex: none;
}

.nav-button.active {
    border-radius: 12px;
    background: var(--sidebar-btn-active-bg);
    color: var(--sidebar-btn-active-color);
    border-color: var(--sidebar-btn-active-color);
    box-shadow: 0 0 8px rgba(88, 101, 242, 0.4);
}

.nav-button:not(.active):hover {
    border-radius: 12px;
    background: var(--sidebar-btn-active-bg);
    color: var(--sidebar-btn-active-color);
    transform: none;
    box-shadow: none;
}

.nav-button:active {
    transform: none;
}

.nav-button.active i {
    color: var(--sidebar-btn-active-color);
    filter: none;
}

/* Tooltip */
.nav-button .tooltip {
    position: absolute;
    left: 48px;
    top: 50%;
    transform: translateY(-50%);
    background: #111214;
    color: #dbdee1;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: normal;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s, visibility 0.15s;
    pointer-events: none;
    z-index: 20;
}

.nav-button .tooltip::before {
    content: '';
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    border: 5px solid transparent;
    border-right-color: #111214;
}

.nav-button:hover .tooltip {
    opacity: 1;
    visibility: visible;
}

/* 导航分割线 */
.nav-separator {
    width: 24px;
    height: 1.5px;
    background: var(--sidebar-separator);
    border-radius: 1px;
    margin: 3px 0;
    flex: none;
    transition: background 0.3s ease;
}

/* ====== 财务日报页面 ====== */
.finance-page {
    padding: 20px;
    max-width: 620px;
    margin: 0 auto;
    font-family: var(--font-game);
}

/* ===== 顶部导航 ===== */
.finance-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 18px;
    padding: 12px 16px;
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    border: var(--border-card);
}
.finance-nav-btn {
    background: var(--bg-btn-default);
    border: none;
    border-radius: var(--radius-md);
    padding: 8px 14px;
    cursor: pointer;
    font-size: 15px;
    color: var(--color-btn-default);
    font-family: var(--font-game);
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.finance-nav-btn:hover {
    background: #e8dcc8;
    color: #5a4a3a;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.finance-nav-btn:active {
    transform: translateY(0);
}
.finance-date-title {
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    padding: 6px 16px;
    border-radius: var(--radius-md);
    color: var(--text-primary);
    transition: all 0.2s ease;
    background: rgba(255, 193, 7, 0.1);
}
.finance-date-title:hover {
    background: rgba(255, 193, 7, 0.2);
    transform: translateY(-1px);
}
.finance-today-btn {
    background: linear-gradient(135deg, #f5b041 0%, #e67e22 100%);
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    padding: 6px 14px;
    font-size: 13px;
    cursor: pointer;
    font-family: var(--font-game);
    box-shadow: 0 2px 8px rgba(230, 126, 34, 0.3);
    transition: all 0.2s ease;
}
.finance-today-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(230, 126, 34, 0.4);
}

/* ===== 汇总卡片 ===== */
.finance-summary-card {
    background: var(--bg-card);
    border-radius: var(--radius-xl);
    padding: 22px 20px;
    margin-bottom: 18px;
    box-shadow: var(--shadow-card);
    border: var(--border-card);
    position: relative;
    overflow: hidden;
}
.finance-summary-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #f5b041, #e67e22, #f5b041);
    background-size: 200% 100%;
    animation: financeGradient 3s ease infinite;
}
@keyframes financeGradient {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}
.finance-summary-net {
    font-size: 26px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 14px;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.finance-net-positive {
    color: #e74c3c;
    text-shadow: 0 1px 2px rgba(231, 76, 60, 0.15);
}
.finance-net-negative {
    color: #27ae60;
    text-shadow: 0 1px 2px rgba(39, 174, 96, 0.15);
}
.finance-summary-row {
    display: flex;
    justify-content: space-around;
    font-size: 15px;
    padding-top: 14px;
    border-top: 1px dashed rgba(0,0,0,0.08);
}
.finance-summary-income {
    color: #e74c3c;
    font-weight: 500;
    background: rgba(231, 76, 60, 0.08);
    padding: 6px 14px;
    border-radius: var(--radius-pill);
}
.finance-summary-expense {
    color: #27ae60;
    font-weight: 500;
    background: rgba(39, 174, 96, 0.08);
    padding: 6px 14px;
    border-radius: var(--radius-pill);
}

/* ===== 分类区域 ===== */
.finance-section-label {
    font-size: 14px;
    color: var(--text-secondary);
    padding: 6px 4px;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}
.finance-category {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    margin-bottom: 8px;
    border: var(--border-card);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: all 0.2s ease;
}
.finance-category:hover {
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-1px);
}
.finance-cat-header {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    cursor: pointer;
    gap: 10px;
    transition: background 0.2s ease;
}
.finance-cat-header:hover {
    background: rgba(245, 176, 65, 0.08);
}
.finance-cat-icon {
    font-size: 18px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(245, 176, 65, 0.12);
    border-radius: var(--radius-md);
}
.finance-cat-name {
    flex: 1;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-primary);
}
.finance-cat-total {
    font-size: 15px;
    font-weight: bold;
}
.finance-cat-total-positive { color: #e74c3c; }
.finance-cat-total-negative { color: #27ae60; }
.finance-cat-arrow {
    font-size: 11px;
    color: var(--text-muted, #999);
    transition: transform 0.2s ease;
}
.finance-cat-body {
    padding: 4px 16px 12px;
    background: rgba(0,0,0,0.02);
}
.finance-subcategory {
    display: flex;
    justify-content: space-between;
    padding: 6px 0 6px 20px;
    font-size: 13px;
    border-bottom: 1px dashed rgba(0,0,0,0.05);
}
.finance-subcategory:last-child {
    border-bottom: none;
}
.finance-sub-name {
    color: var(--text-secondary);
}
.finance-sub-positive { color: #e74c3c; }
.finance-sub-negative { color: #27ae60; }

/* ===== 明细 ===== */
.finance-detail-header {
    font-size: 14px;
    color: var(--text-secondary);
    padding: 14px 6px 10px;
    cursor: pointer;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s ease;
}
.finance-detail-header:hover {
    color: var(--text-primary);
}
.finance-detail-list {
    border-top: 1px solid rgba(0,0,0,0.06);
    padding-top: 10px;
    margin-bottom: 12px;
}
.finance-tx-item {
    display: flex;
    justify-content: space-between;
    padding: 10px 8px;
    font-size: 13px;
    border-bottom: 1px dashed rgba(0,0,0,0.05);
    align-items: center;
    transition: background 0.15s ease;
    border-radius: var(--radius-sm);
}
.finance-tx-item:hover {
    background: rgba(245, 176, 65, 0.05);
}
.finance-tx-item:last-child {
    border-bottom: none;
}
.finance-tx-time {
    color: var(--text-muted, #999);
    min-width: 50px;
    font-size: 12px;
    background: rgba(0,0,0,0.04);
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    text-align: center;
}
.finance-tx-desc {
    flex: 1;
    padding: 0 10px;
    color: var(--text-primary);
}
.finance-tx-positive {
    color: #e74c3c;
    font-weight: 600;
}
.finance-tx-negative {
    color: #27ae60;
    font-weight: 600;
}
.finance-empty {
    text-align: center;
    padding: 50px 20px;
    color: var(--text-muted, #aaa);
    font-size: 15px;
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: var(--border-card);
    box-shadow: var(--shadow-card);
}
.finance-empty-small {
    text-align: center;
    padding: 20px 0;
    color: var(--text-muted, #bbb);
    font-size: 13px;
}

/* ===== 日历 ===== */
.finance-calendar {
    background: var(--bg-card);
    border-radius: var(--radius-xl);
    padding: 16px;
    margin-bottom: 18px;
    border: var(--border-card);
    box-shadow: var(--shadow-card);
}
.finance-cal-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    font-size: 15px;
    font-weight: bold;
    color: var(--text-primary);
}
.finance-cal-nav button {
    background: var(--bg-btn-default);
    border: none;
    border-radius: var(--radius-md);
    padding: 4px 12px;
    cursor: pointer;
    font-size: 13px;
    color: var(--color-btn-default);
    font-family: var(--font-game);
    transition: all 0.2s ease;
}
.finance-cal-nav button:hover {
    background: #e8dcc8;
    color: #5a4a3a;
}
.finance-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
}
.finance-cal-weekday {
    text-align: center;
    font-size: 12px;
    padding: 6px 0;
    color: var(--text-muted, #888);
    font-weight: bold;
}
.finance-cal-day {
    text-align: center;
    padding: 8px 4px;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 13px;
    min-height: 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    position: relative;
    transition: all 0.15s ease;
}
.finance-cal-day:hover {
    background: rgba(245, 176, 65, 0.12);
    transform: scale(1.05);
}
.finance-cal-day.today {
    background: rgba(245, 176, 65, 0.18);
    font-weight: bold;
    color: #d68910;
}
.finance-cal-day.selected {
    background: linear-gradient(135deg, #f5b041 0%, #e67e22 100%);
    color: #fff;
    font-weight: bold;
    box-shadow: 0 2px 8px rgba(230, 126, 34, 0.35);
}
.finance-cal-day.selected .finance-cal-day-net {
    color: rgba(255,255,255,0.9);
}
.finance-cal-day.empty { cursor: default; }
.finance-cal-day.empty:hover {
    background: none;
    transform: none;
}
.finance-cal-day-num { font-size: 13px; }
.finance-cal-day-net { font-size: 10px; font-weight: bold; }
.finance-cal-day-net.cal-positive { color: #e74c3c; }
.finance-cal-day-net.cal-negative { color: #27ae60; }

/* 暗色模式适配 */
body.dark-mode .finance-summary-card,
body.dark-mode .finance-category,
body.dark-mode .finance-calendar,
body.dark-mode .finance-header,
body.dark-mode .finance-empty {
    background: var(--bg-card);
    border-color: var(--border-card);
}
body.dark-mode .finance-nav-btn {
    background: rgba(255,255,255,0.08);
    color: var(--text-primary);
}
body.dark-mode .finance-nav-btn:hover {
    background: rgba(255,255,255,0.15);
}
body.dark-mode .finance-date-title {
    background: rgba(245, 176, 65, 0.1);
}
body.dark-mode .finance-date-title:hover {
    background: rgba(245, 176, 65, 0.2);
}
body.dark-mode .finance-cat-header:hover {
    background: rgba(245, 176, 65, 0.08);
}
body.dark-mode .finance-cat-body {
    background: rgba(0,0,0,0.2);
}
body.dark-mode .finance-cal-day:hover {
    background: rgba(245, 176, 65, 0.12);
}
body.dark-mode .finance-cal-day.today {
    background: rgba(245, 176, 65, 0.2);
    color: #f5b041;
}
body.dark-mode .finance-tx-item {
    border-bottom-color: rgba(255,255,255,0.06);
}
body.dark-mode .finance-tx-item:hover {
    background: rgba(245, 176, 65, 0.06);
}
body.dark-mode .finance-tx-time {
    background: rgba(255,255,255,0.08);
    color: var(--text-secondary);
}
body.dark-mode .finance-detail-list {
    border-top-color: rgba(255,255,255,0.08);
}
body.dark-mode .finance-summary-row {
    border-top-color: rgba(255,255,255,0.08);
}
body.dark-mode .finance-subcategory {
    border-bottom-color: rgba(255,255,255,0.05);
}
body.dark-mode .finance-cal-nav button {
    background: rgba(255,255,255,0.08);
    color: var(--text-primary);
}
body.dark-mode .finance-cal-nav button:hover {
    background: rgba(255,255,255,0.15);
}

/* ====== 独立日历页面 ====== */
#page-calendar {
    max-width: 480px;
    margin: 0 auto;
}
.calendar-container {
    background: var(--bg-card);
    border-radius: var(--radius-xl);
    padding: 24px 20px;
    border: var(--border-card);
    box-shadow: var(--shadow-card);
}
.calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}
.calendar-title {
    font-size: 20px;
    font-weight: bold;
    color: var(--text-primary);
    margin: 0;
}
.calendar-nav-btn {
    background: var(--bg-btn-default);
    border: none;
    border-radius: var(--radius-md);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--color-btn-default);
    font-size: 14px;
    transition: all 0.2s ease;
}
.calendar-nav-btn:hover {
    background: #e8dcc8;
    color: #5a4a3a;
    transform: scale(1.05);
}
.calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    margin-bottom: 8px;
}
.calendar-weekdays span {
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    color: var(--text-muted, #888);
    padding: 6px 0;
}
.calendar-weekdays span:first-child,
.calendar-weekdays span:last-child {
    color: #e74c3c;
}
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}
.calendar-day {
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    position: relative;
    transition: all 0.15s ease;
    min-height: 44px;
}
.calendar-day:hover {
    background: rgba(108, 92, 231, 0.1);
    transform: scale(1.05);
}
.calendar-day.empty {
    cursor: default;
}
.calendar-day.empty:hover {
    background: none;
    transform: none;
}
.calendar-day.today {
    background: linear-gradient(135deg, rgba(108, 92, 231, 0.15), rgba(168, 85, 247, 0.1));
    color: var(--accent);
    font-weight: bold;
    box-shadow: 0 0 0 2px rgba(108, 92, 231, 0.2);
}
.calendar-day.today:hover {
    background: linear-gradient(135deg, rgba(108, 92, 231, 0.2), rgba(168, 85, 247, 0.15));
}
.calendar-day .calendar-circle-img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(100% + 18px);
    height: calc(100% + 18px);
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    pointer-events: none;
    z-index: 3;
    filter: drop-shadow(0 2px 4px rgba(231, 76, 60, 0.35));
    transition: none;
}
.calendar-day.selected .calendar-circle-img {
    animation: circleStampIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.calendar-day.selected {
    background: rgba(231, 76, 60, 0.08);
}
@keyframes circleStampIn {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(1.4) rotate(-15deg); }
    60%  { opacity: 1; transform: translate(-50%, -50%) scale(0.95) rotate(2deg); }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0deg); }
}
.calendar-day.has-records::after {
    content: '';
    position: absolute;
    bottom: 4px;
    width: 6px;
    height: 6px;
    background: var(--accent);
    border-radius: 50%;
}
.calendar-day.has-event::after {
    content: '';
    position: absolute;
    bottom: 4px;
    width: 6px;
    height: 6px;
    background: #e74c3c;
    border-radius: 50%;
}
.calendar-day.has-records.has-event::after {
    width: 8px;
    background: linear-gradient(135deg, var(--accent), #e74c3c);
    border-radius: 50%;
}
.calendar-day-num {
    line-height: 1;
}
.calendar-legend {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border-light, #eee);
}
.legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-secondary);
}
.legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
.legend-dot.today {
    background: var(--accent);
    box-shadow: 0 0 0 2px rgba(108, 92, 231, 0.2);
}
.legend-dot.has-records {
    background: var(--accent);
}
.legend-dot.has-event {
    background: #e74c3c;
}

/* 暗色模式日历 */
body.dark-mode .calendar-container {
    background: var(--bg-card);
    border-color: var(--border-card);
}
body.dark-mode .calendar-title {
    color: var(--text-primary);
}
body.dark-mode .calendar-nav-btn {
    background: rgba(255,255,255,0.08);
    color: var(--text-primary);
}
body.dark-mode .calendar-nav-btn:hover {
    background: rgba(255,255,255,0.15);
    color: #fff;
}
body.dark-mode .calendar-day {
    color: var(--text-primary);
}
body.dark-mode .calendar-day:hover {
    background: rgba(143, 133, 255, 0.15);
}
body.dark-mode .calendar-day.today {
    background: linear-gradient(135deg, rgba(143, 133, 255, 0.2), rgba(168, 85, 247, 0.15));
    color: #b8a9ff;
    box-shadow: 0 0 0 2px rgba(143, 133, 255, 0.3);
}
body.dark-mode .calendar-weekdays span {
    color: var(--text-muted);
}
body.dark-mode .calendar-weekdays span:first-child,
body.dark-mode .calendar-weekdays span:last-child {
    color: #e74c3c;
}
body.dark-mode .calendar-legend {
    border-top-color: rgba(255,255,255,0.08);
}
body.dark-mode .legend-item {
    color: var(--text-secondary);
}

/* ====== 地图页面 ====== */
#page-map {
    padding: 0;
    position: fixed;
    top: 0;
    left: 72px;
    right: 0;
    bottom: 0;
    width: auto;
    height: 100vh;
    overflow: hidden;
}
#page-map.active {
    display: block !important;
}
.map-page-container {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}
.map-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* ====== 用户设置弹出菜单（侧边栏左下角）====== */
.user-popout {
    position: fixed;
    left: calc(var(--nav-width) + 6px);
    top: auto;
    bottom: 16px;
    width: 220px;
    background: var(--bg-popout);
    border-radius: 16px;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.7) inset,
        0 12px 32px rgba(0, 0, 0, 0.15),
        0 4px 12px rgba(0, 0, 0, 0.08),
        0 0 0 1px rgba(0, 0, 0, 0.05);
    padding: 14px;
    z-index: var(--z-popout);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px) scale(0.98);
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
}

.user-popout.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.user-popout::after {
    content: '';
    position: absolute;
    bottom: 20px;
    left: -5px;
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-right: 6px solid var(--bg-popout);
    filter: drop-shadow(-1px 0 0 rgba(0, 0, 0, 0.05));
}

body.dark-mode .user-popout {
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.05) inset,
        0 12px 32px rgba(0, 0, 0, 0.6),
        0 4px 12px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.06);
}

.popout-user-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding: 6px;
    background: rgba(0, 0, 0, 0.03);
    border-radius: 12px;
}

body.dark-mode .popout-user-header {
    background: rgba(255, 255, 255, 0.03);
}

.popout-avatar {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: linear-gradient(135deg, #5865f2 0%, #7c6df0 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: normal;
    color: white;
    font-size: 16px;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(88, 101, 242, 0.3);
}

.popout-name {
    font-weight: normal;
    color: var(--text-primary);
    font-size: 15px;
    line-height: 1.4;
}

.popout-tag {
    color: var(--text-secondary);
    font-size: 12px;
}

.popout-title {
    color: #e8a830;
    font-size: 11px;
    margin-top: 2px;
    font-weight: 500;
}

.popout-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.1), transparent);
    margin: 8px 0;
}

body.dark-mode .popout-divider {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
}

.popout-item {
    padding: 8px 12px;
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
    font-family: inherit;
    margin: 2px 0;
}

.popout-item:hover {
    background: rgba(42, 191, 164, 0.12);
    transform: translateX(3px);
    color: var(--sidebar-btn-active-bg);
}

body.dark-mode .popout-item:hover {
    background: rgba(88, 101, 242, 0.18);
    color: #ffffff;
}

.popout-item:active {
    transform: none;
}

/* 导航栏小红点提示 */
.nav-badge {
    position: absolute;
    top: -2px;
    right: -4px;
    width: 10px;
    height: 10px;
    background: #ff3b30;
    border-radius: 50%;
    border: 2px solid #1e1f22;
}

/* 聊天室内的邮箱小红点 */
.mail-badge {
    position: absolute;
    top: -5px;
    right: -10px;
    background: #ff3b30;
    color: #fff;
    font-size: 11px;
    font-weight: normal;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    border: 2px solid #fff;
}

/* 批量出售品质按钮 */
.quality-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin: 15px 0;
}

.quality-btn {
    padding: 10px 16px;
    border: 2px solid #ddd;
    border-radius: 8px;
    background: white;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
    min-width: 80px;
}

.quality-btn:hover {
    border-color: #4CAF50;
    background: #f0f0f0;
}

.quality-btn:active {
    transform: scale(0.95);
}

.quality-btn[data-quality="普通"] {
    color: gray;
    border-color: gray;
}

.quality-btn[data-quality="常见"] {
    color: green;
    border-color: green;
}

.quality-btn[data-quality="罕见"] {
    color: blue;
    border-color: blue;
}

.quality-btn[data-quality="稀有"] {
    color: purple;
    border-color: purple;
}

.quality-btn[data-quality="史诗"] {
    color: orange;
    border-color: orange;
}

.quality-btn.selected {
    background: currentColor !important;
    color: white !important;
    box-shadow: 0 0 8px currentColor;
}

/* 水族馆样式 */
#page-inventory.page {
    display: flex;
    flex-direction: column;
    padding: 16px;
}

/* 水箱选择器（Lv.19 分馆新开） */
.aquarium-tank-selector {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}
.tank-tab {
    padding: 6px 16px;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 6px;
    background: rgba(255,255,255,0.05);
    color: #aaa;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s;
}
.tank-tab.active {
    background: #26a69a;
    color: #fff;
    border-color: #26a69a;
}
.tank-tab:hover:not(.active) {
    background: rgba(255,255,255,0.1);
}

/* Lv.20 水族大观：金色边框辉光 */
.aquarium-mega {
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.3), inset 0 0 30px rgba(255, 215, 0, 0.05);
    border-color: #ffd700 !important;
}

.aquarium-container {
    margin-top: 10px;
    border: none;
    border-radius: 24px;
    overflow: hidden;
    box-shadow:
        0 4px 20px rgba(0,0,0,0.08),
        inset 0 0 30px rgba(10, 40, 80, 0.05);
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0;
    border: 2px solid rgba(100, 160, 200, 0.15);
    box-shadow:
        0 0 0 1px rgba(100, 160, 200, 0.08),
        0 4px 24px rgba(0,0,0,0.08);
}

.aquarium-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 18px;
    background: linear-gradient(135deg, rgba(30, 80, 120, 0.25), rgba(20, 60, 90, 0.2));
    backdrop-filter: blur(6px);
    color: rgba(255,255,255,0.9);
    font-weight: normal;
    font-size: 14px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.fish-count {
    font-size: 12px;
    opacity: 0.8;
}

.aquarium {
    position: relative;
    width: 100%;
    flex: 1;
    overflow: hidden;
    background: url('../img/背景/海底.png') center center no-repeat;
    background-size: cover;
}

/* 水质混浊覆盖层 */
.aquarium-murk-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #3E2723, #1B5E20, #3E2723);
    pointer-events: none;
    z-index: 1;
    transition: opacity 1s ease;
    mix-blend-mode: multiply;
}

/* ==================== 水族馆增强动画和交互 ==================== */

/* 游动的鱼 - 优化GPU加速 */
.aquarium-fish {
    position: absolute;
    cursor: pointer;
    will-change: transform;
    transform: translate3d(0, 0, 0);
    z-index: 10;
    image-rendering: -webkit-optimize-contrast;
    backface-visibility: hidden;
    perspective: 1000px;
    animation: none;
    max-width: 25%;
    max-height: 85%;
}

.aquarium-fish img {
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
    transition: filter 0.3s ease, transform 0.3s ease;
    backface-visibility: hidden;
    image-rendering: auto;
}

/* Hover效果增强 */
.aquarium-fish:hover {
    z-index: 20;
    animation-play-state: paused;
}

.aquarium-fish:hover img {
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.6)) brightness(1.2);
    transform: scale(1.15);
}

/* 点击涟漪动画 */
.aquarium-fish.clicked img {
    animation: fishClickRipple 0.5s ease-out;
}

@keyframes fishClickRipple {
    0% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(255,255,255,0)); }
    30% { transform: scale(1.4); filter: drop-shadow(0 0 16px rgba(255,255,255,0.8)); }
    100% { transform: scale(1.05); filter: drop-shadow(0 0 0 rgba(255,255,255,0)); }
}

/* 品质光效 - 通过JS动态添加quality-xxx类 */
.aquarium-fish.quality-普通 img {
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}
.aquarium-fish.quality-常见 img {
    filter: drop-shadow(0 0 8px rgba(102,187,106,0.3)) drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}
.aquarium-fish.quality-罕见 img {
    filter: drop-shadow(0 0 10px rgba(66,165,245,0.4)) drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}
.aquarium-fish.quality-稀有 img {
    filter: drop-shadow(0 0 12px rgba(171,71,188,0.5)) drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}
.aquarium-fish.quality-史诗 img {
    filter: drop-shadow(0 0 16px rgba(255,167,38,0.6)) drop-shadow(0 2px 4px rgba(0,0,0,0.15));
}
/* 传说鱼皇冠弹跳 */
@keyframes crownBounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(-4px); }
}

/* ===== 🌟 传说鱼特效 ===== */

/* 传说鱼图片光晕 — 红金辉光 + 周期性能量涌动 */
.aquarium-fish.quality-传说 img {
    filter: drop-shadow(0 0 12px rgba(239,83,80,0.6)) drop-shadow(0 0 30px rgba(255,215,0,0.3)) drop-shadow(0 0 60px rgba(239,83,80,0.15));
    animation: legendaryImgSurge 4s ease-in-out infinite;
}

@keyframes legendaryImgSurge {
    0%, 100% { filter: drop-shadow(0 0 12px rgba(239,83,80,0.6)) drop-shadow(0 0 30px rgba(255,215,0,0.3)) drop-shadow(0 0 60px rgba(239,83,80,0.15)); }
    10% { filter: drop-shadow(0 0 20px rgba(239,83,80,0.9)) drop-shadow(0 0 50px rgba(255,215,0,0.6)) drop-shadow(0 0 80px rgba(239,83,80,0.3)); }
    15% { filter: drop-shadow(0 0 12px rgba(239,83,80,0.6)) drop-shadow(0 0 30px rgba(255,215,0,0.3)) drop-shadow(0 0 60px rgba(239,83,80,0.15)); }
}

/* 传说鱼背景旋转光环 + 冲击波环 */
.aquarium-fish.quality-传说::after {
    content: '';
    position: absolute;
    top: -60%;
    left: -60%;
    width: 220%;
    height: 220%;
    background: conic-gradient(
        from 0deg,
        transparent 0%,
        rgba(239,83,80,0.08) 15%,
        rgba(255,215,0,0.06) 30%,
        transparent 45%,
        rgba(239,83,80,0.06) 60%,
        rgba(255,215,0,0.08) 75%,
        transparent 90%,
        rgba(239,83,80,0.04) 100%
    );
    border-radius: 50%;
    animation: legendaryAuraRotate 4s linear infinite,
               legendaryShockwave 5s ease-out infinite;
    pointer-events: none;
    z-index: -1;
    mix-blend-mode: screen;
    box-shadow: 0 0 0 0 rgba(255,215,0,0);
}

@keyframes legendaryAuraRotate {
    from { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(180deg) scale(1.15); }
    to { transform: rotate(360deg) scale(1); }
}

@keyframes legendaryShockwave {
    0%, 97% { box-shadow: 0 0 0 0 rgba(255,215,0,0); }
    98% { box-shadow: 0 0 0 0 rgba(255,215,0,0); }
    99% { box-shadow: 0 0 0 20px rgba(255,215,0,0.3), 0 0 0 40px rgba(239,83,80,0.1); }
    100% { box-shadow: 0 0 0 40px rgba(255,215,0,0), 0 0 0 60px rgba(239,83,80,0); }
}

/* 传说鱼呼吸脉冲 */
.aquarium-fish.quality-传说 {
    animation: legendaryPulse 1.5s ease-in-out infinite;
}

@keyframes legendaryPulse {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.15); }
}

/* 传说鱼闪烁星光粒子 — 增强版：更大更亮 + 周期性爆射 */
.aquarium-fish.quality-传说::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #fff;
    box-shadow:
        14px -22px 0 0 rgba(255,215,0,0.9),
        -16px -12px 0 0 rgba(255,255,255,0.7),
        18px 10px 0 0 rgba(255,215,0,0.6),
        -12px 16px 0 0 rgba(255,255,255,0.5),
        0 -26px 0 0 rgba(255,200,50,0.7),
        -24px 4px 0 0 rgba(255,150,50,0.4),
        24px -8px 0 0 rgba(255,255,200,0.6),
        -8px 24px 0 0 rgba(255,215,0,0.5);
    animation: legendarySparkle 2.5s ease-in-out infinite;
    pointer-events: none;
    z-index: 5;
}

@keyframes legendarySparkle {
    0%, 100% {
        opacity: 0.4;
        transform: scale(0.8);
        box-shadow:
            14px -22px 0 0 rgba(255,215,0,0.9),
            -16px -12px 0 0 rgba(255,255,255,0.7),
            18px 10px 0 0 rgba(255,215,0,0.6),
            -12px 16px 0 0 rgba(255,255,255,0.5),
            0 -26px 0 0 rgba(255,200,50,0.7),
            -24px 4px 0 0 rgba(255,150,50,0.4),
            24px -8px 0 0 rgba(255,255,200,0.6),
            -8px 24px 0 0 rgba(255,215,0,0.5);
    }
    20% {
        opacity: 1;
        transform: scale(1.4);
        box-shadow:
            18px -28px 0 0 rgba(255,215,0,1),
            -22px -16px 0 0 rgba(255,255,255,1),
            24px 14px 0 0 rgba(255,215,0,1),
            -16px 22px 0 0 rgba(255,255,255,0.9),
            0 -34px 0 0 rgba(255,200,50,1),
            -32px 6px 0 0 rgba(255,150,50,0.7),
            30px -10px 0 0 rgba(255,255,200,0.9),
            -12px 30px 0 0 rgba(255,215,0,0.8);
    }
    30% {
        opacity: 0.6;
        transform: scale(0.9);
        box-shadow:
            12px -18px 0 0 rgba(255,215,0,0.7),
            -12px -8px 0 0 rgba(255,255,255,0.5),
            14px 6px 0 0 rgba(255,215,0,0.4),
            -8px 12px 0 0 rgba(255,255,255,0.3),
            2px -22px 0 0 rgba(255,200,50,0.5),
            -18px 2px 0 0 rgba(255,150,50,0.3),
            20px -6px 0 0 rgba(255,255,200,0.4),
            -6px 18px 0 0 rgba(255,215,0,0.3);
    }
    70% {
        opacity: 0.8;
        transform: scale(1.1);
        box-shadow:
            16px -20px 0 0 rgba(255,215,0,0.8),
            -18px -10px 0 0 rgba(255,255,255,0.6),
            20px 12px 0 0 rgba(255,215,0,0.5),
            -14px 18px 0 0 rgba(255,255,255,0.4),
            -2px -28px 0 0 rgba(255,200,50,0.6),
            -26px 4px 0 0 rgba(255,150,50,0.3),
            26px -8px 0 0 rgba(255,255,200,0.5),
            -8px 26px 0 0 rgba(255,215,0,0.4);
    }
}

/* ===== 史诗鱼特效（简版）===== */

.aquarium-fish.quality-史诗 {
    animation: epicPulse 2.5s ease-in-out infinite;
}
@keyframes epicPulse {
    0%, 100% { filter: brightness(1) drop-shadow(0 0 4px rgba(255,167,38,0)); }
    50% { filter: brightness(1.05) drop-shadow(0 0 12px rgba(255,167,38,0.25)); }
}

/* 鱼游动动画 - 身体波浪摆动（生动版） */
@keyframes fishSwim {
    0%, 100% {
        transform: translate3d(var(--fish-x), var(--fish-y), 0) scaleX(var(--scale-x)) rotate(var(--rotate)) skewY(0deg) translateY(0px);
    }
    15% {
        transform: translate3d(var(--fish-x), var(--fish-y), 0) scaleX(var(--scale-x)) rotate(var(--rotate)) skewY(5deg) translateY(-1.5px);
    }
    30% {
        transform: translate3d(var(--fish-x), var(--fish-y), 0) scaleX(var(--scale-x)) rotate(var(--rotate)) skewY(2deg) translateY(-0.5px);
    }
    50% {
        transform: translate3d(var(--fish-x), var(--fish-y), 0) scaleX(var(--scale-x)) rotate(var(--rotate)) skewY(-1deg) translateY(1px);
    }
    65% {
        transform: translate3d(var(--fish-x), var(--fish-y), 0) scaleX(var(--scale-x)) rotate(var(--rotate)) skewY(-5deg) translateY(-1px);
    }
    80% {
        transform: translate3d(var(--fish-x), var(--fish-y), 0) scaleX(var(--scale-x)) rotate(var(--rotate)) skewY(-2deg) translateY(0.5px);
    }
}

/* 不同方向的鱼样式 */
.fish-up { --rotate: -90deg; }
.fish-down { --rotate: 90deg; }
.fish-left { --rotate: 0deg; --scale-x: -1; }
.fish-right { --rotate: 0deg; --scale-x: 1; }
.fish-up-left { --rotate: -45deg; --scale-x: -1; }
.fish-up-right { --rotate: -45deg; --scale-x: 1; }
.fish-down-left { --rotate: 45deg; --scale-x: -1; }
.fish-down-right { --rotate: 45deg; --scale-x: 1; }

/* === 特质视觉效果 === */

/* 抑郁鱼：灰暗色调，下沉感 — JS 驱动避免覆盖 transform 定位 */
.aquarium-fish.trait-抑郁鱼 { }
.aquarium-fish.trait-抑郁鱼 img {
    filter: grayscale(0.6) brightness(0.7) drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}
@keyframes depressedDrift {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(2px); }
}

/* 社牛鱼：明亮暖色光晕 */
.aquarium-fish.trait-社牛鱼 img {
    filter: brightness(1.15) saturate(1.2) drop-shadow(0 0 10px rgba(255,200,50,0.4));
}
.aquarium-fish.trait-社牛鱼 {
    animation: socialGlow 1.5s ease-in-out infinite;
}
@keyframes socialGlow {
    0%, 100% { filter: brightness(1) drop-shadow(0 0 6px rgba(255,200,50,0.2)); }
    50% { filter: brightness(1.08) drop-shadow(0 0 14px rgba(255,200,50,0.5)); }
}

/* 社恐鱼：畏缩感，偏蓝 */
.aquarium-fish.trait-社恐鱼 img {
    filter: brightness(0.9) saturate(0.8) drop-shadow(0 0 6px rgba(100,149,237,0.3));
}

/* 贱贱鱼：快速抖动，暗影 — JS 驱动避免覆盖 transform 定位 */
.aquarium-fish.trait-贱贱鱼 { }
@keyframes mischievousJitter {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-1px); }
    75% { transform: translateX(1px); }
}

/* 胆小鬼：颤抖效果 — 由 JS 驱动避免覆盖 transform 定位 */
.aquarium-fish.trait-胆小鬼 { }
@keyframes scaredShake {
    0%, 100% { transform: scale(1); }
    25% { transform: scale(0.95); }
    75% { transform: scale(1.05); }
}

/* 好奇鱼：探头探脑效果 */
.aquarium-fish.trait-好奇鱼 {
    animation: none;
}
.aquarium-fish.trait-好奇鱼 img {
    filter: brightness(1.1) drop-shadow(0 0 8px rgba(100,200,255,0.4));
}

/* 领导者：金色光晕，威严感 */
.aquarium-fish.trait-领导者 {
    animation: leaderGlow 2s ease-in-out infinite;
}
.aquarium-fish.trait-领导者 img {
    filter: brightness(1.1) saturate(1.15) drop-shadow(0 0 14px rgba(255,215,0,0.5)) drop-shadow(0 0 30px rgba(255,215,0,0.2));
}
@keyframes leaderGlow {
    0%, 100% { filter: brightness(1.05) drop-shadow(0 0 10px rgba(255,215,0,0.3)); }
    50% { filter: brightness(1.15) drop-shadow(0 0 20px rgba(255,215,0,0.6)); }
}

/* === 气泡效果 - 增强版 === */
.bubble {
    position: absolute;
    border-radius: 50%;
    animation: bubbleRise var(--bubble-duration, 5s) ease-in infinite;
    animation-delay: var(--bubble-delay, 0s);
    will-change: transform, opacity;
    pointer-events: none;
    z-index: 1;
}

.bubble::before {
    content: '';
    position: absolute;
    top: 12%;
    left: 20%;
    width: 30%;
    height: 25%;
    background: radial-gradient(ellipse, rgba(255,255,255,0.9) 0%, transparent 100%);
    border-radius: 50%;
}

@keyframes bubbleRise {
    0% {
        transform: translateY(0) translateX(0) scale(1);
        opacity: 0.6;
    }
    25% {
        transform: translateY(-80px) translateX(5px) scale(0.9);
        opacity: 0.5;
    }
    50% {
        transform: translateY(-160px) translateX(-3px) scale(0.6);
        opacity: 0.35;
    }
    75% {
        transform: translateY(-240px) translateX(4px) scale(0.35);
        opacity: 0.2;
    }
    100% {
        transform: translateY(-320px) translateX(0) scale(0.15);
        opacity: 0;
    }
}

/* === 光线效果 - 动态水纹 === */
.aquarium-rays {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    background:
        /* 大范围光柱 */
        linear-gradient(
            175deg,
            rgba(255, 255, 255, 0.12) 0%,
            rgba(255, 255, 255, 0.06) 20%,
            transparent 40%,
            rgba(255, 255, 255, 0.04) 60%,
            transparent 80%,
            rgba(255, 255, 255, 0.08) 100%
        );
    pointer-events: none;
    animation: rayShimmer 6s ease-in-out infinite;
    z-index: 2;
}

/* 第二层水纹光 — 斜向动态 */
.aquarium-rays::after {
    content: '';
    position: absolute;
    top: -10%;
    left: -10%;
    right: -10%;
    bottom: -10%;
    background: repeating-linear-gradient(
        100deg,
        transparent 0%,
        rgba(255,255,255,0.03) 25%,
        transparent 50%,
        rgba(255,255,255,0.02) 75%,
        transparent 100%
    );
    background-size: 200% 100%;
    animation: causticMove 8s linear infinite;
    pointer-events: none;
}

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

@keyframes rayShimmer {
    0%, 100% { opacity: 0.6; }
    25% { opacity: 0.8; }
    50% { opacity: 0.5; }
    75% { opacity: 0.75; }
}

/* === 群组鱼样式 === */
.aquarium-fish.fish-grouped {
    z-index: 15;
}

.aquarium-fish.fish-grouped img {
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4));
}

.aquarium-fish.fish-grouped:hover img {
    filter: drop-shadow(0 6px 16px rgba(0,0,0,0.7)) brightness(1.2);
}

/* === 鱼卵样式 === */
.aquarium-fish.fish-egg {
    pointer-events: none;
    opacity: 0.5;
    animation: eggFloat 4s ease-in-out infinite;
}

@keyframes eggFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

.aquarium-fish.fish-egg img {
    filter: drop-shadow(0 0 8px rgba(255, 255, 200, 0.5));
}

/* 鱼卵孵化动画 */
@keyframes eggHatch {
    0% {
        transform: scale(1);
        opacity: 0.3;
    }
    50% {
        transform: scale(1.15);
        opacity: 0.7;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.aquarium-fish.fish-egg.hatching {
    animation: eggHatch 2s ease-in-out, eggFloat 4s ease-in-out infinite;
}

/* 鱼苗样式 */
.aquarium-fish.fish-fry {
    opacity: 0.85;
    filter: brightness(1.15) saturate(0.8);
}
.aquarium-fish.fish-fry img {
    filter: drop-shadow(0 0 4px rgba(150, 220, 255, 0.4));
}

/* === 悬浮漂浮粒子（浮游生物） === */
.aquarium-particle {
    position: absolute;
    width: 3px;
    height: 3px;
    background: rgba(255,255,255,0.3);
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
    animation: particleFloat var(--particle-duration, 8s) ease-in-out infinite;
    animation-delay: var(--particle-delay, 0s);
}

@keyframes particleFloat {
    0% {
        transform: translateY(0) translateX(0) scale(1);
        opacity: 0;
    }
    10% {
        opacity: 0.6;
    }
    50% {
        transform: translateY(-150px) translateX(20px) scale(1.5);
        opacity: 0.4;
    }
    90% {
        opacity: 0.6;
    }
    100% {
        transform: translateY(-300px) translateX(-10px) scale(0.5);
        opacity: 0;
    }
}

/* ==================== 水族馆详细信息弹窗 ==================== */

.aquarium-detail-btn {
    background: linear-gradient(135deg, rgba(255,255,255,0.2), rgba(255,255,255,0.1));
    border: 1px solid rgba(255,255,255,0.2);
    color: rgba(255,255,255,0.9);
    padding: 6px 14px;
    border-radius: 16px;
    cursor: pointer;
    font-size: 12px;
    font-weight: normal;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    backdrop-filter: blur(4px);
    letter-spacing: 0.3px;
    margin: 0;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.aquarium-detail-btn:hover {
    background: linear-gradient(135deg, rgba(255,255,255,0.35), rgba(255,255,255,0.2));
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}
.aquarium-detail-btn:active {
    transform: translateY(0) scale(0.97);
}

/* 详情弹窗主体 */
.aquarium-detail-modal {
    max-width: 520px !important;
    max-height: 80vh !important;
    padding: 0 !important;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-align: left;
}

.aquarium-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 24px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    flex-shrink: 0;
}
.aquarium-detail-header h2 {
    margin: 0;
    font-size: 18px;
    color: #3a2e2a;
}
.aquarium-detail-close {
    background: none;
    border: none;
    font-size: 20px;
    color: rgba(60,50,45,0.4);
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s;
    padding: 0;
    margin: 0;
}
.aquarium-detail-close:hover {
    background: rgba(0,0,0,0.05);
    color: #3a2e2a;
    transform: none;
    box-shadow: none;
}

.aquarium-detail-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 24px 20px;
}

.aquarium-detail-section {
    margin-bottom: 20px;
}
.aquarium-detail-section h3 {
    font-size: 15px;
    color: #3a2e2a;
    margin: 0 0 10px 0;
    font-weight: normal;
}

/* 鱼类列表 */
.aquarium-detail-fishlist {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.aquarium-detail-fish-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: linear-gradient(160deg, #fefcf9 0%, #faf7f2 100%);
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.6);
    box-shadow: 0 1px 3px rgba(0,0,0,0.03);
    transition: all 0.2s;
}
.aquarium-detail-fish-item:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.aquarium-detail-fish-item .fish-image {
    width: 40px;
    height: 40px;
    object-fit: contain;
    flex-shrink: 0;
}

.aquarium-detail-fish-item .fish-info {
    flex: 1;
    min-width: 0;
    line-height: 1.4;
}
.aquarium-detail-fish-item .fish-name {
    font-weight: normal;
    font-size: 14px;
}
.aquarium-detail-fish-item .fish-meta {
    font-size: 12px;
    color: #888;
}
.aquarium-detail-fish-item .fish-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}
.aquarium-detail-fish-item .fish-actions button {
    padding: 4px 10px;
    font-size: 11px;
    font-weight: normal;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    min-height: 26px;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin: 0;
}
.aquarium-detail-fish-item .btn-sell {
    background: linear-gradient(135deg, #66BB6A, #43A047);
    color: white;
}
.aquarium-detail-fish-item .btn-sell:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(67,160,71,0.3);
}
.aquarium-detail-fish-item .btn-trade {
    background: linear-gradient(135deg, #42A5F5, #1E88E5);
    color: white;
}
.aquarium-detail-fish-item .btn-trade:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(30,136,229,0.3);
}

/* 水族馆日志 */
.aquarium-detail-log {
    max-height: 200px;
    overflow-y: auto;
    background: linear-gradient(160deg, #fefcf9 0%, #faf7f2 100%);
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.6);
    padding: 10px;
}

.aquarium-log-entry {
    padding: 6px 8px;
    font-size: 12px;
    color: #5a4a42;
    border-bottom: 1px solid rgba(0,0,0,0.03);
    line-height: 1.5;
    display: flex;
    align-items: flex-start;
    gap: 6px;
}
.aquarium-log-entry:last-child {
    border-bottom: none;
}
.aquarium-log-time {
    color: #aaa;
    font-size: 11px;
    flex-shrink: 0;
    min-width: 36px;
}
.aquarium-log-empty {
    text-align: center;
    color: #bbb;
    padding: 24px 0;
    font-size: 13px;
}

/* 水族馆清洁度样式 */
.aquarium-cleanliness-section {
    background: rgba(255,255,255,0.04);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 14px;
    border: 1px solid rgba(255,255,255,0.06);
}
.cleanliness-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.cleanliness-title {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,0.85);
}
.cleanliness-status {
    font-size: 13px;
    font-weight: 600;
}
.cleanliness-bar-track {
    width: 100%;
    height: 8px;
    background: rgba(255,255,255,0.08);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 8px;
}
.cleanliness-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.4s ease, background 0.4s ease;
}
.cleanliness-footer {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    color: rgba(255,255,255,0.55);
    flex-wrap: wrap;
}
.cleanliness-value {
    font-weight: 600;
    color: rgba(255,255,255,0.7);
}
.cleanliness-penalty {
    opacity: 0.8;
}
.cleanliness-cleaner {
    color: #66BB6A;
    font-weight: 500;
}
.btn-clean {
    margin-left: auto;
    padding: 5px 14px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(135deg, #42A5F5, #1E88E5);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    white-space: nowrap;
}
.btn-clean:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(33,150,243,0.3);
}
.btn-clean:active {
    transform: translateY(0);
}

/* 渐进清洁进度条 */
.cleanliness-gradual {
    margin-top: 6px;
    font-size: 12px;
    color: #4fc3f7;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.cleanliness-gradual .progress-bar-track {
    width: 100%;
    height: 6px;
    background: rgba(255,255,255,0.15);
    border-radius: 3px;
    overflow: hidden;
}
.cleanliness-gradual .progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #4fc3f7, #26c6da);
    border-radius: 3px;
    transition: width 2s linear;
}

/* 水族馆门票收入样式 */
.aquarium-ticket-section {
    min-height: 40px;
}

.ticket-section-locked {
    text-align: center;
    padding: 20px 16px;
    background: linear-gradient(160deg, #fefcf9 0%, #faf7f2 100%);
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.6);
    color: #999;
    font-size: 13px;
    line-height: 1.6;
}

.ticket-section-locked .ticket-hint {
    font-size: 12px;
    color: #bbb;
    margin-top: 6px;
}

.ticket-revenue-card {
    background: linear-gradient(160deg, #fefcf9 0%, #faf7f2 100%);
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.6);
    padding: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}

.ticket-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.ticket-title {
    font-size: 14px;
    font-weight: 600;
    color: #3a2e2a;
}

.ticket-badge {
    font-size: 11px;
    padding: 2px 10px;
    border-radius: 10px;
    background: linear-gradient(135deg, #FFD700, #FFA000);
    color: #fff;
    font-weight: 600;
}

.ticket-stats-row {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

.ticket-stat {
    flex: 1;
    text-align: center;
    background: rgba(255,255,255,0.5);
    border-radius: 12px;
    padding: 10px 6px;
    border: 1px solid rgba(0,0,0,0.03);
}

.ticket-stat-value {
    display: block;
    font-size: 20px;
    font-weight: 700;
    color: #3a2e2a;
    line-height: 1.2;
}

.ticket-stat-value.ticket-glow {
    color: #FF8F00;
    text-shadow: 0 0 8px rgba(255,143,0,0.3);
}

.ticket-stat-label {
    display: block;
    font-size: 11px;
    color: #999;
    margin-top: 2px;
}

.ticket-visitor-row {
    font-size: 12px;
    color: #888;
    text-align: center;
    margin-bottom: 10px;
    padding: 6px;
    background: rgba(255,255,255,0.3);
    border-radius: 8px;
}

.ticket-breakdown {
    background: rgba(0,0,0,0.02);
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 12px;
    border: 1px solid rgba(0,0,0,0.03);
}

.ticket-breakdown-title {
    font-size: 12px;
    font-weight: 600;
    color: #3a2e2a;
    margin-bottom: 6px;
}

.ticket-breakdown-text {
    font-size: 12px;
    color: #777;
    line-height: 1.7;
}

.ticket-collect-btn {
    display: block;
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #FFD700, #FFA000);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.ticket-collect-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(255,160,0,0.35);
}

.ticket-collect-btn:active {
    transform: translateY(0);
}

/* 交易行样式 — 轻玻璃质感 */
.trade-section {
    margin-top: 16px;
    padding: 20px;
    background: var(--bg-card);
    border-radius: 28px;
    box-shadow: var(--shadow-card);
    border: var(--border-card);
}

.trade-section h3 {
    margin: 0 0 12px 0;
    font-size: 17px;
    color: var(--text-heading);
    font-weight: normal;
}

.trade-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
    background: rgba(0,0,0,0.03);
    padding: 4px;
    border-radius: 18px;
    backdrop-filter: blur(4px);
}

.trade-tab {
    padding: 8px 16px;
    border: none;
    border-radius: 15px;
    background: transparent;
    cursor: pointer;
    font-size: 13px;
    font-weight: normal;
    color: rgba(60,50,45,0.5);
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    flex: 1;
    text-align: center;
}

.trade-tab:hover {
    color: rgba(60,50,45,0.7);
    background: rgba(255,255,255,0.3);
}

.trade-tab.active {
    background: rgba(255,255,255,0.9);
    color: #3a2e2a;
    font-weight: normal;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04), 0 1px 0 rgba(255,255,255,0.8) inset;
}

/* 市场筛选 */
.market-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 16px 18px;
    background: rgba(255,255,255,0.45);
    backdrop-filter: blur(4px);
    border-radius: 20px;
    margin-bottom: 16px;
    border: 1px solid rgba(0,0,0,0.05);
    position: relative;
    z-index: 2;
}

.filter-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.filter-group label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary, rgba(60,50,45,0.7));
    white-space: nowrap;
}

.filter-group select {
    padding: 9px 36px 9px 14px;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 18px;
    font-size: 13px;
    background: #fff
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'><path d='M3 4.5L6 7.5L9 4.5' stroke='%236C5CE7' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>")
        no-repeat right 12px center;
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    color: var(--text-primary, #3a2e2a);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    min-width: 96px;
    line-height: 1.4;
}

.filter-group select:hover {
    border-color: rgba(108,92,231,0.35);
    background-color: #faf9ff;
}

.filter-group select:focus {
    outline: none;
    border-color: var(--accent, #6c5ce7);
    box-shadow: 0 0 0 3px rgba(108,92,231,0.08);
    background-color: #fff;
}

/* ============ 自定义下拉组件（美化 select 的选项弹层） ============ */
.custom-select {
    position: relative;
    display: inline-block;
    z-index: 10;
}

.custom-select > select {
    display: none;
}

.cs-trigger {
    display: flex;
    align-items: center;
    padding: 9px 36px 9px 14px;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 18px;
    background: #fff;
    color: var(--text-primary, #3a2e2a);
    font-size: 13px;
    font-family: inherit;
    font-weight: normal;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
    min-width: 96px;
    position: relative;
    line-height: 1.4;
    white-space: nowrap;
}

.cs-trigger::after {
    content: '';
    position: absolute;
    right: 12px;
    top: 50%;
    width: 10px;
    height: 10px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'><path d='M3 4.5L6 7.5L9 4.5' stroke='%236C5CE7' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    transform: translateY(-50%) rotate(0deg);
    transition: transform 0.2s ease;
    pointer-events: none;
}

.cs-trigger:hover {
    border-color: rgba(108,92,231,0.35);
    background-color: #faf9ff;
}

.custom-select.open .cs-trigger {
    border-color: var(--accent, #6c5ce7);
    background-color: #fff;
    box-shadow: 0 0 0 3px rgba(108,92,231,0.08);
}

.custom-select.open {
    z-index: 500;
}

.custom-select.open .cs-trigger::after {
    transform: translateY(-50%) rotate(180deg);
}

.cs-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 100%;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 16px;
    padding: 6px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
    z-index: 100;
    display: none;
    animation: cs-fade-in 0.15s ease;
    max-height: 260px;
    overflow-y: auto;
}

.custom-select.open .cs-menu {
    display: block;
}

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

.cs-menu::-webkit-scrollbar {
    width: 6px;
}
.cs-menu::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.12);
    border-radius: 3px;
}

.cs-option {
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 13px;
    color: var(--text-secondary, #5a4a42);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
    white-space: nowrap;
    line-height: 1.4;
}

.cs-option:hover {
    background: #f5f3ff;
    color: var(--accent, #6c5ce7);
}

.cs-option.selected {
    background: linear-gradient(135deg, #6c5ce7, #8f85ff);
    color: #fff;
    font-weight: 500;
}

/* ============ 交易行物品卡片 ============ */
.trade-items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
    gap: 12px;
}

.trade-item {
    position: relative;
    aspect-ratio: 1 / 1.3;
    border: 2px solid #ddd;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    padding: 10px 8px 8px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    background: linear-gradient(165deg, #ffffff 0%, #f5f5f5 100%);
}

.trade-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(156, 39, 176, 0.15);
    border-color: #9C27B0;
}

/* 图片/图标区：占卡片 62% 高度 */
.trade-item img,
.trade-item-icon {
    height: 62%;
    width: 100%;
    object-fit: contain;
    object-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
}

.trade-item-icon img {
    height: 100%;
    max-height: 64px;
    width: auto;
}

/* 物品信息区 */
.trade-item-info {
    font-size: 11px;
    color: #666;
    text-align: center;
    margin-top: 6px;
    line-height: 1.4;
    flex-shrink: 0;
}

.trade-item-info strong {
    color: #333;
    font-weight: 500;
}

/* 价格标签 */
.trade-item-price {
    font-size: 11px;
    color: #FF9800;
    font-weight: 600;
    margin-top: 4px;
    text-align: center;
    flex-shrink: 0;
}

/* 品质徽章（左上角） */
.trade-item-quality-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    font-size: 10px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.85);
    z-index: 2;
}

/* 📦 存入渔仓按钮 */
/* 批量选择复选框 */
.vault-select-cb {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 3;
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: #ffd700;
}

/* 批量操作栏 */
.batch-vault-bar {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(255,215,0,0.06);
    border: 1px solid rgba(255,215,0,0.15);
    border-radius: 8px;
    margin-bottom: 12px;
    font-size: 13px;
    flex-wrap: wrap;
}
.batch-vault-bar button {
    padding: 4px 10px;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 6px;
    background: rgba(255,255,255,0.06);
    color: #ccc;
    cursor: pointer;
    font-size: 12px;
    transition: background 0.15s;
}
.batch-vault-bar button:hover { background: rgba(255,255,255,0.12); }
.batch-vault-bar .batch-confirm-btn {
    background: rgba(255,215,0,0.2);
    border-color: rgba(255,215,0,0.4);
    color: #ffd700;
    font-weight: 500;
}
.batch-vault-bar .batch-confirm-btn:hover { background: rgba(255,215,0,0.3); }

.trade-vault-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    font-size: 11px;
    padding: 2px 6px;
    border: 1px solid rgba(255,215,0,0.3);
    border-radius: 6px;
    background: rgba(255,215,0,0.1);
    color: #b8860b;
    cursor: pointer;
    transition: all 0.15s;
    line-height: 1.4;
    z-index: 2;
}
.trade-vault-btn:hover {
    background: rgba(255,215,0,0.25);
    border-color: rgba(255,215,0,0.6);
    transform: scale(1.05);
}

/* 品质配色 */
.trade-item.quality-普通 {
    border-color: #bbb;
    background: linear-gradient(165deg, #ffffff 0%, #f0f0f0 100%);
}
.trade-item.quality-普通 .trade-item-quality-badge { color: #888; }

.trade-item.quality-常见 {
    border-color: #66BB6A;
    background: linear-gradient(165deg, #ffffff 0%, #e8f5e9 100%);
}
.trade-item.quality-常见 .trade-item-quality-badge { color: #4CAF50; }

.trade-item.quality-罕见 {
    border-color: #42A5F5;
    background: linear-gradient(165deg, #ffffff 0%, #e3f2fd 100%);
}
.trade-item.quality-罕见 .trade-item-quality-badge { color: #2196F3; }

.trade-item.quality-稀有 {
    border-color: #AB47BC;
    background: linear-gradient(165deg, #ffffff 0%, #f3e5f5 100%);
}
.trade-item.quality-稀有 .trade-item-quality-badge { color: #9C27B0; }

.trade-item.quality-史诗 {
    border-color: #FF9800;
    background: linear-gradient(165deg, #ffffff 0%, #fff3e0 100%);
    box-shadow: 0 2px 8px rgba(255, 152, 0, 0.12);
}
.trade-item.quality-史诗 .trade-item-quality-badge { color: #F57C00; }

.trade-item.quality-传说 {
    border-color: #EF5350;
    background: linear-gradient(165deg, #ffffff 0%, #ffebee 100%);
    box-shadow: 0 2px 10px rgba(244, 67, 54, 0.18);
}
.trade-item.quality-传说 .trade-item-quality-badge { color: #E53935; }

/* ============ 市场物品卡片 ============ */
.global-trade-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
    padding: 8px 0;
}

.global-trade-item {
    position: relative;
    background: #ffffff;
    border: 2px solid rgba(0, 0, 0, 0.08);
    border-radius: 18px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}

.global-trade-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(33, 150, 243, 0.14);
    border-color: rgba(33, 150, 243, 0.4);
}

/* 图片/图标区域：1:1 正方形容器 */
.global-trade-media {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: linear-gradient(145deg, #f4f8fc, #e8f0f7);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    overflow: hidden;
}

.global-trade-media img {
    width: 78%;
    height: 78%;
    object-fit: contain;
    display: block;
}

.global-trade-media .trade-item-icon {
    font-size: 48px;
    text-align: center;
    line-height: 1;
}

/* 信息区 */
.global-trade-info {
    text-align: center;
    margin-bottom: 8px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.global-trade-info h4 {
    margin: 0 0 4px 0;
    font-size: 14px;
    font-weight: 500;
    color: #2c2825;
    line-height: 1.35;
    word-break: break-word;
}

.global-trade-info .trade-seller {
    margin: 0;
    font-size: 11px;
    color: #8a7a72;
}

.global-trade-info .trade-desc {
    margin: 0;
    font-size: 11px;
    color: #a89a90;
    margin-top: 2px;
}

/* 左上角品质徽章 */
.global-trade-quality-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(255, 255, 255, 0.92);
    padding: 3px 10px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 500;
    z-index: 2;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}

/* 品质配色 */
.global-trade-item.quality-普通 { border-color: #bbb; }
.global-trade-item.quality-普通 .global-trade-quality-badge { color: #888; }

.global-trade-item.quality-常见 { border-color: #66BB6A; background: linear-gradient(165deg, #ffffff, #f1faf2); }
.global-trade-item.quality-常见 .global-trade-quality-badge { color: #4CAF50; }

.global-trade-item.quality-罕见 { border-color: #42A5F5; background: linear-gradient(165deg, #ffffff, #eff6fd); }
.global-trade-item.quality-罕见 .global-trade-quality-badge { color: #2196F3; }

.global-trade-item.quality-稀有 { border-color: #AB47BC; background: linear-gradient(165deg, #ffffff, #f7eefa); }
.global-trade-item.quality-稀有 .global-trade-quality-badge { color: #9C27B0; }

.global-trade-item.quality-史诗 {
    border-color: #FF9800;
    background: linear-gradient(165deg, #ffffff, #fff5e6);
    box-shadow: 0 2px 12px rgba(255, 152, 0, 0.14);
}
.global-trade-item.quality-史诗 .global-trade-quality-badge { color: #F57C00; }

.global-trade-item.quality-传说 {
    border-color: #EF5350;
    background: linear-gradient(165deg, #ffffff, #fff0f0);
    box-shadow: 0 2px 14px rgba(239, 83, 80, 0.2);
}
.global-trade-item.quality-传说 .global-trade-quality-badge { color: #E53935; }

/* 右上角传说徽章 */
.global-trade-legendary {
    position: absolute;
    top: 10px;
    right: 10px;
    background: linear-gradient(135deg, #ff7043, #e53935);
    color: #fff;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    z-index: 2;
    box-shadow: 0 2px 8px rgba(229, 57, 53, 0.25);
}
.global-trade-count-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: linear-gradient(135deg, #6b5f52, #8a7d6d);
    color: #fdf8f0;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    z-index: 2;
    box-shadow: 0 2px 6px rgba(107, 95, 82, 0.25);
}

/* 底部价格 + 购买按钮 */
.global-trade-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
    padding-top: 6px;
}

.global-trade-price {
    font-size: 15px;
    font-weight: 700;
    color: #ff9800;
    white-space: nowrap;
}

.buy-btn {
    flex: 0 0 auto;
    padding: 8px 18px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, #42A5F5, #1E88E5);
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
    font-family: inherit;
}

.buy-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(30, 136, 229, 0.25);
    filter: brightness(1.05);
}

.buy-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(30, 136, 229, 0.2);
}

/* 空状态 */
.global-trade-empty {
    grid-column: 1 / -1;
    padding: 40px 20px;
    text-align: center;
    background: linear-gradient(145deg, #fafafa, #f0f0f0);
    border-radius: 18px;
    color: #a89a90;
    font-size: 14px;
    border: 2px dashed rgba(0, 0, 0, 0.08);
}

/* 已上架物品列表 */
.listed-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: none;
    overflow: visible;
    padding: 4px 0;
}

.listed-empty {
    text-align: center;
    padding: 32px 16px;
    color: var(--text-muted, #8a7a72);
    background: var(--bg-chip, #faf9ff);
    border-radius: 16px;
    border: 2px dashed rgba(0,0,0,0.06);
}
.listed-empty-icon { font-size: 36px; margin-bottom: 8px; opacity: 0.7; }
.listed-empty-title { margin: 0 0 4px 0; font-size: 14px; font-weight: 600; color: var(--text-heading, #2c2825); }
.listed-empty-desc { margin: 0; font-size: 12px; }

.listed-item {
    --item-q-color: #8a7a72;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border-light, rgba(0,0,0,0.06));
    border-left: 3px solid var(--item-q-color, #8a7a72);
    border-radius: 12px;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.listed-item:hover {
    background: var(--bg-chip, #faf9ff);
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    transform: translateY(-1px);
}

.listed-item-media {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    background: linear-gradient(135deg, #faf9ff 0%, #f5f3ff 100%);
    border: 1px solid rgba(0,0,0,0.04);
    border-radius: 10px;
    overflow: hidden;
}

.listed-item-media img {
    width: 44px;
    height: 44px;
    object-fit: contain;
    border-radius: 0;
    margin: 0;
}

.listed-item-icon {
    font-size: 34px;
    line-height: 1;
}

.listed-item-info {
    flex: 1;
    min-width: 0;
}

.listed-item-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-heading, #2c2825);
    margin-bottom: 4px;
    line-height: 1.3;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.listed-item-quality {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    background: rgba(138,122,114,0.08);
    border: 1px solid;
    line-height: 1.5;
}

.listed-item-legendary {
    color: #e53935;
    font-size: 11px;
    font-weight: 700;
}

.listed-item-meta {
    font-size: 12px;
    color: var(--text-muted, #8a7a72);
    margin: 0;
    line-height: 1.4;
}

.listed-item-meta strong {
    color: var(--text-secondary, #5a4a42);
    font-weight: 600;
}

.listed-item-price {
    text-align: right;
    padding: 0 6px;
    flex-shrink: 0;
    min-width: 70px;
}

.listed-item-price-main {
    color: #d97706;
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
}

.listed-item-price-origin {
    font-size: 11px;
    color: var(--text-muted, #8a7a72);
    text-decoration: line-through;
    margin-top: 2px;
}

.listed-item-action {
    flex-shrink: 0;
}

.listed-item-unlist-btn {
    padding: 6px 14px;
    background: transparent;
    color: var(--text-secondary, #5a4a42);
    border: 1px solid var(--border-light, rgba(0,0,0,0.12));
    border-radius: 8px;
    cursor: pointer;
    font-size: 12px;
    font-family: inherit;
    transition: all 0.15s ease;
    font-weight: 500;
}

.listed-item-unlist-btn:hover {
    background: #f44336;
    color: #fff;
    border-color: #f44336;
}

/* 🧹 清洁订单系统 */
.orders-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.order-section {
    background: rgba(255,255,255,0.06);
    border-radius: 8px;
    padding: 14px;
}
.order-section h4 {
    margin: 0 0 12px 0;
    font-size: 14px;
    color: #e0e0e0;
}
.order-form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}
.order-form-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.order-form-row label {
    font-size: 13px;
    color: #bbb;
}
.order-input {
    width: 100px;
    padding: 6px 10px;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 6px;
    background: rgba(255,255,255,0.04);
    color: #e0e0e0;
    font-size: 13px;
}

/* ====== 📦 渔仓独立页面（暖米色主题 #e8e2d9） ====== */
#page-fish-vault {
    padding: 20px 28px 20px 12px;
    background: #f4efea;
    min-height: 100vh;
    color: #5c524a;
}
.vault-page-container {
    margin-left: 0;
    margin-right: auto;
}

.vault-page-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 16px; padding: 14px 18px;
    background: #fdf8f0;
    border-radius: 14px;
    border: 1px solid #e8e2d9;
    box-shadow: 0 1px 2px rgba(92, 82, 74, 0.05);
}
.vault-page-title {
    display: flex; align-items: center; gap: 10px;
    font-size: 15px; color: #5c524a; font-weight: 500;
}
.vault-page-title-icon { font-size: 20px; line-height: 1; }
.vault-page-title-text { font-weight: 600; font-size: 16px; color: #5c524a; }
.vault-page-capacity {
    background: #e8e2d9; color: #5c524a;
    padding: 4px 12px; border-radius: 999px;
    font-size: 12.5px; font-weight: 600;
    margin-left: 6px;
}
.vault-page-build-btn {
    padding: 7px 16px;
    border: 1px solid #d4ccc0;
    border-radius: 12px;
    background: #fffbf5;
    color: #5c524a;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.18s ease;
    font-family: inherit;
}
.vault-page-build-btn:hover {
    background: #e8e2d9;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(92, 82, 74, 0.10);
}

.vault-page-empty {
    text-align: center;
    padding: 60px 30px;
    background: #fdf8f0;
    border-radius: 16px;
    border: 1px solid #e8e2d9;
    color: #5c524a;
}
.vault-page-empty-icon { font-size: 48px; margin-bottom: 12px; opacity: 0.8; }
.vault-page-empty-title { font-size: 16px; color: #5c524a; font-weight: 600; margin: 0 0 8px; }
.vault-page-empty-desc { font-size: 13px; color: #6b5f52; margin: 0 0 6px; }
.vault-page-empty-desc strong { color: #5c524a; font-weight: 600; }
.vault-page-empty-hint { font-size: 12px; color: #8a7d6d; margin: 0; }

.vault-fish-group {
    background: #faf5ed;
    border-radius: 16px;
    border: 1px solid #e8e2d9;
    margin-bottom: 14px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(92, 82, 74, 0.04);
}

.vault-fish-group-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px;
    background: #f1ebe0;
    border-bottom: 1px solid #e8e2d9;
}
.vault-fish-group-left { display: flex; align-items: center; gap: 10px; }
.vault-fish-group-img-wrap {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 10px;
    background: linear-gradient(180deg, #fdf8f0 0%, #e8e2d9 100%);
    border: 1px solid #d4ccc0; overflow: hidden; flex-shrink: 0;
}
.vault-fish-group-img { width: 28px; height: 28px; object-fit: contain; }
.vault-fish-group-img-fallback { font-size: 22px; color: #8a7d6d; line-height: 1; }
.vault-fish-group-name-col { display: flex; flex-direction: column; gap: 2px; }
.vault-fish-group-name { font-size: 15px; font-weight: 600; color: #5c524a; }
.vault-fish-group-count { font-size: 12px; color: #6b5f52; }
.vault-fish-group-count strong { color: #5c524a; font-weight: 600; }
.vault-fish-group-right { display: flex; align-items: center; gap: 8px; }
.vault-fish-group-market { padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.vault-fish-group-profit { padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.vault-change-up { background: rgba(204, 113, 94, 0.15); color: #b85c45; }
.vault-change-down { background: rgba(106, 130, 104, 0.18); color: #5a7a54; }
.vault-change-flat { background: #e8e2d9; color: #6b5f52; }
.vault-profit-up { background: rgba(204, 113, 94, 0.15); color: #b85c45; }
.vault-profit-down { background: rgba(106, 130, 104, 0.18); color: #5a7a54; }

.vault-fish-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
    padding: 14px;
    background: #faf5ed;
}

.vault-fish-card {
    background: #fdf8f0;
    border: 1px solid #e8e2d9;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
    overflow: hidden;
}
.vault-fish-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(92, 82, 74, 0.08);
    border-color: #d4ccc0;
    background: #fff;
}

.vault-fish-card.quality-card-普通 { border-top: 3px solid #a59888; }
.vault-fish-card.quality-card-常见 { border-top: 3px solid #8ba888; }
.vault-fish-card.quality-card-罕见 { border-top: 3px solid #7a9bbf; }
.vault-fish-card.quality-card-稀有 { border-top: 3px solid #a988b8; }
.vault-fish-card.quality-card-史诗 { border-top: 3px solid #c89465; }
.vault-fish-card.quality-card-传说 { border-top: 3px solid #c77a5a; }

.vault-fish-card-main { padding: 10px 12px; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.vault-fish-card-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.vault-quality-tag { padding: 2px 8px; border-radius: 8px; font-size: 11.5px; font-weight: 600; border: 1px solid; }
.vault-growth-stage { font-size: 12px; color: #8a7d6d; }
.vault-count-badge {
    margin-left: auto; background: #f1ebe0; color: #5c524a;
    padding: 2px 8px; border-radius: 8px; font-size: 11.5px; font-weight: 600;
}

.vault-fish-card-values { display: flex; flex-direction: column; gap: 4px; }
.vault-value-row { display: flex; align-items: baseline; justify-content: space-between; font-size: 12.5px; }
.vault-value-label { color: #8a7d6d; font-size: 11.5px; }
.vault-value-num { font-weight: 500; color: #5c524a; font-variant-numeric: tabular-nums; }
.vault-value-num b { font-weight: 600; }
.vault-value-base { color: #8a7d6d; font-weight: 500; }
.vault-value-current { font-weight: 600; }
.vault-value-ratio { font-size: 13px; color: #5c524a; font-weight: 600; }
.vault-value-row-strong { padding-top: 4px; border-top: 1px dashed #e8e2d9; margin-top: 2px; }

.vault-fish-card-action { padding: 8px 12px 12px; margin-top: auto; }
.vault-sell-btn {
    width: 100%; padding: 8px; border: none; border-radius: 10px;
    background: linear-gradient(135deg, #5c524a 0%, #7a6a5a 100%);
    color: #fdf8f0; cursor: pointer; font-size: 13px; font-weight: 500;
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
    letter-spacing: 0.5px; font-family: inherit;
}
.vault-sell-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(92, 82, 74, 0.18);
}
.vault-sell-btn:active { transform: translateY(0); }
.vault-list-btn {
    padding: 8px 10px; border: none; border-radius: 10px;
    background: linear-gradient(135deg, #5a8a7a 0%, #4a7a6a 100%);
    color: #fdf8f0; cursor: pointer; font-size: 13px; font-weight: 500;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    letter-spacing: 0.5px; font-family: inherit; white-space: nowrap;
}
.vault-list-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(74, 122, 106, 0.25);
}
.vault-list-btn:active { transform: translateY(0); }

@media (max-width: 560px) {
    .vault-fish-card-grid { grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px; }
    #page-fish-vault { padding: 12px; background: #f4efea; }
}
@media (max-width: 380px) {
    .vault-fish-card-grid { grid-template-columns: 1fr; }
}

.btn-order-post {
    padding: 6px 16px;
    background: linear-gradient(135deg, #26a69a, #00897b);
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    transition: transform 0.15s, box-shadow 0.15s;
}
.btn-order-post:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(38,166,154,0.3);
}
.order-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    margin-bottom: 8px;
    background: rgba(255,255,255,0.05);
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.08);
    transition: border-color 0.2s;
}
.order-card.order-ready {
    border-color: #66bb6a;
}
.order-card.order-done {
    opacity: 0.6;
}
.order-card-info {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.order-poster {
    font-size: 13px;
    color: #b0bec5;
}
.order-pay {
    font-size: 14px;
    color: #ffd700;
    font-weight: 600;
}
.order-time {
    font-size: 11px;
    color: #777;
}
.btn-order-accept, .btn-order-complete {
    padding: 5px 12px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    transition: transform 0.15s;
}
.btn-order-accept { background: #43a047; color: #fff; }
.btn-order-accept:hover { transform: translateY(-1px); }
.btn-order-complete { background: #ff8f00; color: #fff; }
.btn-order-complete:hover { transform: translateY(-1px); }

/* ====== 📈 渔市系统（清爽米白 + 柔和红绿）====== */

/* 渔市整体容器：白底 + 冷灰描边 */
.fish-market-section {
    background: #fff !important;
    border: 1px solid #e8ecf1 !important;
    color: #3c4657;
}

/* 渔市公告 */
.fish-market-events {
    background: #f7f8fa;
    border: 1px solid #e8ecf1;
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 16px;
    font-size: 13px;
    line-height: 1.75;
    color: #3c4657;
}
.fish-market-events-loading {
    color: #8892a0;
    text-align: center;
    padding: 4px 0;
}
.fish-market-event-item {
    display: inline-flex;
    align-items: center;
    background: #fff;
    padding: 4px 12px;
    border-radius: 999px;
    margin: 3px 4px;
    color: #3c4657;
    border: 1px solid #e1e5eb;
    box-shadow: 0 1px 2px rgba(60, 70, 87, 0.04);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    font-weight: 500;
}
.fish-market-event-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(60, 70, 87, 0.08);
}
.fish-market-event-item strong {
    margin-left: 4px;
    font-weight: 600;
}
.fish-market-event-hot {
    margin-top: 8px;
    padding: 6px 10px;
    background: #fff;
    border-radius: 12px;
    color: #5c6678;
    font-size: 12.5px;
    font-weight: 500;
    border: 1px dashed #d5dbe3;
}
.fish-market-event-hot .up { color: #c94a3f; font-weight: 600; }
.fish-market-event-hot .down { color: #3e8c6f; font-weight: 600; }

/* 两列布局：左涨/右跌 */
.fish-market-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 4px;
}
.fish-market-col {
    background: #fbfcfd;
    border: 1px solid #e8ecf1;
    border-radius: 18px;
    padding: 14px;
    min-height: 200px;
    display: flex;
    flex-direction: column;
}
.fish-market-col-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #edf0f4;
    font-size: 15px;
    font-weight: 500;
    color: #3c4657;
}
.fish-market-col-icon { font-size: 18px; line-height: 1; }
.fish-market-col-title { flex: 1; }
.fish-market-col-count {
    background: #eef1f5;
    color: #5c6678;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    min-width: 28px;
    text-align: center;
}
.fish-market-col--up .fish-market-col-count { background: rgba(201, 74, 63, 0.10); color: #c94a3f; }
.fish-market-col--down .fish-market-col-count { background: rgba(62, 140, 111, 0.10); color: #3e8c6f; }
.fish-market-card-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.fish-market-empty {
    color: #8892a0;
    font-size: 13px;
    text-align: center;
    padding: 20px 0;
}

/* 鱼种卡片 */
.fish-card {
    background: #fff;
    border: 1px solid #e8ecf1;
    border-radius: 14px;
    overflow: hidden;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.fish-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(60, 70, 87, 0.08);
}
.fish-card--up { border-left: 3px solid #c94a3f; }
.fish-card--down { border-left: 3px solid #3e8c6f; }
.fish-card-main {
    padding: 10px 12px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.fish-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #3c4657;
}
.fish-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: linear-gradient(180deg, #f0f4fa 0%, #e4ebf2 100%);
    border: 1px solid #dde4ec;
    box-shadow: 0 1px 2px rgba(60, 70, 87, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    overflow: hidden;
    flex-shrink: 0;
}
.fish-card-img {
    width: 26px;
    height: 26px;
    object-fit: contain;
    display: inline-block;
    image-rendering: auto;
    transition: transform 0.2s ease;
}
.fish-card:hover .fish-card-img {
    transform: scale(1.08) rotate(-3deg);
}
.fish-card-img-fallback {
    font-size: 18px;
    line-height: 1;
    color: #5c6678;
}
.fish-card-foraging {
    margin-left: auto;
    font-size: 11.5px;
    color: #5c6678;
    background: #f0f4fa;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid #dde4ec;
    font-weight: 500;
    white-space: nowrap;
}
.fish-card-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 12px;
    font-size: 13px;
    align-items: center;
}
.fish-card-price { display: flex; align-items: baseline; gap: 6px; }
.fish-card-price-label { font-size: 11px; color: #8892a0; flex-shrink: 0; }
.fish-card-price-value { font-weight: 600; font-size: 13px; color: #3c4657; font-variant-numeric: tabular-nums; }
.fish-card-price-value--base { color: #8892a0; font-weight: 500; }
.fish-card-change {
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.3px;
}
.fish-change-up { background: rgba(201, 74, 63, 0.10); color: #c94a3f; }
.fish-change-down { background: rgba(62, 140, 111, 0.10); color: #3e8c6f; }
.fish-card-ratio {
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.fish-price-up { color: #c94a3f; }
.fish-price-down { color: #3e8c6f; }
.fish-price-flat { color: #8892a0; font-weight: 600; }

/* 迷你走势图 */
.fish-card-chart {
    background: #f7f8fa;
    border: 1px solid #edf0f4;
    border-radius: 10px;
    padding: 4px;
    text-align: center;
}
.fish-chart-mini {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    cursor: pointer;
    transition: filter 0.2s ease;
}
.fish-chart-mini:hover { filter: brightness(1.05); }

/* 卡片详情按钮 */
.fish-card-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 11.5px;
    color: #8892a0;
    padding-top: 4px;
    border-top: 1px dashed #eef1f5;
    padding: 6px 0 2px;
    transition: color 0.18s ease;
}
.fish-card-toggle:hover { color: #5c6678; }

/* 卡片展开的因素分解 */
.fish-card-factors {
    background: #f7f8fa;
    padding: 10px 14px 12px;
    border-top: 1px solid #edf0f4;
    font-size: 12.5px;
    color: #5c6678;
}
.fish-card-factors-title {
    font-weight: 600;
    color: #3c4657;
    margin-bottom: 6px;
    font-size: 12.5px;
}
.fish-card-factors-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px 12px;
    margin-bottom: 6px;
}
.fish-card-factors-grid b { font-weight: 600; }
.fish-card-factors-grid small { color: #8892a0; font-size: 11.5px; }
.fish-card-factors-total {
    padding-top: 6px;
    border-top: 1px dashed #e1e5eb;
    font-size: 12px;
    color: #5c6678;
}
.fish-card-factors-empty {
    color: #8892a0;
    font-size: 12.5px;
    text-align: center;
    padding: 6px 0;
}

/* 渔仓样式 */
.fish-vault-section {
    background: #fff;
    border-radius: 18px;
    border: 1px solid #e8ecf1;
    padding: 16px 20px;
    box-shadow: 0 1px 3px rgba(60, 70, 87, 0.04);
    color: #3c4657;
}
.fish-vault-section h3 {
    margin: 0 0 12px 0;
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #3c4657;
    font-weight: 500;
    letter-spacing: 0.3px;
}
.fish-vault-summary { font-size: 12.5px; color: #8892a0; }
.fish-vault-content { display: flex; flex-direction: column; gap: 8px; }
.fish-vault-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: #f7f8fa;
    border-radius: 12px;
    font-size: 13.5px;
    color: #3c4657;
    border: 1px solid #edf0f4;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.fish-vault-row:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(60, 70, 87, 0.06);
    background: #fbfcfd;
}
.fish-vault-row .fish-vault-info { display: flex; align-items: center; gap: 10px; }
.fish-vault-row .fish-vault-profit { font-size: 12.5px; color: #c94a3f; font-weight: 600; }
.fish-vault-empty { text-align: center; color: #8892a0; padding: 20px; font-size: 13px; }

/* 买入弹窗 */
.fish-buy-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(30, 40, 55, 0.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center;
    z-index: 10000;
    animation: fadeIn 0.2s ease;
}
.fish-buy-panel {
    background: #fff;
    border: 1px solid #e8ecf1;
    border-radius: 22px;
    padding: 26px 28px;
    width: 360px;
    max-width: 92vw;
    box-shadow: 0 14px 50px rgba(30, 40, 55, 0.25);
    color: #3c4657;
    animation: scaleIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.fish-buy-close {
    float: right;
    cursor: pointer;
    font-size: 20px;
    color: #8892a0;
    transition: color 0.15s, transform 0.15s;
    line-height: 1;
    margin-top: -4px;
}
.fish-buy-close:hover { color: #3c4657; transform: rotate(90deg); }
.fish-buy-panel h4 {
    margin: 0 0 16px 0;
    font-size: 17px;
    color: #3c4657;
    font-weight: 500;
    letter-spacing: 0.3px;
}
.fish-buy-info {
    margin-bottom: 16px;
    font-size: 13.5px;
    color: #5c6678;
    line-height: 1.7;
    background: #f7f8fa;
    border-radius: 14px;
    padding: 12px 16px;
    border: 1px solid #edf0f4;
}
.fish-buy-quantity { display: flex; align-items: center; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.fish-buy-quantity label { font-size: 13px; color: #5c6678; font-weight: 500; }
.fish-qty-btn {
    padding: 6px 12px;
    border: 1px solid #e1e5eb;
    border-radius: 12px;
    background: #fff;
    color: #5c6678;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: background 0.15s, transform 0.15s, border-color 0.15s;
}
.fish-qty-btn:hover { background: #f0f2f5; transform: translateY(-1px); border-color: #d5dbe3; }
.fish-buy-quantity input {
    width: 70px;
    padding: 6px 10px;
    border: 1px solid #e1e5eb;
    border-radius: 12px;
    background: #fff;
    color: #3c4657;
    font-size: 14px;
    text-align: center;
    font-family: inherit;
    outline: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.fish-buy-quantity input:focus { border-color: #9fb0c4; box-shadow: 0 0 0 3px rgba(159, 176, 196, 0.18); }
.fish-buy-total, .fish-buy-balance { font-size: 13.5px; margin-bottom: 8px; color: #5c6678; }
.fish-buy-total strong, .fish-buy-balance strong {
    color: #c94a3f;
    font-weight: 600;
    font-size: 14.5px;
}
.fish-buy-confirm {
    width: 100%;
    padding: 11px;
    margin-top: 10px;
    border: none;
    border-radius: 14px;
    background: linear-gradient(135deg, #3c4657 0%, #4b5a72 100%);
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    letter-spacing: 0.5px;
    transition: transform 0.15s, box-shadow 0.2s;
    font-family: inherit;
}
.fish-buy-confirm:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(60, 70, 87, 0.25); }

/* 走势图弹窗 */
.fish-chart-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(30, 40, 55, 0.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center;
    z-index: 10001;
    animation: fadeIn 0.2s ease;
}
.fish-chart-panel {
    background: #fff;
    border: 1px solid #e8ecf1;
    border-radius: 22px;
    padding: 26px 28px;
    width: 420px;
    max-width: 92vw;
    box-shadow: 0 14px 50px rgba(30, 40, 55, 0.25);
    color: #3c4657;
    animation: scaleIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
}
.fish-chart-close {
    position: absolute;
    top: 16px; right: 18px;
    cursor: pointer;
    font-size: 20px;
    color: #8892a0;
    transition: color 0.15s, transform 0.15s;
    line-height: 1;
    width: 26px; height: 26px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
}
.fish-chart-close:hover { color: #3c4657; transform: rotate(90deg); background: #f0f2f5; }
.fish-chart-panel h4 {
    margin: 0 0 14px 0;
    font-size: 17px;
    color: #3c4657;
    font-weight: 500;
    letter-spacing: 0.3px;
}
.fish-chart-stats {
    margin-top: 12px;
    font-size: 13px;
    color: #5c6678;
    line-height: 1.75;
}
.fish-chart-canvas-wrap {
    text-align: center;
    background: #f7f8fa;
    border-radius: 14px;
    padding: 10px;
    border: 1px solid #edf0f4;
}

/* 动画关键帧 */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes scaleIn { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: scale(1); } }

/* 窄屏幕：两列 → 单列堆叠 */
@media (max-width: 640px) {
    .fish-market-columns { grid-template-columns: 1fr; }
    .fish-card-factors-grid { grid-template-columns: 1fr; }
}

/* 登录系统样式 — 轻玻璃质感（自动缩到屏幕外） */
.login-prompt {
    position: fixed;
    top: 16px;
    right: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px 10px 28px;
    background: rgba(255,255,255,0.75);
    backdrop-filter: blur(16px) saturate(1.2);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    color: #3a2e2a;
    border-radius: 28px;
    box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 4px 20px rgba(0,0,0,0.06);
    z-index: var(--z-overlay);
    border: 1px solid rgba(255,255,255,0.4);
    /* 鼠标不经过时，主体缩到屏幕外，左侧留约 28px 的小脚 */
    transform: translateX(calc(100% - 28px));
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
    cursor: pointer;
}

.login-prompt::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 36px;
    border-radius: 18px 0 0 18px;
    background: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(255,255,255,0.6));
    box-shadow: -3px 0 8px rgba(0,0,0,0.08) inset;
    pointer-events: none;
    opacity: 0.85;
}

/* 左侧小脚标（箭头提示） */
.login-prompt::after {
    content: '◀';
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: #6c5ce7;
    pointer-events: none;
    transition: transform 0.3s ease, opacity 0.3s ease;
    opacity: 0.85;
}

.login-prompt:hover {
    transform: translateX(0);
    box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 6px 24px rgba(108,92,231,0.18);
}

.login-prompt:hover::after {
    transform: translateY(-50%) rotate(180deg);
    opacity: 0;
}

.login-prompt i {
    font-size: 16px;
    color: #6c5ce7;
}

.login-prompt span {
    font-size: 14px;
    font-weight: normal;
    color: #5a4a42;
}

.login-btn {
    padding: 6px 18px;
    background: linear-gradient(155deg, #7c6df0, #6c5ce7);
    color: white;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    font-weight: normal;
    font-size: 13px;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 2px 0 rgba(255,255,255,0.2) inset, 0 2px 8px rgba(108,92,231,0.2);
}

.login-btn:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 2px 0 rgba(255,255,255,0.2) inset, 0 6px 20px rgba(108,92,231,0.3);
}

.logout-btn {
    padding: 6px 16px;
    background: rgba(255,255,255,0.25);
    color: #5a4a42;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 20px;
    cursor: pointer;
    font-weight: normal;
    font-size: 13px;
    transition: all 0.2s;
}

.logout-btn:hover {
    background: rgba(255,255,255,0.4);
    transform: translateY(-1px);
}

.login-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-overlay);
    backdrop-filter: blur(12px) saturate(0.8);
    -webkit-backdrop-filter: blur(12px) saturate(0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: var(--z-modal);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s, visibility 0.4s;
}

.login-overlay.show {
    opacity: 1;
    visibility: visible;
}

.login-modal {
    background: var(--bg-modal);
    backdrop-filter: blur(20px);
    padding: 32px;
    border-radius: 32px;
    width: 90%;
    max-width: 400px;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.6) inset,
        0 20px 60px rgba(0,0,0,0.12),
        0 8px 20px rgba(0,0,0,0.06);
    border: 1px solid rgba(255,255,255,0.5);
}

.login-modal h2 {
    margin-top: 0;
    text-align: center;
    color: #3a2e2a;
    font-size: 24px;
    font-weight: normal;
    letter-spacing: -0.01em;
}

.login-input-group {
    margin-bottom: 20px;
}

.login-input-group label {
    display: block;
    margin-bottom: 8px;
    color: #5a4a42;
    font-weight: normal;
    font-size: 14px;
}

.login-input-group input {
    width: 100%;
    padding: 14px 18px;
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 18px;
    font-size: 15px;
    box-sizing: border-box;
    transition: all 0.3s;
    font-family: inherit;
    background: rgba(255,255,255,0.6);
    box-shadow: 0 1px 3px rgba(0,0,0,0.03) inset;
    color: #3a2e2a;
}

.login-input-group input:focus {
    outline: none;
    border-color: rgba(108,92,231,0.3);
    background: rgba(255,255,255,0.9);
    box-shadow: 0 1px 3px rgba(108,92,231,0.05) inset, 0 0 0 3px rgba(108,92,231,0.06);
}

.login-input-group input::placeholder {
    color: rgba(60,50,45,0.3);
}

.login-required {
    text-align: center;
    padding: 60px 20px;
    color: rgba(60,50,45,0.5);
    background: linear-gradient(160deg, #fefcf9 0%, #faf7f2 100%);
    border-radius: 28px;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.8) inset,
        0 4px 16px rgba(0,0,0,0.05),
        0 1px 3px rgba(0,0,0,0.04);
    margin: 20px 0;
    border: 1px solid rgba(255,255,255,0.6);
}

.login-required i {
    font-size: 64px;
    color: rgba(60,50,45,0.12);
    margin-bottom: 20px;
}

.login-required h3 {
    margin: 0 0 10px 0;
    color: rgba(60,50,45,0.7);
    font-weight: normal;
}

.login-required p {
    margin: 0 0 25px 0;
}

#tradeContent {
    display: none;
}

#tradeContent.show {
    display: block;
}

/* ============ 上架弹窗 ============ */
/* =================== 上架弹窗 =================== */
.list-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(30, 25, 20, 0.5);
    backdrop-filter: blur(14px) saturate(1.1);
    -webkit-backdrop-filter: blur(14px) saturate(1.1);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: var(--z-modal);
    padding: 20px;
    box-sizing: border-box;
    animation: fadeIn 0.2s ease;
}

.list-overlay.show {
    display: flex;
}

.list-modal {
    background: var(--bg-card, #fff);
    padding: 20px 24px 22px;
    border-radius: 22px;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.15);
    border: 1px solid var(--border-light, rgba(0,0,0,0.08));
    box-sizing: border-box;
    animation: sellModalPop 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.list-modal-header {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 16px;
    position: relative;
}

.list-modal-title {
    margin: 0;
    text-align: center;
    color: var(--text-heading, #2c2825);
    font-size: 17px;
    font-weight: 500;
    letter-spacing: 0.01em;
}

.list-modal-close {
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border-radius: 10px;
    border: none;
    background: var(--bg-chip, #f5f3ff);
    color: var(--text-muted, #8a7a72);
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
}

.list-modal-close:hover {
    background: var(--accent, #6c5ce7);
    color: #fff;
}

/* ———— 图片/图标容器 ———— */
.list-modal-media {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 12px;
}

.list-modal-media img,
.list-modal-media #listItemIcon,
.list-modal-media #listItemIcon img {
    width: 120px;
    height: 120px;
    object-fit: contain;
    border-radius: 18px;
    background: linear-gradient(155deg, #f5f3ff 0%, #ede9fe 100%);
    padding: 12px;
    border: 1px solid rgba(108,92,231,0.1);
    display: block;
}

.list-modal-media #listItemIcon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    color: var(--accent, #6c5ce7);
}

/* ———— 物品信息区 ———— */
.list-modal-info {
    text-align: center;
    margin-bottom: 18px;
    line-height: 1.6;
}

.list-fish-name {
    font-size: 15px;
    color: var(--text-heading, #2c2825);
    font-weight: 500;
    margin-bottom: 4px;
}

.list-fish-name .list-quality-tag {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 8px;
    font-size: 12px;
    margin-right: 6px;
    color: #fff;
    background: #8a7a72;
    font-weight: 500;
}

.list-fish-name .list-quality-tag.quality-常见 { background: #66BB6A; }
.list-fish-name .list-quality-tag.quality-罕见 { background: #42A5F5; }
.list-fish-name .list-quality-tag.quality-稀有 { background: #a78bfa; }
.list-fish-name .list-quality-tag.quality-史诗 { background: #ff9800; }
.list-fish-name .list-quality-tag.quality-传说 { background: #ef5350; }

.list-fish-details {
    font-size: 12px;
    color: var(--text-muted, #8a7a72);
    margin-top: 4px;
}

.list-legendary-tag {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 10px;
    background: var(--accent, #6c5ce7);
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    margin: 0 auto 6px auto;
}

.list-original-price {
    font-size: 13px;
    color: var(--text-secondary, #5a4a42);
    margin-top: 8px;
}

.list-price-gold {
    color: #d97706;
    font-weight: 500;
    font-size: 14px;
    margin-left: 2px;
}

/* ———— 表单字段 ———— */
.list-modal-field {
    margin-bottom: 14px;
}

.list-modal-label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-secondary, #5a4a42);
    font-size: 13px;
    font-weight: 500;
}

.list-modal-input {
    width: 100%;
    height: 40px;
    padding: 0 14px;
    border: 1px solid var(--border-light, rgba(0,0,0,0.08));
    border-radius: 12px;
    font-size: 14px;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
    font-family: inherit;
    background: var(--bg-chip, #faf9ff);
    color: var(--text-primary, #2c2825);
}

.list-modal-input:focus {
    outline: none;
    border-color: var(--accent, #6c5ce7);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(108,92,231,0.1);
}

.list-modal-input::placeholder {
    color: #b4a9a0;
}

/* ———— 数量调节行 ———— */
.list-count-row {
    display: flex;
    align-items: stretch;
    gap: 8px;
    height: 40px;
}

.list-count-btn {
    width: 44px;
    border-radius: 12px;
    border: 1px solid var(--border-light, rgba(0,0,0,0.08));
    background: var(--bg-chip, #f5f3ff);
    font-size: 18px;
    color: var(--accent, #6c5ce7);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
}

.list-count-btn:hover {
    background: #ede9fe;
    border-color: rgba(108,92,231,0.3);
}

.list-count-input {
    flex: 1;
    padding: 0;
    height: 40px;
    border: 1px solid var(--border-light, rgba(0,0,0,0.08));
    border-radius: 12px;
    font-size: 14px;
    text-align: center;
    background: var(--bg-chip, #faf9ff);
    color: var(--text-primary, #2c2825);
    font-family: inherit;
    min-width: 0;
}

.list-count-input:focus {
    outline: none;
    border-color: var(--accent, #6c5ce7);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(108,92,231,0.1);
}

.list-max-btn {
    flex: 1;
    padding: 0 16px;
    border-radius: 12px;
    border: 1px solid rgba(108,92,231,0.18);
    background: var(--bg-chip, #f5f3ff);
    color: var(--accent, #6c5ce7);
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s ease;
    font-family: inherit;
    font-weight: 500;
}

.list-max-btn:hover {
    background: #ede9fe;
}

.list-count-meta {
    font-size: 12px;
    color: var(--text-muted, #8a7a72);
    text-align: center;
    margin-top: 8px;
}

/* ———— 按钮区（主/次） ———— */
.list-modal-actions {
    display: flex;
    gap: 10px;
    margin-top: 18px;
}

.list-btn {
    flex: 1;
    height: 42px;
    padding: 0;
    border-radius: 14px;
    border: none;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
    font-family: inherit;
    font-weight: 500;
}

.list-btn-primary {
    background: var(--accent, #6c5ce7);
    color: white;
}

.list-btn-primary:hover {
    background: #5b4dd4;
}

.list-btn-secondary {
    background: transparent;
    color: var(--text-secondary, #5a4a42);
    border: 1px solid var(--border-light, rgba(0,0,0,0.08));
}

.list-btn-secondary:hover {
    background: var(--bg-chip, #f5f3ff);
}

/* ==================== 渔仓弹窗样式 ==================== */
.vault-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(30, 25, 20, 0.45);
    backdrop-filter: blur(14px) saturate(1.1);
    -webkit-backdrop-filter: blur(14px) saturate(1.1);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: var(--z-modal);
    padding: 20px;
    box-sizing: border-box;
    animation: fadeIn 0.2s ease;
}

.vault-overlay.show {
    display: flex;
}

.vault-modal {
    background: var(--bg-card, #fff);
    padding: 20px 22px 22px;
    border-radius: 22px;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.15);
    border: 1px solid var(--border-light, rgba(0,0,0,0.08));
    box-sizing: border-box;
    animation: sellModalPop 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.vault-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.vault-modal-title {
    margin: 0;
    color: var(--text-heading, #2c2825);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.vault-modal-close {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    border: 1px solid var(--border-light, rgba(0,0,0,0.08));
    background: var(--bg-chip, #f5f3ff);
    color: var(--text-muted, #8a7a72);
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    font-weight: 500;
}

.vault-modal-close:hover {
    background: #8a7a72;
    color: #fff;
}

.vault-modal-media {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 12px;
}

.vault-modal-media img,
.vault-modal-media > div {
    width: 110px;
    height: 110px;
    object-fit: contain;
    border-radius: 18px;
    background: linear-gradient(155deg, #f7f3ee 0%, #efe7dd 100%);
    padding: 10px;
    border: 1px solid rgba(138,122,114,0.12);
    display: block;
    align-items: center;
    justify-content: center;
    font-size: 42px;
}

.vault-modal-info {
    text-align: center;
    margin-bottom: 14px;
    line-height: 1.6;
}

.vault-fish-name {
    font-size: 15px;
    color: var(--text-heading, #2c2825);
    font-weight: 600;
    margin-bottom: 2px;
}

.vault-fish-meta {
    font-size: 12px;
    color: var(--text-muted, #8a7a72);
    margin-bottom: 8px;
}

.vault-fish-summary {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: var(--bg-chip, #faf9ff);
    border-radius: 14px;
    padding: 10px 14px;
    margin-top: 8px;
}

.vault-summary-row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: var(--text-secondary, #5a4a42);
}

.vault-summary-row b {
    color: #d97706;
    font-weight: 600;
}

.vault-modal-field {
    margin-bottom: 12px;
}

.vault-modal-label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-secondary, #5a4a42);
    font-size: 13px;
    font-weight: 500;
}

.vault-modal-input {
    width: 100%;
    height: 40px;
    padding: 0 14px;
    border: 1px solid var(--border-light, rgba(0,0,0,0.08));
    border-radius: 12px;
    font-size: 14px;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
    font-family: inherit;
    background: var(--bg-chip, #faf9ff);
    color: var(--text-primary, #2c2825);
}

.vault-modal-input:focus {
    outline: none;
    border-color: #8a7a72;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(138,122,114,0.12);
}

.vault-price-meta {
    font-size: 12px;
    color: var(--text-muted, #8a7a72);
    text-align: right;
    margin-top: 8px;
}

.vault-price-meta span {
    color: #d97706;
    font-weight: 600;
    margin-left: 2px;
}

.vault-count-row {
    display: flex;
    align-items: stretch;
    gap: 8px;
    height: 40px;
}

.vault-count-btn {
    width: 44px;
    border-radius: 12px;
    border: 1px solid var(--border-light, rgba(0,0,0,0.08));
    background: var(--bg-chip, #f5f3ff);
    font-size: 18px;
    color: #8a7a72;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
}

.vault-count-btn:hover {
    background: #ede9fe;
    border-color: rgba(138,122,114,0.3);
}

.vault-count-input {
    flex: 1;
    padding: 0;
    height: 40px;
    border: 1px solid var(--border-light, rgba(0,0,0,0.08));
    border-radius: 12px;
    font-size: 14px;
    text-align: center;
    background: var(--bg-chip, #faf9ff);
    color: var(--text-primary, #2c2825);
    font-family: inherit;
    min-width: 0;
}

.vault-count-input:focus {
    outline: none;
    border-color: #8a7a72;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(138,122,114,0.12);
}

.vault-max-btn {
    flex: 1;
    padding: 0 16px;
    border-radius: 12px;
    border: 1px solid rgba(138,122,114,0.18);
    background: var(--bg-chip, #f5f3ff);
    color: #8a7a72;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s ease;
    font-family: inherit;
    font-weight: 500;
}

.vault-max-btn:hover {
    background: #ede9fe;
}

.vault-count-meta {
    font-size: 12px;
    color: var(--text-muted, #8a7a72);
    text-align: center;
    margin-top: 8px;
}

.vault-modal-actions {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}

.vault-btn {
    flex: 1;
    height: 42px;
    padding: 0;
    border-radius: 14px;
    border: none;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
    font-family: inherit;
    font-weight: 500;
}

.vault-btn-primary {
    background: linear-gradient(135deg, #8a7a62 0%, #6b5f52 100%);
    color: #fff;
}

.vault-btn-primary:hover {
    background: linear-gradient(135deg, #7a6a55 0%, #5a4f42 100%);
}

.vault-btn-secondary {
    background: transparent;
    color: var(--text-secondary, #5a4a42);
    border: 1px solid var(--border-light, rgba(0,0,0,0.08));
}

.vault-btn-secondary:hover {
    background: var(--bg-chip, #f5f3ff);
}

/* ==================== 批量出售确认弹窗 ==================== */
.batch-sell-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(30, 25, 20, 0.45);
    backdrop-filter: blur(14px) saturate(1.1);
    -webkit-backdrop-filter: blur(14px) saturate(1.1);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: var(--z-modal);
    padding: 20px;
    box-sizing: border-box;
    animation: fadeIn 0.2s ease;
}

.batch-sell-overlay.show {
    display: flex;
}

.batch-sell-modal {
    background: var(--bg-card, #fff);
    padding: 22px 22px 20px;
    border-radius: 24px;
    width: 100%;
    max-width: 380px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.15);
    border: 1px solid var(--border-light, rgba(0,0,0,0.08));
    box-sizing: border-box;
    animation: sellModalPop 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.batch-sell-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.batch-sell-title {
    margin: 0;
    color: var(--text-heading, #2c2825);
    font-size: 17px;
    font-weight: 600;
}

.batch-sell-close {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    border: 1px solid var(--border-light, rgba(0,0,0,0.08));
    background: var(--bg-chip, #f5f3ff);
    color: var(--text-muted, #8a7a72);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    font-weight: 500;
    flex-shrink: 0;
}

.batch-sell-close:hover {
    background: #8a7a72;
    color: #fff;
    border-color: #8a7a72;
}

/* 大图标 */
.batch-sell-icon {
    display: flex;
    justify-content: center;
    margin: 8px 0 14px;
}

.batch-sell-icon-circle {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, #fef7e0 0%, #fde68a 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    border: 3px solid #fcd34d;
    box-shadow: 0 6px 20px rgba(252, 211, 77, 0.25);
}

/* 数据统计区 */
.batch-sell-stats {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: linear-gradient(135deg, #fef7e0 0%, #fffbeb 100%);
    border: 1px solid #fde68a;
    border-radius: 16px;
    padding: 14px 12px;
    margin-bottom: 12px;
}

.batch-sell-stat-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}

.batch-sell-stat-num {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-heading, #2c2825);
    line-height: 1.1;
}

.batch-sell-stat-label {
    font-size: 12px;
    color: var(--text-muted, #8a7a72);
    margin-top: 2px;
}

.batch-sell-divider {
    width: 1px;
    height: 40px;
    background: rgba(139, 94, 60, 0.15);
}

.batch-sell-stat-gold {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}

.batch-sell-stat-gold-icon {
    font-size: 22px;
    margin-bottom: 2px;
}

.batch-sell-stat-gold-num {
    font-size: 22px;
    font-weight: 700;
    color: #d97706;
    line-height: 1.1;
}

.batch-sell-stat-gold-label {
    font-size: 12px;
    color: var(--text-muted, #8a7a72);
    margin-top: 2px;
}

/* 品质分布 */
.batch-sell-breakdown {
    background: var(--bg-chip, #faf9ff);
    border-radius: 14px;
    padding: 10px 12px;
    margin-bottom: 12px;
}

.batch-sell-breakdown-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary, #5a4a42);
    margin-bottom: 8px;
}

.batch-sell-breakdown-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.batch-sell-breakdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-secondary, #5a4a42);
}

.batch-sell-breakdown-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.batch-sell-breakdown-name {
    flex: 0 0 auto;
    font-weight: 500;
}

.batch-sell-breakdown-count {
    color: var(--text-muted, #8a7a72);
    font-size: 12px;
}

.batch-sell-breakdown-gold {
    margin-left: auto;
    color: #d97706;
    font-weight: 600;
    font-size: 13px;
}

/* 提示 */
.batch-sell-hint {
    text-align: center;
    font-size: 12px;
    color: var(--text-muted, #8a7a72);
    padding: 8px 12px;
    background: rgba(138, 122, 114, 0.05);
    border-radius: 10px;
    margin-bottom: 14px;
    line-height: 1.5;
}

/* 按钮区 */
.batch-sell-actions {
    display: flex;
    gap: 10px;
}

.batch-sell-btn {
    flex: 1;
    height: 44px;
    padding: 0 16px;
    border-radius: 14px;
    border: none;
    font-size: 14px;
    cursor: pointer;
    font-family: inherit;
    font-weight: 600;
    transition: all 0.15s ease;
}

.batch-sell-btn-primary {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: #fff;
    box-shadow: 0 4px 14px rgba(220, 38, 38, 0.25);
}

.batch-sell-btn-primary:hover {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(220, 38, 38, 0.35);
}

.batch-sell-btn-secondary {
    background: transparent;
    color: var(--text-secondary, #5a4a42);
    border: 1px solid var(--border-light, rgba(0,0,0,0.12));
}

.batch-sell-btn-secondary:hover {
    background: var(--bg-chip, #f5f3ff);
}

/* 暗色模式 */
body.dark-mode .batch-sell-modal {
    background: var(--bg-card);
    border-color: rgba(255,255,255,0.06);
}

body.dark-mode .batch-sell-title {
    color: var(--text-primary);
}

body.dark-mode .batch-sell-close {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.08);
    color: var(--text-muted);
}

body.dark-mode .batch-sell-close:hover {
    background: var(--text-secondary);
    color: #fff;
}

body.dark-mode .batch-sell-icon-circle {
    background: linear-gradient(135deg, rgba(252, 211, 77, 0.15) 0%, rgba(252, 211, 77, 0.08) 100%);
    border-color: rgba(252, 211, 77, 0.4);
}

body.dark-mode .batch-sell-stats {
    background: rgba(252, 211, 77, 0.08);
    border-color: rgba(252, 211, 77, 0.2);
}

body.dark-mode .batch-sell-stat-num {
    color: var(--text-primary);
}

body.dark-mode .batch-sell-breakdown {
    background: rgba(255,255,255,0.03);
}

body.dark-mode .batch-sell-breakdown-title,
body.dark-mode .batch-sell-breakdown-item {
    color: var(--text-secondary);
}

body.dark-mode .batch-sell-hint {
    background: rgba(255,255,255,0.03);
    color: var(--text-muted);
}

body.dark-mode .batch-sell-btn-secondary {
    background: transparent;
    color: var(--text-secondary);
    border-color: rgba(255,255,255,0.1);
}

body.dark-mode .batch-sell-btn-secondary:hover {
    background: rgba(255,255,255,0.05);
}

.nav-button.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.nav-button.disabled::after {
    content: '未解锁';
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 11px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

.nav-button.disabled:hover::after {
    opacity: 1;
    visibility: visible;
}

/* ==================== 聊天室样式 ==================== */

/* ==================== 聊天室 ==================== */

#page-chat {
    padding: 0;
    background: transparent;
}

#page-chat .chat-container {
    max-width: 100%;
    height: 100%;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    display: flex;
    flex-direction: column;
}

/* ── 头部（简洁卡片风） ── */
#page-chat .chat-header {
    background: var(--bg-card, #fff);
    color: var(--text-primary, #3a2e2a);
    padding: 14px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 0;
    border-bottom: 1px solid var(--border-light, #eee);
}

#page-chat .chat-header h2 {
    margin: 0;
    font-size: 17px;
    font-weight: 500;
    color: var(--text-heading, #2d3436);
}

#page-chat .online-info {
    background: var(--bg-chip, #f0edff);
    color: var(--accent, #6c5ce7);
    padding: 5px 12px;
    border-radius: 14px;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
}

#page-chat .online-dot {
    width: 7px;
    height: 7px;
    background: #10b981;
    border-radius: 50%;
    animation: chatDotPulse 2s infinite;
}

@keyframes chatDotPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.55; transform: scale(0.9); }
}

/* 头部左侧：邮箱/私信按钮（与简洁头部配色对齐） */
.mailbox-btn {
    background: var(--bg-chip, #f5f3ff);
    border: 1px solid var(--border-light, #eee);
    color: var(--accent, #6c5ce7);
    font-size: 16px;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    cursor: pointer;
    position: relative;
    transition: background 0.15s ease, border-color 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.mailbox-btn:hover {
    background: #ede9fe;
    border-color: var(--accent, #6c5ce7);
}

.mail-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #ef4444;
    color: white;
    font-size: 10px;
    font-weight: 500;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    border: 2px solid var(--bg-card, #fff);
    line-height: 1;
}

.chat-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ── 消息区 ── */
#page-chat .chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 18px 16px;
    background: var(--bg-body, #f7f3ed);
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: calc(100vh - 280px);
}

#page-chat .chat-message {
    display: flex;
    flex-direction: column;
    max-width: 78%;
    animation: chatSlideIn 0.25s ease;
}

#page-chat .chat-message.my-message {
    align-self: flex-end;
    align-items: flex-end;
}

#page-chat .chat-message.other-message {
    align-self: flex-start;
    align-items: flex-start;
}

#page-chat .chat-message-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 5px;
    font-size: 12px;
    padding: 0 2px;
}

#page-chat .chat-username {
    font-weight: 500;
    color: var(--text-secondary, #5a4a42);
}

#page-chat .chat-message.my-message .chat-username {
    color: var(--accent, #6c5ce7);
}

#page-chat .chat-level {
    font-size: 10px;
    font-weight: 500;
    color: #b45309;
    background: #fef3c7;
    padding: 2px 7px;
    border-radius: 8px;
    margin-left: 4px;
    display: inline-block;
    vertical-align: middle;
    line-height: 1.2;
}

#page-chat .chat-title {
    font-size: 11px;
    font-weight: 600;
    color: #b45309;
    background: #fef3c7;
    padding: 2px 7px;
    border-radius: 8px;
    margin-left: 4px;
    display: inline-block;
    vertical-align: middle;
    line-height: 1.2;
}

#page-chat .chat-time {
    color: var(--text-muted, #9ca3af);
    font-size: 11px;
}

#page-chat .chat-message-content {
    background: var(--bg-card, #fff);
    padding: 10px 14px;
    border-radius: 16px;
    word-wrap: break-word;
    line-height: 1.5;
    font-size: 14px;
    color: var(--text-primary, #3a2e2a);
    border: 1px solid var(--border-light, #eee);
}

#page-chat .chat-message.my-message .chat-message-content {
    background: var(--accent, #6c5ce7);
    color: #fff;
    border-color: transparent;
    border-bottom-right-radius: 6px;
}

#page-chat .chat-message.other-message .chat-message-content {
    border-bottom-left-radius: 6px;
}

/* ── 系统消息：居中显示 ── */
#page-chat .chat-message.system-message {
    align-self: center;
    align-items: center;
    max-width: 85%;
}

#page-chat .chat-message.system-message .chat-message-content {
    background: linear-gradient(135deg, rgba(108, 92, 231, 0.12), rgba(168, 85, 247, 0.08));
    color: var(--accent, #6c5ce7);
    border: 1px solid rgba(108, 92, 231, 0.2);
    border-radius: 18px;
    font-size: 13px;
    text-align: center;
    padding: 8px 18px;
    font-weight: 500;
}

/* ── 输入区 ── */
#page-chat .chat-input-container {
    padding: 12px 16px;
    background: var(--bg-card, #fff);
    border-top: 1px solid var(--border-light, #eee);
    display: flex;
    gap: 8px;
    align-items: flex-end;
    border-radius: 0;
}

#page-chat .chat-input {
    flex: 1;
    padding: 10px 16px;
    border: 1px solid var(--border-light, #eee);
    border-radius: 18px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.15s ease, background-color 0.15s ease;
    resize: none;
    max-height: 100px;
    min-height: 40px;
    font-family: inherit;
    background: var(--bg-chip, #faf9ff);
    color: var(--text-primary, #3a2e2a);
    line-height: 1.4;
}

#page-chat .chat-input:focus {
    border-color: var(--accent, #6c5ce7);
    background: #fff;
}

#page-chat .chat-input::placeholder {
    color: var(--text-muted, #9ca3af);
}

#page-chat .send-button {
    padding: 10px 18px;
    background: var(--accent, #6c5ce7);
    color: white;
    border: none;
    border-radius: 18px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s ease, opacity 0.15s ease;
    height: 40px;
    min-width: 64px;
}

#page-chat .send-button:hover {
    background: #5b4dd4;
}

#page-chat .send-button:active {
    opacity: 0.85;
}

#page-chat .send-button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* ── 礼物按钮 ── */
#page-chat .gift-button {
    padding: 0;
    width: 40px;
    height: 40px;
    background: var(--bg-chip, #f5f3ff);
    color: var(--accent, #6c5ce7);
    border: 1px solid var(--border-light, #eee);
    border-radius: 14px;
    font-size: 18px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
    line-height: 1;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
#page-chat .gift-button:hover {
    background: #ede9fe;
    border-color: var(--accent, #6c5ce7);
}

/* ── 空状态 ── */
#page-chat .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--text-muted, #9ca3af);
    text-align: center;
    padding: 40px 20px;
}

#page-chat .empty-state-icon {
    font-size: 44px;
    margin-bottom: 12px;
    opacity: 0.4;
}

#page-chat .empty-state h3 {
    margin: 0 0 6px 0;
    color: var(--text-secondary, #6b7280);
    font-size: 16px;
    font-weight: 500;
}

#page-chat .empty-state p {
    margin: 0;
    font-size: 13px;
}

/* ── 滚动条 ── */
#page-chat .chat-messages::-webkit-scrollbar {
    width: 6px;
}
#page-chat .chat-messages::-webkit-scrollbar-track {
    background: transparent;
}
#page-chat .chat-messages::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.12);
    border-radius: 3px;
}
#page-chat .chat-messages::-webkit-scrollbar-thumb:hover {
    background: rgba(0,0,0,0.2);
}

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

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* 农田页面样式 */
#page-farm .farm-container {
    padding: 20px;
}

#page-farm .farm-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-bottom: 20px;
}

#page-farm .farm-plot {
    border: 1px solid rgba(210, 180, 140, 0.3);
    border-radius: 24px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    background: linear-gradient(160deg, rgba(250,245,235,0.8) 0%, rgba(245,240,230,0.8) 100%);
    min-height: 100px;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.6) inset,
        0 2px 8px rgba(139, 69, 19, 0.03);
}

#page-farm .farm-plot:hover {
    background: linear-gradient(160deg, rgba(250,245,235,0.95) 0%, rgba(245,240,230,0.95) 100%);
    transform: translateY(-3px);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.6) inset,
        0 6px 24px rgba(139, 69, 19, 0.06);
}

#page-farm .farm-plot.planted {
    background: linear-gradient(160deg, rgba(232, 245, 233, 0.9) 0%, rgba(220, 240, 220, 0.9) 100%);
    border-color: rgba(129, 199, 132, 0.4);
}

#page-farm .farm-plot.mature {
    background: linear-gradient(160deg, rgba(255, 248, 225, 0.9) 0%, rgba(255, 243, 210, 0.9) 100%);
    border-color: rgba(255, 213, 79, 0.4);
}

#page-farm .plot-icon {
    font-size: 30px;
    margin-bottom: 10px;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#page-farm .plot-icon img.crop-image {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.material-icon {
    width: 20px;
    height: 40px;
    vertical-align: middle;
    object-fit: contain;
}

#page-farm .plot-status {
    font-size: 14px;
    color: #333;
}

#page-farm .farm-info {
    margin-bottom: 20px;
    padding: 14px 18px;
    background: linear-gradient(160deg, #fefcf9 0%, #faf7f2 100%);
    border-radius: 22px;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.8) inset,
        0 4px 16px rgba(0,0,0,0.05),
        0 1px 3px rgba(0,0,0,0.04);
    border: 1px solid rgba(255,255,255,0.6);
}

#page-farm .farm-storage {
    background: linear-gradient(160deg, #fefcf9 0%, #faf7f2 100%);
    border: 1px solid rgba(255,255,255,0.6);
    border-radius: 28px;
    padding: 18px;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.8) inset,
        0 4px 16px rgba(0,0,0,0.05),
        0 1px 3px rgba(0,0,0,0.04);
}

#page-farm .farm-storage h3 {
    margin: 0 0 10px 0;
    font-size: 16px;
}

#page-farm .storage-items {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

#page-farm .storage-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* 农田弹窗样式 — 毛玻璃质感 */
.farm-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-overlay);
    backdrop-filter: blur(12px) saturate(0.8);
    -webkit-backdrop-filter: blur(12px) saturate(0.8);
    z-index: var(--z-overlay);
    justify-content: center;
    align-items: center;
}

.farm-modal {
    background: var(--bg-modal);
    backdrop-filter: blur(20px);
    padding: 28px;
    border-radius: 32px;
    max-width: 340px;
    width: 90%;
    text-align: center;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.6) inset,
        0 20px 60px rgba(0,0,0,0.12),
        0 8px 20px rgba(0,0,0,0.06);
    border: 1px solid rgba(255,255,255,0.5);
}

.farm-modal h3 {
    margin: 0 0 16px 0;
    color: #3a2e2a;
    font-size: 18px;
    font-weight: normal;
}

.seed-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    margin: 6px 0;
    background: #f8f9fa;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.seed-option:hover {
    background: #eef0f4;
    transform: translateX(2px);
}

/* 商店样式 */
.shop-category {
    margin-bottom: 25px;
}

.shop-category h4 {
    margin: 0 0 10px 0;
    font-size: 16px;
    color: #333;
}

/* 商店分类标签 */
.shop-cats {
    display: flex;
    gap: 6px;
    background: rgba(0,0,0,0.03);
    padding: 4px;
    border-radius: 18px;
    backdrop-filter: blur(4px);
}

.shop-cat-tab {
    flex: 1;
    padding: 10px 16px;
    border: none;
    border-radius: 15px;
    background: transparent;
    cursor: pointer;
    font-size: 13px;
    font-weight: normal;
    color: rgba(60,50,45,0.5);
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    text-align: center;
    font-family: inherit;
}

.shop-cat-tab:hover {
    color: rgba(60,50,45,0.7);
    background: rgba(255,255,255,0.3);
}

.shop-cat-tab.active {
    background: rgba(255,255,255,0.9);
    color: #3a2e2a;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04), 0 1px 0 rgba(255,255,255,0.8) inset;
}

.shop-items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}

.shop-item {
    background: linear-gradient(160deg, #fefcf9 0%, #faf7f2 100%);
    border: 1px solid rgba(255,255,255,0.6);
    border-radius: 24px;
    padding: 18px;
    text-align: center;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}

.shop-item:hover {
    box-shadow:
        0 1px 0 rgba(255,255,255,0.8) inset,
        0 8px 30px rgba(0,0,0,0.06),
        0 2px 6px rgba(0,0,0,0.03);
    transform: translateY(-3px);
}

.shop-item-icon {
    font-size: 36px;
    margin-bottom: 8px;
}

.shop-item-name {
    font-size: 14px;
    font-weight: normal;
    margin-bottom: 5px;
}

.shop-item-price {
    color: #ff9800;
    font-size: 14px;
    margin-bottom: 5px;
}

.shop-item-limit {
    font-size: 12px;
    color: #888;
    margin-bottom: 8px;
}

.shop-item-btn {
    width: 100%;
    padding: 8px;
    background: #4CAF50;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
}

.shop-item-btn:hover {
    background: #45a049;
}

.shop-item-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
}

.shop-item-count {
    font-size: 12px;
    color: #666;
    margin-top: 5px;
}

/* 工坊样式 */
#page-workshop .workshop-container {
    padding: 20px;
}

#page-workshop .workshop-recipes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 15px;
    margin-bottom: 30px;
}

.workshop-recipe {
    background: linear-gradient(160deg, #fefcf9 0%, #faf7f2 100%);
    border: 1px solid rgba(255,255,255,0.6);
    border-radius: 28px;
    padding: 20px;
    text-align: center;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}

.workshop-recipe:hover {
    box-shadow:
        0 1px 0 rgba(255,255,255,0.8) inset,
        0 8px 30px rgba(0,0,0,0.06),
        0 2px 6px rgba(0,0,0,0.03);
    transform: translateY(-3px);
}

.workshop-recipe.disabled {
    opacity: 0.5;
}

.workshop-recipe.disabled button {
    background: #ccc;
    cursor: not-allowed;
}

.recipe-result {
    font-size: 36px;
    margin-bottom: 10px;
}

.recipe-name {
    font-size: 16px;
    font-weight: normal;
    margin-bottom: 15px;
    color: #333;
}

.recipe-arrow {
    font-size: 20px;
    color: #8B4513;
    margin: 10px 0;
}

.recipe-ingredients {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 15px;
}

.ingredient-item {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    background: #f5f5f5;
    border-radius: 8px;
}

.ingredient-item.has-enough {
    color: #4CAF50;
}

.ingredient-item.not-enough {
    color: #f44336;
}

.workshop-recipe button {
    width: 100%;
    padding: 10px;
    background: #4CAF50;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: normal;
}

.workshop-recipe button:hover:not(:disabled) {
    background: #45a049;
}

.workshop-storage {
    background: linear-gradient(160deg, #fefcf9 0%, #faf7f2 100%);
    border: 1px solid rgba(255,255,255,0.6);
    border-radius: 28px;
    padding: 20px;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.8) inset,
        0 4px 16px rgba(0,0,0,0.05),
        0 1px 3px rgba(0,0,0,0.04);
}

.workshop-storage h3 {
    margin: 0 0 15px 0;
    font-size: 18px;
}

#workshopCrops {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.workshop-crop-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 15px;
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
}

.workshop-crop-icon {
    font-size: 24px;
}

.workshop-crop-name {
    font-size: 14px;
    font-weight: normal;
}

.workshop-crop-count {
    font-size: 14px;
    color: #4CAF50;
}

/* ====== 工坊页面头部 ====== */
.workshop-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 24px 20px;
    background: #fff;
    border-bottom: 1px solid #f0f0f0;
}

.workshop-title-section h2 {
    margin: 0 0 4px 0;
    font-size: 20px;
    color: #333;
    font-weight: 600;
    letter-spacing: 1px;
    font-family: inherit;
}

.workshop-title-section p {
    margin: 0;
    font-size: 13px;
    color: #999;
}

/* ====== 工坊标签页 ====== */
.workshop-tabs {
    display: flex;
    gap: 4px;
    padding: 0 20px;
    margin-bottom: 0;
    background: #fafafa;
    padding-top: 12px;
    border-bottom: 1px solid #f0f0f0;
}
.workshop-tab {
    padding: 10px 20px;
    border: none;
    border-radius: 8px 8px 0 0;
    background: transparent;
    color: #999;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: inherit;
    position: relative;
}
.workshop-tab:hover {
    color: #666;
}
.workshop-tab.active {
    background: #fff;
    color: #333;
    font-weight: 600;
}
.workshop-tab.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 2px;
    background: #4CAF50;
    border-radius: 2px;
}

/* ====== 农作物鱼饵介绍卡片 ====== */
.crop-bait-intro {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #fafafa;
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 24px;
    border: 1px solid #f0f0f0;
}

.crop-bait-intro-icon-wrap {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}

.intro-icon-deco {
    width: 24px;
    height: 24px;
    background: #fff;
    border-radius: 50%;
    position: relative;
}

.intro-icon-deco::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    background: #81C784;
    border-radius: 50%;
}

.crop-bait-intro-text h4 {
    margin: 0 0 4px 0;
    font-size: 15px;
    color: #333;
    font-weight: 600;
}

.crop-bait-intro-text p {
    margin: 0;
    font-size: 12px;
    color: #999;
    line-height: 1.5;
}

body.dark-mode .workshop-page-header {
    background: #1e1e1e;
    border-bottom-color: #333;
}

body.dark-mode .workshop-title-section h2 {
    color: #fff;
}

body.dark-mode .workshop-title-section p {
    color: #888;
}

body.dark-mode .workshop-tabs {
    background: #1a1a1a;
    border-bottom-color: #333;
}

body.dark-mode .workshop-tab {
    color: #888;
}

body.dark-mode .workshop-tab:hover {
    color: #ccc;
}

body.dark-mode .workshop-tab.active {
    background: #1e1e1e;
    color: #fff;
}

body.dark-mode .crop-bait-intro {
    background: #252525;
    border-color: #333;
}

body.dark-mode .crop-bait-intro-icon-wrap {
    background: linear-gradient(135deg, #2e5a2e, #1b3a1b);
}

body.dark-mode .intro-icon-deco {
    background: #333;
}

body.dark-mode .intro-icon-deco::before {
    background: #4CAF50;
}

body.dark-mode .crop-bait-intro-text h4 {
    color: #fff;
}

body.dark-mode .crop-bait-intro-text p {
    color: #888;
}

/* ====== 快速制作 - 左右布局 ====== */
.quick-craft-container {
    display: flex;
    gap: 16px;
    min-height: 500px;
}

.quick-craft-sidebar {
    width: 240px;
    flex-shrink: 0;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #f0f0f0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.quick-craft-sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid #f5f5f5;
    background: #fafafa;
}

.quick-craft-sidebar-title {
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

.quick-craft-sidebar-count {
    font-size: 12px;
    color: #999;
}

.quick-craft-crop-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

.quick-craft-crop-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
    margin-bottom: 4px;
}

.quick-craft-crop-item:hover {
    background: #f5f5f5;
}

.quick-craft-crop-item.active {
    background: #e8f5e9;
}

.quick-craft-crop-img {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #fafafa;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid #eee;
}

.quick-craft-crop-img img {
    width: 26px;
    height: 26px;
    object-fit: contain;
}

.quick-craft-crop-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.quick-craft-crop-name {
    font-size: 13px;
    color: #333;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.quick-craft-crop-count {
    font-size: 11px;
    color: #999;
    font-family: system-ui, -apple-system, sans-serif;
}

.quick-craft-empty {
    padding: 40px 20px;
    text-align: center;
    color: #999;
}

.quick-craft-empty p {
    font-size: 14px;
    margin: 0 0 4px 0;
    color: #666;
}

.quick-craft-empty span {
    font-size: 12px;
    color: #bbb;
}

.quick-craft-detail {
    flex: 1;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #f0f0f0;
    overflow: hidden;
}

.quick-craft-detail-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 400px;
    color: #999;
    padding: 40px;
    text-align: center;
}

.quick-craft-empty-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #f5f5f5;
    margin-bottom: 16px;
    position: relative;
}

.quick-craft-empty-icon::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 24px;
    height: 24px;
    border: 2px solid #ddd;
    border-radius: 6px;
}

.quick-craft-detail-empty p {
    font-size: 15px;
    color: #666;
    margin: 0 0 4px 0;
    font-weight: 500;
}

.quick-craft-detail-empty span {
    font-size: 13px;
    color: #bbb;
}

/* 右侧详情面板 */
.quick-craft-detail-content {
    padding: 24px;
}

.quick-craft-detail-header {
    display: flex;
    align-items: center;
    gap: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #f5f5f5;
    margin-bottom: 20px;
}

.quick-craft-conversion {
    display: flex;
    align-items: center;
    gap: 12px;
}

.quick-craft-convert-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.quick-craft-img-wrap {
    width: 72px;
    height: 72px;
    border-radius: 14px;
    background: #fafafa;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #eee;
}

.quick-craft-img-wrap img {
    width: 52px;
    height: 52px;
    object-fit: contain;
}

.quick-craft-item-name {
    font-size: 12px;
    color: #666;
}

.quick-craft-arrow {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid #e0e0e0;
    position: relative;
    flex-shrink: 0;
}

.quick-craft-arrow::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 45%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 7px solid #bdbdbd;
}

.quick-craft-detail-title {
    flex: 1;
    min-width: 0;
}

.quick-craft-detail-title h3 {
    margin: 0 0 6px 0;
    font-size: 18px;
    color: #333;
    font-weight: 600;
}

.quick-craft-detail-tag {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

/* 目标鱼区域 */
.quick-craft-target-section {
    background: #fafafa;
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.quick-craft-target-img {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid #eee;
}

.quick-craft-target-img img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.quick-craft-target-info {
    flex: 1;
    min-width: 0;
}

.quick-craft-target-label {
    font-size: 12px;
    color: #999;
    margin-bottom: 2px;
}

.quick-craft-target-name {
    font-size: 16px;
    color: #333;
    font-weight: 600;
}

.quick-craft-boost-badge {
    padding: 6px 14px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
    font-family: system-ui, -apple-system, sans-serif;
}

/* 配方信息 */
.quick-craft-recipe-info {
    margin-bottom: 24px;
}

.quick-craft-recipe-title {
    font-size: 13px;
    color: #999;
    margin-bottom: 10px;
}

.quick-craft-recipe-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 12px 16px;
    background: #fafafa;
    border-radius: 8px;
}

.quick-craft-recipe-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: #333;
}

.quick-craft-recipe-item .rc-count {
    font-weight: 600;
    font-family: system-ui, -apple-system, sans-serif;
}

.quick-craft-recipe-arrow {
    width: 20px;
    height: 1px;
    background: #ddd;
    position: relative;
    flex-shrink: 0;
}

.quick-craft-recipe-arrow::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 5px solid #ddd;
}

/* 数量选择区域 */
.quick-craft-quantity-section {
    margin-bottom: 24px;
}

.quick-craft-quantity-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.quick-craft-quantity-label {
    font-size: 13px;
    color: #666;
}

.quick-craft-quantity-value {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    font-family: system-ui, -apple-system, sans-serif;
}

.quick-craft-slider-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
}

.quick-craft-slider {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    border-radius: 3px;
    background: #e8f5e9;
    outline: none;
    cursor: pointer;
}

.quick-craft-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #4CAF50;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(76,175,80,0.3);
    transition: transform 0.15s;
}

.quick-craft-slider::-webkit-slider-thumb:hover {
    transform: scale(1.1);
}

.quick-craft-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #4CAF50;
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 6px rgba(76,175,80,0.3);
}

.quick-craft-quick-btns {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.quick-craft-quick-btn {
    flex: 1;
    padding: 8px;
    border: 1px solid #e0e0e0;
    background: #fff;
    border-radius: 8px;
    font-size: 12px;
    color: #666;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
}

.quick-craft-quick-btn:hover {
    border-color: #4CAF50;
    color: #4CAF50;
}

/* 制作进度区域 */
.quick-craft-progress-section {
    margin-bottom: 24px;
    padding: 16px;
    background: #f1f8e9;
    border-radius: 10px;
    border: 1px solid #c5e1a5;
}

.quick-craft-progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.quick-craft-progress-label {
    font-size: 13px;
    font-weight: 600;
    color: #33691e;
}

.quick-craft-progress-value {
    font-size: 13px;
    font-weight: 600;
    color: #558b2f;
    font-family: system-ui, -apple-system, sans-serif;
}

.quick-craft-progress-bar-wrap {
    width: 100%;
}

.quick-craft-progress-bar {
    width: 100%;
    height: 10px;
    background: #dcedc8;
    border-radius: 5px;
    overflow: hidden;
}

.quick-craft-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #8bc34a, #4caf50);
    border-radius: 5px;
    transition: width 0.2s ease;
}

.quick-craft-btn.crafting {
    background: #9e9e9e;
    cursor: default;
}

/* 产出预览 */
.quick-craft-output-preview {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: #fff8e1;
    border-radius: 10px;
    margin-bottom: 20px;
    border: 1px solid #ffe0b2;
}

.quick-craft-output-label {
    font-size: 13px;
    color: #e65100;
}

.quick-craft-output-value {
    font-size: 18px;
    font-weight: 700;
    color: #e65100;
    font-family: system-ui, -apple-system, sans-serif;
}

/* 制作按钮 */
.quick-craft-btn {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 10px;
    background: #4CAF50;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-family: system-ui, -apple-system, sans-serif;
}

.quick-craft-btn:hover:not(:disabled) {
    background: #43A047;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(76,175,80,0.3);
}

.quick-craft-btn:active:not(:disabled) {
    transform: translateY(0);
}

.quick-craft-btn:disabled {
    background: #e0e0e0;
    cursor: not-allowed;
    color: #999;
}

/* 暗色模式 */
body.dark-mode .quick-craft-sidebar {
    background: #2a2a2a;
    border-color: #3a3a3a;
}

body.dark-mode .quick-craft-sidebar-header {
    border-bottom-color: #333;
    background: #252525;
}

body.dark-mode .quick-craft-sidebar-title {
    color: #fff;
}

body.dark-mode .quick-craft-sidebar-count {
    color: #888;
}

body.dark-mode .quick-craft-crop-item:hover {
    background: #333;
}

body.dark-mode .quick-craft-crop-item.active {
    background: rgba(76,175,80,0.15);
}

body.dark-mode .quick-craft-crop-img {
    background: #333;
    border-color: #444;
}

body.dark-mode .quick-craft-crop-name {
    color: #eee;
}

body.dark-mode .quick-craft-crop-count {
    color: #888;
}

body.dark-mode .quick-craft-detail {
    background: #2a2a2a;
    border-color: #3a3a3a;
}

body.dark-mode .quick-craft-empty-icon {
    background: #333;
}

body.dark-mode .quick-craft-empty-icon::before {
    border-color: #555;
}

body.dark-mode .quick-craft-detail-empty p {
    color: #ccc;
}

body.dark-mode .quick-craft-detail-empty span {
    color: #666;
}

body.dark-mode .quick-craft-empty p {
    color: #ccc;
}

body.dark-mode .quick-craft-empty span {
    color: #666;
}

body.dark-mode .quick-craft-detail-header {
    border-bottom-color: #333;
}

body.dark-mode .quick-craft-img-wrap {
    background: #333;
    border-color: #444;
}

body.dark-mode .quick-craft-item-name {
    color: #aaa;
}

body.dark-mode .quick-craft-arrow {
    border-color: #555;
}

body.dark-mode .quick-craft-arrow::after {
    border-left-color: #777;
}

body.dark-mode .quick-craft-detail-title h3 {
    color: #fff;
}

body.dark-mode .quick-craft-target-section {
    background: #252525;
}

body.dark-mode .quick-craft-target-img {
    background: #333;
    border-color: #444;
}

body.dark-mode .quick-craft-target-label {
    color: #888;
}

body.dark-mode .quick-craft-target-name {
    color: #eee;
}

body.dark-mode .quick-craft-recipe-title {
    color: #888;
}

body.dark-mode .quick-craft-recipe-row {
    background: #252525;
}

body.dark-mode .quick-craft-recipe-item {
    color: #eee;
}

body.dark-mode .quick-craft-quantity-label {
    color: #aaa;
}

body.dark-mode .quick-craft-quantity-value {
    color: #fff;
}

body.dark-mode .quick-craft-slider {
    background: #333;
}

body.dark-mode .quick-craft-quick-btn {
    background: #333;
    border-color: #444;
    color: #aaa;
}

body.dark-mode .quick-craft-quick-btn:hover {
    border-color: #4CAF50;
    color: #4CAF50;
}

body.dark-mode .quick-craft-output-preview {
    background: rgba(255,152,0,0.1);
    border-color: rgba(255,152,0,0.2);
}

body.dark-mode .quick-craft-output-label {
    color: #FFB74D;
}

body.dark-mode .quick-craft-output-value {
    color: #FFB74D;
}

body.dark-mode .quick-craft-progress-section {
    background: rgba(76,175,80,0.1);
    border-color: rgba(76,175,80,0.2);
}

body.dark-mode .quick-craft-progress-label {
    color: #81C784;
}

body.dark-mode .quick-craft-progress-value {
    color: #A5D6A7;
}

body.dark-mode .quick-craft-progress-bar {
    background: #333;
}

body.dark-mode .quick-craft-btn.crafting {
    background: #555;
}

body.dark-mode .quick-craft-btn {
    background: #4CAF50;
}

/* ====== 农作物鱼饵卡片 ====== */
.crop-bait-tier-group {
    margin-bottom: 32px;
}

.crop-bait-tier-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.crop-bait-tier-badge {
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.crop-bait-tier-count {
    font-size: 12px;
    color: #999;
}

.crop-bait-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.crop-bait-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.25s ease;
    border: 1px solid #f0f0f0;
    display: flex;
    flex-direction: column;
}

.crop-bait-card:hover {
    border-color: #e0e0e0;
    box-shadow: 0 8px 24px rgba(0,0,0,0.06);
    transform: translateY(-2px);
}

.crop-bait-card.crafting {
    border-color: #81C784;
    box-shadow: 0 0 0 3px rgba(129,199,132,0.15);
}

/* 卡片顶部 - 合成展示 */
.crop-bait-card-main {
    padding: 20px;
    background: #fafafa;
    border-bottom: 1px solid #f0f0f0;
}

.crop-bait-conversion {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.crop-bait-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.crop-bait-img-wrap {
    width: 64px;
    height: 64px;
    border-radius: 14px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #eee;
}

.crop-bait-img-wrap img {
    width: 44px;
    height: 44px;
    object-fit: contain;
}

.crop-bait-img-wrap.img-fallback::after {
    content: '';
    width: 44px;
    height: 44px;
    background: #f5f5f5;
    border-radius: 8px;
}

.crop-bait-item-name {
    font-size: 13px;
    color: #666;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* 中间转换箭头 */
.crop-bait-convert-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.convert-arrow-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #e0e0e0;
    position: relative;
}

.convert-arrow-circle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 45%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 7px solid #bdbdbd;
}

/* 卡片信息区域 */
.crop-bait-card-info {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* 目标鱼区域 */
.crop-bait-target-fish {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #fafafa;
    border-radius: 10px;
}

.target-fish-img-wrap {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid #eee;
}

.target-fish-img-wrap img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.target-fish-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.target-fish-label {
    font-size: 11px;
    color: #999;
}

.target-fish-name {
    font-size: 14px;
    color: #333;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.crop-bait-boost-badge {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}

/* 配方行 */
.crop-bait-recipe-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 12px;
    color: #666;
}

.recipe-crop {
    color: #666;
}

.recipe-arrow {
    width: 20px;
    height: 1px;
    background: #ddd;
    position: relative;
    flex-shrink: 0;
}

.recipe-arrow::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 5px solid #ddd;
}

.recipe-output {
    color: #333;
    font-weight: 500;
}

/* 统计行 */
.crop-bait-stats-row {
    display: flex;
    gap: 10px;
}

.crop-bait-stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px;
    background: #fafafa;
    border-radius: 10px;
}

.stat-label {
    font-size: 11px;
    color: #999;
}

.stat-value {
    font-size: 16px;
    font-weight: 700;
    color: #333;
    font-family: system-ui, -apple-system, sans-serif;
}

.stat-value.insufficient {
    color: #e53935;
}

/* 制作按钮 */
.crop-bait-craft-btn {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 10px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-family: system-ui, -apple-system, sans-serif;
}

.crop-bait-craft-btn:hover:not(:disabled) {
    opacity: 0.9;
    transform: translateY(-1px);
}

.crop-bait-craft-btn:active:not(:disabled) {
    transform: translateY(0);
}

.crop-bait-craft-btn:disabled {
    background: #e0e0e0 !important;
    cursor: not-allowed;
    color: #999;
}

/* 制作中状态 */
.crop-bait-crafting-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.crop-bait-crafting-bar {
    height: 8px;
    background: #e8f5e9;
    border-radius: 4px;
    overflow: hidden;
}

.crop-bait-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #81C784, #4CAF50);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.crop-bait-crafting-text {
    text-align: center;
    font-size: 12px;
    color: #4CAF50;
    font-weight: 500;
}

/* 暗色模式 */
body.dark-mode .crop-bait-card {
    background: #2a2a2a;
    border-color: #3a3a3a;
}

body.dark-mode .crop-bait-card:hover {
    border-color: #4a4a4a;
}

body.dark-mode .crop-bait-card-main {
    background: #252525;
    border-bottom-color: #333;
}

body.dark-mode .crop-bait-img-wrap {
    background: #333;
    border-color: #444;
}

body.dark-mode .crop-bait-item-name {
    color: #ccc;
}

body.dark-mode .convert-arrow-circle {
    background: #333;
    border-color: #555;
}

body.dark-mode .convert-arrow-circle::after {
    border-left-color: #888;
}

body.dark-mode .crop-bait-card-info {
    background: #2a2a2a;
}

body.dark-mode .crop-bait-target-fish {
    background: #252525;
}

body.dark-mode .target-fish-img-wrap {
    background: #333;
    border-color: #444;
}

body.dark-mode .target-fish-label {
    color: #888;
}

body.dark-mode .target-fish-name {
    color: #eee;
}

body.dark-mode .crop-bait-recipe-row {
    color: #999;
}

body.dark-mode .recipe-crop {
    color: #999;
}

body.dark-mode .recipe-arrow {
    background: #555;
}

body.dark-mode .recipe-arrow::after {
    border-left-color: #555;
}

body.dark-mode .recipe-output {
    color: #ccc;
}

body.dark-mode .crop-bait-stat {
    background: #252525;
}

body.dark-mode .stat-label {
    color: #888;
}

body.dark-mode .stat-value {
    color: #eee;
}

body.dark-mode .crop-bait-tier-count {
    color: #888;
}

/* ====== 鱼饵下拉分隔线 ====== */
.bait-separator {
    text-align: center;
    padding: 6px 12px;
    font-size: 11px;
    color: #999;
    letter-spacing: 1px;
}

/* ====== 工坊进度条 ====== */
.progress-bar {
    height: 8px;
    background: #e0e0e0;
    border-radius: 4px;
    margin: 8px 0;
    overflow: hidden;
}
.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #66BB6A, #43A047);
    border-radius: 4px;
    transition: width 0.3s;
}
.craft-item {
    background: #f9f7f2;
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 8px;
}
body.dark-mode .craft-item {
    background: #2a2a2a;
}
#page-forge {
    padding: 12px 16px;
    height: calc(100vh - 20px);
    overflow-y: auto;
    box-sizing: border-box;
}

#page-forge h2 {
    display: none;
}

#page-forge .forge-container {
    width: 100%;
    max-width: none;
    margin: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* 锻造炉子标签页 */
.forge-sub-tabs {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}
.forge-sub-tab {
    flex: 1;
    padding: 10px 16px;
    border: none;
    background: rgba(0,0,0,0.04);
    cursor: pointer;
    font-size: 15px;
    color: #888;
    border-radius: 12px;
    transition: all 0.2s;
    text-align: center;
    font-family: var(--font-game);
}
.forge-sub-tab.active {
    color: #2d3436;
    background: white;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
body.dark-mode .forge-sub-tab {
    background: rgba(255,255,255,0.06);
    color: #888;
}
body.dark-mode .forge-sub-tab.active {
    background: #2b2d31;
    color: #dbdee1;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}

/* 锻造内容区域 */
.forge-sub-content {
    flex: 1;
    overflow-y: auto;
}
.forge-sub-content .build-tabs {
    margin-top: 0;
}
.forge-sub-content#forgeBuildContent,
.forge-sub-content#forgeRodsContent {
    padding-bottom: 20px;
}

.forge-locked {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted, #888);
}
.forge-locked-icon {
    font-size: 64px;
    margin-bottom: 20px;
}
.forge-locked h3 {
    margin: 0 0 10px;
    color: var(--text-heading, #666);
    font-weight: 600;
}
.forge-locked p {
    margin: 0;
    font-size: 14px;
}
.forge-locked-notice {
    text-align: center;
    padding: 14px 16px;
    margin-top: 12px;
    background: color-mix(in srgb, #2ecc71 10%, transparent);
    border: 1px solid color-mix(in srgb, #27ae60 25%, transparent);
    border-radius: 12px;
    color: #27ae60;
    font-size: 13px;
}

/* 材料栏 */
.forge-materials {
    background: var(--bg-card);
    border: var(--border-card);
    border-radius: 12px;
    padding: 14px 18px;
    margin-bottom: 0;
    flex-shrink: 0;
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    align-items: center;
}
.forge-mat-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0;
    font-size: 12px;
}
.forge-mat-label {
    color: var(--text-muted, #888);
    font-weight: 600;
    font-size: 12px;
    min-width: auto;
}
.forge-mat-bp, .forge-mat-item {
    padding: 3px 10px;
    border-radius: 8px;
    background: var(--bg-btn-default, #f5f5f5);
    color: var(--text-muted, #999);
    font-size: 11px;
}
.forge-mat-bp.have, .forge-mat-item.have {
    background: color-mix(in srgb, #2ecc71 15%, transparent);
    color: #27ae60;
    font-weight: 500;
}

/* 主区域：左右布局 */
.forge-main {
    display: flex;
    gap: 14px;
    flex: 1;
    min-height: 0;
}
@media (max-width: 640px) {
    .forge-main { flex-direction: column; }
}

/* 配方列表（左侧） */
.forge-recipes {
    flex: 0 0 260px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    padding-right: 4px;
    scrollbar-width: thin;
}
.forge-recipes::-webkit-scrollbar {
    width: 5px;
}
.forge-recipes::-webkit-scrollbar-track {
    background: transparent;
}
.forge-recipes::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.12);
    border-radius: 3px;
}
.forge-recipe-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--bg-card);
    border: var(--border-card);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}
.forge-recipe-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: transparent;
    transition: background 0.2s ease;
}
.forge-recipe-card:hover {
    border-color: color-mix(in srgb, #27ae60 35%, transparent);
    background: color-mix(in srgb, #2ecc71 6%, var(--bg-card));
    transform: translateX(2px);
}
.forge-recipe-card:hover::before {
    background: #27ae60;
}
.forge-recipe-card.locked {
    opacity: 0.5;
    cursor: not-allowed;
}
.forge-recipe-card.locked:hover {
    border-color: var(--border-card);
    background: var(--bg-card);
    transform: none;
}
.forge-recipe-card.locked:hover::before {
    background: transparent;
}
.forge-recipe-card.craftable {
    border-color: color-mix(in srgb, #27ae60 40%, transparent);
    background: color-mix(in srgb, #2ecc71 8%, var(--bg-card));
}
.forge-recipe-card.craftable::before {
    background: #27ae60;
}
.forge-recipe-card.craftable:hover {
    border-color: #27ae60;
}
.forge-recipe-icon {
    font-size: 28px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, #2ecc71 12%, transparent);
    border-radius: 10px;
    flex-shrink: 0;
}
.forge-recipe-info {
    flex: 1;
    min-width: 0;
}
.forge-recipe-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-heading, #333);
    margin-bottom: 3px;
}
.forge-recipe-meta {
    font-size: 11px;
    color: var(--text-muted, #999);
    margin-bottom: 4px;
}
.forge-recipe-mats {
    display: flex;
    gap: 6px;
    font-size: 11px;
    flex-wrap: wrap;
}
.forge-recipe-mats .have {
    color: #27ae60;
    font-weight: 500;
}
.forge-recipe-mats .need {
    color: #e53935;
    font-weight: 500;
}

/* 详情面板（右侧） */
.forge-detail {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow-y: auto;
    padding-right: 4px;
    scrollbar-width: thin;
}
.forge-detail::-webkit-scrollbar {
    width: 5px;
}
.forge-detail::-webkit-scrollbar-track {
    background: transparent;
}
.forge-detail::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.12);
    border-radius: 3px;
}
.forge-detail-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-height: 300px;
    color: var(--text-muted, #bbb);
    background: var(--bg-card);
    border-radius: 14px;
    border: 2px dashed color-mix(in srgb, #27ae60 20%, transparent);
    position: relative;
    overflow: hidden;
}
.forge-detail-placeholder::before {
    content: '';
    position: absolute;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, color-mix(in srgb, #2ecc71 15%, transparent) 0%, transparent 70%);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.forge-placeholder-icon {
    font-size: 56px;
    margin-bottom: 14px;
    position: relative;
    z-index: 1;
    animation: forgeGlow 2s ease-in-out infinite;
}
@keyframes forgeGlow {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.08); opacity: 0.9; }
}
.forge-detail-placeholder p {
    font-size: 15px;
    font-weight: 500;
    position: relative;
    z-index: 1;
    color: var(--text-secondary, #888);
}
.forge-detail-card {
    background: var(--bg-card);
    border: var(--border-card);
    border-radius: 12px;
    padding: 16px 18px;
    flex-shrink: 0;
}
.forge-detail-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.forge-detail-icon {
    font-size: 32px;
}
.forge-detail-title {
    font-size: 17px;
    font-weight: 600;
    color: var(--text-heading, #333);
}
.forge-detail-section {
    margin-bottom: 12px;
    padding: 10px 0;
    border-top: 1px solid var(--border-light, #f0f0f0);
}
.forge-detail-row {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
    font-size: 13px;
    color: var(--text-secondary, #555);
}
.forge-detail-row .have {
    color: #27ae60;
    font-weight: 600;
}
.forge-detail-row .need {
    color: #e53935;
    font-weight: 600;
}
.forge-craft-btn {
    width: 100%;
    padding: 12px;
    background: linear-gradient(135deg, #27ae60, #2ecc71);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    margin-top: 6px;
}
.forge-craft-btn:hover {
    background: linear-gradient(135deg, #219a52, #27ae60);
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(39, 174, 96, 0.25);
}
.forge-craft-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* 进度条 */
.forge-progress {
    background: color-mix(in srgb, #2ecc71 10%, var(--bg-card));
    border: 1px solid color-mix(in srgb, #27ae60 20%, transparent);
    border-radius: 12px;
    padding: 14px 16px;
    flex-shrink: 0;
}
.forge-progress-header {
    font-size: 14px;
    font-weight: 600;
    color: #27ae60;
    margin-bottom: 10px;
}
.forge-progress-body {
    text-align: center;
}
.forging-item {
    font-size: 16px;
    margin-bottom: 8px;
    color: var(--text-heading, #333);
    font-weight: 500;
}
.forge-progress-bar-track {
    height: 10px;
    background: color-mix(in srgb, #27ae60 15%, transparent);
    border-radius: 10px;
    overflow: hidden;
    margin: 6px 0;
}
.forge-progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #27ae60, #2ecc71);
    border-radius: 10px;
    transition: width 0.3s ease;
}
.forging-info {
    font-size: 12px;
    color: var(--text-muted, #888);
    margin: 6px 0;
}
.forge-cancel-btn {
    margin-top: 8px;
    padding: 6px 16px;
    background: transparent;
    color: #e53935;
    border: 1px solid color-mix(in srgb, #e53935 30%, transparent);
    border-radius: 8px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.15s ease;
}
.forge-cancel-btn:hover {
    background: color-mix(in srgb, #e53935 10%, transparent);
    border-color: #e53935;
}

/* 农田升级系统样式 — 轻玻璃质感 */
#page-farm .farm-upgrade-section {
    position: relative;
    background: linear-gradient(160deg, #fefcf9 0%, #faf7f2 100%);
    padding: 18px;
    border-radius: 24px;
    margin-bottom: 20px;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.8) inset,
        0 4px 16px rgba(0,0,0,0.05),
        0 1px 3px rgba(0,0,0,0.04);
    border: 1px solid rgba(255,255,255,0.6);
}

#page-farm .farm-upgrade-section button:hover:not(:disabled) {
    background: linear-gradient(155deg, #5eae62, #479b4b);
    box-shadow: 0 2px 0 rgba(255,255,255,0.2) inset, 0 6px 20px rgba(76, 175, 80, 0.25);
    transform: translateY(-2px);
}

#page-farm .farm-upgrade-section button:disabled {
    background: rgba(0,0,0,0.04);
    color: rgba(60,50,45,0.25);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    border: 1px solid rgba(0,0,0,0.02);
}

#page-farm #farmUpgradeProgress {
    background: linear-gradient(90deg, #FFB347, #FF8C00);
    height: 100%;
    border-radius: 24px;
    transition: width 1s linear;
    box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset;
}

#page-farm #farmLevelDisplay {
    color: #5a8f4a;
    font-weight: normal;
}

/* ==================== 内联样式迁移（从index.html） ==================== */

/* 鱼饵选择区域 — 轻玻璃质感 */
.bait-select-container {
    margin: 12px 0;
    padding: 14px 18px;
    background: rgba(232, 244, 253, 0.6);
    backdrop-filter: blur(6px);
    border-radius: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 4px 16px rgba(33, 150, 243, 0.06);
    border: 1px solid rgba(255,255,255,0.5);
}

.bait-select-label {
    font-weight: normal;
    color: #5a4a42;
    font-size: 14px;
    white-space: nowrap;
}

.current-bait-display {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    background: rgba(255,255,255,0.7);
    backdrop-filter: blur(4px);
    border-radius: 18px;
    border: 1px solid rgba(144, 202, 249, 0.5);
    flex: 1;
    box-shadow: 0 1px 2px rgba(0,0,0,0.02);
}

.bait-select-btn {
    padding: 8px 18px;
    background: linear-gradient(155deg, #5ba9e8, #3d8fd3);
    color: white;
    border: none;
    border-radius: 22px;
    cursor: pointer;
    font-weight: normal;
    font-size: 13px;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 2px 0 rgba(255,255,255,0.2) inset, 0 2px 6px rgba(33, 150, 243, 0.2);
}

.bait-select-btn:hover {
    background: linear-gradient(155deg, #4a9ee0, #2f7fc4);
    transform: translateY(-2px);
    box-shadow: 0 2px 0 rgba(255,255,255,0.2) inset, 0 6px 20px rgba(33, 150, 243, 0.25);
}

.bait-select-btn:active {
    transform: translateY(0) scale(0.97);
    box-shadow: 0 1px 0 rgba(255,255,255,0.1) inset, 0 1px 3px rgba(33, 150, 243, 0.15);
}

/* ====== 主面板：仅作为结构父盒子，不显示视觉样式 ====== */
.main-panel {
    margin: 8px 0 10px 0;
}

/* ====== 角色状态图 + 选择器 + 日志（三列并排） ====== */
.hero-row {
    display: flex;
    align-items: stretch;
    gap: 12px;
    margin: 0;
}

/* 左列：角色图 + 钓鱼按钮，整体固定宽度 280px */
.hero-left-col {
    flex: 0 0 280px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
}

.hero-left-col .image-container {
    margin: 0;
    width: 100%;
}

/* 钓鱼按钮宽度与左列一致 */
.btn-primary-fish-side {
    width: 100%;
    margin: 0;
}

/* 中间列：三个下拉纵向排列，贴紧底部 */
.hero-row .select-row {
    flex: 0 0 260px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 14px;
    margin: 0;
}

/* 右侧列：钓鱼日志 - 保持列宽，内容超过高度时内部滚动 */
.hero-row .log-container-side {
    flex: 1;
    margin: 0;
    max-height: 200px;
    overflow-y: auto;
    min-width: 0;
    padding: 16px 20px;
}

@media (max-width: 900px) {
    .hero-row {
        flex-direction: column;
        gap: 10px;
    }
    .hero-left-col {
        flex: 0 0 auto;
        width: 100%;
    }
    .hero-row .select-row {
        flex: 0 0 auto;
        flex-direction: row;
    }
    .hero-row .log-container-side {
        flex: 0 0 auto;
        max-height: 160px;
    }
}

/* ====== 水域 & 鱼饵 自定义下拉（与页面胶囊按钮风格） ====== */
.select-row {
    display: flex;
    gap: 10px;
    margin: 12px 0 10px 0;
}

/* 自定义下拉根容器 —— 定位上下文 */
.custom-select {
    flex: 1;
    position: relative;
    min-width: 0;
}

/* 触发器按钮 —— 柔和渐变 + 圆角 + 双层阴影 */
.custom-select-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px 10px 10px;
    background: linear-gradient(155deg, rgba(255,255,255,0.92), rgba(248,246,244,0.85));
    border-radius: 24px;
    border: 1px solid rgba(255,255,255,0.85);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.9) inset,
        0 4px 14px rgba(0,0,0,0.05);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}

.custom-select-trigger:hover {
    transform: translateY(-1px);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.9) inset,
        0 8px 22px rgba(0,0,0,0.09);
}

/* 打开状态的触发器 —— 紫色焦点环 */
.custom-select.open .custom-select-trigger {
    box-shadow:
        0 1px 0 rgba(255,255,255,0.9) inset,
        0 0 0 2px rgba(108, 92, 231, 0.2),
        0 8px 22px rgba(108, 92, 231, 0.15);
    border-color: rgba(108, 92, 231, 0.35);
}

/* 左侧图标小圆点（柔和圆形背景） */
.select-field-icon {
    width: 32px;
    height: 32px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
    line-height: 1;
    background: linear-gradient(155deg, rgba(124, 109, 240, 0.14), rgba(108, 92, 231, 0.09));
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.custom-select-trigger:hover .select-field-icon {
    transform: scale(1.08);
}

.custom-select.open .select-field-icon {
    transform: scale(1.1);
}

/* 文本信息区 —— 标题 + 副标题 */
.custom-select-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    text-align: left;
    overflow: hidden;
}

.custom-select-label {
    font-size: 14px;
    font-weight: 500;
    color: #3a2e2a;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.custom-select-sub {
    font-size: 11px;
    color: #8a7f78;
    line-height: 1.2;
}

.custom-select-sub #currentBaitCount {
    color: #4CAF50;
    font-weight: 500;
}

/* 右侧箭头 —— 打开时旋转动画 */
.custom-select-arrow {
    font-size: 14px;
    color: #6c5ce7;
    flex-shrink: 0;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.2s ease;
    font-weight: 700;
    line-height: 1;
    width: 14px;
    text-align: center;
}

.custom-select.open .custom-select-arrow {
    transform: rotate(180deg);
    color: #7c6df0;
}

/* ========= 下拉选项面板：外层包装负责视觉样式，内层负责布局 ========= */
.custom-select-options-wrapper {
    position: absolute;
    top: calc(100% - 6px);
    left: 0;
    right: 0;
    z-index: 1000;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
    background: linear-gradient(155deg, rgba(255,255,255,0.98), rgba(250,248,245,0.96));
    border: 1px solid rgba(255,255,255,0.9);
    border-radius: 20px;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.9) inset,
        0 12px 34px rgba(0,0,0,0.12),
        0 4px 12px rgba(108, 92, 231, 0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    overflow: hidden;
}

.custom-select.open .custom-select-options-wrapper {
    pointer-events: auto;
    opacity: 1;
    transform: translateY(0);
}

/* 内层纯 flex 列表：无 padding、无背景，选项贴紧顶部和底部边缘 */
.custom-select-options {
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 0;
    background: none;
    box-shadow: none;
    max-height: 260px;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* 选项：上下外边距 4px */
.custom-select-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 12px;
    margin: 4px;
    border-radius: 14px;
    cursor: pointer;
    transition: background 0.15s ease;
    user-select: none;
    -webkit-user-select: none;
}

/* 第一个选项：顶部圆角 */
.custom-select-option:first-child {
    margin-top: 4px;
    border-radius: 20px 20px 14px 14px;
}

/* 最后一个选项：底部圆角 */
.custom-select-option:last-child {
    margin-bottom: 4px;
    border-radius: 14px 14px 20px 20px;
}

/* 单个选项：完整圆角 */
.custom-select-option:first-child:last-child {
    border-radius: 20px;
}

/* 选项之间：上一个的 margin-bottom 与下一个的 margin-top 合计保持 4px */
.custom-select-option + .custom-select-option {
    margin-top: 4px;
}

.custom-select-option:not(:first-child):not(:last-child) {
    margin-top: 4px;
    margin-bottom: 0;
}

.custom-select-option:first-child:not(:last-child) {
    margin-bottom: 0;
}

.custom-select-option:hover {
    background: linear-gradient(155deg, rgba(124, 109, 240, 0.1), rgba(108, 92, 231, 0.06));
}

/* 当前选中项 —— 紫色高亮渐变 */
.custom-select-option.selected {
    background: linear-gradient(155deg, rgba(124, 109, 240, 0.18), rgba(108, 92, 231, 0.12));
    box-shadow: 0 0 0 1px rgba(108, 92, 231, 0.25) inset;
}

.custom-select-option.selected:hover {
    background: linear-gradient(155deg, rgba(124, 109, 240, 0.24), rgba(108, 92, 231, 0.16));
}

.custom-select-option-icon {
    font-size: 18px;
    flex-shrink: 0;
    width: 24px;
    text-align: center;
}

.custom-select-option-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.custom-select-option-name {
    font-size: 14px;
    font-weight: 500;
    color: #3a2e2a;
    line-height: 1.2;
}

.custom-select-option-meta {
    font-size: 11px;
    color: #8a7f78;
    line-height: 1.2;
}

.custom-select-option-meta .count {
    color: #4CAF50;
    font-weight: 500;
}

.custom-select-option-meta .empty {
    color: #e53935;
}

/* 选中项上的「✓」指示 */
.custom-select-option-check {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: linear-gradient(155deg, #7c6df0, #6c5ce7);
    display: none;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 10px;
    font-weight: 700;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(108, 92, 231, 0.3);
}

.custom-select-option.selected .custom-select-option-check {
    display: flex;
}

/* 鱼饵剩余数量提示 */
.bait-remain-hint {
    text-align: center;
    font-size: 12px;
    color: #888;
    margin-bottom: 6px;
    padding: 0 4px;
}

.bait-remain-hint #currentBaitCount {
    display: inline-block;
    min-width: 18px;
    text-align: center;
}

.water-area-option {
    padding: 14px;
    margin: 8px 0;
    border-radius: 20px;
    background: rgba(255,255,255,0.6);
    backdrop-filter: blur(4px);
    cursor: pointer;
    border: 1px solid rgba(255,255,255,0.5);
    transition: all 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}

.water-area-option:hover {
    background: rgba(241, 248, 241, 0.8);
    border-color: rgba(165, 214, 167, 0.6);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.04);
}

.water-area-option.selected {
    background: rgba(232, 245, 233, 0.85);
    border-color: rgba(102, 187, 106, 0.6);
    box-shadow: 0 2px 12px rgba(76, 175, 80, 0.1);
}

.water-area-option-icon {
    font-size: 28px;
    margin-right: 12px;
}

.water-area-option-name {
    font-weight: normal;
    font-size: 15px;
    color: #3a2e2a;
}

.water-area-option-desc {
    font-size: 12px;
    color: rgba(60,50,45,0.5);
    margin-top: 4px;
}

.water-area-option-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ====== 地图式水域选择弹窗 ====== */
.water-area-map-modal {
    position: relative;
    width: 90vw;
    max-width: 680px;
    max-height: 80vh;
    aspect-ratio: 16 / 10;
    border-radius: 20px;
    overflow: hidden;
    animation: mapModalIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes mapModalIn {
    from { opacity: 0; transform: scale(0.9); }
    to   { opacity: 1; transform: scale(1); }
}
.water-area-map-bg {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
}
.water-area-map-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.water-area-map-content {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.water-area-map-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.9);
    color: #5a4a3a;
    font-size: 16px;
    cursor: pointer;
    z-index: 10;
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.water-area-map-close:hover {
    background: #fff;
    transform: scale(1.08);
}
.water-area-map-title {
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    padding: 8px 20px;
    background: rgba(255,255,255,0.92);
    border-radius: 20px;
    font-size: 14px;
    font-weight: bold;
    color: #5a4a3a;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 地图标记 */
.map-water-marker {
    position: absolute;
    transform: translate(-50%, -100%);
    pointer-events: auto;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.2s ease;
}
.map-water-marker:hover {
    transform: translate(-50%, -100%) scale(1.08);
    z-index: 5;
}
.map-water-marker.selected {
    transform: translate(-50%, -100%) scale(1.1);
    z-index: 6;
}
.map-water-marker.locked {
    cursor: not-allowed;
    opacity: 0.6;
}
.map-marker-pin {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, #fff, #f0ebe0);
    border: 3px solid #2abfa4;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    position: relative;
    transition: all 0.2s;
}
.map-water-marker.selected .map-marker-pin {
    border-color: #e74c3c;
    box-shadow: 0 0 0 4px rgba(231, 76, 60, 0.25), 0 4px 12px rgba(0,0,0,0.25);
    animation: markerPulse 2s ease-in-out infinite;
}
@keyframes markerPulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(231, 76, 60, 0.25), 0 4px 12px rgba(0,0,0,0.25); }
    50%      { box-shadow: 0 0 0 8px rgba(231, 76, 60, 0.1), 0 4px 12px rgba(0,0,0,0.25); }
}
.map-marker-pin::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 8px solid #2abfa4;
}
.map-water-marker.selected .map-marker-pin::after {
    border-top-color: #e74c3c;
}
.map-marker-label {
    margin-top: 10px;
    padding: 6px 12px;
    background: rgba(255,255,255,0.95);
    border-radius: 12px;
    font-size: 12px;
    color: #5a4a3a;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    text-align: center;
    transition: all 0.2s;
}
.map-marker-name {
    font-weight: bold;
    font-size: 13px;
    color: #3a2e2a;
}
.map-marker-desc {
    font-size: 11px;
    color: #888;
    margin-top: 2px;
}
.map-water-marker.selected .map-marker-label {
    background: #e74c3c;
}
.map-water-marker.selected .map-marker-name,
.map-water-marker.selected .map-marker-desc {
    color: #fff;
}

/* ====== 钓鱼主按钮（核心操作 + 进度条） ====== */
.btn-primary-fish {
    width: 100%;
    padding: 0;
    height: 62px;
    font-size: 18px;
    font-weight: normal;
    background: #2abfa4;
    color: white;
    border: none;
    border-radius: 28px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(42, 191, 164, 0.35);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    letter-spacing: 0.05em;
    margin: 4px 0 14px 0;
    font-family: inherit;
    position: relative;
    overflow: hidden;
}

/* 进度条填充层：钓鱼中从左到右以青绿色渐变填充 */
.btn-primary-fish .fish-progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background: linear-gradient(135deg, #2abfa4 0%, #33d4b6 50%, #2abfa4 100%);
    pointer-events: none;
    z-index: 1;
    box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.15);
}

.btn-primary-fish .fish-progress-text {
    position: relative;
    z-index: 2;
    display: block;
    padding: 18px;
    font-weight: 600;
}

/* 钓鱼中状态：白底 + 黑色文字 + 青绿色渐变进度条 */
.btn-primary-fish.is-fishing {
    background: #ffffff;
    color: #111;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1), inset 0 0 0 2px #e8e8e8;
}

.btn-primary-fish.is-fishing .fish-progress-text {
    color: #111;
    font-weight: 700;
}

.btn-primary-fish:hover {
    transform: translateY(-2px);
}

.btn-primary-fish:active {
    transform: translateY(0) scale(0.98);
}

body.dark-mode .btn-primary-fish {
    box-shadow: 0 4px 14px rgba(42, 191, 164, 0.5);
}

body.dark-mode .btn-primary-fish.is-fishing {
    background: #2a2a2a;
    color: #f2f2f2;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
}

/* ====== 次级操作按钮组（建造/刷新/宠物） ====== */
.secondary-actions {
    display: flex;
    gap: 10px;
    margin-top: 4px;
}

.btn-secondary {
    flex: 1;
    padding: 12px 8px;
    color: white;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    font-weight: normal;
    font-size: 13px;
    font-family: inherit;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 2px 0 rgba(255,255,255,0.2) inset, 0 4px 12px rgba(0, 0, 0, 0.1);
    letter-spacing: 0.02em;
    text-align: center;
    white-space: nowrap;
}

.btn-secondary:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 0 rgba(255,255,255,0.2) inset, 0 6px 18px rgba(0, 0, 0, 0.15);
}

.btn-secondary:active {
    transform: translateY(0) scale(0.97);
}

/* 建造升级 - 棕色系 */
.btn-build {
    background: linear-gradient(155deg, #a0622e, #8B4513);
    box-shadow: 0 2px 0 rgba(255,255,255,0.15) inset, 0 4px 12px rgba(139, 69, 19, 0.2);
}

.btn-build:hover {
    background: linear-gradient(155deg, #8e5524, #753a0e);
    box-shadow: 0 2px 0 rgba(255,255,255,0.15) inset, 0 6px 20px rgba(139, 69, 19, 0.3);
}

/* 刷新 - 蓝色系 */
.btn-refresh {
    background: linear-gradient(155deg, #5ba9e8, #3d8fd3);
    box-shadow: 0 2px 0 rgba(255,255,255,0.15) inset, 0 4px 12px rgba(33, 150, 243, 0.2);
}

.btn-refresh:hover {
    background: linear-gradient(155deg, #4a9ee0, #2f7fc4);
    box-shadow: 0 2px 0 rgba(255,255,255,0.15) inset, 0 6px 20px rgba(33, 150, 243, 0.3);
}

/* 宠物 - 紫色系 */
.btn-pet {
    background: linear-gradient(155deg, #7c6df0, #6c5ce7);
    box-shadow: 0 2px 0 rgba(255,255,255,0.15) inset, 0 4px 12px rgba(108, 92, 231, 0.25);
}

.btn-pet:hover {
    background: linear-gradient(155deg, #6a5ce0, #5b4cdb);
    box-shadow: 0 2px 0 rgba(255,255,255,0.15) inset, 0 6px 20px rgba(108, 92, 231, 0.35);
}

/* 单按钮样式（已迁移至锻造炉） */
/* 登录按钮（交易行页面） */
.btn-login-primary {
    padding: 12px 24px;
    background: #4CAF50;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
}

/* 农田升级区域 */
.farm-upgrade-section {
    background: linear-gradient(160deg, #fefcf9 0%, #faf7f2 100%);
    padding: 18px;
    border-radius: 24px;
    margin-bottom: 20px;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.8) inset,
        0 4px 16px rgba(0,0,0,0.05),
        0 1px 3px rgba(0,0,0,0.04);
    border: 1px solid rgba(255,255,255,0.6);
}

.farm-upgrade-btn {
    width: 100%;
    padding: 14px;
    background: linear-gradient(155deg, #72b876, #5aa85e);
    color: white;
    border: none;
    border-radius: 28px;
    font-size: 15px;
    font-weight: normal;
    cursor: pointer;
    margin-bottom: 12px;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 2px 0 rgba(255,255,255,0.2) inset, 0 4px 12px rgba(76, 175, 80, 0.2);
    letter-spacing: 0.01em;
}

.farm-upgrade-btn:hover:not(:disabled) {
    background: linear-gradient(155deg, #5eae62, #479b4b);
    transform: translateY(-2px);
    box-shadow: 0 2px 0 rgba(255,255,255,0.2) inset, 0 6px 24px rgba(76, 175, 80, 0.25);
}

.farm-upgrade-btn:active:not(:disabled) {
    transform: translateY(0) scale(0.97);
}

.farm-upgrade-btn:disabled {
    background: rgba(0,0,0,0.04);
    color: rgba(60,50,45,0.25);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    border: 1px solid rgba(0,0,0,0.02);
}

/* 购买弹窗按钮容器 */
.buy-modal-actions {
    display: flex;
    gap: 10px;
}

/* 聊天室在线信息 */
.online-info {
    display: flex;
    align-items: center;
    gap: 5px;
}

/* 市场筛选排序 */
.market-filters label {
    font-size: 14px;
    font-weight: normal;
}

/* 上架商品列表 */
.listed-item:last-child {
    border-bottom: none;
}

/* 商品空状态 */
.empty-state-message {
    color: #666;
    font-size: 14px;
}

/* 数据面板样式 */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.stats-card {
    background: linear-gradient(160deg, #fefcf9 0%, #faf7f2 100%);
    border-radius: 28px;
    padding: 22px;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.8) inset,
        0 4px 16px rgba(0,0,0,0.05),
        0 1px 3px rgba(0,0,0,0.04);
    border: 1px solid rgba(255,255,255,0.6);
}

.stats-card h3 {
    margin: 0 0 15px 0;
    font-size: 16px;
    color: #333;
    padding-bottom: 10px;
    border-bottom: 2px solid #4CAF50;
}

.stats-item {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px dashed #eee;
}

.stats-item:last-child {
    border-bottom: none;
}

.stats-label {
    color: #666;
    font-size: 14px;
}

.stats-value {
    font-weight: normal;
    color: #333;
    font-size: 14px;
}

.stats-value-highlight {
    color: #4CAF50;
}

.stats-value-gold {
    color: #FFD700;
}

.quality-breakdown {
    margin-top: 10px;
    padding-left: 15px;
}

.quality-item {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 13px;
}

.quality-common { color: #9e9e9e; }
.quality-uncommon { color: #4CAF50; }
.quality-rare { color: #2196F3; }
.quality-epic { color: #9C27B0; }
.quality-legendary { color: #FF9800; }
.quality-mythical { color: #f44336; }

.bait-breakdown {
    margin-top: 10px;
    padding-left: 15px;
}

.bait-item {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 13px;
}

/* 礼物按钮 - 聊天输入区 */
#page-chat .gift-button {
    padding: 10px 14px;
    background: linear-gradient(135deg, #f59e0b, #ef4444);
    color: white;
    border: none;
    border-radius: 20px;
    font-size: 18px;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    line-height: 1;
    flex-shrink: 0;
}
#page-chat .gift-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
}

/* 礼物类型/类别选择按钮 */
.gift-type-btn, .gift-category-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 12px 20px;
    background: #f8f9fa;
    border-radius: 16px;
    cursor: pointer;
    font-weight: normal;
    font-size: 14px;
    transition: all 0.2s;
    border: 2px solid transparent;
    user-select: none;
    color: #444;
}
.gift-type-btn:hover, .gift-category-btn:hover {
    background: #eef0f8;
    border-color: #667eea;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
}

/* 礼物消息 - 聊天室中的特殊样式 */
#page-chat .chat-message.gift-message {
    background: linear-gradient(135deg, #fff7e6, #fff0d9);
    border: 1px solid #f7c774;
    border-radius: 16px;
    padding: 10px 12px;
    margin-bottom: 8px;
    max-width: 86%;
}
#page-chat .chat-message.gift-message.my-message {
    background: linear-gradient(135deg, #fff7e6, #fff0d9);
}
#page-chat .chat-message.gift-message .chat-message-content {
    background: transparent;
    padding: 4px 0;
    color: #92400e;
    border: none;
}
#page-chat .chat-message.gift-message.my-message .chat-message-content {
    background: transparent;
    color: #92400e;
}

/* 礼物卡片 */
#page-chat .gift-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.65);
    border-radius: 12px;
    margin-bottom: 6px;
}
#page-chat .gift-card-icon {
    font-size: 32px;
}
#page-chat .gift-card-title {
    font-weight: 500;
    font-size: 14px;
    color: #78350f;
}
#page-chat .gift-card-detail {
    font-size: 12px;
    color: #92400e;
    margin-top: 2px;
}

/* 礼物领取按钮和状态 */
#page-chat .gift-claim-btn {
    padding: 8px 14px;
    background: var(--accent, #6c5ce7);
    color: white;
    border: none;
    border-radius: 14px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s ease, opacity 0.15s ease;
    width: 100%;
    margin-top: 6px;
}
#page-chat .gift-claim-btn:hover {
    background: #5b4dd4;
}
#page-chat .gift-claimed-badge {
    padding: 7px 14px;
    background: #d1fae5;
    color: #065f46;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    margin-top: 6px;
}
#page-chat .gift-waiting-badge {
    padding: 7px 14px;
    background: #fef3c7;
    color: #92400e;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    margin-top: 6px;
}

/* 礼物物品选项 */
.gift-item-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    margin: 6px 0;
    background: #f8f9fa;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.2s;
    border: 2px solid transparent;
}
.gift-item-option:hover {
    background: #eef0f4;
    transform: translateX(2px);
}
.gift-item-option.selected {
    background: #eef1ff;
    border-color: #667eea;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.1);
}
.gift-item-option.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* 排行榜样式 */
.leaderboard-section {
    margin-top: 10px;
}

.leaderboard-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0;
}

.leaderboard-tab {
    padding: 6px 14px;
    border: 1px solid #ddd;
    background: #f8f8f8;
    border-radius: 20px;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s;
    color: #666;
}

.leaderboard-tab:hover {
    background: #e8e8e8;
    border-color: #4CAF50;
}

.leaderboard-tab.active {
    background: #4CAF50;
    color: #fff;
    border-color: #4CAF50;
}

.leaderboard-list {
    background: linear-gradient(160deg, #fefcf9 0%, #faf7f2 100%);
    border-radius: 28px;
    padding: 16px;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.8) inset,
        0 4px 16px rgba(0,0,0,0.05),
        0 1px 3px rgba(0,0,0,0.04);
    border: 1px solid rgba(255,255,255,0.6);
}

.leaderboard-item {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    border-bottom: 1px dashed #f0f0f0;
    transition: background 0.2s;
}

.leaderboard-item:last-child {
    border-bottom: none;
}

.leaderboard-item:hover {
    background: #f9f9f9;
}

.leaderboard-rank {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: normal;
    font-size: 14px;
    margin-right: 12px;
    flex-shrink: 0;
}

.leaderboard-rank-1 {
    background: #FFD700;
    color: #8B6914;
}

.leaderboard-rank-2 {
    background: #C0C0C0;
    color: #555;
}

.leaderboard-rank-3 {
    background: #CD7F32;
    color: #fff;
}

.leaderboard-rank-other {
    background: #e8e8e8;
    color: #888;
    font-size: 13px;
}

.leaderboard-nickname {
    flex: 1;
    font-weight: normal;
    color: #333;
    font-size: 14px;
}

.leaderboard-value {
    font-weight: normal;
    color: #4CAF50;
    font-size: 14px;
}

.leaderboard-empty {
    text-align: center;
    color: #888;
    padding: 20px;
    font-size: 14px;
}

.leaderboard-loading {
    text-align: center;
    color: #888;
    padding: 20px;
    font-size: 14px;
}

.leaderboard-crown {
    margin-right: 4px;
}

.leaderboard-current-user {
    background: #f0f8f0;
    border-radius: 8px;
}

.leaderboard-current-user .leaderboard-nickname {
    color: #4CAF50;
}

@media (max-width: 480px) {
    .leaderboard-tabs {
        gap: 6px;
    }
    .leaderboard-tab {
        font-size: 12px;
        padding: 4px 10px;
    }
    .leaderboard-item {
        padding: 8px 10px;
    }
}

/* ==================== 页面提示框 ==================== */
.page-notification {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    padding: 10px 16px;
    border-radius: 0 0 8px 8px;
    font-size: 14px;
    font-weight: normal;
    text-align: center;
    color: #fff;
    box-sizing: border-box;
    z-index: var(--z-max);
    transition: opacity 0.3s ease;
    line-height: 1.5;
}
.page-notification.show {
    display: block;
    animation: notifSlideDown 0.3s ease;
}
.page-notification.error { background: #ef4444; }
.page-notification.warning { background: #f59e0b; }
.page-notification.info { background: #3b82f6; }
.page-notification.success { background: #22c55e; }

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

/* ==================== 顶部确认通知栏 ==================== */
.confirm-bar-notification {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    position: fixed;
    top: -80px;
    left: 0;
    right: 0;
    max-width: 960px;
    margin: 0 auto;
    padding: 12px 20px;
    border-radius: 0 0 10px 10px;
    font-size: 14px;
    color: #fff;
    background: #2a2a3e;
    box-shadow: 0 4px 20px rgba(0,0,0,0.25);
    box-sizing: border-box;
    z-index: var(--z-max);
    transition: top 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    line-height: 1.5;
    flex-wrap: wrap;
}
.confirm-bar-notification.show {
    top: 0;
}
.confirm-bar-message {
    flex: 1;
    text-align: center;
    min-width: 200px;
    white-space: pre-wrap;
}
.confirm-bar-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}
.confirm-bar-btn {
    padding: 6px 18px;
    border: none;
    border-radius: 20px;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
    color: #fff;
}
.confirm-bar-btn.btn-confirm {
    background: linear-gradient(135deg, #66BB6A, #43A047);
}
.confirm-bar-btn.btn-confirm:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(67,160,71,0.4);
}
.confirm-bar-btn.btn-cancel {
    background: rgba(255,255,255,0.15);
}
.confirm-bar-btn.btn-cancel:hover {
    background: rgba(255,255,255,0.25);
}
body.dark-mode .confirm-bar-notification {
    background: #1e1f22;
    border: 1px solid rgba(255,255,255,0.08);
    border-top: none;
}

/* ==================== 金币通知（简化 — 使用 showToast 顶部提示条） ==================== */
/* 原卡片式样式已移除 — 金币变动提示现已使用全局顶部提示条（page-notification） */

/* ==================== 自定义弹框（旧版，保留降级） ==================== */
.custom-modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal);
    animation: modalFadeIn 0.2s ease;
}
.custom-modal-dialog {
    background: #2a2a3e;
    border: 1px solid #444;
    border-radius: 12px;
    padding: 0;
    width: 90%;
    max-width: 360px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    animation: modalSlideIn 0.25s ease;
    overflow: hidden;
}
.custom-modal-body {
    padding: 24px 20px 16px;
    text-align: center;
}
.custom-modal-body p {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: #e0e0e0;
    white-space: pre-line;
    word-break: break-word;
}
.custom-modal-footer {
    display: flex;
    border-top: 1px solid #3a3a50;
}
.custom-modal-btn {
    flex: 1;
    padding: 14px 0;
    border: none;
    background: transparent;
    font-size: 15px;
    font-weight: normal;
    cursor: pointer;
    transition: background 0.15s;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}
.custom-modal-btn.btn-confirm {
    color: #4CAF50;
    border-left: 1px solid #3a3a50;
}
.custom-modal-btn.btn-cancel {
    color: #aaa;
}
.custom-modal-btn:active {
    background: rgba(255,255,255,0.08);
}
.custom-modal-btn.btn-confirm:only-child {
    border-left: none;
    color: #4CAF50;
}
@keyframes modalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes modalSlideIn {
    from { opacity: 0; transform: translateY(20px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ==================== 鱼类特性系统样式 ==================== */

/* 特性文字标签（日志/弹窗中使用） */
.fish-trait-badge {
    display: inline-block;
    padding: 1px 8px;
    background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
    border: 1px solid #f39c12;
    border-radius: 12px;
    font-size: 12px;
    font-weight: normal;
    color: #8B4513;
    white-space: nowrap;
    margin-right: 4px;
    line-height: 1.6;
    vertical-align: middle;
}

/* 水族馆鱼特性徽章（浮动图标） */
.aquarium-trait-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    font-size: 14px;
    line-height: 1;
    z-index: var(--z-card);
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.5));
    pointer-events: none;
    animation: traitBadgeFloat 3s ease-in-out infinite;
}

@keyframes traitBadgeFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-3px);
    }
}

/* 带特性的物品栏格子：左上角彩色标识 + 右下小徽章 */
.inventory-item.has-trait::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 10px;
    height: 10px;
    background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
    clip-path: polygon(0 0, 100% 0, 0 100%);
    z-index: 2;
    pointer-events: none;
    border-top-left-radius: 14px;
}

.inventory-item.has-trait::after {
    content: '特性';
    position: absolute;
    bottom: 2px;
    right: 2px;
    font-size: 9px;
    line-height: 1;
    padding: 2px 4px;
    background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
    color: #fff;
    border-radius: 6px;
    font-weight: 500;
    letter-spacing: 0.3px;
    z-index: 2;
    pointer-events: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* 暗色模式下的特性标识 */
body.dark-mode .inventory-item.has-trait::after {
    background: linear-gradient(135deg, #f39c12 0%, #d35400 100%);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* ====== 钓鱼按钮悬停效果 ====== */
#fishButton:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 2px 0 rgba(255,255,255,0.15) inset, 0 12px 40px rgba(108,92,231,0.4), 0 4px 12px rgba(0,0,0,0.1) !important;
}

#fishButton:active {
    transform: translateY(2px) scale(0.98) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 2px 10px rgba(108,92,231,0.2) !important;
}

/* 滚动条美化 */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #d0d0d0;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #bbb;
}

/* 全局过渡效果 */
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 通用卡片样式 — 暖调亚麻质感 */
.soft-card {
    background: linear-gradient(160deg, #fefcf9 0%, #faf7f2 100%);
    border-radius: 28px;
    padding: 18px;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.8) inset,
        0 4px 16px rgba(0,0,0,0.05),
        0 1px 3px rgba(0,0,0,0.04);
    border: 1px solid rgba(255,255,255,0.6);
}

/* 胶囊按钮通用样式 — 轻拟物 */
.pill-btn {
    padding: 10px 24px;
    border-radius: 28px;
    border: none;
    font-weight: normal;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    font-family: inherit;
    font-size: 14px;
    letter-spacing: 0.01em;
}

.pill-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}

.pill-btn:active {
    transform: translateY(1px) scale(0.97);
    box-shadow: 0 2px 8px rgba(0,0,0,0.04), inset 0 1px 2px rgba(0,0,0,0.05);
}

/* 淡橙色强调 */
.accent-orange {
    color: #FFB347;
}

.bg-accent-orange {
    background: linear-gradient(155deg, #FFB347, #FF8C00);
}

/* 弥散光晕点缀 */
.glow-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #FFB347, #FF8C00);
    box-shadow: 0 0 12px rgba(255,179,71,0.3);
}

/* 分割线 — 更自然 */
hr {
    border: none;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0,0,0,0.04), transparent);
    margin: 16px 0;
}

/* ==================== 技能树样式（列式布局） ==================== */
#page-skills {
    padding: 16px;
    padding-bottom: 100px;
    overflow-y: auto;
}

.skill-points-bar {
    text-align: center;
    font-size: 17px;
    margin: 12px 0 20px;
    padding: 14px 20px;
    background: linear-gradient(160deg, #f0edff, #e8e3ff);
    border-radius: 20px;
    color: #5a4bd1;
    font-weight: normal;
    border: 1px solid rgba(108,92,231,0.15);
    box-shadow: 0 2px 12px rgba(108,92,231,0.08);
}

.skill-points-count {
    color: #6c5ce7;
    font-size: 20px;
}

/* ── 列容器 ── */
.skills-col-container {
    display: flex;
    flex-direction: row;
    gap: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 4px 0 8px;
    min-height: 400px;
    align-items: stretch;
}

/* ── 单列 ── */
.skill-col {
    flex: 1 1 0;
    min-width: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 6px;
}

/* ── 列头 ── */
.skill-col-header {
    text-align: center;
    padding: 12px 6px 10px;
    border-radius: 16px;
    width: 100%;
    background: linear-gradient(160deg, #f8f6ff, #f0edff);
    margin-bottom: 4px;
}

.skill-col-icon {
    display: block;
    font-size: 26px;
    margin-bottom: 2px;
}

.skill-col-name {
    font-size: 14px;
    font-weight: normal;
    color: #444;
}

/* ── 列头职业色 ── */
.skill-col[data-prof="fisher"] .skill-col-header { border-bottom: 3px solid #4fc3f7; }
.skill-col[data-prof="aquarium"] .skill-col-header { border-bottom: 3px solid #26a69a; }
.skill-col[data-prof="farmer"] .skill-col-header { border-bottom: 3px solid #66bb6a; }
.skill-col[data-prof="merchant"] .skill-col-header { border-bottom: 3px solid #ffa726; }
.skill-col[data-prof="crafter"] .skill-col-header { border-bottom: 3px solid #ef5350; }
.skill-col[data-prof="cook"] .skill-col-header { border-bottom: 3px solid #ab47bc; }

/* ── 列内容区 ── */
.skill-col-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 4px 0;
}

/* ── 技能卡片 ── */
.sk-card {
    width: 100%;
    height: 48px;
    padding: 4px 6px;
    border-radius: 12px;
    background: #fff;
    border: 1.5px solid #eee;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    box-sizing: border-box;
    cursor: default;
    user-select: none;
    overflow: hidden;
}

.sk-card.unlocked {
    cursor: pointer;
    background: #fff;
    border-color: #e8e4ff;
}

.sk-card.unlocked:hover {
    background: #f5f2ff;
    border-color: #6c5ce7;
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(108,92,231,0.15);
}

.sk-card.unlocked:active {
    transform: translateY(0) scale(0.97);
}

.sk-card.current {
    border-color: #6c5ce7;
    background: linear-gradient(135deg, #f5f2ff, #edeaff);
    box-shadow: 0 0 0 2px rgba(108,92,231,0.15);
}

.sk-card.locked {
    opacity: 0.45;
    background: #f8f8f8;
    border-color: #eee;
}

.sk-card.learnable {
    cursor: pointer;
    background: #fffef5;
    border-color: #ffd700;
    box-shadow: 0 0 0 2px rgba(255,215,0,0.2);
}

.sk-card.learnable:hover {
    background: #fffce8;
    border-color: #f0c000;
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(255,215,0,0.2);
}

.sk-card.learnable:active {
    transform: translateY(0) scale(0.97);
}

.sk-card.learnable .sk-card-level {
    color: #b8860b;
    background: #fff8d6;
}

.sk-card.canlearn {
    border-color: #ffd700;
}

/* 等级徽章 */
.sk-card-level {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: normal;
    color: #999;
    background: #f0f0f0;
    transition: all 0.2s;
}

.sk-card.current .sk-card-level {
    background: #6c5ce7;
    color: #fff;
    box-shadow: 0 2px 8px rgba(108,92,231,0.3);
}

.sk-card.unlocked .sk-card-level {
    color: #6c5ce7;
    background: #edeaff;
}

/* 技能信息 */
.sk-card-info {
    flex: 1;
    min-width: 0;
}

.sk-card-name {
    font-size: 12px;
    font-weight: normal;
    color: #333;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sk-card-effect {
    font-size: 10px;
    color: #888;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 状态标记 */
.sk-card-status {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: normal;
    color: #6c5ce7;
    background: #edeaff;
    opacity: 0;
    transition: opacity 0.2s;
}

.sk-card.unlocked:hover .sk-card-status {
    opacity: 1;
}

.sk-card-status.sk-card-locked {
    opacity: 1;
    background: transparent;
    font-size: 11px;
}

.sk-card-status.sk-card-canlearn {
    opacity: 1;
    background: #ffd700;
    color: #7a6200;
    font-weight: bold;
    font-size: 14px;
    box-shadow: 0 0 8px rgba(255,215,0,0.4);
    animation: sk-pulse 1.5s ease-in-out infinite;
}

@keyframes sk-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}

/* ── 顺序升级箭头 ── */
.sk-arrow {
    width: 18px;
    height: 18px;
    margin: 0 auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sk-arrow::after {
    content: '';
    display: block;
    width: 2px;
    height: 14px;
    border-radius: 2px;
    background: #ddd;
    transition: background 0.3s;
}

.sk-arrow::before {
    content: '';
    display: block;
    position: absolute;
    bottom: 1px;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid #ddd;
    transition: border-top-color 0.3s;
}

.sk-arrow.done::after {
    background: #6c5ce7;
}
.sk-arrow.done::before {
    border-top-color: #6c5ce7;
}

.sk-arrow.active::after {
    background: #b8a9ff;
}
.sk-arrow.active::before {
    border-top-color: #b8a9ff;
}

.sk-arrow.locked::after {
    background: #e8e8e8;
}
.sk-arrow.locked::before {
    border-top-color: #e8e8e8;
}

/* ── 列分割线 ── */
.skill-col-sep {
    flex: 0 0 auto;
    width: 1px;
    margin: 32px 10px 16px;
    background: linear-gradient(180deg, transparent 0%, #d8d8d8 12%, #d8d8d8 88%, transparent 100%);
    align-self: stretch;
}

/* ── 响应式 ── */
@media (max-width: 600px) {
    #page-skills {
        padding: 10px;
        padding-bottom: 90px;
    }
    .skill-points-bar {
        font-size: 15px;
        padding: 10px 14px;
        margin: 8px 0 14px;
    }
    .skills-col-container {
        padding: 2px 0 6px;
    }
    .skill-col {
        min-width: 80px;
        padding: 0 3px;
    }
    .skill-col-header {
        padding: 8px 4px 6px;
    }
    .skill-col-icon {
        font-size: 20px;
    }
    .skill-col-name {
        font-size: 12px;
    }
    .sk-card {
        padding: 5px 4px;
    }
    .sk-card-name {
        font-size: 11px;
    }
    .sk-card-effect {
        font-size: 9px;
    }
    .sk-card-level {
        width: 20px;
        height: 40px;
        font-size: 9px;
    }
    .skill-col-sep {
        margin: 24px 5px 12px;
    }
}

/* ==================== 鱼竿系统样式 ==================== */
#page-rods, #forgeRodsContent {
    padding: 16px;
    padding-bottom: 100px;
    overflow-y: auto;
}
#page-rods h3, #forgeRodsContent h3 {
    font-size: 16px;
    font-weight: normal;
    color: #444;
    margin: 16px 0 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}
#page-rods .rod-section, #forgeRodsContent .rod-section {
    margin-bottom: 8px;
}

/* 鱼竿卡片 */
.rod-card {
    background: linear-gradient(160deg, #fefcf9 0%, #faf7f2 100%);
    border-radius: 20px;
    padding: 16px;
    border: 1px solid rgba(255,255,255,0.6);
    box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset, 0 4px 16px rgba(0,0,0,0.05);
    margin-bottom: 10px;
    position: relative;
    transition: all 0.2s;
}
.rod-card.equipped {
    border: 2px solid #ffc107;
    box-shadow: 0 0 0 2px rgba(255,193,7,0.15), 0 4px 16px rgba(0,0,0,0.05);
}
/* 鱼竿卡片图片 */
.rod-card-image {
    text-align: center;
    margin-bottom: 12px;
}
.rod-card-image img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    image-rendering: auto;
    border-radius: 12px;
    background: rgba(255,255,255,0.3);
    padding: 8px;
}
.rod-card .rod-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.rod-card .rod-name {
    font-size: 15px;
    font-weight: normal;
}
.rod-card .rod-tier-badge {
    font-size: 11px;
    padding: 2px 10px;
    border-radius: 10px;
    color: #fff;
    font-weight: normal;
}
.rod-desc {
    font-size: 12px;
    color: #aaa;
    font-style: italic;
    margin: 4px 0 6px;
    padding: 4px 8px;
    background: rgba(255,255,255,0.04);
    border-radius: 6px;
    line-height: 1.4;
}
.rod-card .rod-empty {
    color: #999;
    font-size: 13px;
    text-align: center;
    padding: 12px 0;
}

/* 耐久条 */
.rod-durability-bar {
    height: 6px;
    background: #e8e8e8;
    border-radius: 3px;
    overflow: hidden;
    margin: 6px 0;
}
.rod-durability-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s, background 0.3s;
}
.rod-durability-label {
    font-size: 11px;
    color: #888;
    display: flex;
    justify-content: space-between;
    margin-bottom: 2px;
}

/* 词条标签 */
.rod-affixes {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 8px 0;
}
.rod-affix-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    background: #e8e0ff;
    color: #5a4bd1;
    border: 1px solid rgba(108,92,231,0.12);
}
.rod-affix-badge .affix-tier {
    font-size: 9px;
    opacity: 0.6;
}

/* 操作按钮 */
.rod-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
}
.rod-btn {
    padding: 6px 14px;
    border-radius: 14px;
    border: none;
    font-size: 12px;
    font-weight: normal;
    cursor: pointer;
    transition: all 0.2s;
}
.rod-btn:hover {
    transform: translateY(-1px);
}
.rod-btn:active {
    transform: scale(0.96);
}
.rod-btn-equip {
    background: linear-gradient(160deg, #6c5ce7, #5a4bd1);
    color: #fff;
}
.rod-btn-unequip {
    background: #f0f0f0;
    color: #666;
}
.rod-btn-reroll {
    background: linear-gradient(160deg, #ff9800, #f57c00);
    color: #fff;
}
.rod-btn-repair {
    background: linear-gradient(160deg, #4CAF50, #388E3C);
    color: #fff;
}
.rod-btn-decompose {
    background: linear-gradient(160deg, #ef5350, #d32f2f);
    color: #fff;
}
.rod-btn-disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.rod-btn-disabled:hover {
    transform: none;
}

/* 鱼竿网格 */
.rod-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
}
.rod-grid .rod-card {
    cursor: pointer;
    margin-bottom: 0;
}
.rod-grid .rod-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}
.rod-grid .rod-card.selected {
    border-color: #6c5ce7;
    box-shadow: 0 0 0 2px rgba(108,92,231,0.2);
}

/* 洗练结果 */
.reroll-result {
    background: rgba(108,92,231,0.06);
    border: 1px solid rgba(108,92,231,0.12);
    border-radius: 16px;
    padding: 14px;
    margin-top: 12px;
    font-size: 13px;
    color: #555;
    line-height: 1.6;
}
.reroll-result .old {
    color: #ef5350;
    text-decoration: line-through;
}
.reroll-result .new {
    color: #4CAF50;
    font-weight: normal;
}

@media (max-width: 600px) {
    #page-rods, #forgeRodsContent {
        padding: 10px;
        padding-bottom: 90px;
    }
    .rod-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 8px;
    }
    .rod-card {
        padding: 12px;
    }
}

/* ====== 夜间模式 — 补充覆盖 ====== */
body.dark-mode .login-prompt {
    background: rgba(30, 31, 34, 0.85);
    color: var(--text-primary);
    border-color: rgba(255,255,255,0.08);
}
body.dark-mode .login-prompt span {
    color: var(--text-secondary);
}
body.dark-mode .login-prompt i {
    color: #5865f2;
}
body.dark-mode .online-count {
    background: var(--bg-card-solid);
    color: var(--text-secondary);
}
/* ====== 夜间模式 - 自定义下拉 & 按钮 ====== */
body.dark-mode .custom-select-trigger {
    background: linear-gradient(155deg, rgba(50, 52, 60, 0.92), rgba(40, 42, 48, 0.88));
    border-color: rgba(255,255,255,0.1);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.06) inset,
        0 4px 16px rgba(0,0,0,0.3);
}

body.dark-mode .custom-select-trigger:hover {
    box-shadow:
        0 1px 0 rgba(255,255,255,0.08) inset,
        0 8px 22px rgba(0,0,0,0.4);
}

body.dark-mode .custom-select.open .custom-select-trigger {
    box-shadow:
        0 1px 0 rgba(255,255,255,0.08) inset,
        0 0 0 2px rgba(160, 148, 245, 0.35),
        0 8px 22px rgba(160, 148, 245, 0.25);
    border-color: rgba(160, 148, 245, 0.4);
}

body.dark-mode .select-field-icon {
    background: linear-gradient(155deg, rgba(160, 148, 245, 0.22), rgba(108, 92, 231, 0.14));
    box-shadow: 0 1px 2px rgba(0,0,0,0.25);
}

body.dark-mode .custom-select-label {
    color: var(--text-primary);
}

body.dark-mode .custom-select-sub {
    color: var(--text-muted);
}

body.dark-mode .custom-select-sub #currentBaitCount {
    color: #66bb6a;
}

body.dark-mode .custom-select-arrow {
    color: #a094f5;
}

body.dark-mode .custom-select.open .custom-select-arrow {
    color: #b5a9ff;
}

/* 选项面板夜间 */
body.dark-mode .custom-select-options-wrapper {
    background: linear-gradient(155deg, rgba(54, 56, 64, 0.96), rgba(44, 46, 54, 0.94));
    border-color: rgba(255,255,255,0.1);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.06) inset,
        0 14px 40px rgba(0,0,0,0.5),
        0 4px 14px rgba(160, 148, 245, 0.15);
}

body.dark-mode .custom-select-options {
    background: none;
    border-color: transparent;
    box-shadow: none;
}

body.dark-mode .custom-select-option:hover {
    background: linear-gradient(155deg, rgba(160, 148, 245, 0.12), rgba(108, 92, 231, 0.08));
}

body.dark-mode .custom-select-option.selected {
    background: linear-gradient(155deg, rgba(160, 148, 245, 0.22), rgba(108, 92, 231, 0.15));
    box-shadow: 0 0 0 1px rgba(160, 148, 245, 0.35) inset;
}

body.dark-mode .custom-select-option.selected:hover {
    background: linear-gradient(155deg, rgba(160, 148, 245, 0.28), rgba(108, 92, 231, 0.2));
}

body.dark-mode .custom-select-option-name {
    color: var(--text-primary);
}

body.dark-mode .custom-select-option-meta {
    color: var(--text-muted);
}

body.dark-mode .custom-select-option-meta .count {
    color: #66bb6a;
}

body.dark-mode .custom-select-option-meta .empty {
    color: #ef7b7b;
}

body.dark-mode .custom-select-option-check {
    background: linear-gradient(155deg, #a094f5, #7c6df0);
    box-shadow: 0 2px 6px rgba(160, 148, 245, 0.4);
}

/* 次级按钮夜间模式 */
body.dark-mode .btn-build {
    background: linear-gradient(155deg, #8b5a2b, #6d4421);
}
body.dark-mode .btn-refresh {
    background: linear-gradient(155deg, #4a98d4, #2e72b0);
}
body.dark-mode .btn-pet {
    background: linear-gradient(155deg, #6a5ce0, #5b4cdb);
}
body.dark-mode .page-notification {
    background: rgba(30, 31, 34, 0.9);
    color: var(--text-primary);
    border-color: rgba(255,255,255,0.08);
}
body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea {
    background: var(--bg-input);
    color: var(--text-primary);
    border-color: rgba(255,255,255,0.12);
}
body.dark-mode input:focus,
body.dark-mode select:focus,
body.dark-mode textarea:focus {
    border-color: #5865f2;
    box-shadow: 0 0 0 3px rgba(88, 101, 242, 0.15);
}
body.dark-mode .chat-header {
    background: var(--bg-card);
    border-color: rgba(255,255,255,0.06);
}
body.dark-mode .chat-header h2 {
    color: var(--text-primary);
}
body.dark-mode .online-info {
    background: rgba(143,133,255,0.12);
    color: var(--accent, #8f85ff);
}
body.dark-mode .online-dot {
    background: #34d399;
}
body.dark-mode .mailbox-btn {
    background: rgba(143,133,255,0.12);
    border-color: rgba(255,255,255,0.06);
    color: var(--accent, #8f85ff);
}
body.dark-mode .mailbox-btn:hover {
    background: rgba(143,133,255,0.2);
    border-color: var(--accent, #8f85ff);
}
body.dark-mode .chat-messages {
    background: transparent;
}
body.dark-mode .chat-message {
    color: var(--text-primary);
}
body.dark-mode .chat-username {
    color: var(--text-secondary);
}
body.dark-mode .chat-message.my-message .chat-username {
    color: var(--accent, #8f85ff);
}
body.dark-mode .chat-time {
    color: var(--text-muted);
}
body.dark-mode .chat-message-content {
    background: var(--bg-card);
    border-color: rgba(255,255,255,0.06);
    color: var(--text-primary);
}
body.dark-mode .chat-message.my-message .chat-message-content {
    background: var(--accent, #8f85ff);
    color: #fff;
    border-color: transparent;
}
body.dark-mode .chat-message.system-message .chat-message-content {
    background: linear-gradient(135deg, rgba(143, 133, 255, 0.18), rgba(168, 85, 247, 0.12));
    color: var(--accent, #b8a9ff);
    border-color: rgba(143, 133, 255, 0.25);
}
body.dark-mode .chat-message-username {
    color: var(--text-secondary);
}
body.dark-mode .chat-message-text {
    color: var(--text-primary);
}
body.dark-mode .chat-input-container {
    background: var(--bg-card);
    border-color: rgba(255,255,255,0.06);
}
body.dark-mode .chat-input {
    background: rgba(255,255,255,0.04);
    color: var(--text-primary);
    border-color: rgba(255,255,255,0.08);
}
body.dark-mode .chat-input:focus {
    background: rgba(255,255,255,0.06);
    border-color: var(--accent, #8f85ff);
}
body.dark-mode .send-button {
    background: var(--accent, #8f85ff);
}
body.dark-mode .send-button:hover {
    background: #a79dff;
}
body.dark-mode .gift-button {
    background: rgba(143,133,255,0.12);
    color: var(--accent, #8f85ff);
    border-color: rgba(255,255,255,0.06);
}
body.dark-mode .gift-button:hover {
    background: rgba(143,133,255,0.2);
    border-color: var(--accent, #8f85ff);
}
body.dark-mode .empty-state {
    color: var(--text-muted);
}
body.dark-mode .empty-state h3 {
    color: var(--text-secondary);
}
body.dark-mode .chat-message.gift-message {
    background: rgba(247, 199, 116, 0.12);
    border-color: rgba(247, 199, 116, 0.3);
}
body.dark-mode .chat-message.gift-message .chat-message-content {
    color: #f5c774;
}
body.dark-mode .gift-card {
    background: rgba(255,255,255,0.04);
}
body.dark-mode .gift-card-title,
body.dark-mode .gift-card-detail {
    color: #f5c774;
}
body.dark-mode .gift-claim-btn {
    background: var(--accent, #8f85ff);
}
body.dark-mode .gift-claim-btn:hover {
    background: #a79dff;
}
body.dark-mode .chat-messages::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.12);
}

/* 暗色模式 - 出售/详情弹窗 */
body.dark-mode .sell-modal {
    background: var(--bg-card);
    border-color: rgba(255,255,255,0.06);
}
body.dark-mode .sell-modal-title {
    color: var(--text-primary);
}
body.dark-mode .sell-modal-close {
    background: rgba(255,255,255,0.06);
    color: var(--text-muted);
}
body.dark-mode .sell-modal-close:hover {
    background: rgba(255,255,255,0.06);
    color: var(--text-muted);
}
body.dark-mode .sell-modal-image {
    background: linear-gradient(155deg, rgba(143,133,255,0.12), rgba(143,133,255,0.04));
    border-color: rgba(143,133,255,0.15);
}
body.dark-mode .sell-modal-info {
    color: var(--text-secondary);
}
body.dark-mode .sell-modal-info strong {
    color: var(--text-primary);
}
body.dark-mode .sell-modal-gold {
    color: #f5c774;
}
body.dark-mode .sell-btn-info {
    background: rgba(143,133,255,0.12);
    border-color: rgba(143,133,255,0.2);
    color: var(--accent, #8f85ff);
}
body.dark-mode .sell-btn-info:hover {
    background: rgba(143,133,255,0.2);
}
body.dark-mode .sell-btn-secondary {
    border-color: rgba(255,255,255,0.08);
    color: var(--text-secondary);
}
body.dark-mode .sell-btn-secondary:hover {
    background: rgba(255,255,255,0.06);
    color: var(--text-primary);
}

/* 暗色模式 - 上架弹窗 */
body.dark-mode .list-modal {
    background: var(--bg-card);
    border-color: rgba(255,255,255,0.06);
}
body.dark-mode .list-modal-title {
    color: var(--text-primary);
}
body.dark-mode .list-modal-close {
    background: rgba(255,255,255,0.06);
    color: var(--text-muted);
}
body.dark-mode .list-modal-close:hover {
    background: var(--accent, #8f85ff);
    color: #fff;
}
body.dark-mode .list-modal-media img,
body.dark-mode .list-modal-media #listItemIcon {
    background: linear-gradient(155deg, rgba(143,133,255,0.12), rgba(143,133,255,0.04));
    border-color: rgba(143,133,255,0.15);
}
body.dark-mode .list-modal-media #listItemIcon {
    color: var(--accent, #8f85ff);
}
body.dark-mode .list-fish-name {
    color: var(--text-primary);
}
body.dark-mode .list-fish-details {
    color: var(--text-muted);
}
body.dark-mode .list-original-price {
    color: var(--text-secondary);
}
body.dark-mode .list-price-gold {
    color: #f5c774;
}
body.dark-mode .list-modal-label {
    color: var(--text-secondary);
}
body.dark-mode .list-modal-input {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.08);
    color: var(--text-primary);
}
body.dark-mode .list-modal-input:focus {
    background: rgba(255,255,255,0.08);
    border-color: var(--accent, #8f85ff);
    box-shadow: 0 0 0 3px rgba(143,133,255,0.15);
}
body.dark-mode .list-count-btn {
    background: rgba(143,133,255,0.12);
    border-color: rgba(255,255,255,0.08);
    color: var(--accent, #8f85ff);
}
body.dark-mode .list-count-btn:hover {
    background: rgba(143,133,255,0.2);
    border-color: rgba(143,133,255,0.3);
}
body.dark-mode .list-count-input {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.08);
    color: var(--text-primary);
}
body.dark-mode .list-count-input:focus {
    background: rgba(255,255,255,0.08);
    border-color: var(--accent, #8f85ff);
    box-shadow: 0 0 0 3px rgba(143,133,255,0.15);
}
body.dark-mode .list-max-btn {
    background: rgba(143,133,255,0.12);
    border-color: rgba(143,133,255,0.2);
    color: var(--accent, #8f85ff);
}
body.dark-mode .list-max-btn:hover {
    background: rgba(143,133,255,0.2);
}
body.dark-mode .list-count-meta {
    color: var(--text-muted);
}
body.dark-mode .list-btn-secondary {
    background: transparent;
    border-color: rgba(255,255,255,0.08);
    color: var(--text-secondary);
}
body.dark-mode .list-btn-secondary:hover {
    background: rgba(255,255,255,0.06);
    color: var(--text-primary);
}

body.dark-mode .dm-header {
    background: var(--chat-header-bg);
    border-color: rgba(255,255,255,0.06);
}
body.dark-mode .dm-header h3,
body.dark-mode .mailbox-header h2 {
    color: var(--text-primary);
}
body.dark-mode .dm-conversation-item {
    border-color: rgba(255,255,255,0.06);
}
body.dark-mode .dm-conversation-item:hover {
    background: rgba(255,255,255,0.05);
}
body.dark-mode .dm-conversation-name {
    color: var(--text-primary);
}
body.dark-mode .dm-conversation-preview {
    color: var(--text-muted);
}
body.dark-mode .dm-messages {
    background: transparent;
}
body.dark-mode .dm-message.other .dm-message-bubble {
    background: var(--chat-msg-other-bg);
    color: var(--text-primary);
}
body.dark-mode .dm-input {
    background: rgba(255,255,255,0.06);
    color: var(--text-primary);
    border-color: rgba(255,255,255,0.1);
}
body.dark-mode .mailbox-header {
    background: var(--chat-header-bg);
    border-color: rgba(255,255,255,0.06);
}
body.dark-mode .mail-item {
    border-color: rgba(255,255,255,0.06);
    color: var(--text-primary);
}
body.dark-mode .mail-item:hover {
    background: rgba(255,255,255,0.05);
}
body.dark-mode .mail-item-title {
    color: var(--text-primary);
}
body.dark-mode .mailbox-detail-content {
    color: var(--text-secondary);
}
body.dark-mode .farm-grid {
    background: rgba(255,255,255,0.03);
}
body.dark-mode .farm-plot {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.08);
}
body.dark-mode .farm-plot:hover {
    background: rgba(255,255,255,0.1);
}
body.dark-mode .farm-info {
    color: var(--text-secondary);
}
body.dark-mode .farm-storage {
    background: rgba(255,255,255,0.03);
}
body.dark-mode .farm-upgrade-section p {
    color: var(--text-muted);
}
body.dark-mode .build-section {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.06);
}
body.dark-mode .build-section-title {
    color: var(--text-primary);
    border-bottom-color: rgba(255,255,255,0.08);
}
body.dark-mode .upgrade-info {
    background: rgba(255,255,255,0.03);
    color: var(--text-secondary);
}
body.dark-mode .upgrade-cost h3 {
    color: var(--text-secondary);
}
body.dark-mode .trade-tab {
    color: var(--text-muted);
}
body.dark-mode .trade-tab.active {
    background: rgba(255,255,255,0.1);
    color: var(--text-primary);
}
body.dark-mode .market-filters {
    background: rgba(255,255,255,0.03);
    border-color: rgba(255,255,255,0.06);
}
body.dark-mode .filter-group label {
    color: var(--text-muted);
}
body.dark-mode .filter-group select {
    background: rgba(255,255,255,0.06)
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'><path d='M3 4.5L6 7.5L9 4.5' stroke='%238F85FF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>")
        no-repeat right 12px center;
    color: var(--text-primary);
    border-color: rgba(255,255,255,0.1);
}
body.dark-mode .filter-group select:hover {
    background-color: rgba(143,133,255,0.08);
    border-color: rgba(143,133,255,0.35);
}
body.dark-mode .filter-group select:focus {
    background-color: rgba(255,255,255,0.08);
    border-color: var(--accent, #8f85ff);
    box-shadow: 0 0 0 3px rgba(143,133,255,0.15);
}
body.dark-mode .cs-trigger {
    background: rgba(255,255,255,0.05);
    color: var(--text-primary);
    border-color: rgba(255,255,255,0.1);
}
body.dark-mode .cs-trigger::after {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'><path d='M3 4.5L6 7.5L9 4.5' stroke='%238F85FF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
body.dark-mode .cs-trigger:hover {
    border-color: rgba(143,133,255,0.35);
    background-color: rgba(143,133,255,0.08);
}
body.dark-mode .custom-select.open .cs-trigger {
    border-color: var(--accent, #8f85ff);
    background-color: rgba(255,255,255,0.08);
    box-shadow: 0 0 0 3px rgba(143,133,255,0.15);
}
body.dark-mode .cs-menu {
    background: #1a1a24;
    border-color: rgba(255,255,255,0.08);
    box-shadow: 0 6px 20px rgba(0,0,0,0.4);
}
body.dark-mode .cs-option {
    color: var(--text-secondary);
}
body.dark-mode .cs-option:hover {
    background: rgba(143,133,255,0.12);
    color: var(--accent, #8f85ff);
}
body.dark-mode .cs-option.selected {
    background: linear-gradient(135deg, #8f85ff, #a89fff);
    color: #fff;
}
body.dark-mode .shop-category h4 {
    color: var(--text-heading);
}

body.dark-mode .shop-cats {
    background: rgba(255,255,255,0.05);
}

body.dark-mode .shop-cat-tab {
    color: var(--text-muted);
}

body.dark-mode .shop-cat-tab:hover {
    color: var(--text-secondary);
    background: rgba(255,255,255,0.05);
}

body.dark-mode .shop-cat-tab.active {
    background: rgba(255,255,255,0.12);
    color: var(--text-primary);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15), 0 1px 0 rgba(255,255,255,0.05) inset;
}
body.dark-mode .inventory-item {
    background: linear-gradient(155deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
    border-color: rgba(255,255,255,0.1);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
}
body.dark-mode .inventory-item.quality-常见 {
    background: linear-gradient(155deg, rgba(102,187,106,0.18), rgba(102,187,106,0.04));
    border-color: rgba(102, 187, 106, 0.6);
}
body.dark-mode .inventory-item.quality-罕见 {
    background: linear-gradient(155deg, rgba(66,165,245,0.18), rgba(66,165,245,0.04));
    border-color: rgba(66, 165, 245, 0.6);
}
body.dark-mode .inventory-item.quality-稀有 {
    background: linear-gradient(155deg, rgba(171,71,188,0.2), rgba(171,71,188,0.05));
    border-color: rgba(171, 71, 188, 0.6);
}
body.dark-mode .inventory-item.quality-史诗 {
    background: linear-gradient(155deg, rgba(255,152,0,0.22), rgba(255,152,0,0.05));
    border-color: rgba(255, 152, 0, 0.7);
}
body.dark-mode .inventory-item.quality-传说 {
    background: linear-gradient(155deg, rgba(239,83,80,0.25), rgba(239,83,80,0.06));
    border-color: rgba(239, 83, 80, 0.75);
    box-shadow:
        inset 0 0 0 1px rgba(239,83,80,0.3),
        0 0 14px rgba(239,83,80,0.35);
}
body.dark-mode .inventory-item img {
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.4));
}
body.dark-mode .aquarium {
    border-color: rgba(255,255,255,0.06);
}
body.dark-mode .aquarium-header {
    color: var(--text-primary);
}
body.dark-mode .listed-item {
    border-color: rgba(255,255,255,0.06);
    background: rgba(255,255,255,0.03);
}
body.dark-mode .listed-item:hover {
    background: rgba(255,255,255,0.06);
}
body.dark-mode .listed-item-media {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.06);
}
body.dark-mode .listed-item-title {
    color: var(--text-primary);
}
body.dark-mode .listed-item-meta {
    color: var(--text-muted);
}
body.dark-mode .listed-item-meta strong {
    color: var(--text-secondary);
}
body.dark-mode .listed-item-unlist-btn {
    background: transparent;
    color: var(--text-secondary);
    border-color: rgba(255,255,255,0.1);
}
body.dark-mode .listed-item-unlist-btn:hover {
    background: #f44336;
    color: #fff;
    border-color: #f44336;
}
body.dark-mode .listed-empty {
    background: rgba(255,255,255,0.03);
    border-color: rgba(255,255,255,0.08);
}
body.dark-mode .listed-empty-title {
    color: var(--text-primary);
}
body.dark-mode .quality-btn {
    background: rgba(255,255,255,0.06);
    color: var(--text-secondary);
    border-color: rgba(255,255,255,0.12);
}
body.dark-mode .quality-btn:hover {
    background: rgba(255,255,255,0.12);
}
body.dark-mode .quality-btn[data-quality="普通"] { color: var(--color-quality-label); border-color: var(--color-quality-label); }
body.dark-mode .quality-btn[data-quality="常见"] { color: var(--color-common-label); border-color: var(--color-common-label); }
body.dark-mode .quality-btn[data-quality="罕见"] { color: var(--color-rare-label); border-color: var(--color-rare-label); }
body.dark-mode .quality-btn[data-quality="稀有"] { color: var(--color-epic-label); border-color: var(--color-epic-label); }
body.dark-mode .quality-btn[data-quality="史诗"] { color: var(--color-legendary-label); border-color: var(--color-legendary-label); }
body.dark-mode .quality-btn.selected {
    color: white !important;
}
body.dark-mode .leaderboard-tab {
    color: var(--text-muted);
}
body.dark-mode .leaderboard-tab.active {
    background: rgba(255,255,255,0.1);
    color: var(--text-primary);
}
body.dark-mode .skill-points-bar {
    color: var(--text-primary);
}
body.dark-mode .skill-card {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.08);
}
body.dark-mode .skill-card h4 {
    color: var(--text-primary);
}
body.dark-mode .skill-card p {
    color: var(--text-muted);
}
body.dark-mode .rod-section h3 {
    color: var(--text-heading);
}
body.dark-mode .rod-card {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.08);
    color: var(--text-primary);
}
body.dark-mode .rod-card:hover {
    background: rgba(255,255,255,0.08);
}
body.dark-mode .rod-name {
    color: var(--text-primary);
}
body.dark-mode .rod-rarity {
    color: var(--text-muted);
}
body.dark-mode .rod-stats {
    color: var(--text-secondary);
}
body.dark-mode .rod-durability-label {
    color: var(--text-muted);
}
body.dark-mode .rod-durability-bar {
    background: rgba(255,255,255,0.1);
}
body.dark-mode .reroll-select-hint {
    color: var(--text-muted);
}
body.dark-mode .workshop-storage h3 {
    color: var(--text-heading);
}
body.dark-mode .workshop-recipes {
    color: var(--text-primary);
}
body.dark-mode .workshop-progress h3 {
    color: var(--text-heading);
}
body.dark-mode .craft-queue-card {
    background: rgba(255,255,255,0.06) !important;
    border-color: rgba(255,255,255,0.12) !important;
    color: var(--text-primary);
}
body.dark-mode .craft-total-bar {
    background: rgba(255,255,255,0.08) !important;
    border-color: #42A5F5 !important;
    color: var(--text-primary);
}
body.dark-mode .craft-queue-card.completed {
    border-color: #4CAF50 !important;
}
body.dark-mode .event-countdown {
    background: rgba(30, 31, 34, 0.9);
}
body.dark-mode .gift-type-btn,
body.dark-mode .gift-category-btn {
    background: rgba(255,255,255,0.06);
    color: var(--text-primary);
    border-color: rgba(255,255,255,0.12);
}
body.dark-mode .gift-type-btn:hover,
body.dark-mode .gift-category-btn:hover {
    background: rgba(255,255,255,0.12);
}
body.dark-mode .gift-preview {
    background: rgba(88, 101, 242, 0.1);
    color: var(--text-primary);
}
body.dark-mode .reroll-result {
    color: var(--text-primary);
}
body.dark-mode .reroll-result .old {
    color: #ef5350;
}
body.dark-mode .reroll-result .new {
    color: #66BB6A;
}
body.dark-mode .custom-modal-overlay {
    background: var(--bg-overlay);
}
body.dark-mode .custom-modal-dialog {
    background: var(--bg-modal);
    color: var(--text-primary);
}
body.dark-mode .custom-modal-body p {
    color: var(--text-primary);
}
body.dark-mode .mini-fishing-display {
    background: #1a1a2e !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.6);
}
body.dark-mode #eventCountdown {
    background: linear-gradient(135deg, #1e1f22, #2b2d31) !important;
    color: var(--text-primary);
}
body.dark-mode #eventStartModal {
    background: rgba(0,0,0,0.6) !important;
}
body.dark-mode #eventBanner {
    background: linear-gradient(135deg, #c0392b, #e74c3c) !important;
}
body.dark-mode .stats-grid p,
body.dark-mode .stat-item {
    color: var(--text-secondary);
}
body.dark-mode .leaderboard-content p {
    color: var(--text-muted);
}
body.dark-mode .leaderboard-entry {
    color: var(--text-primary);
}
body.dark-mode .farm-plot .plant-name {
    color: var(--text-primary);
}
body.dark-mode .farm-plot .plant-status {
    color: var(--text-muted);
}
body.dark-mode .storage-items p {
    color: var(--text-muted);
}
body.dark-mode .empty-state h3 {
    color: var(--text-heading);
}
body.dark-mode .empty-state p {
    color: var(--text-muted);
}

/* ====== 可访问性：焦点可见性 ====== */
:focus-visible {
    outline: 2px solid #5865f2;
    outline-offset: 2px;
    border-radius: 4px;
}

button:focus-visible,
.nav-button:focus-visible,
.inventory-item:focus-visible,
.quality-btn:focus-visible,
.build-tab:focus-visible,
.popout-item:focus-visible {
    outline: 2px solid #5865f2;
    outline-offset: 2px;
}

/* 减少动画偏好（尊重用户系统设置） */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* 打印友好：隐藏导航栏 */
@media print {
    .nav-bar,
    .user-popout,
    .mail-badge,
    .nav-badge {
        display: none !important;
    }
    body {
        padding-left: 0 !important;
        background: white !important;
        color: black !important;
    }
}

/* ====== 成就系统样式 ====== */
.ach-page {
    padding: 16px;
    max-width: 720px;
    margin: 0 auto;
    font-family: var(--font-game);
}
.ach-header {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: 24px 20px;
    margin-bottom: 16px;
    border: var(--border-card);
    box-shadow: var(--shadow-card);
    text-align: center;
}
.ach-header h2 {
    margin: 0 0 10px 0;
    font-size: 22px;
    color: var(--text-heading);
    font-weight: normal;
    letter-spacing: 1px;
}
.ach-header-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.ach-score {
    font-size: 13px;
    color: var(--text-secondary);
    background: var(--bg-btn-default);
    padding: 4px 14px;
    border-radius: var(--radius-pill);
    font-family: var(--font-game);
}
.ach-current-title {
    font-size: 14px;
    background: linear-gradient(135deg, #f5c774, #e8a830);
    color: #fff;
    padding: 4px 16px;
    border-radius: var(--radius-pill);
    font-weight: normal;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.ach-title-select {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
}
.ach-title-select select {
    padding: 6px 14px;
    border-radius: var(--radius-md);
    border: var(--border-card);
    background: var(--bg-card-solid);
    color: var(--text-primary);
    font-size: 13px;
    font-family: var(--font-game);
    max-width: 220px;
    cursor: pointer;
}
.ach-title-hint {
    font-size: 12px;
    color: var(--text-muted);
}

/* 称号画廊 */
.ach-title-gallery {
    padding: 0 4px;
}
.ach-title-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
    margin-top: 12px;
}
.ach-title-card {
    background: var(--bg-card);
    border: var(--border-card);
    border-radius: var(--radius-md);
    padding: 16px 12px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: var(--shadow-card);
}
.ach-title-card:hover {
    border-color: rgba(245, 199, 116, 0.5);
    box-shadow: 0 2px 12px rgba(245, 199, 116, 0.15);
    transform: translateY(-2px);
}
.ach-title-card.equipped {
    border-color: #e8a830;
    background: linear-gradient(155deg, rgba(245, 199, 116, 0.12), rgba(232, 168, 48, 0.04));
    box-shadow: 0 2px 12px rgba(232, 168, 48, 0.2);
}
.ach-title-card.locked {
    opacity: 0.5;
    cursor: default;
}
.ach-title-card.locked:hover {
    transform: none;
    border-color: var(--border-card);
    box-shadow: var(--shadow-card);
}
.ach-title-card-icon {
    font-size: 30px;
    margin-bottom: 6px;
}
.ach-title-card-name {
    font-size: 14px;
    font-weight: normal;
    color: var(--text-primary);
    margin-bottom: 4px;
}
.ach-title-card-source {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 6px;
}
.ach-title-card-status {
    font-size: 11px;
    color: #e8a830;
    font-weight: normal;
}
.ach-title-card.equipped .ach-title-card-status {
    color: #e8a830;
}
.ach-cat-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
    justify-content: center;
}
.ach-cat-tab {
    padding: 8px 18px;
    border-radius: var(--radius-pill);
    border: var(--border-card);
    background: var(--bg-card);
    color: var(--text-secondary);
    font-size: 13px;
    font-family: var(--font-game);
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: var(--shadow-card);
}
.ach-cat-tab.active {
    background: linear-gradient(135deg, #f5c774, #e8a830);
    color: #fff;
    border-color: transparent;
    font-weight: normal;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.ach-cat-tab:hover:not(.active) {
    background: var(--bg-btn-hover);
    color: var(--text-primary);
}
.ach-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.ach-card {
    background: var(--bg-card);
    border-radius: var(--radius-md);
    padding: 18px;
    border: var(--border-card);
    box-shadow: var(--shadow-card);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ach-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-card-hover);
}
.ach-card-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}
.ach-icon {
    font-size: 28px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-btn-default);
    border-radius: var(--radius-md);
    flex-shrink: 0;
}
.ach-card-title {
    flex: 1;
    min-width: 0;
}
.ach-name {
    display: block;
    font-size: 16px;
    font-weight: normal;
    color: var(--text-heading);
    margin-bottom: 2px;
}
.ach-desc {
    display: block;
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}
.ach-stars {
    font-size: 16px;
    color: #f5c774;
    letter-spacing: 2px;
    flex-shrink: 0;
}
.ach-progress-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}
.ach-progress-bar {
    flex: 1;
    height: 8px;
    background: var(--bg-btn-default);
    border-radius: var(--radius-pill);
    overflow: hidden;
}
.ach-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #f5c774, #e8a830);
    border-radius: var(--radius-pill);
    transition: width 0.4s ease;
    box-shadow: 0 0 6px rgba(245, 199, 116, 0.4);
}
.ach-progress-text {
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
    min-width: 60px;
    text-align: right;
}
.ach-reward-info {
    font-size: 12px;
    color: var(--text-muted);
    padding-top: 10px;
    border-top: 1px solid var(--border-card);
}
.ach-empty {
    text-align: center;
    padding: 48px 20px;
    color: var(--text-muted);
    font-size: 14px;
}
/* 成就通知 */
.achievement-notify {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(-100px);
    background: linear-gradient(135deg, #f5c774, #e8a830);
    color: #fff;
    padding: 14px 28px;
    border-radius: var(--radius-lg);
    font-size: 15px;
    font-weight: normal;
    font-family: var(--font-game);
    box-shadow: 0 4px 20px rgba(245, 199, 116, 0.4), 0 1px 0 rgba(255,255,255,0.3) inset;
    z-index: var(--z-max);
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    max-width: 90vw;
    text-align: center;
    pointer-events: none;
    text-shadow: 0 1px 2px rgba(0,0,0,0.15);
    letter-spacing: 0.5px;
}
.achievement-notify.show {
    transform: translateX(-50%) translateY(0);
}
/* 成就系统 - 深色模式 */
body.dark-mode .ach-header,
body.dark-mode .ach-card,
body.dark-mode .ach-cat-tab,
body.dark-mode .ach-title-card {
    background: var(--bg-card);
    border-color: var(--border-card);
    box-shadow: var(--shadow-card);
}
body.dark-mode .ach-icon {
    background: var(--bg-btn-default);
}
body.dark-mode .ach-cat-tab.active {
    background: linear-gradient(135deg, #f5c774, #e8a830);
    color: #fff;
}
body.dark-mode .ach-cat-tab:hover:not(.active) {
    background: var(--bg-btn-hover);
}
body.dark-mode .ach-progress-bar {
    background: var(--bg-btn-default);
}
body.dark-mode .ach-reward-info {
    border-top-color: var(--border-card);
}
body.dark-mode .ach-title-select select {
    background: var(--bg-card-solid);
    border-color: var(--border-card);
    color: var(--text-primary);
}
body.dark-mode .ach-score {
    background: var(--bg-btn-default);
    color: var(--text-secondary);
}

/* ====== 天气预报页面 ====== */
.forecast-page {
    max-width: 600px;
    margin: 0 auto;
    padding: 16px;
}
.forecast-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 16px;
}
.forecast-header h2 {
    margin: 0;
    font-size: 20px;
}
.forecast-update {
    font-size: 13px;
    color: #999;
}
.forecast-empty {
    text-align: center;
    color: #999;
    padding: 60px 20px;
    font-size: 15px;
}
.forecast-current {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 12px;
    background: var(--card-bg, #f8f9fa);
    border: 1px solid var(--border-color, #eee);
    border-left: 4px solid var(--forecast-color, #FFB300);
    margin-bottom: 4px;
}
.forecast-current-icon {
    font-size: 42px;
    line-height: 1;
}
.forecast-current-weather {
    font-size: 20px;
    font-weight: 600;
}
.forecast-current-desc {
    font-size: 13px;
    color: var(--text-secondary, #666);
    margin-top: 2px;
}
.forecast-current-time {
    font-size: 12px;
    color: #999;
    margin-top: 4px;
}
.forecast-progress-track {
    height: 4px;
    border-radius: 2px;
    background: var(--bg-secondary, #e9ecef);
    margin: 0 0 20px 0;
    overflow: hidden;
}
.forecast-progress-fill {
    height: 100%;
    border-radius: 2px;
    background: linear-gradient(90deg, #667eea, #764ba2);
    transition: width 30s linear;
}
.forecast-timeline {
    position: relative;
    padding-left: 20px;
}
.forecast-date-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary, #666);
    padding: 8px 0 4px;
    margin-left: 10px;
}
.forecast-date-divider {
    height: 12px;
}
.forecast-seg {
    position: relative;
    padding: 6px 0 6px 10px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.forecast-seg-dot {
    position: absolute;
    left: -26px;
    top: 13px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px var(--border-color, #ddd);
    z-index: 1;
}
.forecast-current-seg .forecast-seg-dot {
    width: 14px;
    height: 14px;
    top: 12px;
    left: -27px;
    box-shadow: 0 0 0 2px var(--forecast-color, #667eea);
}
.forecast-seg-line {
    position: absolute;
    left: -20px;
    top: 20px;
    bottom: -6px;
    width: 2px;
    background: var(--border-color, #e0e0e0);
}
.forecast-seg:last-child .forecast-seg-line {
    display: none;
}
.forecast-seg-content {
    flex: 1;
    padding: 8px 12px;
    border-radius: 8px;
    background: var(--card-bg, #f8f9fa);
    border: 1px solid var(--border-color, #eee);
    transition: transform 0.15s;
}
.forecast-seg-content:hover {
    transform: translateX(2px);
}
.forecast-seg-header {
    display: flex;
    align-items: center;
    gap: 6px;
}
.forecast-seg-icon {
    font-size: 18px;
}
.forecast-seg-name {
    font-weight: 600;
    font-size: 14px;
}
.forecast-seg-extreme {
    font-size: 11px;
    background: #ff6b6b;
    color: #fff;
    padding: 0 6px;
    border-radius: 4px;
    line-height: 18px;
}
.forecast-seg-now {
    font-size: 11px;
    background: #667eea;
    color: #fff;
    padding: 0 6px;
    border-radius: 4px;
    line-height: 18px;
}
.forecast-seg-time {
    font-size: 12px;
    color: #999;
    margin-top: 3px;
}
.forecast-seg-desc {
    font-size: 12px;
    color: var(--text-secondary, #666);
    margin-top: 2px;
}
/* 天气预报 - 深色模式 */
body.dark-mode .forecast-current,
body.dark-mode .forecast-seg-content {
    background: var(--dark-card-bg, #2a2a2e);
    border-color: var(--dark-border, #3a3a3e);
}
body.dark-mode .forecast-progress-track {
    background: var(--dark-bg-secondary, #333);
}
body.dark-mode .forecast-seg-dot {
    border-color: var(--dark-bg, #1a1a1e);
}
body.dark-mode .forecast-seg-line {
    background: var(--dark-border, #3a3a3e);
}

/* ====== 📊 每日统计面板 ====== */
.ds-page {
    padding: 16px;
    max-width: 680px;
    margin: 0 auto;
    font-family: var(--font-game);
}
.ds-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    flex-wrap: wrap;
    gap: 10px;
    background: var(--bg-card);
    border: var(--border-card);
    box-shadow: var(--shadow-card);
    border-radius: var(--radius-lg);
    padding: 18px 20px;
}
.ds-header h2 {
    margin: 0;
    font-size: 20px;
    color: var(--text-heading);
    font-weight: normal;
    letter-spacing: 0.5px;
}
.ds-date-nav {
    display: flex;
    align-items: center;
    gap: 8px;
}
.ds-nav-btn {
    width: 34px;
    height: 34px;
    border: var(--border-card);
    border-radius: 50%;
    background: var(--bg-card-solid);
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    color: var(--text-primary);
    box-shadow: var(--shadow-card);
}
.ds-nav-btn:hover {
    background: linear-gradient(135deg, #f5c774, #e8a830);
    color: #fff;
    border-color: transparent;
    transform: scale(1.08);
}
.ds-date-text {
    font-size: 14px;
    min-width: 120px;
    text-align: center;
    color: var(--text-heading);
    font-weight: normal;
}
.ds-today-btn {
    padding: 5px 14px;
    border: 1px solid #e8a830;
    border-radius: var(--radius-pill);
    background: transparent;
    color: #e8a830;
    cursor: pointer;
    font-size: 12px;
    font-family: var(--font-game);
    transition: all 0.2s ease;
}
.ds-today-btn:hover {
    background: linear-gradient(135deg, #f5c774, #e8a830);
    color: #fff;
}
.ds-loading {
    text-align: center;
    padding: 60px 20px;
    font-size: 16px;
    color: var(--text-muted);
    font-family: var(--font-game);
}
.ds-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
    font-family: var(--font-game);
}
.ds-empty-icon {
    font-size: 48px;
    margin-bottom: 12px;
}

/* 活跃概览条 */
.ds-summary-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    background: linear-gradient(135deg, rgba(245, 199, 116, 0.15), rgba(232, 168, 48, 0.08));
    border-radius: var(--radius-md);
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 16px;
    flex-wrap: wrap;
    border: 1px solid rgba(245, 199, 116, 0.2);
}
.ds-bar-sep {
    color: var(--text-muted);
    opacity: 0.4;
}

/* 板块 */
.ds-section {
    background: var(--bg-card);
    border-radius: var(--radius-md);
    padding: 18px;
    margin-bottom: 14px;
    border: var(--border-card);
    box-shadow: var(--shadow-card);
}
.ds-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-card);
}
.ds-section-icon {
    font-size: 20px;
}
.ds-section-title {
    font-size: 16px;
    color: var(--text-heading);
    font-weight: normal;
    letter-spacing: 0.5px;
}

/* 统计卡片网格 */
.ds-stat-grid {
    display: grid;
    gap: 10px;
}
.ds-stat-grid-2 { grid-template-columns: repeat(2, 1fr); }
.ds-stat-grid-3 { grid-template-columns: repeat(3, 1fr); }
.ds-stat-grid-4 { grid-template-columns: repeat(4, 1fr); }
.ds-stat-grid-5 { grid-template-columns: repeat(5, 1fr); }

.ds-stat-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 10px;
    background: var(--bg-card-solid);
    border-radius: var(--radius-md);
    border: var(--border-card);
    transition: all 0.2s ease;
    box-shadow: var(--shadow-card);
}
.ds-stat-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-card-hover);
}
.ds-stat-icon {
    font-size: 22px;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-btn-default);
    border-radius: var(--radius-sm);
}
.ds-stat-body {
    min-width: 0;
    flex: 1;
}
.ds-stat-value {
    font-size: 17px;
    color: var(--text-heading);
    line-height: 1.2;
    font-weight: normal;
}
.ds-stat-label {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* 柱状图 */
.ds-chart {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ds-bar-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.ds-bar-label {
    width: 80px;
    font-size: 13px;
    color: var(--text-secondary);
    text-align: right;
    flex-shrink: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ds-bar-track {
    flex: 1;
    height: 18px;
    background: var(--bg-btn-default);
    border-radius: var(--radius-pill);
    overflow: hidden;
    min-width: 40px;
}
.ds-bar-fill {
    height: 100%;
    border-radius: var(--radius-pill);
    transition: width 0.5s ease;
    min-width: 6px;
    position: relative;
}
.ds-bar-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(to bottom, rgba(255,255,255,0.3), transparent);
    border-radius: var(--radius-pill) var(--radius-pill) 0 0;
}
.ds-bar-value {
    width: 40px;
    font-size: 13px;
    color: var(--text-primary);
    text-align: right;
    flex-shrink: 0;
    font-weight: normal;
}

/* 进度行 */
.ds-progress-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 12px;
}
.ds-progress-item {
    font-size: 12px;
    color: var(--text-secondary);
    background: var(--bg-card-solid);
    padding: 6px 12px;
    border-radius: var(--radius-pill);
    border: var(--border-card);
    box-shadow: var(--shadow-card);
}

/* 经济板块 */
.ds-economy-summary {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.ds-econ-item {
    flex: 1;
    min-width: 90px;
    padding: 14px 10px;
    border-radius: var(--radius-md);
    text-align: center;
    border: var(--border-card);
    background: var(--bg-card-solid);
    box-shadow: var(--shadow-card);
    transition: all 0.2s ease;
}
.ds-econ-item:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-card-hover);
}
.ds-econ-label {
    display: block;
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 6px;
}
.ds-econ-val {
    font-size: 18px;
}
.ds-econ-income .ds-econ-val { color: #4CAF50; }
.ds-econ-outcome .ds-econ-val { color: #f44336; }
.ds-econ-detail {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 10px;
    text-align: center;
    padding-top: 10px;
    border-top: 1px solid var(--border-card);
}

/* 分水域统计表格 */
.ds-area-table {
    font-size: 13px;
    background: var(--bg-card-solid);
    border-radius: var(--radius-md);
    overflow: hidden;
    border: var(--border-card);
}
.ds-area-row {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-card);
    gap: 10px;
}
.ds-area-row:last-child {
    border-bottom: none;
}
.ds-area-total {
    background: linear-gradient(135deg, rgba(245, 199, 116, 0.15), rgba(232, 168, 48, 0.08));
    font-weight: normal;
}
.ds-area-name {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-heading);
}
.ds-area-stat {
    text-align: right;
    min-width: 48px;
    color: var(--text-secondary);
}
.ds-area-rate {
    color: #e8a830;
    min-width: 56px;
    font-weight: normal;
}

/* 进度条行 */
.ds-progress-bar-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.ds-prog-item {
    flex: 1;
    min-width: 110px;
    padding: 14px 10px;
    background: var(--bg-card-solid);
    border-radius: var(--radius-md);
    border: var(--border-card);
    text-align: center;
    box-shadow: var(--shadow-card);
    transition: all 0.2s ease;
}
.ds-prog-item:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-card-hover);
}
.ds-prog-label {
    display: block;
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 4px;
}
.ds-prog-val {
    font-size: 17px;
    color: var(--text-heading);
    font-weight: normal;
}
.ds-prog-sub {
    display: block;
    font-size: 11px;
    color: #e8a830;
    margin-top: 4px;
}

/* 深色模式 - 每日统计 */
body.dark-mode .ds-header,
body.dark-mode .ds-section {
    background: var(--bg-card);
    border-color: var(--border-card);
    box-shadow: var(--shadow-card);
}
body.dark-mode .ds-section-header {
    border-bottom-color: var(--border-card);
}
body.dark-mode .ds-stat-card,
body.dark-mode .ds-econ-item,
body.dark-mode .ds-prog-item,
body.dark-mode .ds-area-table,
body.dark-mode .ds-progress-item {
    background: var(--bg-card-solid);
    border-color: var(--border-card);
    box-shadow: var(--shadow-card);
}
body.dark-mode .ds-stat-icon {
    background: var(--bg-btn-default);
}
body.dark-mode .ds-bar-track {
    background: var(--bg-btn-default);
}
body.dark-mode .ds-bar-label,
body.dark-mode .ds-stat-label,
body.dark-mode .ds-econ-label,
body.dark-mode .ds-prog-label,
body.dark-mode .ds-area-stat,
body.dark-mode .ds-econ-detail {
    color: var(--text-muted);
}
body.dark-mode .ds-stat-value,
body.dark-mode .ds-bar-value,
body.dark-mode .ds-prog-val,
body.dark-mode .ds-date-text,
body.dark-mode .ds-area-name {
    color: var(--text-primary);
}
body.dark-mode .ds-nav-btn {
    background: var(--bg-card-solid);
    border-color: var(--border-card);
    color: var(--text-primary);
}
body.dark-mode .ds-summary-bar {
    background: linear-gradient(135deg, rgba(245, 199, 116, 0.2), rgba(232, 168, 48, 0.1));
    border-color: rgba(245, 199, 116, 0.25);
}
body.dark-mode .ds-area-total {
    background: linear-gradient(135deg, rgba(245, 199, 116, 0.15), rgba(232, 168, 48, 0.08));
}
body.dark-mode .ds-econ-income .ds-econ-val { color: #66BB6A; }
body.dark-mode .ds-econ-outcome .ds-econ-val { color: #ef5350; }
body.dark-mode .ds-prog-sub {
    color: #f5c774;
}
body.dark-mode .ds-area-rate {
    color: #f5c774;
}

/* ====== 移动端底部导航栏 ====== */
.mobile-tab-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-max);
    display: none;
    background: linear-gradient(160deg, #fefcf9 0%, #faf7f2 100%);
    border-top: 1px solid rgba(255,255,255,0.6);
    box-shadow: 0 -2px 12px rgba(0,0,0,0.06);
    padding: 0;
    padding-bottom: env(safe-area-inset-bottom);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.mobile-tab-bar::-webkit-scrollbar {
    display: none;
}

body.dark-mode .mobile-tab-bar {
    background: linear-gradient(160deg, #2b2d31 0%, #232428 100%);
    border-top: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 -2px 12px rgba(0,0,0,0.3);
}

.mobile-tab-scroll {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 6px 8px;
    gap: 2px;
    min-width: 100%;
}

.mobile-tab-item {
    flex-shrink: 0;
    min-width: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 6px 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    border: none;
    background: none;
    color: #999;
    font-family: var(--font-game);
    font-size: 11px;
    border-radius: 10px;
}

body.dark-mode .mobile-tab-item {
    color: #6d6f78;
}

.mobile-tab-item i {
    font-size: 20px;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.mobile-tab-item.active {
    color: #e8a830;
    background: rgba(232, 168, 48, 0.08);
}

body.dark-mode .mobile-tab-item.active {
    color: #f5c774;
    background: rgba(245, 199, 116, 0.1);
}

.mobile-tab-item.active i {
    transform: translateY(-2px) scale(1.1);
    filter: drop-shadow(0 2px 4px rgba(232, 168, 48, 0.3));
}

body.dark-mode .mobile-tab-item.active i {
    filter: drop-shadow(0 2px 6px rgba(245, 199, 116, 0.4));
}

.mobile-tab-item:active {
    transform: scale(0.92);
}

.mobile-tab-separator {
    flex-shrink: 0;
    width: 1px;
    height: 28px;
    background: rgba(0,0,0,0.08);
    margin: 0 4px;
}

body.dark-mode .mobile-tab-separator {
    background: rgba(255,255,255,0.1);
}

/* ====== 移动端响应式布局 ====== */
@media (max-width: 768px) {
    html, body {
        overflow-x: hidden;
        -webkit-tap-highlight-color: transparent;
    }

    *, *::before, *::after {
        box-sizing: border-box !important;
    }

    body {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* ===== 全局宽度保护：确保所有页面元素不超出屏幕 ===== */
    .main-content,
    .page-content,
    .content-area {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    /* 页面容器宽度保护 */
    .page {
        overflow-x: hidden !important;
    }

    /* 确保所有图片不超出容器 */
    img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* 长文本自动换行（排除底部导航等特殊元素） */
    .page p,
    .page span,
    .page div,
    .page h1, .page h2, .page h3, .page h4, .page h5, .page h6,
    .text, .content, .label, .title, .desc {
        word-wrap: break-word !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        white-space: normal !important;
    }

    /* 表格响应式 */
    .page table {
        max-width: 100% !important;
        width: 100% !important;
        table-layout: fixed !important;
    }

    .page td, .page th {
        word-wrap: break-word !important;
        word-break: break-word !important;
        max-width: 100% !important;
    }

    /* 输入框宽度适配 */
    .page input, .page textarea, .page select, .page button {
        max-width: 100% !important;
    }

    /* 防止主内容区水平滚动 */
    main,
    .main-content,
    #mainContent {
        overflow-x: hidden !important;
    }

    /* 隐藏左侧侧边栏 */
    .nav-bar {
        display: none !important;
    }

    /* 显示底部导航栏 */
    .mobile-tab-bar {
        display: block;
    }

    /* 页面内容区适配 */
    .page {
        padding: 12px 14px !important;
        padding-bottom: calc(80px + env(safe-area-inset-bottom)) !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 顶部栏适配刘海屏 */
    .top-bar {
        padding-top: calc(8px + env(safe-area-inset-top)) !important;
    }

    /* 字体缩小 */
    h1 { font-size: 20px !important; }
    h2 { font-size: 18px !important; }
    h3 { font-size: 16px !important; }

    /* 弹窗适配 */
    .farm-modal,
    .sell-modal,
    .list-modal,
    .vault-modal,
    .custom-modal-dialog,
    .achievement-modal-content {
        max-width: 92vw !important;
        width: 92vw !important;
        max-height: 80vh !important;
        overflow-y: auto !important;
    }

    /* 按钮点击区域 */
    .btn,
    button {
        min-height: 40px !important;
    }

    /* 迷你钓鱼浮窗 — 移动端不隐藏，抬高避开底部导航栏 */
    .mini-fishing-display {
        bottom: calc(70px + env(safe-area-inset-bottom)) !important;
    }

    /* ===== 首页布局移动端适配 ===== */
    .hero-row {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .hero-left-col {
        flex: 0 0 auto !important;
        width: 100% !important;
    }

    /* 三个下拉框纵向单独排列，每个占一排 */
    .hero-row .select-row {
        flex: 0 0 auto !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .hero-row .select-row .custom-select {
        flex: 1 1 100% !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .hero-row .log-container-side {
        flex: 0 0 auto !important;
        max-height: 140px !important;
        width: 100% !important;
    }

    /* 首页物品栏+仓库：两列并排 */
    .home-inventory-section > div {
        gap: 10px !important;
    }

    .home-inventory-section .inventory-container {
        flex: 1 !important;
        min-width: 0 !important;
        padding: 14px !important;
    }

    /* 角色图容器调整 */
    .image-container {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* 顶部资源栏 */
    .stats-container-top {
        padding: 10px 12px !important;
    }

    .gold-section {
        font-size: 14px !important;
    }

    .materials-container {
        gap: 4px !important;
    }

    .material-item {
        font-size: 12px !important;
    }

    /* 用户弹出菜单适配 */
    .user-popout {
        max-width: 90vw !important;
    }

    /* ===== 资源栏移动端优化 ===== */
    .stats-container {
        padding: 8px 12px !important;
        gap: 10px !important;
        flex-wrap: wrap;
    }

    .gold-section {
        padding: 6px 12px !important;
        gap: 6px !important;
    }

    .gold-icon { font-size: 16px !important; }
    .gold-value { font-size: 15px !important; }
    .gold-label { font-size: 12px !important; }

    .materials-container {
        gap: 6px !important;
        justify-content: flex-start !important;
    }

    .material-item {
        padding: 4px 10px !important;
        font-size: 12px !important;
    }

    /* ===== 水族馆/背包页 ===== */
    .aquarium {
        height: 220px !important;
    }

    .inventory-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 8px !important;
        max-width: 100% !important;
    }

    .inventory-item {
        width: 100% !important;
        aspect-ratio: 1 !important;
        height: auto !important;
    }

    /* ===== 交易行页 ===== */
    .trade-tabs {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    .trade-tab {
        flex: 1 1 calc(33.333% - 6px) !important;
        min-width: 0 !important;
        font-size: 13px !important;
        padding: 8px 10px !important;
    }

    .trade-items {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
    }

    .trade-item {
        width: 100% !important;
        aspect-ratio: 1 !important;
        height: auto !important;
    }

    .trade-page-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }

    .listed-item {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }

    .listed-item-price {
        margin-right: 0 !important;
    }

    /* ===== 渔仓页 ===== */
    .vault-page-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }

    /* ===== 农田页 ===== */
    .farm-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    .farm-plot {
        aspect-ratio: 1 !important;
    }

    /* ===== 工坊页 ===== */
    .workshop-recipe {
        padding: 12px !important;
    }

    /* ===== 成就页 ===== */
    .achievement-item,
    .achievement-card {
        padding: 12px !important;
    }

    /* ===== 聊天页 ===== */
    .chat-container {
        flex-direction: column !important;
    }

    /* ===== 日报/每日统计页 ===== */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    /* ===== 鱼竿页 ===== */
    .rod-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /* ===== 技能页 ===== */
    .skill-col {
        padding: 10px !important;
    }

    /* ===== 通用卡片优化 ===== */
    .card {
        padding: 14px !important;
    }

    .section-title {
        font-size: 16px !important;
    }

    /* ===== 表格适配 ===== */
    table {
        font-size: 12px !important;
    }

    th, td {
        padding: 8px 10px !important;
    }

    /* ===== 表单元素 ===== */
    input, select, textarea {
        font-size: 14px !important;
    }

    .custom-select {
        min-height: 40px !important;
    }

    /* ===== 首页下拉框优化：解决文字显示不全 ===== */
    .hero-row .select-row .custom-select .custom-select-trigger {
        padding: 8px 10px 8px 8px !important;
        gap: 6px !important;
    }

    .hero-row .select-row .custom-select .select-field-icon {
        width: 28px !important;
        height: 28px !important;
        border-radius: 10px !important;
        font-size: 14px !important;
    }

    .hero-row .select-row .custom-select .custom-select-label {
        font-size: 12px !important;
    }

    .hero-row .select-row .custom-select .custom-select-sub {
        font-size: 10px !important;
    }

    .hero-row .select-row .custom-select .custom-select-arrow {
        font-size: 12px !important;
        width: 12px !important;
    }

    /* ===== 顶部栏进一步优化 ===== */
    .top-bar {
        padding-top: calc(6px + env(safe-area-inset-top)) !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        margin-bottom: 6px !important;
        gap: 8px !important;
    }

    .online-count-top-left {
        font-size: 11px !important;
        padding: 4px 10px !important;
    }

    .time-display,
    .weather-display {
        height: 34px !important;
        padding: 0 14px !important;
        min-width: auto !important;
        font-size: 13px !important;
        border-radius: 20px !important;
    }

    .weather-display #weatherIcon {
        font-size: 16px !important;
    }

    /* ===== 资源栏材料优化 ===== */
    .materials-container {
        gap: 4px !important;
    }

    .material-item {
        padding: 4px 8px !important;
        font-size: 11px !important;
        gap: 4px !important;
    }

    .material-icon {
        width: 20px !important;
        height: 20px !important;
    }

    .material-emoji {
        font-size: 16px !important;
    }

    .material-count {
        font-size: 11px !important;
    }

    /* ===== 首页渔获区优化 ===== */
    .home-inventory-section > div {
        flex-direction: column !important;
    }

    .home-inventory-section .inventory-container {
        width: 100% !important;
    }

    /* ===== 钓鱼页/背包页优化 ===== */
    #page-fishing > div[style*="display: flex"] {
        flex-direction: column !important;
        gap: 12px !important;
    }

    /* ===== 交易行市场筛选优化 ===== */
    .market-filters {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        gap: 8px !important;
        padding: 12px 14px !important;
    }

    .market-filters::-webkit-scrollbar {
        display: none !important;
    }

    .market-filters .filter-group {
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 100px !important;
    }

    .market-filters .filter-group label {
        font-size: 11px !important;
        white-space: nowrap !important;
    }

    .market-filters .filter-group select {
        width: auto !important;
        min-width: 80px !important;
        font-size: 12px !important;
        padding: 7px 28px 7px 10px !important;
    }

    /* 市场商品卡片缩小 */
    .global-trade-list {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
    }

    .global-trade-item {
        padding: 8px !important;
        border-radius: 14px !important;
    }

    .global-trade-media {
        border-radius: 10px !important;
        margin-bottom: 6px !important;
    }

    .global-trade-media .trade-item-icon {
        font-size: 28px !important;
    }

    .global-trade-info h4 {
        font-size: 11px !important;
        margin-bottom: 2px !important;
    }

    .global-trade-info .trade-seller {
        font-size: 9px !important;
    }

    .global-trade-info .trade-desc {
        font-size: 9px !important;
    }

    .global-trade-price {
        font-size: 12px !important;
        margin-bottom: 6px !important;
    }

    .global-trade-buy-btn {
        padding: 5px 8px !important;
        font-size: 11px !important;
        border-radius: 10px !important;
        min-height: 26px !important;
    }

    /* ===== 渔市两列改单列 ===== */
    .fish-market-columns {
        flex-direction: column !important;
        gap: 12px !important;
    }

    .fish-market-col {
        width: 100% !important;
    }

    /* ===== 排行榜标签优化 ===== */
    .leaderboard-tabs {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    .leaderboard-tab {
        flex: 1 1 calc(50% - 6px) !important;
        min-width: 0 !important;
        font-size: 12px !important;
        padding: 8px 10px !important;
    }

    /* ===== 聊天室优化 ===== */
    .chat-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }

    .chat-header-left h2 {
        font-size: 18px !important;
    }

    /* ===== 工坊配方优化 ===== */
    .workshop-recipes {
        grid-template-columns: 1fr !important;
    }

    /* ===== 农田页面优化 ===== */
    .farm-container {
        padding: 12px !important;
    }

    .farm-upgrade-section {
        margin-bottom: 12px !important;
    }

    .farm-storage {
        margin-top: 12px !important;
    }

    /* ===== 成就页优化 ===== */
    .ach-cat-tabs {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    .ach-cat-tab {
        flex: 1 1 calc(33.333% - 6px) !important;
        min-width: 0 !important;
        font-size: 12px !important;
        padding: 8px 10px !important;
    }

    /* ===== 每日统计页优化 ===== */
    .ds-summary-bar {
        flex-wrap: wrap !important;
        gap: 6px !important;
        justify-content: center !important;
    }

    .ds-stat-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    .ds-stat-grid-3,
    .ds-stat-grid-4,
    .ds-stat-grid-5 {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .ds-stat-card {
        padding: 10px !important;
    }

    .ds-stat-value {
        font-size: 16px !important;
    }

    .ds-stat-label {
        font-size: 11px !important;
    }

    .ds-area-table {
        font-size: 12px !important;
    }

    .ds-area-row {
        padding: 6px 8px !important;
    }

    .ds-economy-summary {
        flex-direction: column !important;
        gap: 8px !important;
    }

    .ds-progress-bar-row {
        flex-direction: column !important;
        gap: 8px !important;
    }

    .ds-bar-row {
        gap: 6px !important;
    }

    .ds-bar-label {
        font-size: 11px !important;
        min-width: 60px !important;
    }

    .ds-bar-value {
        font-size: 11px !important;
        min-width: 40px !important;
    }

    /* ===== 天气预报页优化 ===== */
    .forecast-current {
        flex-direction: column !important;
        text-align: center !important;
        gap: 10px !important;
        padding: 16px !important;
    }

    .forecast-current-icon {
        font-size: 48px !important;
    }

    .forecast-timeline {
        padding-left: 10px !important;
    }

    .forecast-seg-content {
        padding: 10px !important;
    }

    /* ===== 财务日报页优化 ===== */
    .finance-page {
        padding: 12px 10px !important;
        max-width: 100% !important;
    }

    .finance-header {
        padding: 10px 12px !important;
        gap: 8px !important;
        margin-bottom: 14px !important;
        flex-wrap: wrap !important;
    }

    .finance-nav-btn {
        padding: 6px 10px !important;
        font-size: 14px !important;
    }

    .finance-date-title {
        font-size: 16px !important;
        padding: 5px 12px !important;
    }

    .finance-today-btn {
        padding: 5px 10px !important;
        font-size: 12px !important;
    }

    .finance-summary-card {
        padding: 16px 14px !important;
        margin-bottom: 14px !important;
    }

    .finance-summary-net {
        font-size: 22px !important;
        margin-bottom: 12px !important;
    }

    .finance-summary-row {
        flex-direction: column !important;
        gap: 8px !important;
        align-items: center !important;
        padding-top: 12px !important;
    }

    .finance-summary-income,
    .finance-summary-expense {
        font-size: 14px !important;
        width: 100% !important;
        text-align: center !important;
    }

    .finance-section-label {
        font-size: 13px !important;
        padding: 4px 2px !important;
        margin-bottom: 6px !important;
    }

    .finance-category {
        margin-bottom: 8px !important;
    }

    .finance-cat-header {
        padding: 10px 12px !important;
        gap: 8px !important;
    }

    .finance-cat-icon {
        width: 28px !important;
        height: 28px !important;
        font-size: 16px !important;
    }

    .finance-cat-name {
        font-size: 14px !important;
    }

    .finance-cat-total {
        font-size: 14px !important;
    }

    .finance-cat-body {
        padding: 2px 12px 10px !important;
    }

    .finance-subcategory {
        padding: 5px 0 5px 14px !important;
        font-size: 12px !important;
    }

    .finance-detail-header {
        font-size: 13px !important;
        padding: 12px 4px 8px !important;
    }

    .finance-detail-list {
        padding-top: 8px !important;
    }

    .finance-tx-item {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 6px !important;
        padding: 10px 8px !important;
    }

    .finance-tx-time {
        font-size: 11px !important;
    }

    .finance-tx-desc {
        padding: 0 !important;
        font-size: 13px !important;
    }

    .finance-tx-amount {
        align-self: flex-end !important;
        font-size: 14px !important;
    }

    .finance-empty {
        padding: 40px 20px !important;
        font-size: 14px !important;
    }

    .finance-calendar {
        padding: 12px !important;
        margin-bottom: 14px !important;
    }

    .finance-cal-nav {
        margin-bottom: 10px !important;
        font-size: 14px !important;
    }

    .finance-cal-nav button {
        padding: 3px 10px !important;
        font-size: 12px !important;
    }

    .finance-cal-day {
        min-height: 38px !important;
        padding: 6px 2px !important;
        font-size: 12px !important;
    }

    .finance-cal-day-num {
        font-size: 12px !important;
    }

    .finance-cal-day-net {
        font-size: 9px !important;
    }

    /* ===== 底部导航栏安全区域适配 ===== */
    .mobile-tab-bar {
        padding-bottom: calc(6px + env(safe-area-inset-bottom)) !important;
    }

    .mobile-tab-item {
        min-width: 56px !important;
        padding: 6px 6px !important;
        font-size: 10px !important;
    }

    .mobile-tab-item i {
        font-size: 18px !important;
    }

    /* ===== 弹窗进一步适配 ===== */
    .farm-modal,
    .sell-modal,
    .list-modal,
    .vault-modal {
        margin: 0 !important;
        border-radius: 20px 20px 0 0 !important;
        max-height: 85vh !important;
    }

    .login-modal,
    .mailbox-panel,
    .dm-panel {
        max-width: 92vw !important;
        width: 92vw !important;
        max-height: 85vh !important;
    }

    /* ===== 建造升级弹窗优化 ===== */
    .modal {
        max-width: 92vw !important;
        width: 92vw !important;
        max-height: 80vh !important;
        overflow-y: auto !important;
    }

    .build-tabs {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    .build-tab {
        flex: 1 1 calc(33.333% - 6px) !important;
        min-width: 0 !important;
        font-size: 13px !important;
        padding: 8px 10px !important;
    }

    /* ===== 顶部栏时间天气胶囊进一步缩小 ===== */
    .top-bar-center .time-display,
    .top-bar-center .weather-display {
        height: 32px !important;
        padding: 0 12px !important;
        font-size: 12px !important;
        border-radius: 18px !important;
    }

    .top-bar-center .weather-display #weatherIcon {
        font-size: 14px !important;
    }

    /* ===== 首页角色图容器优化 ===== */
    .hero-left-col .image-container {
        height: 160px !important;
    }

    .hero-left-col .image-container .rest-image,
    .hero-left-col .image-container .fishing-image,
    .hero-left-col .image-container .caught-image,
    .hero-left-col .image-container .disappointed-image,
    .hero-left-col .image-container .item-get-image {
        height: 100px !important;
    }

    /* ===== 钓鱼主按钮优化 ===== */
    .btn-primary-fish-side {
        padding: 12px 20px !important;
        font-size: 15px !important;
    }

    /* ===== 首页物品栏标题栏优化 ===== */
    .inventory-container > div:first-child {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }

    .inventory-container > div:first-child h3 {
        font-size: 14px !important;
    }

    .quality-buttons {
        flex-wrap: wrap !important;
        gap: 4px !important;
    }

    .quality-btn {
        font-size: 11px !important;
        padding: 4px 10px !important;
    }

    /* ===== 交易行标签页优化 ===== */
    .trade-tabs {
        gap: 6px !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        padding: 4px !important;
    }

    .trade-tabs::-webkit-scrollbar {
        display: none !important;
    }

    .trade-tab {
        flex: 0 0 auto !important;
        min-width: 70px !important;
        font-size: 12px !important;
        padding: 8px 14px !important;
        white-space: nowrap !important;
    }

    /* ===== 农田页面进一步优化 ===== */
    .farm-upgrade-btn {
        width: 100% !important;
        font-size: 14px !important;
        padding: 10px 16px !important;
    }

    .farm-storage h3 {
        font-size: 15px !important;
    }

    /* ===== 鱼竿页面优化 ===== */
    .rod-card {
        padding: 12px !important;
    }

    .rod-card h4 {
        font-size: 14px !important;
    }

    /* ===== 技能树页面优化 ===== */
    .skill-tree-container {
        padding: 10px !important;
    }

    .skill-node {
        width: 60px !important;
        height: 60px !important;
        font-size: 11px !important;
    }

    /* ===== 聊天室输入区优化 ===== */
    .chat-input-container {
        padding: 8px 10px !important;
        gap: 6px !important;
    }

    .chat-input {
        font-size: 14px !important;
        padding: 8px 12px !important;
    }

    .send-button,
    .gift-button {
        padding: 8px 14px !important;
        font-size: 13px !important;
    }

    /* ===== 邮箱/私信弹窗优化 ===== */
    .mailbox-list,
    .dm-conversation-list {
        max-height: 60vh !important;
    }

    /* ===== 锻造炉页宽度适配 ===== */
    .forge-container,
    .forge-panel {
        max-width: 100% !important;
        width: 100% !important;
    }

    .forge-locked {
        padding: 20px !important;
        text-align: center !important;
    }

    /* ===== 数据面板页宽度适配 ===== */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    .stats-card {
        padding: 12px !important;
        min-width: 0 !important;
    }

    .leaderboard-tabs {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    .leaderboard-tab {
        flex: 1 1 calc(33.333% - 6px) !important;
        min-width: 0 !important;
        font-size: 12px !important;
        padding: 8px 8px !important;
    }

    #leaderboardContent {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    .leaderboard-entry {
        max-width: 100% !important;
        min-width: 0 !important;
    }

    /* ===== 技能树页宽度适配 ===== */
    .skill-tree-container {
        max-width: 100% !important;
        overflow-x: auto !important;
        padding: 10px !important;
    }

    .skill-points-bar {
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding: 10px 12px !important;
    }

    .skill-tree {
        min-width: auto !important;
        max-width: 100% !important;
    }

    .skill-branch {
        max-width: 100% !important;
    }

    /* ===== 鱼竿页宽度适配 ===== */
    .rod-section {
        max-width: 100% !important;
    }

    .rod-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .rod-card {
        min-width: 0 !important;
        width: 100% !important;
    }

    .rod-stats {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    .rod-stat {
        flex: 1 1 calc(50% - 6px) !important;
        min-width: 0 !important;
    }

    .rod-traits {
        flex-wrap: wrap !important;
        gap: 4px !important;
    }

    .trait-tag {
        font-size: 11px !important;
        padding: 2px 8px !important;
    }

    /* ===== 交易行页进一步宽度适配 ===== */
    .trade-market-section {
        max-width: 100% !important;
    }

    /* 交易行主标签：横向滑动 */
    .trade-tabs {
        gap: 6px !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        padding: 4px !important;
        flex-direction: row !important;
    }

    .trade-tabs::-webkit-scrollbar {
        display: none !important;
    }

    .trade-tab {
        flex: 0 0 auto !important;
        min-width: 70px !important;
        font-size: 12px !important;
        padding: 8px 14px !important;
        white-space: nowrap !important;
        width: auto !important;
    }

    /* 市场筛选器：横向排列滑动 */
    .market-filters {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        gap: 8px !important;
        padding: 12px 14px !important;
    }

    .market-filters::-webkit-scrollbar {
        display: none !important;
    }

    .market-filters .filter-group {
        flex: 0 0 auto !important;
        gap: 6px !important;
    }

    .market-filters .filter-group label {
        font-size: 12px !important;
    }

    .market-filters .filter-group select {
        padding: 7px 28px 7px 10px !important;
        font-size: 12px !important;
        min-width: 70px !important;
        border-radius: 14px !important;
    }

    /* 市场商品卡片缩小 */
    .global-trade-list {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
    }

    .global-trade-item {
        padding: 8px !important;
        border-radius: 14px !important;
    }

    .global-trade-media {
        border-radius: 10px !important;
        margin-bottom: 6px !important;
    }

    .global-trade-media .trade-item-icon {
        font-size: 28px !important;
    }

    .global-trade-info h4 {
        font-size: 11px !important;
        margin-bottom: 2px !important;
    }

    .global-trade-info .trade-seller {
        font-size: 9px !important;
        margin-bottom: 2px !important;
    }

    .global-trade-info .trade-desc {
        font-size: 9px !important;
    }

    .global-trade-quality-badge {
        font-size: 9px !important;
        top: 4px !important;
        left: 4px !important;
        padding: 2px 6px !important;
        border-radius: 6px !important;
    }

    .global-trade-price {
        font-size: 12px !important;
        margin-bottom: 6px !important;
    }

    .global-trade-buy-btn {
        padding: 5px 8px !important;
        font-size: 11px !important;
        border-radius: 10px !important;
        min-height: 26px !important;
    }

    .global-trade-count-badge {
        font-size: 10px !important;
        top: 4px !important;
        right: 4px !important;
        padding: 2px 6px !important;
        border-radius: 8px !important;
    }

    /* 商店分类标签：横向滑动 */
    .shop-cats {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        gap: 6px !important;
    }

    .shop-cats::-webkit-scrollbar {
        display: none !important;
    }

    .shop-cat-tab {
        flex: 0 0 auto !important;
        min-width: 90px !important;
        font-size: 12px !important;
        padding: 8px 14px !important;
        white-space: nowrap !important;
    }

    /* 商店商品卡片缩小 */
    .shop-items {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
    }

    .shop-item {
        padding: 10px !important;
        border-radius: 16px !important;
    }

    .shop-item-icon {
        font-size: 24px !important;
        margin-bottom: 4px !important;
    }

    .shop-item-name {
        font-size: 11px !important;
        margin-bottom: 3px !important;
    }

    .shop-item-price {
        font-size: 12px !important;
        margin-bottom: 4px !important;
    }

    .shop-item-limit {
        font-size: 10px !important;
        margin-bottom: 6px !important;
    }

    .shop-item-btn {
        padding: 6px 8px !important;
        font-size: 11px !important;
        border-radius: 10px !important;
        min-height: 28px !important;
    }

    .shop-item-count {
        font-size: 10px !important;
        margin-top: 4px !important;
    }

    .trade-items {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
    }

    .trade-item-card {
        min-width: 0 !important;
        width: 100% !important;
    }

    .my-listings-grid {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    /* 我的上架 - 上架物品卡片缩小 */
    .listed-item {
        padding: 8px 10px !important;
        gap: 8px !important;
        border-radius: 12px !important;
    }

    .listed-item-media {
        width: 44px !important;
        height: 44px !important;
        border-radius: 8px !important;
    }

    .listed-item-media img {
        width: 36px !important;
        height: 36px !important;
    }

    .listed-item-icon {
        font-size: 24px !important;
    }

    .listed-item-title {
        font-size: 12px !important;
        margin-bottom: 2px !important;
    }

    .listed-item-desc {
        font-size: 10px !important;
    }

    .listed-item-price {
        font-size: 13px !important;
    }

    .listed-item-unlist-btn {
        padding: 5px 10px !important;
        font-size: 11px !important;
        min-height: 26px !important;
    }

    /* ===== 渔仓页宽度适配 ===== */
    .vault-tabs {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    .vault-tab {
        flex: 1 1 calc(33.333% - 6px) !important;
        min-width: 0 !important;
        font-size: 12px !important;
        padding: 8px 8px !important;
    }

    .vault-items-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 6px !important;
    }

    /* ===== 工坊页宽度适配 ===== */
    .workshop-recipes {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .recipe-card {
        min-width: 0 !important;
        width: 100% !important;
    }

    .recipe-ingredients {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    .ingredient-item {
        flex: 1 1 calc(33.333% - 6px) !important;
        min-width: 0 !important;
    }

    /* ===== 水族馆页宽度适配 ===== */
    .aquarium-container {
        max-width: 100% !important;
        width: 100% !important;
    }

    .aquarium-info-bar {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .tank-selector {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    .tank-tab {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    /* ===== 农田页宽度适配 ===== */
    .farm-container {
        max-width: 100% !important;
        width: 100% !important;
    }

    .farm-grid {
        gap: 8px !important;
    }

    .farm-plot {
        min-width: 0 !important;
    }

    .farm-storage-items {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 6px !important;
    }

    /* ===== 钓鱼收获页宽度适配 ===== */
    #page-fishing > div {
        max-width: 100% !important;
    }

    .fishing-inventory-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 6px !important;
    }

    /* ===== 弹窗宽度适配 ===== */
    .modal {
        max-width: 92vw !important;
        width: 92vw !important;
        max-height: 85vh !important;
        overflow-y: auto !important;
    }

    .farm-modal,
    .sell-modal,
    .list-modal,
    .vault-modal {
        max-width: 92vw !important;
        width: 92vw !important;
    }

    /* ===== 建造升级标签适配 ===== */
    .forge-sub-tabs {
        gap: 6px !important;
    }
        font-size: 13px !important;
        padding: 8px 10px !important;
    }

    .upgrade-info,
    .upgrade-cost,
    .upgrade-status {
        max-width: 100% !important;
    }

    .cost-item {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    /* ===== 通用卡片宽度保护 ===== */
    .card,
    .panel,
    .box,
    .item,
    .entry {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    /* ===== 确保所有Grid布局不会溢出 ===== */
    [class*="-grid"] {
        max-width: 100% !important;
    }

    /* ===== 通用滚动条优化（移动端） ===== */
    ::-webkit-scrollbar {
        width: 4px !important;
        height: 4px !important;
    }

    ::-webkit-scrollbar-thumb {
        border-radius: 2px !important;
    }
}

/* ============ 卡通风格资讯中心 ============ */
.np-container {
    max-width: 100%;
    padding: 12px;
    font-family: var(--font-game);
    position: relative;
}

/* ===== 顶部标题区 ===== */
.np-masthead {
    background: var(--bg-card);
    border: var(--border-card);
    border-radius: var(--radius-xl);
    padding: 20px 24px 16px;
    box-shadow: var(--shadow-card);
    margin-bottom: 16px;
    position: relative;
    overflow: hidden;
}

.np-masthead::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, #2ABFA4, #667eea, #f59e0b, #2ABFA4);
    background-size: 200% 100%;
    animation: npGradientMove 4s linear infinite;
}

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

.np-masthead-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.np-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #2ABFA4, #26a69a);
    color: #fff;
    padding: 6px 14px;
    font-size: 13px;
    border-radius: var(--radius-pill);
    box-shadow: 0 3px 8px rgba(42,191,164,0.3);
}

#npDateLine {
    font-size: 13px;
    color: var(--text-secondary);
    background: var(--bg-card);
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(0,0,0,0.06);
}

.np-title {
    margin: 0;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    line-height: 1.2;
}

.np-title-cn {
    font-size: 32px;
    font-weight: normal;
    color: var(--text-heading);
    letter-spacing: 4px;
}

.np-title-divider {
    width: 6px;
    height: 32px;
    background: linear-gradient(180deg, #2ABFA4, #667eea);
    border-radius: 3px;
}

.np-title-en {
    font-size: 28px;
    font-weight: normal;
    color: var(--text-secondary);
    letter-spacing: 3px;
}

/* ===== 欢迎横幅 ===== */
.np-headline-banner {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: var(--radius-xl);
    padding: 18px 30px;
    margin-bottom: 16px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(102,126,234,0.3);
}

.np-headline-banner::before {
    content: '';
    position: absolute;
    top: -50%; right: -20%;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
    border-radius: 50%;
}

.np-headline-banner::after {
    content: '';
    position: absolute;
    bottom: -40%; left: -10%;
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    border-radius: 50%;
}

.np-headline-ornament {
    position: absolute;
    font-size: 40px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.25;
}

.np-headline-ornament.left { left: 16px; }
.np-headline-ornament.right { right: 16px; }

.np-headline-text {
    text-align: center;
    color: #fff;
    position: relative;
    z-index: 1;
}

.np-headline-main {
    font-size: 26px;
    letter-spacing: 4px;
    margin-bottom: 4px;
    text-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.np-headline-sub {
    font-size: 14px;
    letter-spacing: 2px;
    opacity: 0.9;
}

/* ===== 分类导航 ===== */
.np-cat-nav {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    padding: 8px;
    background: var(--bg-card);
    border: var(--border-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.np-cat-nav::-webkit-scrollbar { display: none; }

.np-cat-btn {
    flex: 0 0 auto;
    padding: 10px 20px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    border-radius: var(--radius-md);
    white-space: nowrap;
}

.np-cat-btn:hover {
    background: rgba(102,126,234,0.08);
    color: #667eea;
    transform: translateY(-2px);
}

.np-cat-btn.active {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
    box-shadow: 0 4px 12px rgba(102,126,234,0.4);
    transform: translateY(-2px);
}

/* ===== 内容区 - PC端两列网格 ===== */
.np-content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

/* ===== 新闻卡片 ===== */
.np-article {
    background: var(--bg-card);
    border: var(--border-card);
    border-radius: var(--radius-xl);
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--shadow-card);
    position: relative;
}

.np-article::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
}

.np-article[data-np-section="weather"]::before { background: linear-gradient(90deg, #4facfe, #00f2fe); }
.np-article[data-np-section="finance"]::before { background: linear-gradient(90deg, #43e97b, #38f9d7); }
.np-article[data-np-section="stats"]::before { background: linear-gradient(90deg, #fa709a, #fee140); }
.np-article[data-np-section="calendar"]::before { background: linear-gradient(90deg, #a18cd1, #fbc2eb); }

.np-article:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.1), var(--shadow-card);
}

.np-article.hidden {
    display: none;
}

/* 文章头部 */
.np-article-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px 12px;
}

.np-article-num {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
    color: #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

.np-article[data-np-section="weather"] .np-article-num { background: linear-gradient(135deg, #4facfe, #00f2fe); }
.np-article[data-np-section="finance"] .np-article-num { background: linear-gradient(135deg, #43e97b, #38f9d7); }
.np-article[data-np-section="stats"] .np-article-num { background: linear-gradient(135deg, #fa709a, #f5576c); }
.np-article[data-np-section="calendar"] .np-article-num { background: linear-gradient(135deg, #a18cd1, #fbc2eb); }

.np-article-title-wrap {
    flex: 1;
}

.np-article-title {
    margin: 0 0 2px 0;
    font-size: 18px;
    font-weight: normal;
    color: var(--text-heading);
    letter-spacing: 1px;
}

.np-article-subtitle {
    margin: 0;
    font-size: 12px;
    color: var(--text-muted);
    letter-spacing: 0.5px;
}

/* 文章主体 */
.np-article-body {
    padding: 0 18px 18px;
}

/* 加载状态 */
.np-loading {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
    font-size: 14px;
}

/* ===== 底部 ===== */
.np-footer {
    margin-top: 20px;
    padding-top: 16px;
    text-align: center;
}

.np-footer-line {
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(0,0,0,0.08) 20%, rgba(0,0,0,0.08) 80%, transparent);
    margin-bottom: 12px;
}

.np-footer-text {
    font-size: 12px;
    color: var(--text-muted);
    letter-spacing: 2px;
}

/* ===== 天气预报样式（卡通版） ===== */
.np-weather-current {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    background: linear-gradient(135deg, #e3f2fd, #bbdefb);
    border-radius: var(--radius-lg);
    margin-bottom: 14px;
    position: relative;
}

.np-weather-current::after {
    content: '当前';
    position: absolute;
    top: -8px; right: 12px;
    background: linear-gradient(135deg, #4facfe, #00f2fe);
    color: #fff;
    font-size: 11px;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    box-shadow: 0 2px 6px rgba(79,172,254,0.3);
}

.np-w-icon {
    font-size: 48px;
    line-height: 1;
    flex-shrink: 0;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

.np-w-info h4 {
    margin: 0 0 4px 0;
    font-size: 20px;
    color: #1565c0;
    font-weight: normal;
}

.np-w-info p {
    margin: 0 0 2px 0;
    font-size: 13px;
    color: #1976d2;
}

.np-w-time {
    font-size: 11px !important;
    color: #64b5f6 !important;
}

.np-w-progress {
    height: 8px;
    background: #e3f2fd;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 14px;
}

.np-w-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #4facfe, #00f2fe);
    border-radius: 4px;
    transition: width 0.5s ease;
}

.np-forecast-title {
    font-size: 14px;
    color: var(--text-heading);
    margin: 0 0 10px 0;
    padding-bottom: 8px;
    border-bottom: 2px dashed rgba(102,126,234,0.2);
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.np-timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.np-forecast-date {
    font-size: 11px;
    color: #fff;
    background: linear-gradient(135deg, #667eea, #764ba2);
    display: inline-block;
    padding: 3px 12px;
    margin: 10px 0 8px;
    border-radius: var(--radius-pill);
    align-self: flex-start;
}

.np-seg {
    display: flex;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    margin-bottom: 4px;
    transition: background 0.2s;
    position: relative;
}

.np-seg:hover {
    background: rgba(102,126,234,0.04);
}

.np-seg.now {
    background: linear-gradient(90deg, rgba(79,172,254,0.1), rgba(0,242,254,0.05));
    border-left: 3px solid #4facfe;
}

.np-seg-icon {
    font-size: 26px;
    flex-shrink: 0;
    width: 32px;
    text-align: center;
}

.np-seg-body {
    flex: 1;
    min-width: 0;
}

.np-seg-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 3px;
    flex-wrap: wrap;
}

.np-seg-name {
    font-size: 14px;
    color: var(--text-heading);
}

.np-seg-tag {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
}

.np-seg-tag.now {
    background: linear-gradient(135deg, #4facfe, #00f2fe);
    color: #fff;
}

.np-seg-tag.extreme {
    background: linear-gradient(135deg, #f5576c, #f093fb);
    color: #fff;
}

.np-seg-time {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 2px;
}

.np-seg-desc {
    font-size: 12px;
    color: var(--text-secondary);
}

/* ===== 财务日报样式（卡通版） ===== */
.np-fin-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 14px;
}

.np-fin-nav {
    width: 32px;
    height: 32px;
    border: none;
    background: linear-gradient(135deg, #f5f5f5, #e0e0e0);
    color: var(--text-secondary);
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    font-family: inherit;
}

.np-fin-nav:hover {
    background: linear-gradient(135deg, #43e97b, #38f9d7);
    color: #fff;
    transform: scale(1.1);
    box-shadow: 0 3px 10px rgba(67,233,123,0.3);
}

.np-fin-date {
    font-size: 15px;
    color: var(--text-heading);
    min-width: 120px;
    text-align: center;
    letter-spacing: 1px;
}

.np-fin-summary {
    background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
    border-radius: var(--radius-lg);
    padding: 18px;
    text-align: center;
    margin-bottom: 14px;
}

.np-fin-summary.expense {
    background: linear-gradient(135deg, #ffebee, #ffcdd2);
}

.np-fin-net-label {
    font-size: 12px;
    color: #2e7d32;
    margin-bottom: 6px;
}

.np-fin-summary.expense .np-fin-net-label {
    color: #c62828;
}

.np-fin-net-value {
    font-size: 32px;
    color: #2e7d32;
}

.np-fin-net-value.negative { color: #c62828; }

.np-fin-row {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-top: 10px;
    font-size: 13px;
}

.np-fin-income { color: #2e7d32; }
.np-fin-expense { color: #c62828; }

.np-fin-section-label {
    font-size: 13px;
    color: #2e7d32;
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 12px 0 8px;
    letter-spacing: 1px;
}

.np-fin-section-label::before {
    content: '';
    width: 4px;
    height: 16px;
    background: linear-gradient(180deg, #43e97b, #38f9d7);
    border-radius: 2px;
}

.np-fin-section-label.expense {
    color: #c62828;
}

.np-fin-section-label.expense::before {
    background: linear-gradient(180deg, #ef5350, #f44336);
}

.np-fin-cat {
    border-radius: var(--radius-md);
    margin-bottom: 4px;
    overflow: hidden;
}

.np-fin-cat-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    cursor: pointer;
    border-radius: var(--radius-md);
    transition: background 0.2s;
}

.np-fin-cat-head:hover {
    background: rgba(0,0,0,0.02);
}

.np-fin-cat-icon { font-size: 16px; }

.np-fin-cat-name {
    flex: 1;
    font-size: 13px;
    color: var(--text-primary);
}

.np-fin-cat-total {
    font-size: 14px;
    color: #2e7d32;
}

.np-fin-cat-total.negative { color: #c62828; }

.np-fin-cat-arrow {
    font-size: 10px;
    color: var(--text-muted);
    transition: transform 0.2s;
}

.np-fin-cat.open .np-fin-cat-arrow {
    transform: rotate(180deg);
}

.np-fin-sub {
    padding: 6px 12px 6px 36px;
    display: none;
    justify-content: space-between;
    font-size: 12px;
    color: var(--text-secondary);
}

.np-fin-cat.open .np-fin-sub {
    display: flex;
}

.np-fin-sub-val.positive { color: #2e7d32; }
.np-fin-sub-val.negative { color: #c62828; }

.np-fin-detail-toggle {
    text-align: center;
    padding: 10px;
    margin-top: 12px;
    background: linear-gradient(135deg, #f5f5f5, #eeeeee);
    border-radius: var(--radius-md);
    font-size: 12px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}

.np-fin-detail-toggle:hover {
    background: linear-gradient(135deg, #e0e0e0, #bdbdbd);
    transform: translateY(-1px);
}

.np-fin-tx-list {
    display: none;
    margin-top: 8px;
    border-radius: var(--radius-md);
    background: var(--bg-input);
    max-height: 200px;
    overflow-y: auto;
}

.np-fin-tx-list.open { display: block; }

.np-fin-tx {
    display: flex;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid rgba(0,0,0,0.04);
    font-size: 12px;
}

.np-fin-tx:last-child { border-bottom: none; }

.np-fin-tx-time {
    color: var(--text-muted);
    flex-shrink: 0;
}

.np-fin-tx-desc {
    flex: 1;
    color: var(--text-primary);
}

.np-fin-tx-amt {
    color: #2e7d32;
    flex-shrink: 0;
}

.np-fin-tx-amt.negative { color: #c62828; }

.np-fin-empty {
    text-align: center;
    padding: 24px;
    color: var(--text-muted);
    font-size: 13px;
}

/* ===== 每日战报样式（卡通版） ===== */
.np-stats-date-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 14px;
}

.np-stats-nav {
    width: 32px;
    height: 32px;
    border: none;
    background: linear-gradient(135deg, #f5f5f5, #e0e0e0);
    color: var(--text-secondary);
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-family: inherit;
    transition: all 0.2s;
}

.np-stats-nav:hover {
    background: linear-gradient(135deg, #fa709a, #f5576c);
    color: #fff;
    transform: scale(1.1);
}

.np-stats-date-text {
    font-size: 15px;
    color: var(--text-heading);
    letter-spacing: 1px;
}

.np-stats-today-btn {
    padding: 5px 12px;
    border: none;
    background: linear-gradient(135deg, #fa709a, #fee140);
    color: #fff;
    font-size: 11px;
    cursor: pointer;
    border-radius: var(--radius-pill);
    font-family: inherit;
    box-shadow: 0 2px 8px rgba(250,112,154,0.3);
    transition: transform 0.2s;
}

.np-stats-today-btn:hover {
    transform: scale(1.05);
}

.np-stats-summary {
    background: linear-gradient(135deg, #fce4ec, #f8bbd9);
    border-radius: var(--radius-lg);
    padding: 12px 16px;
    margin-bottom: 14px;
    font-size: 12px;
    color: #880e4f;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    align-items: center;
}

.np-stats-summary-sep {
    color: rgba(136,14,79,0.3);
}

.np-section-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 14px 0 10px;
    letter-spacing: 1px;
}

.np-section-head::after {
    content: '';
    flex: 1;
    height: 2px;
    background: linear-gradient(90deg, rgba(0,0,0,0.06), transparent);
    border-radius: 1px;
}

.np-section-icon {
    font-size: 18px;
}

.np-section-title {
    font-size: 14px;
    color: var(--text-heading);
}

.np-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.np-stat-card {
    text-align: center;
    padding: 14px 10px;
    background: var(--bg-input);
    border-radius: var(--radius-lg);
    transition: all 0.2s;
}

.np-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

.np-stat-card-icon {
    font-size: 24px;
    margin-bottom: 6px;
}

.np-stat-card-label {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.np-stat-card-val {
    font-size: 22px;
    color: var(--text-heading);
}

/* 图表柱状条 */
.np-bar-chart {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    height: 120px;
    padding: 16px 12px 8px;
    background: var(--bg-input);
    border-radius: var(--radius-lg);
    position: relative;
}

.np-bar-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    justify-content: flex-end;
}

.np-bar {
    width: 100%;
    max-width: 32px;
    background: linear-gradient(180deg, #fa709a, #f5576c);
    border-radius: 8px 8px 4px 4px;
    position: relative;
    min-height: 6px;
    transition: height 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 2px 8px rgba(250,112,154,0.3);
}

.np-bar-val {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    color: #c2185b;
    white-space: nowrap;
}

.np-bar-label {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 8px;
    text-align: center;
}

.np-stats-list {
    display: flex;
    flex-direction: column;
}

.np-stats-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    margin-bottom: 4px;
    transition: background 0.2s;
}

.np-stats-row:hover {
    background: var(--bg-input);
}

.np-stats-row-label {
    font-size: 13px;
    color: var(--text-secondary);
}

.np-stats-row-val {
    font-size: 14px;
    color: var(--text-heading);
}

/* ===== 日历样式（卡通版） ===== */
.np-cal-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 14px;
}

.np-cal-nav {
    width: 32px;
    height: 32px;
    border: none;
    background: linear-gradient(135deg, #f5f5f5, #e0e0e0);
    color: var(--text-secondary);
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-family: inherit;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.np-cal-nav:hover {
    background: linear-gradient(135deg, #a18cd1, #fbc2eb);
    color: #fff;
    transform: scale(1.1);
    box-shadow: 0 3px 10px rgba(161,140,209,0.3);
}

.np-cal-title {
    font-size: 16px;
    color: var(--text-heading);
    min-width: 130px;
    text-align: center;
    letter-spacing: 1px;
}

.np-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin-bottom: 12px;
}

.np-cal-weekday {
    text-align: center;
    font-size: 11px;
    color: #fff;
    background: linear-gradient(135deg, #a18cd1, #fbc2eb);
    padding: 8px 0;
    border-radius: 8px;
}

.np-cal-day {
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--bg-input);
    font-size: 13px;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
}

.np-cal-day:hover {
    background: rgba(161,140,209,0.1);
    transform: scale(1.08);
}

.np-cal-day.empty {
    background: transparent;
    cursor: default;
}

.np-cal-day.empty:hover {
    transform: none;
}

.np-cal-day.today {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
    font-weight: normal;
    box-shadow: 0 4px 12px rgba(245,158,11,0.4);
    transform: scale(1.05);
}

.np-cal-day.has-record {
    background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
    color: #2e7d32;
}

.np-cal-day.today.has-record {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
}

.np-cal-day-indicator {
    width: 6px;
    height: 6px;
    background: #4caf50;
    border-radius: 50%;
    position: absolute;
    bottom: 4px;
}

.np-cal-day.today .np-cal-day-indicator {
    background: #fff;
}

.np-cal-legend {
    display: flex;
    justify-content: center;
    gap: 20px;
    font-size: 12px;
    color: var(--text-muted);
    flex-wrap: wrap;
}

.np-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.np-legend-dot {
    width: 16px;
    height: 16px;
    border-radius: 6px;
}

.np-legend-dot.today {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.np-legend-dot.record {
    background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
    border: 1px solid #a5d6a7;
}

/* ===== 暗色模式适配 ===== */
body.dark-mode .np-masthead::before {
    background: linear-gradient(90deg, #5865f2, #ab47bc, #fdd835, #5865f2);
    background-size: 200% 100%;
}

body.dark-mode .np-badge {
    background: linear-gradient(135deg, #5865f2, #7c3aed);
    box-shadow: 0 3px 8px rgba(88,101,242,0.3);
}

body.dark-mode #npDateLine {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.1);
}

body.dark-mode .np-title-cn,
body.dark-mode .np-title-en {
    color: var(--text-heading);
}

body.dark-mode .np-headline-banner {
    background: linear-gradient(135deg, #5865f2 0%, #7c3aed 100%);
    box-shadow: 0 6px 20px rgba(88,101,242,0.3);
}

body.dark-mode .np-cat-nav {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.08);
}

body.dark-mode .np-cat-btn {
    color: var(--text-secondary);
}

body.dark-mode .np-cat-btn:hover {
    background: rgba(88,101,242,0.15);
    color: #818cf8;
}

body.dark-mode .np-cat-btn.active {
    background: linear-gradient(135deg, #5865f2, #7c3aed);
    box-shadow: 0 4px 12px rgba(88,101,242,0.4);
}

body.dark-mode .np-article:hover {
    box-shadow: 0 12px 28px rgba(0,0,0,0.3);
}

body.dark-mode .np-article[data-np-section="weather"]::before { background: linear-gradient(90deg, #38bdf8, #22d3ee); }
body.dark-mode .np-article[data-np-section="finance"]::before { background: linear-gradient(90deg, #4ade80, #2dd4bf); }
body.dark-mode .np-article[data-np-section="stats"]::before { background: linear-gradient(90deg, #f472b6, #fbbf24); }
body.dark-mode .np-article[data-np-section="calendar"]::before { background: linear-gradient(90deg, #a78bfa, #f9a8d4); }

body.dark-mode .np-article[data-np-section="weather"] .np-article-num { background: linear-gradient(135deg, #38bdf8, #22d3ee); }
body.dark-mode .np-article[data-np-section="finance"] .np-article-num { background: linear-gradient(135deg, #4ade80, #2dd4bf); }
body.dark-mode .np-article[data-np-section="stats"] .np-article-num { background: linear-gradient(135deg, #f472b6, #ec4899); }
body.dark-mode .np-article[data-np-section="calendar"] .np-article-num { background: linear-gradient(135deg, #a78bfa, #f9a8d4); }

body.dark-mode .np-footer-line {
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1) 20%, rgba(255,255,255,0.1) 80%, transparent);
}

/* 暗色模式 - 天气预报 */
body.dark-mode .np-weather-current {
    background: linear-gradient(135deg, #0c4a6e, #075985);
}

body.dark-mode .np-weather-current::after {
    background: linear-gradient(135deg, #38bdf8, #22d3ee);
}

body.dark-mode .np-w-info h4 { color: #7dd3fc; }
body.dark-mode .np-w-info p { color: #38bdf8; }
body.dark-mode .np-w-time { color: #0ea5e9 !important; }

body.dark-mode .np-w-progress {
    background: #1e3a5f;
}

body.dark-mode .np-forecast-date {
    background: linear-gradient(135deg, #5865f2, #7c3aed);
}

body.dark-mode .np-seg.now {
    background: linear-gradient(90deg, rgba(56,189,248,0.15), rgba(34,211,238,0.05));
    border-left-color: #38bdf8;
}

body.dark-mode .np-seg-tag.now {
    background: linear-gradient(135deg, #38bdf8, #22d3ee);
}

body.dark-mode .np-seg-tag.extreme {
    background: linear-gradient(135deg, #f472b6, #f0abfc);
}

/* 暗色模式 - 财务 */
body.dark-mode .np-fin-nav {
    background: rgba(255,255,255,0.08);
    color: var(--text-secondary);
}

body.dark-mode .np-fin-nav:hover {
    background: linear-gradient(135deg, #4ade80, #2dd4bf);
}

body.dark-mode .np-fin-summary {
    background: linear-gradient(135deg, #14532d, #166534);
}

body.dark-mode .np-fin-summary.expense {
    background: linear-gradient(135deg, #7f1d1d, #991b1b);
}

body.dark-mode .np-fin-net-label { color: #86efac; }
body.dark-mode .np-fin-summary.expense .np-fin-net-label { color: #fca5a5; }

body.dark-mode .np-fin-net-value { color: #86efac; }
body.dark-mode .np-fin-net-value.negative { color: #fca5a5; }

body.dark-mode .np-fin-income { color: #86efac; }
body.dark-mode .np-fin-expense { color: #fca5a5; }

body.dark-mode .np-fin-section-label { color: #86efac; }
body.dark-mode .np-fin-section-label::before { background: linear-gradient(180deg, #4ade80, #2dd4bf); }
body.dark-mode .np-fin-section-label.expense { color: #fca5a5; }
body.dark-mode .np-fin-section-label.expense::before { background: linear-gradient(180deg, #f87171, #ef4444); }

body.dark-mode .np-fin-cat-head:hover { background: rgba(255,255,255,0.05); }
body.dark-mode .np-fin-cat-total { color: #86efac; }
body.dark-mode .np-fin-cat-total.negative { color: #fca5a5; }
body.dark-mode .np-fin-detail-toggle { background: rgba(255,255,255,0.08); }
body.dark-mode .np-fin-detail-toggle:hover { background: rgba(255,255,255,0.12); }
body.dark-mode .np-fin-tx-list { background: rgba(255,255,255,0.05); }
body.dark-mode .np-fin-tx { border-bottom-color: rgba(255,255,255,0.06); }
body.dark-mode .np-fin-tx-amt { color: #86efac; }
body.dark-mode .np-fin-tx-amt.negative { color: #fca5a5; }

/* 暗色模式 - Bento布局财务日报 */
body.dark-mode .np-content.layout-bento .np-finance-mini-nav {
    background: rgba(255,255,255,0.08);
    color: var(--text-secondary);
}

body.dark-mode .np-content.layout-bento .np-finance-mini-nav:hover {
    background: linear-gradient(135deg, #4ade80, #2dd4bf);
    color: #fff;
}

body.dark-mode .np-content.layout-bento .np-finance-mini-date {
    color: var(--text-heading);
}

body.dark-mode .np-content.layout-bento .np-finance-mini-summary {
    background: linear-gradient(135deg, #14532d, #166534);
    box-shadow: 0 2px 8px rgba(74, 222, 128, 0.15);
}

body.dark-mode .np-content.layout-bento .np-finance-mini-summary::before {
    background: radial-gradient(circle, rgba(74, 222, 128, 0.15) 0%, transparent 70%);
}

body.dark-mode .np-content.layout-bento .np-finance-mini-summary.expense {
    background: linear-gradient(135deg, #7f1d1d, #991b1b);
    box-shadow: 0 2px 8px rgba(248, 113, 113, 0.15);
}

body.dark-mode .np-content.layout-bento .np-finance-mini-summary.expense::before {
    background: radial-gradient(circle, rgba(248, 113, 113, 0.12) 0%, transparent 70%);
}

body.dark-mode .np-content.layout-bento .np-finance-mini-net-label {
    color: #86efac;
}

body.dark-mode .np-content.layout-bento .np-finance-mini-summary.expense .np-finance-mini-net-label {
    color: #fca5a5;
}

body.dark-mode .np-content.layout-bento .np-finance-mini-net-value {
    color: #bbf7d0;
    text-shadow: 0 2px 8px rgba(74, 222, 128, 0.3);
}

body.dark-mode .np-content.layout-bento .np-finance-mini-summary.expense .np-finance-mini-net-value {
    color: #fecaca;
    text-shadow: 0 2px 8px rgba(248, 113, 113, 0.3);
}

body.dark-mode .np-content.layout-bento .np-finance-mini-income { 
    color: #86efac; 
    background: rgba(74, 222, 128, 0.15);
}
body.dark-mode .np-content.layout-bento .np-finance-mini-expense { 
    color: #fca5a5; 
    background: rgba(248, 113, 113, 0.15);
}

body.dark-mode .np-content.layout-bento .np-finance-mini-section-label { color: #86efac; }
body.dark-mode .np-content.layout-bento .np-finance-mini-section-label::before { background: linear-gradient(180deg, #4ade80, #2dd4bf); }
body.dark-mode .np-content.layout-bento .np-finance-mini-section-label.expense { color: #fca5a5; }
body.dark-mode .np-content.layout-bento .np-finance-mini-section-label.expense::before { background: linear-gradient(180deg, #f87171, #ef4444); }

body.dark-mode .np-content.layout-bento .np-finance-mini-cat {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.08);
}

body.dark-mode .np-content.layout-bento .np-finance-mini-cat:hover {
    border-color: rgba(74, 222, 128, 0.3);
    box-shadow: 0 2px 8px rgba(74, 222, 128, 0.1);
}

body.dark-mode .np-content.layout-bento .np-finance-mini-cat.expense:hover {
    border-color: rgba(248, 113, 113, 0.3);
    box-shadow: 0 2px 8px rgba(248, 113, 113, 0.1);
}

body.dark-mode .np-content.layout-bento .np-finance-mini-cat.open {
    border-color: rgba(74, 222, 128, 0.4);
    background: linear-gradient(180deg, rgba(74, 222, 128, 0.08) 0%, rgba(255,255,255,0.04) 100%);
}

body.dark-mode .np-content.layout-bento .np-finance-mini-cat.expense.open {
    border-color: rgba(248, 113, 113, 0.4);
    background: linear-gradient(180deg, rgba(248, 113, 113, 0.08) 0%, rgba(255,255,255,0.04) 100%);
}

body.dark-mode .np-content.layout-bento .np-finance-mini-cat-item:hover { background: rgba(74, 222, 128, 0.08); }
body.dark-mode .np-content.layout-bento .np-finance-mini-cat-name { color: var(--text-primary); }
body.dark-mode .np-content.layout-bento .np-finance-mini-cat-total { color: #86efac; }
body.dark-mode .np-content.layout-bento .np-finance-mini-cat-total.negative { color: #fca5a5; }
body.dark-mode .np-content.layout-bento .np-finance-mini-cat-arrow { color: var(--text-muted); }
body.dark-mode .np-content.layout-bento .np-finance-mini-cat.open .np-finance-mini-cat-arrow { color: #4ade80; }
body.dark-mode .np-content.layout-bento .np-finance-mini-cat.expense.open .np-finance-mini-cat-arrow { color: #f87171; }
body.dark-mode .np-content.layout-bento .np-finance-mini-sub { 
    color: var(--text-secondary); 
    border-top-color: rgba(74, 222, 128, 0.15);
    background: rgba(74, 222, 128, 0.03);
}
body.dark-mode .np-content.layout-bento .np-finance-mini-cat.expense .np-finance-mini-sub {
    border-top-color: rgba(248, 113, 113, 0.15);
    background: rgba(248, 113, 113, 0.03);
}
body.dark-mode .np-content.layout-bento .np-finance-mini-sub:hover { background: rgba(74, 222, 128, 0.08); }
body.dark-mode .np-content.layout-bento .np-finance-mini-cat.expense .np-finance-mini-sub:hover { background: rgba(248, 113, 113, 0.08); }
body.dark-mode .np-content.layout-bento .np-finance-mini-sub-name { color: var(--text-secondary); }
body.dark-mode .np-content.layout-bento .np-finance-mini-sub-name::before { background: rgba(74, 222, 128, 0.3); }
body.dark-mode .np-content.layout-bento .np-finance-mini-cat.expense .np-finance-mini-sub-name::before { background: rgba(248, 113, 113, 0.3); }
body.dark-mode .np-content.layout-bento .np-finance-mini-sub-val { color: #86efac; }
body.dark-mode .np-content.layout-bento .np-finance-mini-sub-val.negative { color: #fca5a5; }

body.dark-mode .np-content.layout-bento .np-finance-mini-tx-list {
    background: var(--bg-input);
}

body.dark-mode .np-content.layout-bento .np-finance-mini-tx-item {
    border-bottom-color: rgba(255,255,255,0.06);
}

body.dark-mode .np-content.layout-bento .np-finance-mini-tx-time {
    color: var(--text-muted);
}

body.dark-mode .np-content.layout-bento .np-finance-mini-tx-desc {
    color: var(--text-primary);
}

body.dark-mode .np-content.layout-bento .np-finance-mini-tx-amt {
    color: #86efac;
}

body.dark-mode .np-content.layout-bento .np-finance-mini-tx-amt.exp {
    color: #fca5a5;
}

body.dark-mode .np-content.layout-bento .np-finance-mini-empty {
    color: var(--text-muted);
}

body.dark-mode .np-content.layout-bento .np-finance-mini-click-hint {
    color: var(--text-muted);
}

/* 暗色模式 - 战报 */
body.dark-mode .np-stats-nav {
    background: rgba(255,255,255,0.08);
}

body.dark-mode .np-stats-nav:hover {
    background: linear-gradient(135deg, #f472b6, #ec4899);
}

body.dark-mode .np-stats-today-btn {
    background: linear-gradient(135deg, #f472b6, #fbbf24);
}

body.dark-mode .np-stats-summary {
    background: linear-gradient(135deg, #831843, #9d174d);
    color: #fbcfe8;
}

body.dark-mode .np-stats-summary-sep { color: rgba(251,207,232,0.3); }

body.dark-mode .np-stat-card {
    background: rgba(255,255,255,0.05);
}

body.dark-mode .np-stat-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

body.dark-mode .np-bar-chart {
    background: rgba(255,255,255,0.05);
}

body.dark-mode .np-bar {
    background: linear-gradient(180deg, #f472b6, #ec4899);
    box-shadow: 0 2px 8px rgba(244,114,182,0.3);
}

body.dark-mode .np-bar-val { color: #f9a8d4; }
body.dark-mode .np-stats-row:hover { background: rgba(255,255,255,0.05); }

/* 暗色模式 - 日历 */
body.dark-mode .np-cal-nav {
    background: rgba(255,255,255,0.08);
}

body.dark-mode .np-cal-nav:hover {
    background: linear-gradient(135deg, #a78bfa, #f9a8d4);
}

body.dark-mode .np-cal-weekday {
    background: linear-gradient(135deg, #a78bfa, #f9a8d4);
}

body.dark-mode .np-cal-day {
    background: rgba(255,255,255,0.05);
    color: var(--text-primary);
}

body.dark-mode .np-cal-day:hover {
    background: rgba(167,139,250,0.15);
}

body.dark-mode .np-cal-day.today {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    box-shadow: 0 4px 12px rgba(251,191,36,0.4);
}

body.dark-mode .np-cal-day.has-record {
    background: linear-gradient(135deg, #14532d, #166534);
    color: #86efac;
}

/* ===== 响应式布局 ===== */
@media (max-width: 1100px) {
    .np-content {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .np-container {
        padding: 8px;
    }

    .np-masthead {
        padding: 16px 16px 12px;
        border-radius: var(--radius-lg);
    }

    .np-title {
        gap: 10px;
    }

    .np-title-cn {
        font-size: 22px !important;
        letter-spacing: 2px !important;
    }

    .np-title-divider {
        height: 24px !important;
        width: 4px !important;
    }

    .np-title-en {
        font-size: 18px !important;
        letter-spacing: 1px !important;
    }

    .np-badge {
        font-size: 11px !important;
        padding: 5px 10px !important;
    }

    #npDateLine {
        font-size: 11px !important;
        padding: 5px 10px !important;
    }

    .np-headline-banner {
        padding: 14px 20px !important;
        border-radius: var(--radius-lg);
    }

    .np-headline-main {
        font-size: 18px !important;
        letter-spacing: 2px !important;
    }

    .np-headline-sub {
        font-size: 12px !important;
    }

    .np-headline-ornament {
        font-size: 28px !important;
    }

    .np-cat-nav {
        gap: 6px !important;
        padding: 6px !important;
        border-radius: var(--radius-md);
    }

    .np-cat-btn {
        padding: 8px 14px !important;
        font-size: 13px !important;
    }

    .np-content {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .np-article {
        border-radius: var(--radius-lg);
    }

    .np-article-header {
        padding: 12px 14px 10px !important;
        gap: 10px !important;
    }

    .np-article-num {
        width: 36px !important;
        height: 36px !important;
        font-size: 15px !important;
    }

    .np-article-title {
        font-size: 16px !important;
    }

    .np-article-subtitle {
        font-size: 11px !important;
    }

    .np-article-body {
        padding: 0 14px 14px !important;
    }

    .np-weather-current {
        padding: 12px !important;
        gap: 12px !important;
        border-radius: var(--radius-md);
    }

    .np-w-icon {
        font-size: 40px !important;
    }

    .np-w-info h4 {
        font-size: 17px !important;
    }

    .np-stat-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .np-fin-net-value {
        font-size: 26px !important;
    }

    .np-cal-day {
        font-size: 12px !important;
        border-radius: 8px;
    }

    .np-cal-legend {
        gap: 12px !important;
    }

    .np-bar-chart {
        height: 100px;
        gap: 8px;
        padding: 12px 8px 8px;
    }

    .np-article:hover {
        transform: none;
    }
}



/* ============ 布局切换器 ============ */
.np-layout-switcher {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding: 10px 14px;
    background: var(--bg-card);
    border: var(--border-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    flex-wrap: wrap;
}

.np-layout-label {
    font-size: 13px;
    color: var(--text-secondary);
    margin-right: 4px;
}

.np-layout-btn {
    padding: 6px 12px;
    border: 2px solid transparent;
    background: rgba(0,0,0,0.04);
    color: var(--text-secondary);
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
    border-radius: var(--radius-pill);
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    white-space: nowrap;
}

.np-layout-btn:hover {
    background: rgba(102,126,234,0.1);
    color: #667eea;
    transform: translateY(-1px);
}

.np-layout-btn.active {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
    border-color: rgba(255,255,255,0.3);
    box-shadow: 0 3px 10px rgba(102,126,234,0.35);
    transform: translateY(-1px);
}

/* ============ 布局1：默认网格布局（2列） ============ */
.np-content.layout-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

/* ============ 布局2：瀑布流布局 Masonry ============ */
.np-content.layout-masonry {
    column-count: 2;
    column-gap: 16px;
}

.np-content.layout-masonry .np-article {
    break-inside: avoid;
    margin-bottom: 16px;
    display: inline-block;
    width: 100%;
}

/* ============ 布局3：Bento Grid 便当盒布局 ============ */
.np-content.layout-bento {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto;
    gap: 16px;
    grid-template-areas:
        "weather weather finance"
        "calendar stats stats";
}

.np-content.layout-bento .np-article[data-np-section="weather"] {
    grid-area: weather;
}

.np-content.layout-bento .np-article[data-np-section="finance"] {
    grid-area: finance;
}

.np-content.layout-bento .np-article[data-np-section="stats"] {
    grid-area: stats;
}

.np-content.layout-bento .np-article[data-np-section="calendar"] {
    grid-area: calendar;
}

/* ============ 布局4：杂志头条布局 ============ */
.np-content.layout-magazine {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto auto;
    gap: 16px;
    grid-template-areas:
        "weather weather weather"
        "finance stats stats"
        "calendar calendar calendar";
}

.np-content.layout-magazine .np-article[data-np-section="weather"] {
    grid-area: weather;
}

.np-content.layout-magazine .np-article[data-np-section="finance"] {
    grid-area: finance;
}

.np-content.layout-magazine .np-article[data-np-section="stats"] {
    grid-area: stats;
}

.np-content.layout-magazine .np-article[data-np-section="calendar"] {
    grid-area: calendar;
}

/* ============ 布局5：错落不对称布局 ============ */
.np-content.layout-asymmetric {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    grid-template-rows: auto auto;
    gap: 16px;
    grid-template-areas:
        "weather stats"
        "finance stats"
        "calendar calendar";
}

.np-content.layout-asymmetric .np-article[data-np-section="weather"] {
    grid-area: weather;
}

.np-content.layout-asymmetric .np-article[data-np-section="finance"] {
    grid-area: finance;
}

.np-content.layout-asymmetric .np-article[data-np-section="stats"] {
    grid-area: stats;
}

.np-content.layout-asymmetric .np-article[data-np-section="calendar"] {
    grid-area: calendar;
}

/* ============ 布局切换动画 ============ */
.np-content {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.np-content .np-article {
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============ 响应式：窄屏强制单列 ============ */
@media (max-width: 900px) {
    .np-content.layout-bento,
    .np-content.layout-magazine,
    .np-content.layout-asymmetric {
        grid-template-columns: 1fr !important;
        grid-template-areas: none !important;
    }

    .np-content.layout-bento .np-article,
    .np-content.layout-magazine .np-article,
    .np-content.layout-asymmetric .np-article {
        grid-area: auto !important;
    }

    .np-content.layout-masonry {
        column-count: 1;
    }

    .np-layout-switcher {
        gap: 6px;
        padding: 8px 10px;
    }

    .np-layout-btn {
        padding: 5px 10px;
        font-size: 11px;
    }

    .np-layout-label {
        font-size: 12px;
    }
}



/* ============ Bento便当盒风格（简约版） ============ */

.np-content.layout-bento {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto auto;
    gap: 12px;
    grid-template-areas:
        "weather weather weather calendar"
        "finance stats stats stats";
}

.np-content.layout-bento .np-article {
    border-radius: 12px;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border-card, #ececec);
    padding: 14px 16px;
    transition: box-shadow 0.2s ease;
}

.np-content.layout-bento .np-article:hover {
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

.np-content.layout-bento .np-article-header {
    margin-bottom: 10px;
}

.np-content.layout-bento .np-article-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary, #333);
    letter-spacing: 0.5px;
}

.np-content.layout-bento .np-article-subtitle {
    font-size: 11px;
    color: var(--text-secondary, #999);
    margin-top: 2px;
}

.np-content.layout-bento .np-article-num {
    display: none;
}

.np-content.layout-bento .np-article[data-np-section="weather"],
.np-content.layout-bento .np-article[data-np-section="stats"] {
    padding: 16px 18px;
}

/* ===== 天气（大卡片）- 横向小时预报 ===== */
.np-content.layout-bento .np-article[data-np-section="weather"] {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #e3f2fd 0%, #f5f9ff 100%);
    border: 1px solid #bbdefb;
}

.np-content.layout-bento .np-article[data-np-section="weather"] .np-article-body {
    overflow: hidden;
    flex: 1;
}

.np-content.layout-bento .np-article[data-np-section="weather"] .np-article-title {
    color: #1565c0;
}

.np-content.layout-bento .np-article[data-np-section="weather"] .np-article-subtitle {
    color: #64b5f6;
}

.np-bento-weather-main {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* 顶部天气提示 */
.np-bento-weather-tip {
    background: rgba(255,255,255,0.85);
    border-radius: 10px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    border: 1px solid rgba(79,172,254,0.2);
}

.np-bento-tip-current,
.np-bento-tip-next {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12px;
    line-height: 1.5;
}

.np-bento-tip-current {
    color: #1565c0;
    font-weight: 500;
}

.np-bento-tip-next {
    color: #1976d2;
    padding-top: 6px;
    border-top: 1px dashed rgba(79,172,254,0.2);
}

.np-bento-tip-label {
    flex-shrink: 0;
    display: inline-block;
    padding: 1px 6px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 600;
    background: linear-gradient(135deg, #4facfe, #00f2fe);
    color: #fff;
    min-width: 32px;
    text-align: center;
}

.np-bento-tip-next .np-bento-tip-label {
    background: rgba(79,172,254,0.15);
    color: #1976d2;
}

/* 横向小时预报 */
.np-bento-hourly {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 4px 2px 8px;
    scroll-behavior: smooth;
}

.np-bento-hourly::-webkit-scrollbar {
    height: 5px;
}

.np-bento-hourly::-webkit-scrollbar-track {
    background: rgba(79,172,254,0.1);
    border-radius: 3px;
}

.np-bento-hourly::-webkit-scrollbar-thumb {
    background: rgba(79,172,254,0.4);
    border-radius: 3px;
}

.np-bento-hourly::-webkit-scrollbar-thumb:hover {
    background: rgba(79,172,254,0.6);
}

.np-bento-hourly-item {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255,255,255,0.8);
    min-width: 60px;
    transition: all 0.2s ease;
    border: 1px solid rgba(79,172,254,0.15);
}

.np-bento-hourly-item:hover {
    background: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(79,172,254,0.15);
}

.np-bento-hourly-item.now {
    background: linear-gradient(180deg, #4facfe 0%, #00f2fe 100%);
    border: none;
    box-shadow: 0 4px 15px rgba(79,172,254,0.4);
}

.np-bento-hourly-item.now .np-bento-hourly-time,
.np-bento-hourly-item.now .np-bento-hourly-name {
    color: #fff;
}

.np-bento-hourly-item.switch {
    border: 1px dashed rgba(79,172,254,0.6);
    background: rgba(79,172,254,0.08);
}

.np-bento-hourly-item.switch .np-bento-hourly-time {
    color: #0288d1;
    font-weight: 600;
}

.np-bento-hourly-time {
    font-size: 11px;
    color: #1976d2;
    font-weight: 500;
}

.np-bento-hourly-icon {
    font-size: 28px;
    line-height: 1;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1));
}

.np-bento-hourly-name {
    font-size: 11px;
    color: #1565c0;
    font-weight: 500;
    white-space: nowrap;
}

/* ===== 日历（小卡片） ===== */
.np-content.layout-bento .np-article[data-np-section="calendar"] {
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.np-content.layout-bento .np-article[data-np-section="calendar"] .np-article-body {
    overflow: hidden;
    flex: 1;
}

/* Bento下日历保持原生样式，只调整尺寸 */
.np-content.layout-bento .np-cal-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 10px;
}

.np-content.layout-bento .np-cal-nav {
    width: 26px;
    height: 26px;
    border: none;
    background: linear-gradient(135deg, #f5f5f5, #e0e0e0);
    color: var(--text-secondary, #666);
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-family: inherit;
    transition: all 0.2s ease;
}

.np-content.layout-bento .np-cal-nav:hover {
    background: linear-gradient(135deg, #a18cd1, #fbc2eb);
    color: #fff;
    transform: scale(1.05);
}

.np-content.layout-bento .np-cal-title {
    font-size: 13px;
    color: var(--text-heading, #333);
    min-width: 100px;
    text-align: center;
    letter-spacing: 0.5px;
}

.np-content.layout-bento .np-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
    margin-bottom: 8px;
}

.np-content.layout-bento .np-cal-weekday {
    text-align: center;
    font-size: 10px;
    color: #fff;
    background: linear-gradient(135deg, #a18cd1, #fbc2eb);
    padding: 5px 0;
    border-radius: 6px;
}

.np-content.layout-bento .np-cal-day {
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--bg-input, #f5f5f5);
    font-size: 11px;
    color: var(--text-primary, #333);
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.np-content.layout-bento .np-cal-day:hover {
    background: rgba(161,140,209,0.1);
    transform: scale(1.05);
}

.np-content.layout-bento .np-cal-day.empty {
    background: transparent;
    cursor: default;
}

.np-content.layout-bento .np-cal-day.empty:hover {
    transform: none;
}

.np-content.layout-bento .np-cal-day.today {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
    font-weight: normal;
    box-shadow: 0 2px 8px rgba(245,158,11,0.4);
    transform: scale(1.03);
}

.np-content.layout-bento .np-cal-day.has-record {
    background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
    color: #2e7d32;
}

.np-content.layout-bento .np-cal-day.today.has-record {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
}

.np-content.layout-bento .np-cal-day-indicator {
    width: 5px;
    height: 5px;
    background: #4caf50;
    border-radius: 50%;
    position: absolute;
    bottom: 3px;
}

.np-content.layout-bento .np-cal-day.today .np-cal-day-indicator {
    background: #fff;
}

.np-content.layout-bento .np-cal-legend {
    display: none;
}

/* ===== 财务（小卡片） ===== */
.np-content.layout-bento .np-article[data-np-section="finance"] {
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border: var(--border-card);
    padding: 14px 16px;
}

.np-content.layout-bento .np-article[data-np-section="finance"] .np-article-header {
    margin-bottom: 10px;
    padding: 0;
    display: none;
}

.np-content.layout-bento .np-finance-mini {
    flex: 1;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border-radius: 12px;
    min-height: 0;
    overflow: hidden;
}

.np-content.layout-bento .np-finance-mini:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}

/* 顶部导航栏 */
.np-content.layout-bento .np-finance-mini-header {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    flex-shrink: 0;
}

.np-content.layout-bento .np-finance-mini-nav {
    width: 28px;
    height: 28px;
    border: none;
    background: linear-gradient(135deg, #f5f5f5, #e0e0e0);
    color: var(--text-secondary, #666);
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    font-family: inherit;
    padding: 0;
    flex-shrink: 0;
}

.np-content.layout-bento .np-finance-mini-nav:hover {
    background: linear-gradient(135deg, #43e97b, #38f9d7);
    color: #fff;
    transform: scale(1.1);
    box-shadow: 0 3px 10px rgba(67,233,123,0.3);
}

.np-content.layout-bento .np-finance-mini-date {
    font-size: 13px;
    color: var(--text-heading, #333);
    min-width: 90px;
    text-align: center;
    letter-spacing: 0.5px;
    font-weight: 500;
}

/* 汇总大卡片 */
.np-content.layout-bento .np-finance-mini-summary {
    background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
    border-radius: 12px;
    padding: 14px 12px;
    text-align: center;
    margin-bottom: 12px;
    flex-shrink: 0;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(76, 175, 80, 0.1);
}

.np-content.layout-bento .np-finance-mini-summary::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 100px;
    height: 100px;
    background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%);
    border-radius: 50%;
}

.np-content.layout-bento .np-finance-mini-summary.expense {
    background: linear-gradient(135deg, #ffebee, #ffcdd2);
    box-shadow: 0 2px 8px rgba(244, 67, 54, 0.1);
}

.np-content.layout-bento .np-finance-mini-summary.expense::before {
    background: radial-gradient(circle, rgba(255,255,255,0.25) 0%, transparent 70%);
}

.np-content.layout-bento .np-finance-mini-net-label {
    font-size: 11px;
    color: #2e7d32;
    margin-bottom: 6px;
    letter-spacing: 1px;
    position: relative;
    z-index: 1;
    font-weight: 500;
}

.np-content.layout-bento .np-finance-mini-summary.expense .np-finance-mini-net-label {
    color: #c62828;
}

.np-content.layout-bento .np-finance-mini-net-value {
    font-size: 30px;
    font-weight: 700;
    color: #1b5e20;
    line-height: 1.1;
    margin-bottom: 8px;
    position: relative;
    z-index: 1;
    text-shadow: 0 2px 4px rgba(255,255,255,0.5);
}

.np-content.layout-bento .np-finance-mini-summary.expense .np-finance-mini-net-value {
    color: #b71c1c;
}

.np-content.layout-bento .np-finance-mini-row {
    display: flex;
    justify-content: center;
    gap: 20px;
    font-size: 12px;
    position: relative;
    z-index: 1;
}

.np-content.layout-bento .np-finance-mini-income { 
    color: #2e7d32; 
    font-weight: 600; 
    background: rgba(255,255,255,0.4);
    padding: 3px 10px;
    border-radius: 12px;
}
.np-content.layout-bento .np-finance-mini-expense { 
    color: #c62828; 
    font-weight: 600; 
    background: rgba(255,255,255,0.4);
    padding: 3px 10px;
    border-radius: 12px;
}

/* 分类标签 */
.np-content.layout-bento .np-finance-mini-section-label {
    font-size: 11px;
    color: #2e7d32;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    letter-spacing: 0.5px;
    font-weight: 600;
    flex-shrink: 0;
}

.np-content.layout-bento .np-finance-mini-section-label::before {
    content: '';
    width: 3px;
    height: 14px;
    background: linear-gradient(180deg, #43e97b, #38f9d7);
    border-radius: 2px;
}

.np-content.layout-bento .np-finance-mini-section-label.expense {
    color: #c62828;
}

.np-content.layout-bento .np-finance-mini-section-label.expense::before {
    background: linear-gradient(180deg, #ef5350, #f44336);
}

/* 分类列表 */
.np-content.layout-bento .np-finance-mini-cats {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 8px;
    flex-shrink: 0;
}

.np-content.layout-bento .np-finance-mini-cat {
    overflow: hidden;
    border-radius: 8px;
    background: var(--bg-input, #fafafa);
    border: 1px solid var(--border-light, #eee);
    transition: all 0.2s ease;
}

.np-content.layout-bento .np-finance-mini-cat:hover {
    border-color: #c8e6c9;
    box-shadow: 0 2px 8px rgba(76, 175, 80, 0.1);
}

.np-content.layout-bento .np-finance-mini-cat.expense:hover {
    border-color: #ffcdd2;
    box-shadow: 0 2px 8px rgba(244, 67, 54, 0.1);
}

.np-content.layout-bento .np-finance-mini-cat.open {
    border-color: #a5d6a7;
    background: linear-gradient(180deg, #f1f8e9 0%, #fafafa 100%);
}

.np-content.layout-bento .np-finance-mini-cat.expense.open {
    border-color: #ef9a9a;
    background: linear-gradient(180deg, #ffebee 0%, #fafafa 100%);
}

.np-content.layout-bento .np-finance-mini-cat-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    font-size: 11px;
    transition: background 0.2s;
    cursor: pointer;
}

.np-content.layout-bento .np-finance-mini-cat-item:hover {
    background: rgba(76, 175, 80, 0.05);
}

.np-content.layout-bento .np-finance-mini-cat-icon {
    font-size: 14px;
    flex-shrink: 0;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1));
}

.np-content.layout-bento .np-finance-mini-cat-name {
    flex: 1;
    color: var(--text-primary, #333);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
}

.np-content.layout-bento .np-finance-mini-cat-total {
    font-size: 12px;
    font-weight: 600;
    color: #2e7d32;
    flex-shrink: 0;
    text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}

.np-content.layout-bento .np-finance-mini-cat-total.negative {
    color: #c62828;
}

.np-content.layout-bento .np-finance-mini-cat-arrow {
    font-size: 10px;
    color: var(--text-muted, #aaa);
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    flex-shrink: 0;
    opacity: 0.7;
}

.np-content.layout-bento .np-finance-mini-cat.open .np-finance-mini-cat-arrow {
    transform: rotate(180deg);
    color: #4caf50;
    opacity: 1;
}

.np-content.layout-bento .np-finance-mini-cat.expense.open .np-finance-mini-cat-arrow {
    color: #f44336;
}

.np-content.layout-bento .np-finance-mini-sub {
    display: none;
    justify-content: space-between;
    align-items: center;
    padding: 6px 12px 6px 36px;
    font-size: 10px;
    color: var(--text-secondary, #666);
    border-top: 1px solid rgba(76, 175, 80, 0.1);
    position: relative;
    transition: all 0.2s ease;
    background: rgba(76, 175, 80, 0.02);
}

.np-content.layout-bento .np-finance-mini-cat.expense .np-finance-mini-sub {
    border-top-color: rgba(244, 67, 54, 0.1);
    background: rgba(244, 67, 54, 0.02);
}

.np-content.layout-bento .np-finance-mini-cat.open .np-finance-mini-sub {
    display: flex;
}

.np-content.layout-bento .np-finance-mini-sub:hover {
    background: rgba(76, 175, 80, 0.06);
}

.np-content.layout-bento .np-finance-mini-cat.expense .np-finance-mini-sub:hover {
    background: rgba(244, 67, 54, 0.06);
}

.np-content.layout-bento .np-finance-mini-sub-name {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-secondary, #666);
    position: relative;
}

.np-content.layout-bento .np-finance-mini-sub-name::before {
    content: '';
    position: absolute;
    left: -16px;
    top: 50%;
    width: 10px;
    height: 1px;
    background: #c8e6c9;
}

.np-content.layout-bento .np-finance-mini-cat.expense .np-finance-mini-sub-name::before {
    background: #ffcdd2;
}

.np-content.layout-bento .np-finance-mini-sub-val {
    font-weight: 600;
    color: #388e3c;
    flex-shrink: 0;
    font-size: 11px;
}

.np-content.layout-bento .np-finance-mini-sub-val.negative {
    color: #d32f2f;
}

/* 交易明细列表 */
.np-content.layout-bento .np-finance-mini-tx-list {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 0;
    border-radius: 8px;
    background: var(--bg-input, #f5f5f5);
}

.np-content.layout-bento .np-finance-mini-tx-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    border-bottom: 1px solid rgba(0,0,0,0.04);
    font-size: 11px;
    flex-shrink: 0;
}

.np-content.layout-bento .np-finance-mini-tx-item:last-child {
    border-bottom: none;
}

.np-content.layout-bento .np-finance-mini-tx-time {
    color: var(--text-muted, #999);
    flex-shrink: 0;
    font-size: 10px;
}

.np-content.layout-bento .np-finance-mini-tx-desc {
    flex: 1;
    color: var(--text-primary, #333);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.np-content.layout-bento .np-finance-mini-tx-amt {
    color: #2e7d32;
    flex-shrink: 0;
    font-weight: 600;
}

.np-content.layout-bento .np-finance-mini-tx-amt.exp {
    color: #c62828;
}

.np-content.layout-bento .np-finance-mini-empty {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted, #999);
    font-size: 12px;
}

.np-content.layout-bento .np-finance-mini-click-hint {
    text-align: center;
    font-size: 10px;
    color: var(--text-muted, #aaa);
    opacity: 0.7;
    margin-top: 8px;
    flex-shrink: 0;
}

/* ===== 财务详情弹窗 ===== */
.np-finance-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 9999;
    justify-content: center;
    align-items: center;
    animation: npFadeIn 0.2s ease;
}

@keyframes npFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.np-finance-modal {
    background: #fffdf7;
    border-radius: 24px;
    max-width: 480px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.8) inset,
        0 20px 60px rgba(0,0,0,0.15),
        0 8px 20px rgba(0,0,0,0.08);
    border: 1px solid rgba(255,255,255,0.6);
    animation: npScaleIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes npScaleIn {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.np-finance-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px 16px;
    border-bottom: 2px solid #f0e6d3;
    position: sticky;
    top: 0;
    background: #fffdf7;
    z-index: 1;
    border-radius: 24px 24px 0 0;
}

.np-finance-modal-header h3 {
    margin: 0;
    font-size: 18px;
    color: #5D4037;
    font-weight: 600;
    font-family: 'ZCOOL KuaiLe', cursive;
    letter-spacing: 1px;
}

.np-finance-modal-close {
    width: 32px;
    height: 32px;
    border: none;
    background: #f5f0e6;
    color: #8D6E63;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    font-family: inherit;
}

.np-finance-modal-close:hover {
    background: #e8dcc8;
    color: #5D4037;
    transform: rotate(90deg);
}

.np-finance-modal-body {
    padding: 20px 24px 24px;
}

.np-finance-modal-summary {
    background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
    border-radius: 16px;
    padding: 16px;
    text-align: center;
    margin-bottom: 16px;
}

.np-finance-modal-summary.expense {
    background: linear-gradient(135deg, #ffebee, #ffcdd2);
}

.np-finance-modal-summary .np-fin-net-label {
    font-size: 12px;
    color: #2e7d32;
    margin-bottom: 6px;
}

.np-finance-modal-summary.expense .np-fin-net-label {
    color: #c62828;
}

.np-finance-modal-summary .np-fin-net-value {
    font-size: 36px;
    color: #2e7d32;
    font-weight: 600;
}

.np-finance-modal-summary.expense .np-fin-net-value {
    color: #c62828;
}

.np-finance-modal-summary .np-fin-row {
    display: flex;
    justify-content: center;
    gap: 32px;
    margin-top: 10px;
    font-size: 14px;
}

.np-finance-modal-summary .np-fin-income { color: #2e7d32; }
.np-finance-modal-summary .np-fin-expense { color: #c62828; }

.np-finance-modal-section-label {
    font-size: 14px;
    color: #5D4037;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 16px 0 10px;
    font-weight: 600;
    letter-spacing: 1px;
}

.np-finance-modal-section-label::before {
    content: '';
    width: 4px;
    height: 18px;
    background: linear-gradient(180deg, #43e97b, #38f9d7);
    border-radius: 2px;
}

.np-finance-modal-section-label.expense::before {
    background: linear-gradient(180deg, #ff7043, #ff5252);
}

.np-finance-modal-cat {
    background: #fff;
    border-radius: 12px;
    margin-bottom: 8px;
    border: 1px solid #f0e6d3;
    overflow: hidden;
    transition: all 0.2s ease;
}

.np-finance-modal-cat:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.np-finance-modal-cat-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.np-finance-modal-cat-head:hover {
    background: #faf7f0;
}

.np-finance-modal-cat-icon {
    font-size: 20px;
}

.np-finance-modal-cat-name {
    flex: 1;
    font-size: 14px;
    color: #5D4037;
    font-weight: 500;
}

.np-finance-modal-cat-total {
    font-size: 15px;
    font-weight: 600;
}

.np-finance-modal-cat-total.positive { color: #43a047; }
.np-finance-modal-cat-total.negative { color: #e53935; }

.np-finance-modal-cat-arrow {
    font-size: 10px;
    color: #aaa;
    transition: transform 0.2s ease;
}

.np-finance-modal-cat.open .np-finance-modal-cat-arrow {
    transform: rotate(180deg);
}

.np-finance-modal-sub-list {
    display: none;
    background: #faf7f0;
    padding: 4px 14px 10px;
    border-top: 1px solid #f0e6d3;
}

.np-finance-modal-cat.open .np-finance-modal-sub-list {
    display: block;
}

.np-finance-modal-sub-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0 6px 30px;
    font-size: 13px;
    color: #8D6E63;
}

.np-finance-modal-sub-val.positive { color: #66bb6a; }
.np-finance-modal-sub-val.negative { color: #ef5350; }

.np-finance-modal-tx-section {
    margin-top: 16px;
}

.np-finance-modal-tx-toggle {
    background: #fff;
    border: 1px solid #f0e6d3;
    border-radius: 12px;
    padding: 12px 16px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: #5D4037;
    transition: all 0.2s ease;
    font-family: inherit;
    width: 100%;
}

.np-finance-modal-tx-toggle:hover {
    background: #faf7f0;
}

.np-finance-modal-tx-toggle-arrow {
    font-size: 12px;
    color: #aaa;
    transition: transform 0.2s ease;
}

.np-finance-modal-tx-list.open + .np-finance-modal-tx-toggle .np-finance-modal-tx-toggle-arrow,
.np-finance-modal-tx-section.open .np-finance-modal-tx-toggle-arrow {
    transform: rotate(180deg);
}

.np-finance-modal-tx-list {
    display: none;
    margin-top: 8px;
    max-height: 240px;
    overflow-y: auto;
}

.np-finance-modal-tx-section.open .np-finance-modal-tx-list {
    display: block;
}

.np-finance-modal-tx-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: #fff;
    border-radius: 10px;
    margin-bottom: 6px;
    border: 1px solid #f0e6d3;
}

.np-finance-modal-tx-time {
    font-size: 12px;
    color: #aaa;
    min-width: 45px;
}

.np-finance-modal-tx-desc {
    flex: 1;
    font-size: 13px;
    color: #5D4037;
}

.np-finance-modal-tx-amt {
    font-size: 14px;
    font-weight: 600;
}

.np-finance-modal-tx-amt.positive { color: #43a047; }
.np-finance-modal-tx-amt.negative { color: #e53935; }

.np-finance-modal-empty {
    text-align: center;
    padding: 24px;
    color: #aaa;
    font-size: 13px;
}

/* ===== 战报（大卡片） ===== */
.np-content.layout-bento .np-stats-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.np-content.layout-bento .np-stats-greeting {
    display: flex;
    align-items: center;
    gap: 6px;
}

.np-content.layout-bento .np-stats-greeting-icon {
    font-size: 18px;
}

.np-content.layout-bento .np-stats-greeting-text {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary, #333);
}

.np-content.layout-bento .np-stats-quick-info {
    display: flex;
    gap: 6px;
}

.np-content.layout-bento .np-stats-badge {
    padding: 3px 8px;
    border-radius: 8px;
    font-size: 10px;
    background: var(--bg-input, #f5f5f5);
    color: var(--text-secondary, #666);
}

.np-content.layout-bento .np-stats-badge.streak {
    background: #fff8e1;
    color: #f57c00;
}

.np-content.layout-bento .np-stats-badge.online {
    background: #f3e5f5;
    color: #7b1fa2;
}

.np-content.layout-bento .np-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 12px;
}

.np-content.layout-bento .np-stat-card {
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    padding: 8px 4px;
    transition: background 0.2s ease;
    cursor: pointer;
    background: var(--bg-input, #fafafa);
    border: 1px solid var(--border-card, #f0f0f0);
}

.np-content.layout-bento .np-stat-card:hover {
    background: var(--bg-input, #f5f5f5);
}

.np-content.layout-bento .np-stat-icon {
    font-size: 20px;
    margin-bottom: 4px;
}

.np-content.layout-bento .np-stat-value {
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
    color: var(--text-primary, #333);
    margin-bottom: 2px;
}

.np-content.layout-bento .np-stat-label {
    font-size: 10px;
    color: var(--text-secondary, #999);
}

.np-content.layout-bento .np-stats-chart {
    padding-top: 10px;
    border-top: 1px solid var(--border-card, #eee);
}

.np-content.layout-bento .np-chart-title {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary, #666);
    margin-bottom: 10px;
}

.np-content.layout-bento .np-bar-chart {
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    height: 100px;
    padding: 0 10px;
    gap: 8px;
}

.np-content.layout-bento .np-bar-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
}

.np-content.layout-bento .np-bar {
    width: 60%;
    min-height: 4px;
    background: #e0e0e0;
    border-radius: 4px 4px 0 0;
    position: relative;
    transition: height 0.5s ease;
    display: flex;
    justify-content: center;
}

.np-content.layout-bento .np-bar-val {
    position: absolute;
    top: -16px;
    font-size: 10px;
    font-weight: 500;
    color: var(--text-secondary, #666);
}

.np-content.layout-bento .np-bar-label {
    margin-top: 6px;
    font-size: 10px;
    color: var(--text-secondary, #888);
}

/* ===== 响应式 ===== */
@media (max-width: 1100px) {
    .np-content.layout-bento {
        grid-template-columns: repeat(3, 1fr);
        grid-template-areas:
            "weather weather calendar"
            "finance stats stats";
    }

    .np-content.layout-bento .np-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .np-content.layout-bento .np-stat-card {
        aspect-ratio: auto;
        padding: 12px 8px;
    }
}

@media (max-width: 800px) {
    .np-content.layout-bento {
        grid-template-columns: repeat(2, 1fr);
        grid-template-areas:
            "weather weather"
            "calendar finance"
            "stats stats";
    }
}

@media (max-width: 600px) {
    .np-content.layout-bento {
        grid-template-columns: 1fr;
        grid-template-areas: none;
    }

    .np-content.layout-bento .np-article {
        grid-area: auto !important;
    }

    .np-content.layout-bento .np-stats-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

/* ==================== 探险页面样式 ==================== */

.expedition-page-header {
    margin-bottom: 20px;
}

.expedition-title-section h2 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 8px;
}

.expedition-title-section p {
    color: #666;
    font-size: 14px;
}

.expedition-container {
    max-width: 700px;
    margin: 0 auto;
}

.expedition-loading {
    text-align: center;
    padding: 40px;
    color: #999;
}

.expedition-empty {
    text-align: center;
    padding: 60px 20px;
    background: #f8f9fa;
    border-radius: 16px;
    margin-bottom: 24px;
}

.expedition-empty-icon {
    font-size: 64px;
    margin-bottom: 16px;
}

.expedition-empty h3 {
    font-size: 20px;
    margin-bottom: 8px;
    color: #333;
}

.expedition-empty p {
    color: #666;
    margin-bottom: 20px;
}

.expedition-goto-workshop {
    padding: 12px 32px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    transition: transform 0.2s, box-shadow 0.2s;
}

.expedition-goto-workshop:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.expedition-intro {
    text-align: center;
    margin-bottom: 24px;
    padding: 20px;
    background: linear-gradient(135deg, #f5f7fa, #e8ecf1);
    border-radius: 16px;
}

.expedition-intro h3 {
    font-size: 20px;
    margin-bottom: 8px;
    color: #333;
}

.expedition-intro p {
    color: #666;
    font-size: 14px;
    line-height: 1.6;
}

.expedition-food-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}

.expedition-food-card {
    background: white;
    border-radius: 14px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    border: 1px solid #eee;
    transition: transform 0.2s, box-shadow 0.2s;
}

.expedition-food-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}

.expedition-food-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.expedition-food-name {
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

.expedition-food-count {
    background: #667eea;
    color: white;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
}

.expedition-food-meta {
    display: flex;
    gap: 16px;
    font-size: 13px;
    color: #666;
    margin-bottom: 8px;
}

.expedition-food-boosts {
    font-size: 12px;
    color: #e67e22;
    margin-bottom: 12px;
    line-height: 1.6;
}

.expedition-go-btn {
    width: 100%;
    padding: 10px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.expedition-go-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

/* 进度卡片 */
.expedition-progress-card {
    text-align: center;
    padding: 40px 20px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    margin-bottom: 24px;
}

.expedition-progress-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 16px;
}

.expedition-progress-icon {
    font-size: 32px;
}

.expedition-progress-title {
    font-size: 24px;
    font-weight: 700;
    color: #333;
}

.expedition-progress-food {
    font-size: 16px;
    color: #666;
    margin-bottom: 20px;
}

.expedition-progress-bar-container {
    height: 12px;
    background: #e8ecf1;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 12px;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.expedition-progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #667eea, #764ba2);
    border-radius: 6px;
    transition: width 1s linear;
}

.expedition-progress-time {
    font-size: 18px;
    font-weight: 600;
    color: #667eea;
    margin-bottom: 16px;
}

.expedition-progress-hint {
    font-size: 13px;
    color: #999;
    line-height: 1.6;
}

/* 出差日志 */
.expedition-log-section {
    margin-top: 24px;
}

.expedition-log-section h3 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 12px;
    color: #333;
}

.expedition-log-empty {
    text-align: center;
    padding: 20px;
    color: #999;
    background: #f8f9fa;
    border-radius: 10px;
    font-size: 14px;
}

.expedition-log-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.expedition-log-item {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 12px 16px;
    border: 1px solid #eee;
}

.expedition-log-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
    font-weight: 500;
    font-size: 14px;
}

.expedition-log-rewards {
    font-size: 13px;
    color: #666;
    line-height: 1.5;
}

/* ==================== 美食制作样式 ==================== */

.food-ingredients {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 6px;
}

.food-ingredient {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #f0f4f8;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 12px;
    color: #555;
}

.food-ingredient-img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    border-radius: 4px;
}

.food-craft-time {
    font-size: 12px;
    color: #888;
    margin-bottom: 6px;
}

.food-boosts {
    font-size: 11px;
    color: #e67e22;
    line-height: 1.5;
    margin-bottom: 6px;
}

.food-crafting-badge {
    background: var(--accent, #667eea);
    color: white;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
}

/* 美食制作 - 左右分栏布局 */
.food-layout {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

/* 左侧：菜谱列表 */
.food-sidebar {
    width: 260px;
    flex-shrink: 0;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border-light, #eee);
    border-radius: 16px;
    padding: 16px;
    position: sticky;
    top: 20px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
}

.food-sidebar-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary, #333);
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-light, #eee);
}

.food-tier-group {
    margin-bottom: 14px;
}

.food-tier-group:last-child {
    margin-bottom: 0;
}

.food-tier-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted, #999);
    margin-bottom: 8px;
    padding-left: 4px;
    letter-spacing: 0.5px;
}

.food-tier-items {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.food-recipe-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.food-recipe-item:hover {
    background: var(--bg-secondary, #f5f5f5);
}

.food-recipe-item.selected {
    background: rgba(102, 126, 234, 0.08);
    border-color: rgba(102, 126, 234, 0.3);
}

.food-recipe-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary, #f0f0f0);
    border-radius: 10px;
    position: relative;
    flex-shrink: 0;
    opacity: 0.4;
    filter: grayscale(100%);
    transition: all 0.2s ease;
}

.food-recipe-item.can-craft .food-recipe-icon {
    opacity: 1;
    filter: grayscale(0%);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.15), rgba(118, 75, 162, 0.15));
}

.food-recipe-item.selected .food-recipe-icon {
    background: linear-gradient(135deg, var(--accent, #667eea), var(--accent-2, #764ba2));
}

.food-recipe-emoji,
.food-recipe-img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    font-size: 18px;
    line-height: 1;
}

.food-recipe-item.selected .food-recipe-emoji,
.food-recipe-item.selected .food-recipe-img {
    filter: brightness(1.2) drop-shadow(0 1px 2px rgba(0,0,0,0.2));
}

.food-recipe-dot {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 10px;
    height: 10px;
    background: #ff5722;
    border-radius: 50%;
    border: 2px solid var(--bg-card, #fff);
    animation: recipeDotPulse 1.5s ease-in-out infinite;
}

@keyframes recipeDotPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.2); opacity: 0.8; }
}

.food-recipe-info {
    flex: 1;
    min-width: 0;
}

.food-recipe-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary, #333);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.food-recipe-status {
    font-size: 11px;
    color: var(--text-muted, #999);
}

.food-recipe-item.can-craft .food-recipe-status {
    color: #4caf50;
}

.food-recipe-item.crafting .food-recipe-status {
    color: var(--accent, #667eea);
}

/* 右侧：详情 */
.food-detail {
    flex: 1;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border-light, #eee);
    border-radius: 16px;
    min-height: 500px;
}

.food-detail-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 500px;
    color: var(--text-muted, #999);
}

.food-detail-empty-icon {
    font-size: 48px;
    margin-bottom: 12px;
    opacity: 0.3;
}

.food-detail-empty-text {
    font-size: 14px;
}

/* 详情头部 */
.food-detail-hero {
    padding: 24px;
    border-bottom: 1px solid var(--border-light, #eee);
    display: flex;
    align-items: center;
    gap: 20px;
}

.food-detail-hero-img-wrap {
    width: 90px;
    height: 90px;
    flex-shrink: 0;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.food-detail-hero-img {
    width: 70px;
    height: 70px;
    object-fit: contain;
}

.food-detail-hero-info {
    flex: 1;
    min-width: 0;
}

.food-detail-hero-tier {
    margin-bottom: 8px;
}

.food-detail-hero-name {
    font-size: 22px;
    font-weight: 600;
    color: var(--text-primary, #333);
    margin: 0 0 6px 0;
}

.food-detail-hero-owned {
    font-size: 13px;
    color: var(--text-secondary, #666);
}

.food-detail-hero-owned strong {
    color: var(--accent, #667eea);
    font-size: 16px;
    font-weight: 600;
    margin-left: 2px;
}

.food-detail-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-light, #eee);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.food-detail-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.food-detail-tier {
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
}

.food-detail-tier.tier-low  { background: #e8f5e9; color: #2e7d32; }
.food-detail-tier.tier-mid  { background: #e3f2fd; color: #1565c0; }
.food-detail-tier.tier-high { background: #f3e5f5; color: #7b1fa2; }
.food-detail-tier.tier-top  { background: #fff3e0; color: #e65100; }

.food-detail-title h3 {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary, #333);
    margin: 0;
}

.food-detail-owned {
    font-size: 13px;
    color: var(--text-secondary, #666);
}

.food-detail-owned strong {
    color: var(--accent, #667eea);
    font-size: 16px;
    font-weight: 600;
    margin-left: 2px;
}

/* 详情分区 */
.food-detail-section {
    padding: 18px 24px;
    border-bottom: 1px solid var(--border-light, #eee);
}

.food-detail-section:last-of-type {
    border-bottom: none;
}

.food-detail-section-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary, #333);
    margin-bottom: 12px;
}

/* 食材列表 */
.food-ingredients-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.food-ingredient-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: var(--bg-secondary, #fafafa);
    border-radius: 10px;
    border: 1px solid transparent;
    transition: all 0.2s ease;
}

.food-ingredient-row.enough {
    background: #f1f8e9;
    border-color: #c8e6c9;
}

.food-ingredient-row.not-enough {
    background: #ffebee;
    border-color: #ffcdd2;
}

.food-ingredient-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.food-ingredient-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.food-ingredient-left span {
    font-size: 13px;
    color: var(--text-primary, #333);
    font-weight: 500;
}

.food-ingredient-right {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 600;
}

.food-ingredient-have {
    color: var(--text-primary, #333);
}

.food-ingredient-row.enough .food-ingredient-have {
    color: #2e7d32;
}

.food-ingredient-row.not-enough .food-ingredient-have {
    color: #c62828;
}

.food-ingredient-sep {
    color: var(--text-muted, #bbb);
}

.food-ingredient-need {
    color: var(--text-secondary, #666);
}

/* 美食介绍 */
.food-description {
    font-size: 13px;
    line-height: 1.7;
    color: var(--text-secondary, #555);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05), rgba(118, 75, 162, 0.05));
    border-left: 3px solid var(--accent, #667eea);
    padding: 12px 16px;
    border-radius: 0 10px 10px 0;
}

/* 增益效果列表 */
.food-boosts-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.food-boost-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: var(--bg-secondary, #fafafa);
    border-radius: 10px;
    font-size: 13px;
}

.food-boost-row span:first-child {
    color: var(--text-secondary, #666);
}

.food-boost-card {
    background: var(--bg-secondary, #fafafa);
    border-radius: 12px;
    padding: 12px 14px;
    border: 1px solid var(--border-light, #eee);
    transition: all 0.2s ease;
}

.food-boost-card:hover {
    border-color: rgba(102, 126, 234, 0.3);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.04), rgba(118, 75, 162, 0.04));
}

.food-boost-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.food-boost-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary, #333);
}

.food-boost-desc {
    font-size: 12px;
    color: var(--text-muted, #999);
    line-height: 1.5;
}

.food-boost-val {
    font-weight: 600;
    color: var(--accent, #667eea);
    font-size: 14px;
}

/* 信息网格 */
.food-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.food-info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: var(--bg-secondary, #fafafa);
    border-radius: 10px;
}

.food-info-label {
    font-size: 12px;
    color: var(--text-secondary, #666);
}

.food-info-value {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary, #333);
}

/* 制作按钮区 */
.food-detail-action {
    padding: 20px 24px;
}

.food-craft-btn {
    width: 100%;
    padding: 14px 20px;
    background: linear-gradient(135deg, var(--accent, #667eea), var(--accent-2, #764ba2));
    color: white;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    transition: all 0.2s ease;
}

.food-craft-btn:hover:not(:disabled) {
    opacity: 0.92;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.3);
}

.food-craft-btn.disabled {
    background: var(--bg-disabled, #e0e0e0);
    color: var(--text-muted, #999);
    cursor: not-allowed;
}

/* 制作进度 */
.food-crafting-progress-wrap {
    text-align: center;
}

.food-crafting-progress-bar {
    height: 10px;
    background: var(--bg-secondary, #f0f0f0);
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 8px;
}

.food-crafting-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent, #667eea), var(--accent-2, #764ba2));
    border-radius: 5px;
    transition: width 0.3s ease;
}

.food-crafting-text {
    font-size: 13px;
    color: var(--accent, #667eea);
    font-weight: 500;
}

/* 暗色模式 */
body.dark-mode .food-sidebar,
body.dark-mode .food-detail {
    background: var(--bg-card, #1e1e2e);
    border-color: var(--border-light, #2d2d3f);
}

body.dark-mode .food-sidebar-title {
    color: var(--text-primary, #e0e0e0);
    border-bottom-color: var(--border-light, #2d2d3f);
}

body.dark-mode .food-tier-label {
    color: var(--text-muted, #666);
}

body.dark-mode .food-recipe-item:hover {
    background: var(--bg-secondary, #252538);
}

body.dark-mode .food-recipe-item.selected {
    background: rgba(102, 126, 234, 0.15);
    border-color: rgba(102, 126, 234, 0.4);
}

body.dark-mode .food-recipe-icon {
    background: var(--bg-secondary, #2d2d3f);
}

body.dark-mode .food-recipe-item.can-craft .food-recipe-icon {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.2), rgba(118, 75, 162, 0.2));
}

body.dark-mode .food-recipe-name {
    color: var(--text-primary, #e0e0e0);
}

body.dark-mode .food-recipe-status {
    color: var(--text-muted, #666);
}

body.dark-mode .food-recipe-item.can-craft .food-recipe-status {
    color: #81c784;
}

body.dark-mode .food-recipe-item.crafting .food-recipe-status {
    color: var(--accent, #818cf8);
}

body.dark-mode .food-recipe-dot {
    border-color: var(--bg-card, #1e1e2e);
}

body.dark-mode .food-detail-empty {
    color: var(--text-muted, #555);
}

body.dark-mode .food-detail-hero {
    border-bottom-color: var(--border-light, #2d2d3f);
}

body.dark-mode .food-detail-hero-img-wrap {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.15), rgba(118, 75, 162, 0.15));
}

body.dark-mode .food-detail-hero-name {
    color: var(--text-primary, #e0e0e0);
}

body.dark-mode .food-detail-hero-owned {
    color: var(--text-secondary, #aaa);
}

body.dark-mode .food-detail-hero-owned strong {
    color: var(--accent, #818cf8);
}

body.dark-mode .food-detail-header {
    border-bottom-color: var(--border-light, #2d2d3f);
}

body.dark-mode .food-detail-title h3 {
    color: var(--text-primary, #e0e0e0);
}

body.dark-mode .food-detail-owned {
    color: var(--text-secondary, #aaa);
}

body.dark-mode .food-detail-owned strong {
    color: var(--accent, #818cf8);
}

body.dark-mode .food-detail-tier.tier-low  { background: #1b5e20; color: #a5d6a7; }
body.dark-mode .food-detail-tier.tier-mid  { background: #0d47a1; color: #90caf9; }
body.dark-mode .food-detail-tier.tier-high { background: #4a148c; color: #ce93d8; }
body.dark-mode .food-detail-tier.tier-top  { background: #e65100; color: #ffcc80; }

body.dark-mode .food-detail-section {
    border-bottom-color: var(--border-light, #2d2d3f);
}

body.dark-mode .food-detail-section-title {
    color: var(--text-primary, #e0e0e0);
}

body.dark-mode .food-ingredient-row {
    background: var(--bg-secondary, #252538);
}

body.dark-mode .food-ingredient-row.enough {
    background: rgba(76, 175, 80, 0.1);
    border-color: rgba(76, 175, 80, 0.3);
}

body.dark-mode .food-ingredient-row.not-enough {
    background: rgba(244, 67, 54, 0.1);
    border-color: rgba(244, 67, 54, 0.3);
}

body.dark-mode .food-ingredient-left span {
    color: var(--text-primary, #e0e0e0);
}

body.dark-mode .food-ingredient-have {
    color: var(--text-primary, #e0e0e0);
}

body.dark-mode .food-ingredient-row.enough .food-ingredient-have {
    color: #81c784;
}

body.dark-mode .food-ingredient-row.not-enough .food-ingredient-have {
    color: #e57373;
}

body.dark-mode .food-ingredient-sep {
    color: var(--text-muted, #555);
}

body.dark-mode .food-ingredient-need {
    color: var(--text-secondary, #aaa);
}

body.dark-mode .food-description {
    color: var(--text-secondary, #bbb);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
    border-left-color: var(--accent, #818cf8);
}

body.dark-mode .food-boost-row {
    background: var(--bg-secondary, #252538);
}

body.dark-mode .food-boost-row span:first-child {
    color: var(--text-secondary, #aaa);
}

body.dark-mode .food-boost-card {
    background: var(--bg-secondary, #252538);
    border-color: var(--border-light, #2d2d3f);
}

body.dark-mode .food-boost-card:hover {
    border-color: rgba(129, 140, 248, 0.4);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.08), rgba(118, 75, 162, 0.08));
}

body.dark-mode .food-boost-label {
    color: var(--text-primary, #e0e0e0);
}

body.dark-mode .food-boost-desc {
    color: var(--text-muted, #777);
}

body.dark-mode .food-boost-val {
    color: var(--accent, #818cf8);
}

body.dark-mode .food-info-item {
    background: var(--bg-secondary, #252538);
}

body.dark-mode .food-info-label {
    color: var(--text-secondary, #aaa);
}

body.dark-mode .food-info-value {
    color: var(--text-primary, #e0e0e0);
}

body.dark-mode .food-craft-btn.disabled {
    background: var(--bg-disabled, #333);
    color: var(--text-muted, #666);
}

body.dark-mode .food-crafting-progress-bar {
    background: var(--bg-secondary, #2d2d3f);
}

body.dark-mode .food-crafting-text {
    color: var(--accent, #818cf8);
}

/* 响应式 */
@media (max-width: 768px) {
    .food-layout {
        flex-direction: column;
    }

    .food-sidebar {
        width: 100%;
        position: static;
        max-height: none;
    }

    .food-tier-items {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .food-detail {
        min-height: 400px;
    }

    .food-detail-empty {
        height: 400px;
    }
}

/* 暗黑模式支持 */
body.dark .expedition-intro {
    background: linear-gradient(135deg, #2d2d3f, #1e1e2e);
}

body.dark .expedition-intro h3 {
    color: #e0e0e0;
}

body.dark .expedition-intro p,
body.dark .expedition-title-section p {
    color: #aaa;
}

body.dark .expedition-food-card {
    background: #2d2d3f;
    border-color: #3d3d5c;
}

body.dark .expedition-food-name {
    color: #e0e0e0;
}

body.dark .expedition-progress-card {
    background: #2d2d3f;
}

body.dark .expedition-progress-title {
    color: #e0e0e0;
}

body.dark .expedition-empty {
    background: #2d2d3f;
}

body.dark .expedition-empty h3 {
    color: #e0e0e0;
}

body.dark .expedition-log-item {
    background: #2d2d3f;
    border-color: #3d3d5c;
}

body.dark .expedition-log-header {
    color: #e0e0e0;
}

body.dark .food-ingredient {
    background: #3d3d5c;
    color: #ccc;
}

body.dark .expedition-log-empty {
    background: #2d2d3f;
    color: #888;
}

body.dark .expedition-log-section h3 {
    color: #e0e0e0;
}

/* ====== 图鉴页面 ====== */
.collection-page {
    padding: 16px;
    max-width: 900px;
    margin: 0 auto;
}

.collection-title-section {
    text-align: center;
    margin-bottom: 20px;
}

.collection-title-section h2 {
    font-size: 24px;
    margin: 0 0 6px 0;
    background: linear-gradient(135deg, #667eea, #764ba2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.collection-title-section p {
    color: var(--text-secondary, #666);
    font-size: 14px;
    margin: 0;
}

.collection-header {
    margin-bottom: 20px;
}

.collection-stats {
    text-align: center;
    margin-bottom: 10px;
}

.collection-count {
    font-size: 16px;
    color: var(--text-primary, #333);
    font-weight: 500;
}

.collection-count strong {
    color: #667eea;
    font-size: 20px;
}

.collection-progress-bar {
    height: 8px;
    background: #e8e8e8;
    border-radius: 10px;
    overflow: hidden;
    margin-top: 8px;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.collection-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #667eea, #764ba2);
    border-radius: 10px;
    transition: width 0.5s ease;
}

.collection-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 14px;
}

.collection-card {
    background: #fff;
    border-radius: 14px;
    text-align: center;
    border: 2px solid #e8e8e8;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    aspect-ratio: 1;
}

.collection-card.unlocked {
    border: none;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}

.collection-card.unlocked .collection-card-image-wrap {
    padding: 0;
}

.collection-card.unlocked .collection-card-img {
    transform: scale(1.2);
}

.collection-card.locked {
    opacity: 0.7;
    background: #f5f5f5;
}

.collection-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.collection-card-image-wrap {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    box-sizing: border-box;
}

.collection-card-img {
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: all 0.3s ease;
}

.collection-card-img.locked-img {
    filter: brightness(0) saturate(0) opacity(0.4);
}

.collection-lock-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 28px;
    opacity: 0.6;
}

.collection-card-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary, #333);
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.collection-card-badge {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 20px;
    display: inline-block;
}

.collection-card-badge {
    background: #e8f5e9;
    color: #2e7d32;
}

.collection-card-badge.locked-badge {
    background: #f5f5f5;
    color: #999;
}

/* ====== 新鱼解锁弹窗 ====== */
.newfish-modal {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.newfish-img {
    max-width: 80vw;
    max-height: 80vh;
    object-fit: contain;
    animation: newfish-pop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes newfish-pop {
    0% { transform: scale(0.5); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

/* ====== 图鉴 + 弹窗 暗色模式 ====== */
body.dark .collection-card {
    background: #2d2d3f;
    border-color: #3d3d5c;
}

body.dark .collection-card.unlocked {
    border: none;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}

body.dark .collection-card.unlocked .collection-card-img {
    transform: scale(1.2);
}

body.dark .collection-card.locked {
    background: #252535;
}

body.dark .collection-card-name {
    color: #e0e0e0;
}

body.dark .collection-card-badge {
    background: #1b5e20;
    color: #a5d6a7;
}

body.dark .collection-card-badge.locked-badge {
    background: #333;
    color: #666;
}

/* ====== 新鱼解锁弹窗遮罩 ====== */
#newFishOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: var(--z-overlay);
}

body.dark #newFishOverlay {
    background: rgba(0, 0, 0, 0.75);
}

body.dark .collection-count {
    color: #ccc;
}

body.dark .collection-count strong {
    color: #8a9eff;
}

body.dark .collection-progress-bar {
    background: #3d3d5c;
}

/* ====== 弹幕系统 ====== */
#bulletScreenContainer {
    position: fixed;
    top: 50px;
    left: 0;
    right: 0;
    height: 180px;
    z-index: 999999;
    pointer-events: none;
    overflow: hidden;
}

.bullet-item {
    position: absolute;
    left: 100%;
    white-space: nowrap;
    color: #fff;
    text-shadow: 0 0 4px rgba(0,0,0,0.8), 0 0 8px rgba(0,0,0,0.6);
    padding: 2px 12px;
    border-radius: 4px;
    line-height: 24px;
    opacity: 0.95;
    animation: bulletFly 8s linear forwards;
    will-change: transform;
}

.bullet-name {
    color: #ffd700;
    font-weight: 600;
}

/* 系统消息弹幕 — 带边框 */
.bullet-system {
    border: 2px solid #ff6b35;
    background: rgba(255, 107, 53, 0.15);
    color: #ffd700;
    font-weight: 600;
    border-radius: 6px;
}

/* 礼物消息弹幕 */
.bullet-gift {
    color: #ff69b4;
}

@keyframes bulletFly {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(-100vw - 200%));
    }
}