:root {
    /* 紫主色 · 粉强调 · 浅灰底 */
    --primary-color: #6D5AE6;
    --primary-dark: #4B3FA8;
    --primary-light: #ECE9FF;
    --primary-soft: #F5F3FF;
    --accent-color: #F46FB0;
    --background-color: #F5F6FB;
    --card-background: #FFFFFF;
    --text-color: #1F2233;
    --text-secondary: #6B7280;
    --success-color: #16A34A;
    --warning-color: #D97706;
    --danger-color: #E5484D;
    --border-color: #ECECF2;
    --border-radius: 16px;
    --shadow: 0 2px 10px rgba(31,34,51,0.05);
    --shadow-lg: 0 12px 32px rgba(31,34,51,0.12);
    --bottom-nav-height: 60px;
    /* 渐变 */
    --grad-primary: linear-gradient(135deg, #7C6CF5 0%, #5B4BD6 100%);
    --grad-water: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --grad-flow: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    /* 兼容原组件引用的别名（原文件曾用但未定义） */
    --bg-color: #F5F6FB;
    --text-primary: #1F2233;
    --secondary-color: #9AA0AE;
    --error-color: #E5484D;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Microsoft YaHei', '微软雅黑', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    /* 移动端去除点按高亮蓝（微信/WebView 默认点空白区域会叠加蓝色遮罩）；点击反馈由各元素 :active 提供 */
    -webkit-tap-highlight-color: transparent;
    -webkit-tap-highlight-color: transparent;
    tap-highlight-color: transparent;
}

body {
    background-color: var(--background-color);
    color: var(--text-color);
    line-height: 1.6;
    padding-bottom: calc(var(--bottom-nav-height) + 16px);
    min-height: 100vh;
}

/* 全局柔和滚动条（细、半透明、与主题紫同系，hover 略显） */
* { scrollbar-width: thin; scrollbar-color: rgba(124,108,245,0.35) transparent; }
html, body { scroll-behavior: smooth; overscroll-behavior-y: contain; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(124,108,245,0.30); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: rgba(124,108,245,0.55); }

/* 头部样式 */
.header {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    color: white;
    padding: 14px 16px;
    display: none !important;
    justify-content: flex-end;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--shadow);
    /* 隔离 sticky 头部合成层，避免拖慢页面滚动 */
    contain: layout style;
}

.header-left {
    display: none;
}

.header h1 {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.refresh-btn {
    background: none;
    border: none;
    color: white;
    font-size: 18px;
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    transition: background-color 0.2s;
}

.refresh-btn:hover {
    background-color: rgba(255,255,255,0.2);
}

.refresh-btn.spinning {
    animation: spin 1s linear infinite;
}

.network-status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: rgba(255,255,255,0.9);
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--success-color);
}

.status-dot.offline {
    background-color: var(--danger-color);
}

/* 主要内容区域 */
.main-content {
    padding: 0 16px;
    max-width: 800px;
    margin: 0 auto;
}

/* 卡片样式 */
.card {
    background-color: var(--card-background);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    margin-bottom: 16px;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.card:active {
    transform: translateY(0);
}

.card-header {
    padding: 12px 16px;
    background-color: var(--primary-light);
    color: var(--primary-dark);
    font-weight: 500;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-header span {
    display: flex;
    align-items: center;
    gap: 8px;
}

.card-header i {
    font-size: 16px;
    opacity: 0.8;
}

.card-header::after {
    content: '查看详情 ›';
    font-size: 12px;
    color: var(--text-secondary);
    opacity: 0.7;
    white-space: nowrap;
    padding: 4px 8px;
    background-color: rgba(255,255,255,0.5);
    border-radius: 12px;
}

.card-body {
    padding: 16px;
}

/* 水位卡片 */
.water-level-card .current-level {
    font-size: 36px;
    font-weight: bold;
    color: var(--primary-color);
    text-align: center;
    margin: 10px 0;
}

.water-level-card .trend {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--text-secondary);
}

.water-level-card .trend.rising {
    color: var(--danger-color);
}

.water-level-card .trend.falling {
    color: var(--success-color);
}

.water-level-card .data-source {
    font-size: 11px;
    color: var(--text-secondary);
    text-align: center;
    margin-top: 8px;
    opacity: 0.7;
}



/* 钓点页面样式 */
.spots-filter {
    margin-bottom: 15px;
}

.search-box {
    display: flex;
    align-items: center;
    background: var(--card-background);
    border-radius: 20px;
    padding: 10px 15px;
    margin-bottom: 12px;
    box-shadow: var(--shadow);
}

.search-box i {
    color: var(--text-secondary);
    margin-right: 10px;
}

.search-box input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 14px;
}

.filter-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.filter-btn {
    padding: 6px 14px;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background: var(--card-background);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
    color: var(--text-color);
}

.filter-btn.active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.filter-btn:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.spots-stats {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    font-size: 12px;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 15px;
}

.spots-list-container {
    margin-bottom: 20px;
}

.fishing-spots-list {
    list-style: none;
    display: grid;
    gap: 15px;
}

.fishing-spot-item {
    background: var(--card-background);
    border-radius: var(--border-radius);
    padding: 15px;
    box-shadow: var(--shadow);
    cursor: pointer;
    transition: transform 0.2s;
    border-left: 4px solid var(--primary-color);
}

.fishing-spot-item:hover {
    transform: translateY(-2px);
}

.fishing-spot-item:active {
    transform: translateY(0);
}

.fishing-spot-item .spot-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}

.fishing-spot-item .spot-name {
    font-weight: 600;
    font-size: 16px;
    color: var(--text-color);
    margin: 0;
}

.fishing-spot-item .spot-rating {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    color: #ffc107;
}

.fishing-spot-item .spot-description {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 10px;
    line-height: 1.4;
}

.fishing-spot-item .spot-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.fishing-spot-item .spot-tag {
    padding: 3px 10px;
    background: #F5F3FF;
    color: #6D5AE6;
    border: 1px solid #E0DBF7;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 500;
}

.fishing-spot-item .spot-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: var(--text-secondary);
    border-top: 1px solid var(--background-color);
    padding-top: 10px;
}

.fishing-spot-item .popularity {
    display: flex;
    align-items: center;
    gap: 4px;
}

.fishing-spot-item .favorite-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 16px;
    cursor: pointer;
    transition: color 0.2s;
}

.fishing-spot-item .favorite-btn.active {
    color: #e91e63;
}

.fishing-spot-item .favorite-btn:hover {
    color: #e91e63;
}

/* 钓点详情弹窗样式 */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-content {
    background: var(--card-background);
    border-radius: var(--border-radius);
    width: 90%;
    max-width: 500px;
    max-height: 80vh;
    overflow-y: auto;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid var(--border-color);
}

.modal-header h3 {
    margin: 0;
    font-size: 18px;
}

.close-btn {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: var(--text-secondary);
    /* 移动端可点区域加大 */
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
}

.modal-body {
    padding: 15px;
}

/* 详情弹窗基础样式（被误删，从 backup 恢复） */
.detail-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.detail-modal-content {
    background: var(--card-background);
    border-radius: 16px;
    width: 100%;
    max-width: 600px;
    max-height: 85vh;
    overflow-y: auto;
    animation: modalPop 0.25s ease;
}

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

.detail-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    background: var(--card-background);
    z-index: 1;
}

.detail-modal-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-color);
    display: flex;
    align-items: center;
    gap: 8px;
}

.detail-modal-header h3 i {
    color: var(--primary-color);
}

.detail-modal-close {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: var(--background-color);
    color: var(--text-secondary);
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

.detail-modal-close:hover {
    background: var(--danger-color);
    color: white;
}

.detail-modal-body {
    padding: 20px;
}

/* 导航选择弹窗：调用手机已装地图 App */
.nav-choice-content { max-width: 360px; }
.nav-choice-list { display: flex; flex-direction: column; gap: 10px; }
.nav-choice-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 13px 14px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--background-color);
    color: var(--text-color);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s, transform 0.08s;
}
.nav-choice-item:hover { background: #f3f1fe; border-color: var(--primary-color); }
.nav-choice-item:active { transform: scale(0.98); }
.nav-choice-item .nav-icon {
    width: 32px; height: 32px;
    border-radius: 9px;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-size: 16px; flex-shrink: 0;
}
.nav-choice-item .nav-icon.amap { background: linear-gradient(135deg, #2ecc71, #16a34a); }
.nav-choice-item .nav-icon.baidu { background: linear-gradient(135deg, #3b7cff, #2456d8); }
.nav-choice-item .nav-icon.qq { background: linear-gradient(135deg, #12b7f5, #0a8ad6); }
.nav-choice-item .nav-sub { font-size: 12px; font-weight: 400; color: var(--text-secondary); margin-left: 2px; }

/* ═════════════════ 详情卡片（钓点/钓获）现代重做 ═════════════════ */
.spot-detail-card { width: 92%; max-width: 420px; max-height: 88vh; display: flex; }

.sd-card {
    position: relative;
    display: flex; flex-direction: column;
    width: 100%; max-height: 88vh;
    overflow: hidden;
    background: var(--card-background);
    border-radius: 18px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.30), 0 4px 12px rgba(0,0,0,0.10);
    transform: translateY(12px) scale(0.97);
    opacity: 0;
    transition: transform 0.28s cubic-bezier(.2,.8,.2,1), opacity 0.28s ease;
}
.sd-card.sd-show { transform: translateY(0) scale(1); opacity: 1; }

/* 通用图片占位 */
.spot-image-placeholder {
    color: var(--text-secondary);
    display: flex; align-items: center; justify-content: center;
}

/* ── 横幅图（更紧凑 + 底部渐变遮罩） ── */
.sd-hero {
    position: relative; flex-shrink: 0;
    width: 100%; height: 200px;
    background: #F5F3FF;
    border-radius: 18px 18px 0 0;
    overflow: hidden;
}
.sd-hero-img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 横幅底部渐变：让关闭按钮和缩略图在任何图上都清晰 */
.sd-hero::after {
    content: ''; position: absolute; left:0; right:0; bottom:0; height:50%;
    background: linear-gradient(to top, rgba(0,0,0,0.25), transparent);
    pointer-events: none;
}
.sd-hero.is-catch { background: linear-gradient(135deg, #fff1e6, #ffe4cf); }
.sd-hero.is-spot  { background: linear-gradient(135deg, #EDEAFB, #E6E1FB); }
.sd-hero--empty { display: flex; align-items: center; justify-content: center; }
.sd-hero-empty-inner { display:flex; flex-direction:column; align-items:center; gap:10px; }
.sd-hero-empty-inner i {
    width:54px; height:54px; border-radius:50%;
    background:rgba(255,255,255,0.85); color:var(--primary-color);
    display:flex; align-items:center; justify-content:center; font-size:22px;
}
.sd-hero-empty-inner span { font-size:12px; color:var(--text-secondary); }

/* 缩略图条（浮在横幅底部） */
.sd-thumbs {
    position: absolute; left:0; right:0; bottom:0;
    display: flex; gap:6px; padding:10px 12px;
    overflow-x: auto; scrollbar-width: none;
}
.sd-thumbs::-webkit-scrollbar { display: none; }
.sd-thumb {
    flex:0 0 auto; width:44px; height:44px;
    border-radius:8px; overflow:hidden; cursor:pointer;
    border:2px solid rgba(255,255,255,0.70); opacity:.80;
    transition: all .18s; background:#fff;
}
.sd-thumb.active { border-color:#fff; opacity:1; transform:translateY(-2px); box-shadow:0 2px 6px rgba(0,0,0,.25); }
.sd-thumb img { width:100%; height:100%; object-fit:cover; display:block; }

/* 关闭按钮（悬浮右上角，z-index 在遮罩之上） */
.sd-close {
    position:absolute; top:10px; right:10px; z-index:4;
    width:32px; height:32px; border:none; border-radius:50%;
    background:rgba(255,255,255,0.88);
    color:#3B3F52; font-size:14px; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    backdrop-filter:blur(6px);
    box-shadow:0 2px 8px rgba(0,0,0,.18);
    transition:transform .15s, background .15s;
    contain: layout style;
}
.sd-close:hover { background:#fff; transform:scale(1.08); }

/* ── 内容区（紧凑间距） ── */
.sd-body { padding:14px 16px 18px; overflow-y:auto; flex:1; -webkit-overflow-scrolling:touch; }

/* 标题行 */
.sd-title-row { display:flex; flex-direction:column; align-items:flex-start; gap:6px; margin-bottom:10px; }
.sd-title { margin:0; font-size:18px; font-weight:700; color:var(--text-color); line-height:1.35; }
.sd-title-row .spot-type-badge { font-size:11px; padding:2px 9px; flex-shrink:0; }

/* 详情弹窗贡献者（醒目，主色系） */
.sd-contributor {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding: 4px 0;
    background: transparent;
    border: none;
    border-radius: 10px;
}
.sd-contributor.is-official { background: transparent; border-color: transparent; }
.sd-contributor-avatar {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--primary-color);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; flex-shrink: 0;
}
.sd-contributor.is-official .sd-contributor-avatar { background: var(--primary-dark); }
.sd-contributor-info { display: flex; flex-direction: column; line-height: 1.25; }
.sd-contributor-label { font-size: 10px; color: var(--primary-dark); opacity: .85; }
.sd-contributor-name { font-size: 14px; font-weight: 700; color: var(--text-color); }
.sd-contributor-badge {
    margin-left: auto;
    font-size: 11px; font-weight: 600;
    color: #fff; background: var(--primary-color);
    padding: 2px 8px; border-radius: 999px;
}

/* 钓点：评分+热度一行紧凑，底部分隔线 */
.sd-meta {
    display:flex; align-items:center; gap:12px;
    margin-bottom:10px; padding-bottom:10px;
    border-bottom:1px solid rgba(109, 90, 230,.08);
}
.sd-stars { color:#f59e0b; font-size:15px; letter-spacing:1px; }
.sd-score { font-size:17px; font-weight:700; color:var(--text-color); min-width:20px; }
.sd-pop {
    display:inline-flex; align-items:center; gap:4px; margin-left:auto;
    font-size:12px; color:#9AA0AE; padding:2px 8px; border-radius:10px;
}
.sd-pop i { color:#9AA0AE; }

/* 钓获：鱼种/重量胶囊 */
.sd-chips { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px; }
.sd-chip {
    display:inline-flex; align-items:center; gap:6px;
    background:#fff7ed; color:#c24a0a; border:1px solid #fdd9b3;
    padding:5px 11px; border-radius:12px; font-size:13px; font-weight:500;
}
.sd-chip i { color:#ea580c; }

/* 描述块 */
.sd-desc {
    margin-top:10px; background:var(--background-color);
    border-radius:10px; padding:10px 12px;
    border:1px solid rgba(0,0,0,.04);
}
.sd-desc-label { font-size:11px; color:var(--text-secondary); margin-bottom:3px; font-weight:600; text-transform:uppercase; letter-spacing:.5px; }
.sd-desc p { margin:0; color:var(--text-color); line-height:1.55; font-size:13px; }

/* 标签（更小更精致） */
.sd-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.sd-tag {
    padding:4px 11px;
    background:#F5F3FF; color:#6D5AE6;
    border:1px solid #E0DBF7; border-radius:12px;
    font-size:11px; font-weight:500;
}
.sd--catch .sd-tag { background:#fff6ee; color:#c24a0a; border-color:#fdd9b3; }

/* ── 操作区 ── */
.sd-actions { margin-top:16px; display:flex; flex-direction:column; gap:10px; }
.sd-actions-sub { display:flex; gap:8px; }
.sd-btn--block { width:100%; }
.sd-btn {
    border:none; cursor:pointer; border-radius:11px;
    font-size:13px; font-weight:600;
    display:inline-flex; align-items:center; justify-content:center; gap:6px;
    padding:10px 12px; transition:all .18s;
}
.sd-btn--primary {
    background:linear-gradient(135deg,#6D5AE6,#5B4BD6); color:#fff;
    box-shadow:0 2px 8px rgba(109, 90, 230,.30);
}
.sd-btn--primary:hover {
    background:linear-gradient(135deg,#5B4BD6,#4B3FA8);
    box-shadow:0 3px 12px rgba(109, 90, 230,.40);
}
.sd-btn--ghost { flex:1; background:transparent; color:var(--text-secondary); border:1px solid rgba(148,163,184,.35); }
.sd-btn--ghost:hover { background:var(--background-color); color:var(--primary-color); border-color:var(--primary-color); }
.sd-btn--complete { color:var(--primary-color); border-color:var(--primary-color); font-weight:600; }

.btn-primary, .btn-secondary {
    padding: 10px 20px;
    border: none;
    border-radius: 20px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.btn-primary {
    background: var(--primary-color);
    color: white;
}

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

.btn-secondary {
    background: var(--card-background);
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
}

.btn-secondary:hover {
    background: #F3F1FE;
}

/* 选择位置按钮 */
.btn-select-location {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--card-background);
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
    border-radius: 20px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}
.btn-select-location:hover {
    background: var(--primary-color);
    color: #fff;
}
.btn-select-location.active {
    background: var(--primary-color);
    color: #fff;
    /* 降低频率减轻滚动闪烁 */
    animation: pulse 3s ease-in-out infinite;
    contain: layout style;
}
.location-hint {
    display: block;
    margin-top: 4px;
    color: var(--text-secondary);
    font-size: 12px;
}

/* 添加钓点表单样式 */
.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
    color: var(--text-color);
}

.form-group input, .form-group textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: 14px;
    box-sizing: border-box;
}

.form-group textarea {
    resize: vertical;
}

.form-row {
    display: flex;
    gap: 15px;
}

.form-row .form-group {
    flex: 1;
}

.form-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 20px;
}

/* 钓点空状态样式 */
.empty-state {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-secondary);
}

.empty-state i {
    font-size: 64px;
    margin-bottom: 20px;
    opacity: 0.5;
}

.empty-state h3 {
    margin: 0 0 10px 0;
    color: var(--text-color);
}

.empty-state p {
    margin: 0 0 20px 0;
    line-height: 1.5;
}

/* 底部导航栏 */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--bottom-nav-height);
    background-color: var(--card-background);
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.06);
    z-index: 100;
    border-top: 1px solid var(--border-color);
}

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 11px;
    padding: 6px 0;
    border-radius: 8px;
    transition: all 0.2s;
    min-width: 64px;
    flex: 1;
}

.nav-item.active {
    color: var(--primary-color);
}

.nav-item:not(.active):hover {
    color: var(--primary-color);
}

.nav-item i {
    font-size: 20px;
    margin-bottom: 3px;
    transition: transform 0.2s;
}

.nav-item.active i {
    transform: scale(1.1);
}

.nav-item span {
    font-weight: 500;
}

/* 页面标题样式 */
.detail-page > h2 {
    margin: 0 0 20px 0;
    font-size: 22px;
    font-weight: 600;
    color: var(--text-color);
    padding-bottom: 12px;
    border-bottom: 2px solid var(--primary-light);
}

/* 详情页面 */
.detail-page {
    display: none;
    padding: 16px;
    padding-top: 20px;
    max-width: 800px;
    margin: 0 auto;
    min-height: calc(100vh - var(--bottom-nav-height));
}

.detail-page.active {
    display: block;
}

/* 水库水位页顶部整合栏：刷新+用户状态+站点操作合并为一个紫色整体，滚动时 sticky 固定 */
/* 对齐原理：本元素与 .stations-grid 是 .detail-page 下的亲兄弟 block，
   width:auto 天然等宽 —— 绝不可写死 width，否则窄屏溢出。
   左右 padding 必须严格等于 .station-card 的 15px，保证内部文字左边缘对齐。 */
/* 顶部整合栏：跟 .stations-grid 是 .detail-page 下亲兄弟 block，
   都用 width:auto → 撑满父 content-box → 天然等宽。
   padding: 12px 15px 与 .station-card padding 15px 文字左缘严格对齐 */
.wl-top-bar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    /* 用与 .station-card 相同强度的阴影（都 6% 透明度），让紫色栏与卡片视觉边界表现一致 */
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
    padding: 12px 15px;
    margin: 0 0 16px 0;
    box-sizing: border-box;
    contain: style;
    /* 与 .stations-grid 严格同宽：width:100% 撑满父 .detail-page content-box，不可写死 px（否则窄屏溢出） */
    width: 100%;
}
.wl-top-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    margin: 0 0 12px 0;
    background: transparent;
    border-radius: 0;
    color: #fff;
    box-shadow: none;
    padding: 0;
    box-sizing: border-box;
}
/* 站点操作按钮融入紫色整栏（白底卡片，与整栏视觉统一） */
.wl-top-bar .station-actions {
    margin-bottom: 0;
    gap: 10px;
}
.wl-top-bar .station-btn {
    background: #fff;
    color: var(--primary-dark);
    border: none;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}
.wl-top-bar .station-btn-add {
    color: var(--primary-dark);
}
.wl-top-bar .station-btn-manage {
    color: #c2410c;
}
.wl-top-bar .station-btn:hover {
    background: #f3f1fe;
}
.wl-header-refresh {
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,0.18);
    color: #fff;
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
}
.wl-header-refresh:hover { background: rgba(255,255,255,0.30); }
.wl-header-refresh:active { transform: scale(0.94); }
.wl-header-refresh.spinning i { animation: wl-spin 1s linear infinite; }
.wl-us-vip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    border: 1px solid rgba(255,255,255,0.35);
    box-shadow: 0 2px 6px rgba(0,0,0,0.18);
    text-shadow: 0 1px 2px rgba(0,0,0,0.15);
    white-space: nowrap;
    flex-shrink: 0;
}
.wl-us-vip i { font-size: 11px; }
.wl-header-user {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.wl-us-name {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    flex-shrink: 0;
}
.wl-us-credits {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: rgba(255,255,255,0.16);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    flex-shrink: 0;
}
.wl-us-login {
    padding: 6px 14px;
    border: none;
    border-radius: 20px;
    background: rgba(255,255,255,0.20);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
}
.wl-us-login:hover { background: rgba(255,255,255,0.32); }
.wl-us-login:active { transform: scale(0.96); }
.wl-us-guest {
    font-size: 14px;
    color: rgba(255,255,255,0.85);
}

.back-button {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500;
    margin-bottom: 16px;
    cursor: pointer;
}

/* 水位图表容器 */
.water-chart-container {
    height: 340px;
    margin: 10px 0;
    position: relative;
    background: var(--card-background);
    border-radius: var(--border-radius);
    padding: 10px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
}

.water-chart-container canvas {
    width: 100%;
    height: 100%;
}
/* 图表左右轴标签，对齐 sw_html 参考（水位(米)/流量(m³/s)） */
.chart-axis-label {
    position: absolute;
    top: 0;
    font-size: 12px;
    color: #666;
    white-space: nowrap;
    z-index: 2;
    pointer-events: none;
}
.chart-axis-label.left { left: 8px; }
.chart-axis-label.right { right: 8px; }

/* 历史水位数据表格（对齐 sw_html：深色表头 + 不换行 + 横向滚动） */
.water-history-table {
    margin: 10px 0 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.water-history-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
    white-space: nowrap;
}

.water-history-table thead th {
    background: linear-gradient(135deg, #34495e, #2c3e50);
    padding: 7px 6px;
    text-align: left;
    font-weight: 600;
    font-size: 12.5px;
    color: #fff;
    border-bottom: 2px solid #ddd;
    position: sticky;
    top: 0;
    z-index: 1;
    white-space: nowrap;
    contain: layout style;
}

.water-history-table tbody td {
    padding: 6px 6px;
    text-align: left;
    border-bottom: 1px solid #eee;
    color: #555;
    white-space: nowrap;
}

.water-history-table tbody tr:hover {
    background: #ecf0f1;
}

/* 显示全部后表格容器可纵向滚动 */
#water-detail-modal .water-history-table.is-expanded {
    max-height: 88vh;
    overflow-y: auto;
}

@media (max-width: 768px) {
    #water-detail-modal .water-history-table.is-expanded {
        max-height: 580px;
    }
}

.water-history-table .change-up {
    color: var(--danger-color);
    font-weight: 600;
}

.water-history-table .change-down {
    color: var(--success-color);
    font-weight: 600;
}

.water-history-table .change-flat {
    color: #999;
}

/* 历史水位卡片 */
#history-card-level .card-header::after {
    display: none;
}

#history-card-level.table-mode .card-header {
    background-color: #F3F1FE;
}

/* 表格展开按钮容器 */
.table-expand-row {
    text-align: center;
    margin: 8px 0;
}
/* 查看全部 / 收起 按钮：品牌紫渐变胶囊 */
.show-all-table-btn {
    display: inline-block;
    background: #3498db;
    color: #fff;
    border: none;
    padding: 8px 22px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.3px;
    box-shadow: 0 2px 8px rgba(52, 152, 219, 0.3);
    transition: background 0.18s ease, transform 0.18s ease;
}
.show-all-table-btn:hover { background: #2c81ba; }
.show-all-table-btn:active { transform: scale(0.97); }

/* 设置页面 */
.settings-section {
    margin-bottom: 24px;
}

.settings-section h3 {
    color: var(--primary-color);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--primary-light);
}

.setting-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--background-color);
}

.setting-item:last-child {
    border-bottom: none;
}

.toggle-switch {
    position: relative;
    width: 50px;
    height: 26px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 26px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: var(--card-background);
    transition: .4s;
    border-radius: 50%;
}

input:checked + .toggle-slider {
    background-color: var(--primary-color);
}

input:checked + .toggle-slider:before {
    transform: translateX(24px);
}

/* 站点管理弹窗样式 */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 300;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.modal-overlay.show {
    display: flex;
    animation: fadeIn 0.28s ease;
}

.modal-overlay.closing {
    animation: fadeOut 0.22s ease forwards;
    pointer-events: none;
}

.modal-dialog {
    background: var(--card-background);
    border-radius: 14px;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.28);
    animation: modalDialogIn 0.34s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-overlay.closing .modal-dialog {
    animation: modalDialogOut 0.22s ease forwards;
}

.modal-dialog-large {
    max-width: 500px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}

#add-station-modal .modal-header-custom,
#manage-stations-modal .modal-header-custom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 20px;
    border-bottom: none;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 55%, var(--accent-color) 135%);
}

#add-station-modal .modal-header-custom h3,
#manage-stations-modal .modal-header-custom h3 {
    margin: 0;
    font-size: 17px;
    color: #fff;
    font-weight: 700;
}

.modal-close-btn {
    background: rgba(255,255,255,0.18);
    border: none;
    font-size: 20px;
    color: #fff;
    cursor: pointer;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background-color 0.2s, transform 0.08s;
    /* 头部是深色紫粉渐变：白叉 + 半透明白圆底，保证清晰可见（不暗） */
    margin: -4px -4px -4px 0;
}

.modal-close-btn:hover {
    background-color: rgba(255,255,255,0.34);
}

.modal-close-btn:active {
    transform: scale(0.94);
}

.modal-body-custom {
    padding: 20px;
    overflow-y: auto;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}

.btn-confirm {
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    color: #fff;
    border: none;
    padding: 12px 28px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(109,90,230,0.3);
    transition: transform 0.12s, box-shadow 0.2s;
}

.btn-confirm:hover {
    box-shadow: 0 8px 22px rgba(109,90,230,0.42);
}

.btn-confirm:active {
    transform: scale(0.97);
}

@keyframes modalDialogIn {
    from {
        opacity: 0;
        transform: translateY(28px) scale(0.92);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes modalDialogOut {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateY(16px) scale(0.96);
    }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

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

/* 表单字段样式 */
.form-field {
    margin-bottom: 16px;
}

.form-field label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    color: var(--text-color);
    font-size: 14px;
}

.form-field input {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: 14px;
    box-sizing: border-box;
    transition: border-color 0.2s;
}

.form-field input:focus {
    outline: none;
    border-color: var(--primary-color);
}

/* 站点列表项样式（管理站点，卡片化重做） */
#manage-stations-modal #stations-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.station-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px;
    border-radius: 14px;
    background: var(--card-background);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--primary-color);
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    transition: box-shadow 0.2s, transform 0.12s, background 0.2s;
}

.station-item:hover {
    box-shadow: 0 4px 14px rgba(0,0,0,0.08);
    background: #faf9ff;
}

.station-item:last-child {
    border-bottom: 1px solid var(--border-color);
}

.station-item-info {
    flex: 1;
    min-width: 0;
    cursor: pointer;
}

.station-item-name {
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
}

.station-item-stcd {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 2px;
}

.station-item-delete {
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    background: rgba(231,76,60,0.1);
    color: #e74c3c;
    transition: background 0.2s;
    margin-left: 6px;
}

.station-item-delete:hover {
    background-color: rgba(231,76,60,0.2);
}

.station-item-edit {
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    background: rgba(109,90,230,0.1);
    color: var(--primary-color);
    transition: background 0.2s;
    margin-left: auto;
}

.station-item-edit:hover {
    background-color: rgba(109,90,230,0.2);
}

/* 管理站点：排序箭头 */
.station-reorder {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-right: 6px;
}
.reorder-btn {
    width: 26px;
    height: 22px;
    border: 1px solid var(--border-color);
    background: #fff;
    color: var(--text-secondary);
    border-radius: 7px;
    cursor: pointer;
    font-size: 11px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}
.reorder-btn:hover:not(:disabled) {
    background-color: var(--primary-light);
    color: var(--primary-color);
    border-color: var(--primary-color);
}
.reorder-btn:disabled {
    color: #ccc;
    cursor: not-allowed;
}

.station-status {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    vertical-align: middle;
}
.station-status.pending { background: #fff3cd; color: #b8860b; }
.station-status.approved { background: #d4f8e0; color: #1b8a4b; }
.station-status.rejected { background: #ffe0e0; color: #c0392b; }
.station-item-desc {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 4px;
    line-height: 1.4;
}
.station-item-note {
    font-size: 12px;
    color: #c0392b;
    margin-top: 4px;
}
.form-tip {
    font-size: 12px;
    color: var(--text-secondary);
    margin: 6px 0 0;
}

/* 站点切换按钮 */
.station-switch-btn {
    background-color: var(--primary-color);
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: var(--border-radius);
    font-size: 12px;
    cursor: pointer;
    margin-right: 8px;
}

.station-switch-btn:hover {
    background-color: var(--primary-dark);
}

/* 水域选择器 */
.water-selector-row {
    margin-bottom: 12px;
}

.water-selector {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background-color: var(--primary-light);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: background-color 0.2s;
}

.water-selector:hover {
    background-color: #E9E4FE;
}

.water-selector .current-water {
    font-weight: 500;
    color: var(--primary-dark);
    font-size: 15px;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-right: 8px;
}

.water-selector .change-button {
    color: var(--primary-color);
    font-weight: 500;
    font-size: 14px;
    flex-shrink: 0;
    white-space: nowrap;
}

/* 站点管理按钮组 */
.station-actions {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
}

.station-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 12px;
    border: none;
    border-radius: var(--border-radius);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.station-btn-add {
    background-color: var(--primary-color);
    color: white;
}

.station-btn-add:hover {
    background-color: var(--primary-dark);
}

.station-btn-manage {
    background-color: var(--accent-color);
    color: white;
}

.station-btn-manage:hover {
    background-color: #e68900;
}

/* 引导页面 */

.guide-button {
    background-color: var(--primary-color);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: var(--border-radius);
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.guide-button:hover {
    background-color: var(--primary-dark);
}

/* 加载动画 */
.loading {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255,255,255,.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* 响应式调整 */
@media (max-width: 600px) {

    .bottom-nav {
        padding: 4px 0;
    }

    .nav-item {
        padding: 4px 0;
        font-size: 10px;
        min-width: 56px;
    }

    .nav-item i {
        font-size: 18px;
    }

    .detail-page {
        padding: 12px;
        padding-top: 16px;
    }

    /* 移动端卡片 padding 仍是 15px，顶栏保持一致，内部文字左边缘严格对齐 */
    .wl-top-bar {
        padding: 12px 15px;
    }

    .main-content {
        padding: 0 12px;
    }

    .header {
        padding: 12px 16px;
    }

    .header h1 {
        font-size: 16px;
    }

    .profile-header {
        padding: 20px 16px;
    }

    .profile-avatar {
        width: 60px;
        height: 60px;
        font-size: 24px;
    }

    .profile-info h3 {
        font-size: 18px;
    }

    .factors-list {
        grid-template-columns: 1fr;
    }
}

/* 空状态样式 */
#empty-state {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-secondary);
}

#empty-state h3 {
    margin-bottom: 10px;
    color: var(--text-color);
}

#empty-state p {
    margin-bottom: 20px;
    line-height: 1.6;
}

/* 天气详情卡片样式 */
/* 水位详情样式 */
.water-stats {
    display: flex;
    justify-content: space-around;
    margin-bottom: 20px;
    padding: 15px;
    background: linear-gradient(135deg, #F3F1FE 0%, #E3DEFD 100%);
    border-radius: var(--border-radius);
}

.stat-item {
    text-align: center;
}

.stat-value {
    font-size: 24px;
    font-weight: 700;
    color: #5B4BD6;
    margin-bottom: 5px;
}

.stat-label {
    font-size: 12px;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.chart-legend {
    display: flex;
    justify-content: center;
    gap: 20px;
    font-size: 12px;
    color: var(--text-secondary);
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

.legend-color {
    width: 12px;
    height: 3px;
    border-radius: 2px;
}

/* 水位详情补充样式 */
.water-station-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-color);
    text-align: center;
    margin-bottom: 12px;
}

.water-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 15px;
}

.metric {
    background: var(--card-background);
    border: 1px solid rgba(0, 0, 0, 0.04);
    border-radius: var(--border-radius);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

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

.metric-value {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-color);
}

.water-source {
    font-size: 12px;
    color: var(--text-secondary);
    text-align: center;
    margin-top: 10px;
}

/* 鱼类活动分析样式 */
.fish-analysis {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
    padding: 15px;
    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
    border-radius: var(--border-radius);
}

.score-circle {
    flex: 0 0 100px;
    height: 100px;
    background: var(--card-background);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
}

.score-circle .score-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--success-color);
    line-height: 1;
}

.score-circle .score-label {
    font-size: 10px;
    color: #666;
    margin-top: 3px;
}

.fish-info {
    flex: 1;
}

.info-item {
    margin-bottom: 8px;
    font-size: 14px;
}

.info-label {
    color: var(--text-secondary);
}

.info-value {
    font-weight: 600;
    color: var(--text-color);
}


.peak-time-activity.low {
    background: #FFEBEE;
    color: #F44336;
}

/* 加载遮罩 */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255,255,255,0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.loading-content {
    text-align: center;
}

.loading-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid #F3F1FE;
    border-top: 4px solid var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 15px;
}

.loading-text {
    color: var(--text-secondary);
    font-size: 14px;
}

/* 提示条统一规范：固定底部、限制宽度、文案居中、短小精悍 */
.error-toast,
.success-toast,
.info-toast {
    position: fixed;
    bottom: calc(var(--bottom-nav-height) + 20px);
    left: 50%;
    transform: translateX(-50%);
    max-width: min(88vw, 420px);
    width: auto;
    min-width: 140px;
    color: white;
    padding: 10px 16px;
    border-radius: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    z-index: 1001;
    animation: slideUp 0.25s ease;
    font-size: 14px;
    line-height: 1.4;
    text-align: center;
    word-break: break-word;
    box-sizing: border-box;
}

.error-toast {
    background: #EF4444;
}

.success-toast {
    background: #22C55E;
}

.info-toast {
    background: #3B82F6;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.error-content,
.success-content,
.info-content {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* 重试按钮：默认隐藏，只有显式传入回调时才显示 */
.error-toast .retry-btn {
    display: none;
}

.error-toast.has-retry .retry-btn {
    display: inline-block;
}

.retry-btn {
    background: rgba(255,255,255,0.2);
    border: 1px solid white;
    color: white;
    padding: 4px 10px;
    border-radius: 12px;
    cursor: pointer;
    font-size: 12px;
    line-height: 1.2;
    transition: all 0.2s;
    white-space: nowrap;
    flex-shrink: 0;
}

.retry-btn:hover {
    background: rgba(255,255,255,0.35);
}

/* 下拉刷新 */
.pull-to-refresh {
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    background: #F3F1FE;
    padding: 10px;
    text-align: center;
    z-index: 99;
    animation: slideDown 0.3s ease;
}

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

.refresh-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #5B4BD6;
    font-size: 14px;
}

.refresh-indicator i {
    animation: bounce 1s infinite;
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(5px); }
}

/* 骨架屏 */
.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 4px;
}

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

.skeleton-text {
    height: 14px;
    margin-bottom: 8px;
}

.skeleton-title {
    height: 20px;
    width: 60%;
    margin-bottom: 12px;
}

.skeleton-card {
    height: 100px;
    margin-bottom: 15px;
}

/* 地图页面样式 */
.map-container {
    width: 100%;
    height: calc(100vh - var(--bottom-nav-height) - 160px);
    min-height: 300px;
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    margin-bottom: 15px;
    background: var(--background-color);
}

.map-toolbar {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
    flex-wrap: wrap;
}

.map-tool-btn {
    width: 44px;
    height: 44px;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    background: var(--card-background);
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.2s;
    box-shadow: var(--shadow);
    color: var(--text-color);
    font-size: 16px;
}

.map-tool-btn:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.map-tool-btn.active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}


.location-status, .map-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255,255,255,0.9);
    padding: 15px 25px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    z-index: 200;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* 地图标记样式 */
.map-spot-marker {
    width: 30px;
    height: 30px;
    background: var(--primary-color);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 14px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    cursor: pointer;
}

.map-spot-marker.favorite {
    background: #e91e63;
}

.map-spot-marker.current {
    background: #ff5722;
    /* 降低频率(3s)并缩小缩放幅度，减轻滚动重绘 */
    animation: pulse 3s ease-in-out infinite;
    contain: layout style; will-change: auto;
}

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

/* 地图信息窗口样式 */
.amap-info-content {
    border-radius: var(--border-radius);
    padding: 0;
    overflow: hidden;
}

.amap-info-header {
    background: var(--primary-color);
    color: white;
    padding: 10px 15px;
    font-weight: 600;
}

.amap-info-body {
    padding: 15px;
}

.amap-info-close {
    color: white;
    font-size: 16px;
    cursor: pointer;
}

/* 设置页面样式 */
.settings-section {
    margin-bottom: 20px;
    background: var(--card-background);
    border-radius: var(--border-radius);
    padding: 16px;
    box-shadow: var(--shadow);
}

.settings-section h3 {
    margin: 0 0 16px 0;
    font-size: 15px;
    color: var(--primary-color);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 12px;
    font-weight: 600;
}

.setting-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--background-color);
}

.setting-item:last-child {
    border-bottom: none;
}

.setting-item span {
    color: var(--text-color);
    font-size: 14px;
}

.setting-input {
    display: flex;
    align-items: center;
    gap: 8px;
}

.setting-input input {
    padding: 5px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 14px;
}

.setting-value {
    color: var(--text-secondary) !important;
}

/* 主题颜色选择 */
.theme-colors {
    display: flex;
    gap: 10px;
}

.theme-color {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s;
}

.theme-color:hover {
    transform: scale(1.1);
}

.theme-color.active {
    border-color: var(--text-color);
    box-shadow: 0 0 0 2px white, 0 0 0 4px var(--text-color);
}

/* 设置按钮样式 */
.settings-section .btn-secondary {
    padding: 8px 15px;
    font-size: 13px;
}

/* 深色模式样式 */
.index-progress { stroke: var(--primary-color); }

body.dark-mode {
    --background-color: #15131F;
    --card-background: #1F1B2E;
    --text-color: #F3F0FF;
    --text-secondary: #B6B0CC;
    --border-color: #322C46;
    --primary-color: #A78BFA;
    --primary-dark: #7C6CF5;
    --primary-light: #2A2440;
    --primary-soft: #241E36;
    --secondary-color: #8A84A8;
    --accent-color: #F46FB0;
    --success-color: #4ADE80;
    --warning-color: #FBBF24;
    --error-color: #F87171;
}

body.dark-mode .card,
body.dark-mode .settings-section,
body.dark-mode .fishing-spot-item,
body.dark-mode .modal-content {
    background: #1e1e1e;
    color: #ffffff;
}

/* 暗色模式 - 历史水位图表容器 */
body.dark-mode .water-chart-container {
    background: #252525;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.3);
}

/* 暗色模式 - 历史水位表格 */
body.dark-mode .water-history-table thead th {
    background: #2d2d2d;
    color: #ccc;
    border-bottom-color: #444;
}

body.dark-mode .water-history-table tbody td {
    border-bottom-color: #333;
    color: #bbb;
}

body.dark-mode .water-history-table tbody tr:hover {
    background: #2a2a2a;
}

body.dark-mode .water-history-table tbody tr td:first-child {
    color: #ddd;
}

body.dark-mode .water-history-table .change-flat {
    color: #777;
}

body.dark-mode .search-box,
body.dark-mode .filter-btn,
body.dark-mode .map-tool-btn {
    background: #2d2d2d;
    border-color: #444;
    color: #ffffff;
}

body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select {
    background: #2d2d2d;
    border-color: #444;
    color: #ffffff;
}

body.dark-mode .back-button {
    color: #ffffff;
}

/* 我的页面样式 */
.profile-header {
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    background:
        radial-gradient(130% 120% at 15% 0%, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0) 45%),
        radial-gradient(120% 120% at 100% 100%, rgba(139, 92, 246, 0.45) 0%, rgba(139, 92, 246, 0) 55%),
        linear-gradient(150deg, #5B4BD6 0%, #6D5AE6 48%, #8B5CF6 100%);
    color: #fff;
    padding: clamp(20px, 5.5vw, 28px) clamp(16px, 4.5vw, 24px);
    border-radius: 22px;
    margin-bottom: 18px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    box-shadow: 0 14px 34px rgba(91, 73, 201, 0.28), 0 2px 8px rgba(17, 24, 39, 0.08);
}
/* 顶部细高光线 */
.profile-header::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.55), rgba(255,255,255,0));
    pointer-events: none;
}

.profile-main {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 18px;
    text-align: left;
}

.profile-info {
    flex: 1;
    min-width: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.profile-name-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.profile-avatar {
    position: relative;
    flex-shrink: 0;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(255,255,255,0.42), rgba(255,255,255,0.16));
    border: 2.5px solid rgba(255,255,255,0.85);
    box-shadow:
        0 8px 22px rgba(0,0,0,0.22),
        inset 0 2px 8px rgba(255,255,255,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    transition: box-shadow 0.35s ease, border-color 0.35s ease;
}
.profile-avatar .avatar-emoji,
.profile-avatar > i {
    font-size: 46px;
    line-height: 1;
    position: relative;
    z-index: 2;
}

.profile-info h3 {
    margin: 0;
    font-size: clamp(18px, 5vw, 22px);
    font-weight: 700;
    letter-spacing: 0.2px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

/* 等级徽章与「享受每一次垂钓时光」同一行（居中、可换行、不溢出） */
.profile-sub-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    max-width: 100%;
}
.profile-tagline {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    opacity: 0.92;
    letter-spacing: 0.4px;
    font-family: "STKaiti", "Kaiti SC", "KaiTi", "华文行楷", "Hanzipen SC", "cursive";
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* VIP 头标（昵称右侧小皇冠徽章） */
.profile-vip-head {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    font-size: 12px;
    font-weight: 700;
    border-radius: 20px;
    background: linear-gradient(135deg, #FFD66B, #F7A823);
    color: #5A3B00;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}
/* 等级徽章：克制精致，四档用渐变+描边区分；不使用旋转/缩放动画，避免溢出与廉价感 */
.profile-level-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 14px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.3px;
    border-radius: 20px;
    background: linear-gradient(135deg, #4A3FB8 0%, #6D5AE6 100%);
    border: 1px solid rgba(255, 255, 255, 0.6);
    color: #fff;
    box-shadow: 0 3px 10px rgba(74, 63, 184, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.35);
    white-space: nowrap;
}
/* Lv3-4 进阶：紫底 + 金边微光 */
.profile-level-badge.tier-t2 {
    background: linear-gradient(135deg, #5B49C9 0%, #7C5CF0 100%);
    border: 1.5px solid rgba(255, 214, 107, 0.9);
    box-shadow: 0 3px 12px rgba(109, 90, 230, 0.45);
}
/* Lv5-7 高阶：金色流光扫光（动画回归，不用 mask 避免 webview 方块） */
.profile-level-badge.tier-t3 {
    color: #5A3B00;
    background: linear-gradient(110deg, #F7B500 0%, #FFE08A 25%, #F7B500 50%, #FFD66B 75%, #F7B500 100%);
    background-size: 200% 100%;
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 3px 12px rgba(247, 181, 0, 0.45), inset 0 1px 2px rgba(255, 255, 255, 0.6);
    animation: levelShine 2.4s linear infinite;
}
/* Lv8+ 顶级：炫彩流光 + 呼吸（动画回归） */
.profile-level-badge.tier-t4 {
    color: #fff;
    background: linear-gradient(110deg, #FF5E9C 0%, #FFD66B 20%, #6D5AE6 45%, #42E6C5 70%, #FF5E9C 100%);
    background-size: 300% 100%;
    border: 1.5px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 4px 14px rgba(255, 94, 156, 0.45), 0 0 18px rgba(109, 90, 230, 0.4);
    animation: levelRainbow 3s linear infinite, levelPulse 1.8s ease-in-out infinite;
}

/* 头像框按等级变化：静态双层描边 + 微光表达，杜绝 mask 旋转环（溢出与 low 的元凶） */
.profile-avatar.tier-t2 {
    border-color: rgba(255, 214, 107, 0.95);
    box-shadow:
        0 8px 22px rgba(0,0,0,0.22),
        inset 0 2px 8px rgba(255,255,255,0.4),
        0 0 0 4px rgba(255, 214, 107, 0.18);
}
.profile-avatar.tier-t3 {
    border-color: rgba(255, 230, 150, 0.95);
    box-shadow:
        0 8px 22px rgba(0,0,0,0.22),
        inset 0 2px 8px rgba(255,255,255,0.4),
        0 0 0 4px rgba(247, 181, 0, 0.2),
        0 0 16px rgba(247, 181, 0, 0.45);
}
/* Lv5-7 头像：金色旋转描边环（替代 mask，无溢出风险；inset 加大更醒目） */
.profile-avatar.tier-t3::after {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 4px solid transparent;
    border-top-color: #FFD66B;
    border-right-color: rgba(255, 214, 107, 0.55);
    animation: avatarSpin 2.4s linear infinite;
    z-index: 1;
    pointer-events: none;
}
.profile-avatar.tier-t4 {
    border-color: rgba(255, 255, 255, 0.95);
    box-shadow:
        0 8px 22px rgba(0,0,0,0.22),
        inset 0 2px 8px rgba(255,255,255,0.4),
        0 0 0 4px rgba(255, 94, 156, 0.22),
        0 0 20px rgba(109, 90, 230, 0.5);
    animation: avatarGlow 1.8s ease-in-out infinite;
}
/* Lv8+ 头像：炫彩旋转描边环 + 呼吸光晕（动画回归；inset 加大更醒目） */
.profile-avatar.tier-t4::after {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 4px solid transparent;
    border-top-color: #FF5E9C;
    border-right-color: rgba(109, 90, 230, 0.6);
    border-bottom-color: #42E6C5;
    animation: avatarSpin 2.2s linear infinite;
    z-index: 1;
    pointer-events: none;
}
/* ===== 个人中心等级动画关键帧（替代 mask 旋转环，规避 webview 渲染异常） ===== */
@keyframes levelShine {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
@keyframes levelRainbow {
    0% { background-position: 0% 0; }
    100% { background-position: 300% 0; }
}
@keyframes levelPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.04); }
}
@keyframes avatarSpin {
    to { transform: rotate(360deg); }
}
@keyframes avatarGlow {
    0%, 100% { box-shadow: 0 8px 22px rgba(0,0,0,0.22), inset 0 2px 8px rgba(255,255,255,0.4), 0 0 16px rgba(255,94,156,0.45), 0 0 26px rgba(109,90,230,0.4); }
    50% { box-shadow: 0 8px 22px rgba(0,0,0,0.22), inset 0 2px 8px rgba(255,255,255,0.4), 0 0 26px rgba(255,94,156,0.85), 0 0 42px rgba(109,90,230,0.65); }
}

/* 个人中心头部积分 + 退出按钮同一行（头像行下方，铺满居中） */
.profile-info-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    margin-top: 0;
}
.profile-credits {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: linear-gradient(135deg, #FFE08A 0%, #F7B500 100%);
    color: #5A3B00;
    border-radius: 22px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 3px 10px rgba(247, 181, 0, 0.35);
}
.profile-credits i {
    color: #B7791F;
}
.profile-credits .profile-credits-unit {
    opacity: 0.8;
    font-weight: 600;
    font-size: 12px;
}

/* 个人中心头部退出登录按钮（与积分胶囊同处，紫色头部内半透明底 + 红色 hover 警示） */
.profile-logout-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    margin: 0;
    padding: 7px 14px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: #fff;
    border-radius: 20px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, transform 0.1s;
}
.profile-logout-btn:hover {
    background: rgba(231, 76, 60, 0.28);
    border-color: #ff7a6b;
}
.profile-logout-btn:active {
    transform: scale(0.96);
}

/* 游客态登录入口按钮（与退出按钮同款，浅色常态、hover 高亮） */
.profile-login-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    margin: 0;
    padding: 7px 14px;
    background: rgba(255, 255, 255, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.45);
    color: #fff;
    border-radius: 20px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, transform 0.1s;
}
.profile-login-btn:hover {
    background: rgba(255, 255, 255, 0.4);
    border-color: #fff;
}
.profile-login-btn:active {
    transform: scale(0.96);
}

/* 快捷统计 */
.profile-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 20px;
    background: var(--card-background);
    border-radius: var(--border-radius);
    padding: 20px 10px;
    box-shadow: var(--shadow);
}

/* 个人中心 VIP 状态行：金色质感横幅，与紫头形成对比 */
.profile-vip {
    position: relative;
    z-index: 1;
    background: linear-gradient(135deg, rgba(255, 214, 107, 0.18) 0%, rgba(247, 168, 35, 0.22) 100%);
    border: 1px solid rgba(255, 214, 107, 0.45);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: #fff;
    border-radius: 14px;
    padding: 10px 14px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    box-sizing: border-box;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 4px 12px rgba(0,0,0,0.12);
}
.profile-vip .vip-crown {
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    color: #FFE08A;
    text-shadow: 0 1px 2px rgba(0,0,0,0.18);
}
.profile-vip .vip-crown i {
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.2));
}
.profile-vip .vip-expire {
    opacity: 0.95;
    font-weight: 600;
    font-size: 12.5px;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0,0,0,0.15);
}

.profile-stat-item {
    text-align: center;
}

.stat-number {
    font-size: 24px;
    font-weight: 700;
    background: linear-gradient(135deg, #6D5AE6 0%, #8B5CF6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 4px;
}

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

/* 功能菜单 */
.profile-menu {
    display: grid;
    gap: 16px;
}

.menu-section {
    background: var(--card-background);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.menu-section h4 {
    margin: 0;
    padding: 12px 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    background: var(--background-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.menu-item {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid var(--background-color);
    cursor: pointer;
    transition: background 0.2s;
}

.menu-item:last-child {
    border-bottom: none;
}

.menu-item:hover {
    background: var(--background-color);
}

.menu-item i:first-child {
    width: 20px;
    margin-right: 12px;
    color: var(--primary-color);
    font-size: 16px;
}

.menu-item span {
    flex: 1;
    font-size: 15px;
    color: var(--text-color);
}

.menu-item i:last-child {
    color: var(--text-secondary);
    font-size: 12px;
}

.menu-item .toggle-switch {
    transform: scale(0.8);
}

.menu-item .theme-colors {
    transform: scale(0.7);
}

.menu-select {
    padding: 6px 10px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 13px;
    background: var(--background-color);
    color: var(--text-color);
    cursor: pointer;
}

.menu-value {
    color: var(--text-secondary) !important;
    font-size: 14px !important;
}

/* 图片上传样式 */
.image-upload-container {
    margin-top: 10px;
}

.image-upload-area {
    border: 2px dashed var(--border-color);
    border-radius: var(--border-radius);
    padding: 30px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
    background-color: var(--background-color);
}

.image-upload-area:hover {
    border-color: var(--primary-color);
    background-color: #F3F1FE;
}

.image-upload-area.dragover {
    border-color: var(--primary-color);
    background-color: #F3F1FE;
}

.image-upload-area i {
    font-size: 40px;
    color: var(--primary-color);
    margin-bottom: 15px;
}

.image-upload-area p {
    margin: 8px 0;
    color: var(--text-secondary);
    font-size: 14px;
}

.image-upload-area .upload-hint {
    font-size: 12px;
    color: var(--text-secondary);
}

.image-preview-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 15px;
}

.image-preview-item {
    position: relative;
    width: auto;
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--shadow);
    background: var(--background-color);
}

/* 钓点补全：图片预览 + 待完善清单 */
.img-prev { position:relative; width:80px; height:80px; border-radius:8px; overflow:hidden; border:1px solid rgba(148,163,184,.3); }
.img-prev img { width:100%; height:100%; object-fit:cover; }
.img-prev button { position:absolute; top:2px; right:2px; width:18px; height:18px; border:none; border-radius:50%; background:rgba(0,0,0,.55); color:#fff; font-size:12px; line-height:1; cursor:pointer; }

/* 完善钓点：评分星级（主色系，避免杂色） */
.complete-rating { display:flex; gap:6px; font-size:22px; line-height:1; color:#DCDCE4; cursor:pointer; user-select:none; }
.complete-rating i { transition: color .15s, transform .1s; }
.complete-rating i:hover { transform: scale(1.12); }
.complete-rating i.rated { color:#6D5AE6; }

/* 商家地图标记脉冲动画（金色醒目）—— 降低频率减轻滚动重绘 */
@keyframes merch-pulse {
  0% { transform: scale(0.98); opacity: 0.4; }
  50% { transform: scale(1.04); opacity: 0.2; }
  100% { transform: scale(0.98); opacity: 0.4; }
}
.merch-pulse {
  animation: merch-pulse 3s ease-in-out infinite;
  /* 将动画隔离在独立合成层，避免拖垮主滚动 */
  contain: strict; will-change: auto;
}

.incomplete-list { display:flex; flex-direction:column; gap:10px; margin-top:8px; }
.inc-item { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px; border:1px solid rgba(148,163,184,.25); border-radius:10px; background:var(--card-background, #fff); }
.inc-info { min-width:0; }
.inc-name { font-weight:600; color:var(--text-primary, #2A2D3D); }
.inc-meta { font-size:12px; color:var(--text-secondary, #6B7280); margin-top:2px; }
.inc-taken { font-size:13px; color:var(--text-secondary, #6B7280); }

.image-preview-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.image-preview-item .delete-image {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: rgba(244, 67, 54, 0.9);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    opacity: 0;
    transition: opacity 0.2s;
}

.image-preview-item:hover .delete-image {
    opacity: 1;
}

.image-preview-item .cover-badge {
    position: absolute;
    bottom: 5px;
    left: 5px;
    background-color: var(--primary-color);
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 500;
}

/* 钓点列表图片样式 */
.fishing-spot-item {
    background: var(--card-background);
    border-radius: var(--border-radius);
    padding: 15px;
    margin-bottom: 12px;
    box-shadow: var(--shadow);
    transition: transform 0.2s;
}

.fishing-spot-item:hover {
    transform: translateY(-2px);
}

.fishing-spot-item .spot-image {
    width: 100%;
    height: 170px;
    border-radius: 10px;
    object-fit: cover;
    margin-bottom: 12px;
    background-color: var(--background-color);
}

.fishing-spot-item .spot-image-placeholder {
    width: 100%;
    height: 170px;
    border-radius: 10px;
    background-color: var(--background-color);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.fishing-spot-item .spot-image-placeholder i {
    font-size: 40px;
    color: var(--text-secondary);
}

/* 钓点/钓获视觉区分 */
.fishing-spot-item.is-catch {
    border-left-color: #ea580c;
}

.spot-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.spot-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

.spot-type-badge.badge-spot {
    background: #F5F3FF;
    color: #6D5AE6;
    border: 1px solid #C9C2FB;
}

.spot-type-badge.badge-catch {
    background: #fff1e6;
    color: #ea580c;
    border: 1px solid #fdba74;
}

.catch-sub {
    font-size: 13px;
    color: #ea580c;
    font-weight: 500;
}

/* 列表卡片贡献者（醒目，主色系） */
.spot-contributor-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--primary-color);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(109, 90, 230,.25);
    white-space: nowrap;
}
.spot-contributor-row .spot-contributor-name { line-height: 1; }
.spot-contributor-row .spot-contributor-tag {
    font-size: 10px;
    background: rgba(255,255,255,.25);
    padding: 1px 6px;
    border-radius: 999px;
}
.spot-contributor-row.is-official { background: var(--primary-dark); }

/* 旧详情图片 / 画廊样式已移除（详情弹窗重做为 .sd-* 卡片） */

/* ========== 新版地图视图样式（参考图风格）========== */
.map-container-full {
    width: 100%;
    height: calc(100vh - var(--bottom-nav-height));
    min-height: 400px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    /* 瓦片/SDK 就绪前的品牌渐变骨架，避免白屏假死感 */
    background: linear-gradient(135deg, #EDE9FE 0%, #FCE7F3 55%, #E0F2FE 100%);
}

#map-view {
    padding: 0 !important;
    position: relative;
    overflow: hidden;
}

/* 左下角定位按钮 */
.map-locate-btn {
    position: absolute;
    bottom: 16px;
    left: 16px;
    z-index: 100;
}

.map-control-btn {
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 16px rgba(17, 24, 39, 0.16);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #374151;
    transition: all 0.2s;
}

/* 仅真实鼠标设备应用 hover 变色；触屏(hover:none)不触发，避免 :hover 粘滞卡紫 */
@media (hover: hover) {
    .map-control-btn:hover {
        background: var(--primary-color);
        color: #fff;
        transform: translateY(-1px);
    }
}
/* 定位中(disabled)强制白底，覆盖任何粘滞伪类，确保不会卡紫 */
.map-control-btn:disabled {
    background: rgba(255, 255, 255, 0.82);
    color: #374151;
    cursor: not-allowed;
}

/* 地图样式切换单按钮（定位按钮正上方，bottom = 定位16 + 高44 + 间距12 = 72） */
.map-style-toggle {
    position: absolute;
    bottom: 72px;
    left: 16px;
    z-index: 100;
}
.map-style-toggle.is-satellite {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    color: #fff;
    box-shadow: 0 4px 16px rgba(109, 90, 230, 0.4);
}
.map-style-toggle.is-satellite:hover {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    color: #fff;
    transform: translateY(-1px);
}

/* 右下角发布按钮 */
.map-float-actions {
    position: absolute;
    bottom: 16px;
    right: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 100;
}

.float-add-btn {
    width: 54px;
    height: 54px;
    border: none;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    box-shadow: 0 6px 18px rgba(109, 90, 230, 0.42);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 24px;
    transition: all 0.25s;
}

.float-add-btn:hover {
    transform: scale(1.08) translateY(-1px);
    box-shadow: 0 8px 24px rgba(109, 90, 230, 0.52);
}

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


/* 统一发布弹窗样式 */
.publish-type-selector {
    display: flex;
    gap: 4px;
    margin-bottom: 18px;
    background: #F2F1FB;
    border-radius: 14px;
    padding: 4px;
    border: 1px solid #ECEAFB;
}
.publish-type-opt {
    flex: 1;
    padding: 11px 16px;
    border: none;
    background: transparent;
    color: #8B86A8;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border-radius: 11px;
}
.publish-type-opt i { font-size: 15px; }
.publish-type-opt.active {
    background: linear-gradient(135deg, #6D5AE6 0%, #5B4BD6 100%);
    color: #fff;
    box-shadow: 0 4px 12px rgba(109, 90, 230, 0.35);
}
.publish-type-opt:hover:not(.active) {
    background: #E7E4F8;
    color: #5B4BD6;
}
#publish-submit-btn {
    background: linear-gradient(135deg, #6D5AE6 0%, #5B4BD6 100%);
    border: none;
    color: #fff;
    padding: 13px 16px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 12px;
    cursor: pointer;
    width: 100%;
    box-shadow: 0 6px 18px rgba(109, 90, 230, 0.32);
    transition: transform 0.15s, box-shadow 0.15s;
}
#publish-submit-btn:active { transform: scale(0.98); box-shadow: 0 3px 10px rgba(109,90,230,0.3); }
.publish-unified-form .form-actions { margin-top: 10px; }




/* 地图加载状态覆盖层 */
.map-loading-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    padding: 18px 26px;
    border-radius: 14px;
    box-shadow: 0 8px 28px rgba(17, 24, 39, 0.18);
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 200;
    font-size: 14px;
    color: #4B5563;
}

/* 添加钓点点选提示条 */
.spot-pick-tip {
    position: absolute;
    top: 72px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 150;
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(109, 90, 230, 0.94);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    padding: 10px 18px;
    border-radius: 25px;
    box-shadow: 0 6px 20px rgba(109, 90, 230, 0.38);
    font-size: 14px;
    white-space: nowrap;
}
.spot-pick-tip i { margin-right: 4px; }
.spot-pick-cancel {
    border: none;
    background: rgba(255,255,255,0.22);
    color: #fff;
    padding: 5px 14px;
    border-radius: 14px;
    cursor: pointer;
    font-size: 13px;
    transition: background 0.2s;
}
.spot-pick-cancel:hover { background: rgba(255,255,255,0.38); }

/* 添加钓点弹窗里的已选位置提示 */
.spot-location-display {
    font-size: 12px;
    color: var(--primary-color);
    background: var(--primary-light);
    padding: 8px 12px;
    border-radius: 8px;
    margin-bottom: 4px;
}

/* ========== 玩赚渔豆页面样式 ========== */
.credits-balance-card {
    background: linear-gradient(135deg, #6D5AE6 0%, #5B4BD6 50%, #5B4BD6 100%);
    border-radius: 20px;
    padding: 28px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    box-shadow: 0 8px 24px rgba(109, 90, 230, 0.3);
    position: relative;
    overflow: hidden;
}

.credits-balance-card::before {
    content: '';
    position: absolute;
    top: -30px;
    right: -30px;
    width: 120px;
    height: 120px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 50%;
}

.credits-balance-card::after {
    content: '';
    position: absolute;
    bottom: -40px;
    left: 20%;
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
}

.balance-info {
    color: #fff;
    position: relative;
    z-index: 1;
}

.balance-label {
    font-size: 13px;
    font-weight: 500;
    opacity: 0.85;
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}

.balance-value {
    font-size: 36px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.5px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.balance-unit {
    font-size: 13px;
    opacity: 0.75;
    margin-top: 4px;
    font-weight: 400;
}

.balance-icon {
    width: 56px;
    height: 56px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #fff;
    position: relative;
    z-index: 1;
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    contain: layout style;
}

.balance-icon-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    position: relative;
    z-index: 1;
}
.balance-icon {
    cursor: pointer;
    transition: transform 0.2s, background 0.2s;
}
.balance-icon:hover {
    transform: scale(1.07);
    background: rgba(255, 255, 255, 0.26);
}
.balance-icon:active { transform: scale(0.97); }
.balance-records-tip {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.82);
    letter-spacing: 0.5px;
    cursor: pointer;
}

/* 任务列表样式 */
.task-list {
    display: grid;
    gap: 10px;
}

.task-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: #f8f9fa;
    border-radius: 10px;
    transition: background 0.2s;
}

.task-item:hover {
    background: #f0f1f2;
}

.task-item.completed {
    opacity: 0.55;
    background: #eef0f2;
    pointer-events: none;
}
.task-item.completed .task-btn {
    background: #c4c8cc;
    color: #f5f5f5;
    cursor: default;
}

.task-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 16px;
    flex-shrink: 0;
}

.task-info {
    flex: 1;
}

.task-name {
    font-size: 14px;
    font-weight: 500;
    color: #333;
}

.task-reward {
    font-size: 12px;
    color: var(--accent-color);
    font-weight: 600;
    margin-top: 2px;
}

.task-desc {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 2px;
}

.task-item.reviewing {
    opacity: 0.8;
    background: #fff8e1;
}
.task-item.reviewing .task-btn {
    background: #ffb300;
}

.task-status {
    font-size: 12px;
    color: var(--success-color);
    font-weight: 500;
}

.task-btn {
    padding: 6px 14px;
    border: none;
    border-radius: 15px;
    background: var(--primary-color);
    color: #fff;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.2s;
}

.task-btn:hover {
    background: var(--primary-dark);
}

/* 兑换商城网格 */
.shop-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.shop-item {
    text-align: center;
    padding: 16px 10px;
    background: #f8f9fa;
    border-radius: 12px;
    transition: all 0.2s;
}

.shop-item:hover {
    background: #fff;
    box-shadow: var(--shadow);
}

.shop-item-img {
    width: 56px;
    height: 56px;
    margin: 0 auto 10px;
    background: var(--primary-light);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: var(--primary-color);
}

.shop-item-name {
    font-size: 13px;
    color: #333;
    margin-bottom: 6px;
}

.shop-vip {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    font-size: 11px;
    font-weight: 700;
    color: #6D5AE6;
    background: #ECE9FF;
    border: 1px solid #6D5AE6;
    border-radius: 999px;
    vertical-align: middle;
}

.shop-item-price {
    font-size: 15px;
    font-weight: 600;
    color: var(--primary-color);
}

.shop-item-btn {
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 6px 0;
    background: var(--primary-color);
    color: #fff;
    border: none;
    border-radius: 20px;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.2s;
}

.shop-item-btn:hover {
    background: var(--primary-dark);
}

.shop-item-btn:active {
    background: var(--primary-dark);
}

/* 兑换弹窗样式 */
.redeem-product-info {
    text-align: center;
    padding: 16px 0 20px;
    border-bottom: 1px solid #eee;
    margin-bottom: 16px;
}

.redeem-product-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 10px;
    background: var(--primary-light);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: var(--primary-color);
}

.redeem-product-name {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
}

.redeem-product-price {
    font-size: 15px;
    font-weight: 600;
    color: var(--primary-color);
}

.redeem-section {
    margin-bottom: 20px;
}

.redeem-section-title {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 10px;
}

.redeem-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    margin-bottom: 10px;
    outline: none;
    transition: border-color 0.2s;
}

.redeem-input:focus {
    border-color: var(--primary-color);
}

.redeem-textarea {
    resize: vertical;
    min-height: 70px;
    margin-bottom: 0;
}

.redeem-code {
    background: #f5f5f5;
    border: 2px dashed var(--primary-color);
    border-radius: 8px;
    padding: 16px;
    text-align: center;
    font-size: 22px;
    font-weight: 700;
    color: var(--primary-color);
    letter-spacing: 2px;
    margin-bottom: 8px;
}

.redeem-virtual-desc {
    font-size: 12px;
    color: #999;
    line-height: 1.5;
    text-align: center;
}

.redeem-confirm-btn {
    width: 100%;
    padding: 12px;
    background: var(--primary-color);
    color: #fff;
    border: none;
    border-radius: 25px;
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.2s;
}

.redeem-confirm-btn:hover {
    background: var(--primary-dark);
}

.redeem-confirm-btn:active {
    background: var(--primary-dark);
}

/* 收支记录列表样式 */
.record-item {
    display: flex;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
}

.record-item:last-child {
    border-bottom: none;
}

.record-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #fff;
    flex-shrink: 0;
    margin-right: 12px;
}

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

.record-title {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 2px;
}

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

.record-right {
    text-align: right;
    flex-shrink: 0;
}

.record-amount {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 2px;
}

.record-status {
    display: inline-block;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
}

.status-active {
    background: #E8F5E9;
    color: #2E7D32;
}

.status-claimed {
    background: #F3F1FE;
    color: #5B4BD6;
}

.status-pending {
    background: #FFF3E0;
    color: #E65100;
}

.status-gift {
    background: #F3E8FF;
    color: #7C3AED;
}

.status-ship {
    background: #F3F1FE;
    color: #5B4BD6;
}

.status-cancel {
    background: #F5F5F5;
    color: #888;
}

/* 我的订单里的卡密使用按钮 */
.record-verify-btn {
    background: #6D5AE6;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 3px 10px;
    font-size: 12px;
    cursor: pointer;
    margin-left: 4px;
}
.record-verify-btn:hover { background: #4B3FA8; }

.record-gift-btn {
    background: #fff;
    color: #6D5AE6;
    border: 1px solid #6D5AE6;
    border-radius: 6px;
    padding: 3px 10px;
    font-size: 12px;
    cursor: pointer;
    margin-left: 4px;
}
.record-gift-btn:hover { background: #ECE9FF; }

/* 弹窗头部的「使用卡密」按钮 */
.detail-modal-verify {
    background: var(--primary-color);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 5px 12px;
    font-size: 13px;
    cursor: pointer;
}
.detail-modal-verify:hover { background: var(--primary-dark); }

/* 等宽字体（卡密展示） */
.mono {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 12px;
}

/* ===== 切换水域：冷色调反馈 ===== */
/* 水域选择器左侧的当前站点颜色圆点 */
.station-color-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-right: 10px;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.55);
    transition: background 0.45s ease;
}

/* 各强调色随主题平滑过渡（手动切换主题色时整体渐变） */
.water-selector,
.station-btn-add,
.guide-button,
.fab {
    transition: background-color 0.45s ease, background 0.45s ease, border-color 0.45s ease;
}

/* ===== 账户区（登录/注册入口） ===== */
.account-area {
    display: flex;
    align-items: center;
    gap: 8px;
}
.auth-btn {
    padding: 6px 12px;
    border: 1px solid var(--primary-color);
    background: var(--primary-color);
    color: #fff;
    border-radius: 16px;
    font-size: 13px;
    cursor: pointer;
}
.account-name { font-size: 13px; font-weight: 600; color: #fff; }
.account-badge { font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 10px; line-height: 1.4; }
.badge-muted { background: #fff3e0; color: #e65100; border: 1px solid #ffb74d; }
.badge-banned { background: #ffebee; color: #c62828; border: 1px solid #ef5350; }
.badge-vip { background: linear-gradient(135deg, #ffd700, #ffa000); color: #fff; border: 1px solid #ffc107; }
.badge-svip { background: linear-gradient(135deg, #7c3aed, #5B4BD6); color: #fff; border: 1px solid #8b5cf6; }
.badge-ssvip { background: linear-gradient(135deg, #dc2626, #f59e0b); color: #fff; border: 1px solid #ef4444; font-weight: 700; letter-spacing: 0.3px; padding: 3px 10px; white-space: nowrap; }
.account-credits { font-size: 13px; color: #fff; display: inline-flex; align-items: center; gap: 3px; opacity: 0.92; }

/* 头部圆形角色徽章 */
.profile-vip-head.badge-vip { background: linear-gradient(135deg, #ffd700, #ffa000); }
.profile-vip-head.badge-svip { background: linear-gradient(135deg, #7c3aed, #5B4BD6); }
.profile-vip-head.badge-ssvip { background: linear-gradient(135deg, #dc2626, #f59e0b); }

.auth-logout-btn {
    padding: 4px 10px;
    border: 1px solid rgba(255,255,255,0.4);
    background: transparent;
    color: #fff;
    border-radius: 14px;
    font-size: 12px;
    cursor: pointer;
}
.auth-logout-btn:hover { background: rgba(255,255,255,0.18); }

/* ===== 登录/注册弹窗 ===== */
.auth-mask {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}
.auth-box {
    width: 86%;
    max-width: 340px;
    background: var(--card-background);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
}
.auth-tabs { display: flex; gap: 8px; margin-bottom: 16px; }
.auth-tab {
    flex: 1;
    padding: 8px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 15px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
}
.auth-tab.active { color: var(--primary-color); border-bottom-color: var(--primary-color); font-weight: 600; }
.auth-form { display: flex; flex-direction: column; gap: 12px; }
.auth-input {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    font-size: 14px;
    outline: none;
    box-sizing: border-box;
    background: var(--background-color);
    color: var(--text-color);
}
.auth-submit {
    width: 100%;
    padding: 11px;
    border: none;
    border-radius: 10px;
    background: var(--primary-color);
    color: #fff;
    font-size: 15px;
    cursor: pointer;
}
.auth-msg { font-size: 13px; color: #e74c3c; min-height: 18px; text-align: center; }
.auth-tip { font-size: 12px; color: var(--text-secondary); line-height: 1.5; }

/* 邀请好友弹窗 */
.invite-box {
    max-width: 380px;
    position: relative;
    padding: 0 0 22px;
    overflow: hidden;
    border-radius: 22px;
}
.invite-close {
    position: absolute; top: 14px; right: 16px;
    border: none; background: rgba(255,255,255,0.25); font-size: 20px; line-height: 1;
    color: #fff; cursor: pointer; width: 30px; height: 30px; border-radius: 50%;
    z-index: 3; transition: background 0.2s;
}
.invite-close:hover { background: rgba(255,255,255,0.4); }
.invite-hero {
    background: linear-gradient(135deg, #6D5AE6 0%, #5B4BD6 55%, #F46FB0 130%);
    padding: 30px 24px 26px;
    text-align: center;
    position: relative;
}
.invite-hero-icon {
    width: 60px; height: 60px; border-radius: 18px; margin: 0 auto 14px;
    background: rgba(255,255,255,0.18); backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 18px rgba(0,0,0,0.18);
}
.invite-hero-icon i { font-size: 28px; color: #fff; }
.invite-title { margin: 0 0 10px; font-size: 19px; font-weight: 700; color: #fff; }
.invite-rule { margin: 0; font-size: 12.5px; color: rgba(255,255,255,0.85); line-height: 1.65; padding: 0 6px; }
.invite-rule b { color: #FFE08A; font-weight: 700; }
/* 注册链接卡片：比邀请码更突出，白底紫边 */
.invite-link-card {
    margin: 20px 20px 12px;
    background: #fff;
    border: 1.5px solid #E0DBF7;
    border-radius: 16px;
    padding: 16px;
    text-align: center;
    box-shadow: 0 4px 14px rgba(109, 90, 230, 0.08);
}
.invite-link-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: #5B4BD6;
    margin-bottom: 10px;
    letter-spacing: 0.3px;
}
.invite-link-label i { font-size: 12px; }
.invite-link-url {
    font-size: 12.5px;
    font-weight: 600;
    color: #4B5563;
    word-break: break-all;
    line-height: 1.55;
    margin-bottom: 12px;
    padding: 10px 12px;
    background: #F8F7FF;
    border-radius: 10px;
    border: 1px dashed #C9C2F0;
    font-family: 'SF Mono', 'Roboto Mono', monospace;
}
.invite-link-copy {
    border: none;
    background: linear-gradient(135deg, #6D5AE6 0%, #F46FB0 100%);
    color: #fff; padding: 10px 22px; border-radius: 12px; font-size: 14px;
    font-weight: 600; cursor: pointer; width: 100%;
    box-shadow: 0 6px 16px rgba(109,90,230,0.28);
    transition: transform 0.15s, box-shadow 0.15s;
}
.invite-link-copy:active { transform: scale(0.97); box-shadow: 0 3px 10px rgba(109,90,230,0.25); }
.invite-link-hint {
    margin: 8px 0 0; font-size: 11px; line-height: 1.5; color: #8B8FA3;
}
.invite-code-card {
    margin: 12px 20px;
    background: #F6F5FF;
    border: 1.5px dashed #B7ADEB;
    border-radius: 16px;
    padding: 14px;
    text-align: center;
}
.invite-code-label { font-size: 12px; color: #7C6FBE; margin-bottom: 6px; letter-spacing: 0.5px; }
.invite-code {
    font-size: 24px; font-weight: 800; letter-spacing: 3px;
    color: #5B4BD6; font-family: 'SF Mono', 'Roboto Mono', monospace;
    word-break: break-all; margin-bottom: 12px;
}
.invite-copy {
    border: none;
    background: linear-gradient(135deg, #6D5AE6 0%, #5B4BD6 100%);
    color: #fff; padding: 9px 20px; border-radius: 12px; font-size: 14px;
    font-weight: 600; cursor: pointer; width: 100%;
    box-shadow: 0 5px 14px rgba(109,90,230,0.28);
    transition: transform 0.15s, box-shadow 0.15s;
}
.invite-copy:active { transform: scale(0.97); box-shadow: 0 3px 10px rgba(109,90,230,0.25); }
.invite-stats {
    display: flex; justify-content: space-between;
    margin: 0 20px; padding-top: 16px; border-top: 1px solid #F0F0F5;
}
.invite-stat { flex: 1; text-align: center; }
.invite-stat-num { font-size: 19px; font-weight: 700; color: #2D2A45; }
.invite-stat-txt { font-size: 11.5px; color: #9CA3AF; margin-top: 3px; }

/* ===== 商家详情弹窗（复用 sd-* 卡片风格，与钓点详情一致） ===== */
#merchant-detail-modal { z-index: 1100; }
/* 卡片尺寸严格对齐钓点详情卡片（.spot-detail-card）：width:92%; max-width:420px */
#merchant-detail-card { width: 92%; max-width: 420px; max-height: 88vh; display: flex; }

/* 商家类型胶囊标签（同截图2：蓝底圆角+左侧图标） */
.spot-type-badge.badge-merchant {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fcd34d;
}
.spot-type-badge.badge-merchant i { color: #f59e0b; }

/* 商家 Hero 区（暖金渐变，区别于钓点青蓝） */
.sd-hero--merchant {
    height: 150px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 50%, #fcd34d 100%);
    display: flex; align-items: center; justify-content: center;
}
.sd-hero--merchant .sd-hero-icon {
    width: 72px; height: 72px; border-radius: 50%;
    background: rgba(255,255,255,.75); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 20px rgba(180,83,9,.25);
    contain: layout style;
}
.sd-hero--merchant .sd-hero-icon i { font-size: 32px; color: #b45309; }

/* 商家名称：单独一行 */
.sd-title--merchant { margin: 0 0 10px; }
/* 商家类型标签行（名称下方，独立成行） */
.sd-types { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.sd-types .spot-type-badge { font-size: 12px; padding: 4px 10px; }

/* 商家信息行列表（营业时间 / 联系方式） */
.sd-info-list { margin-bottom: 12px; }
.sd-info-row {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 0; border-bottom: 1px solid var(--border-color);
}
.sd-info-row:last-child { border-bottom: none; }
.sd-info-row > i { width: 18px; text-align: center; color: #f59e0b; font-size: 14px; }
.sd-info-row .sd-info-k { font-size: 12px; color: var(--text-secondary); font-weight: 600; flex-shrink: 0; }
.sd-info-row .sd-info-v { font-size: 14.5px; color: var(--text-color); word-break: break-word; }

/* 电话可拨打链接 */
.sd-phone-link {
    color: #6D5AE6; text-decoration: none; cursor: pointer;
    font-weight: 600;
}
.sd-phone-link:hover { text-decoration: underline; color: #4B3FA8; }

/* 二维码区 */
.sd-qr-section { margin-top: 8px; text-align: center; }
.sd-qr-label { font-size: 11px; color: var(--text-secondary); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px; }
.sd-qr-img {
    width: 140px; height: 140px; border-radius: 12px;
    border: 1px solid var(--border-color);
    object-fit: contain; background: #fff;
}
.sd-qr-tip { margin-top: 6px; font-size: 11.5px; color: var(--text-secondary); }

/* ============ 汛限水位显示（水库水位页） ============ */
.flood-limit-info {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
    margin-top: 8px; padding: 8px 10px; border-radius: 10px;
    background: rgba(229,57,53,0.06); border: 1px solid rgba(229,57,53,0.18);
    font-size: 13px;
}
.flood-label { color: #c0392b; font-weight: 600; }
.flood-value { color: #222; font-weight: 700; }
.flood-diff { font-weight: 600; padding: 1px 8px; border-radius: 20px; font-size: 12px; }
.flood-diff.over { color: #fff; background: #e53935; }            /* 超汛限：红 */
.flood-diff.under { color: #1b7a3d; background: rgba(46,160,67,0.12); }  /* 低于汛限：绿 */

/* ============ 水文站列表选择器（添加站点） ============ */
.station-picker-list {
    max-height: 280px; overflow-y: auto; margin-top: 12px;
    border: 1px solid var(--border-color); border-radius: 14px; background: #fff;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.02);
}
.station-picker-item {
    padding: 13px 14px; border-bottom: 1px solid #f2f2f5; cursor: pointer;
    transition: background .15s, transform .1s;
    display: flex; align-items: flex-start; gap: 11px;
}
.station-picker-item:last-child { border-bottom: none; }
.station-picker-item:hover { background: #faf9ff; }
.station-picker-item:active { transform: scale(0.99); }
.spi-name { font-size: 15px; font-weight: 600; color: #1f2330; }
.spi-meta { font-size: 12px; color: #8a8f9c; margin-top: 3px; line-height: 1.5; }
/* 批量勾选：勾选框 + 选中态 + 已添加红色角标 */
.station-picker-item .spi-check {
    flex: 0 0 auto; width: 22px; height: 22px; border-radius: 6px;
    border: 2px solid #d8d8e2; display: flex; align-items: center; justify-content: center;
    font-size: 13px; color: transparent; background: #fff; margin-top: 1px; transition: all .15s;
}
.station-picker-item.picked { background: rgba(109, 90, 230,0.06); box-shadow: inset 3px 0 0 var(--primary-color); }
.station-picker-item.picked .spi-check { background: var(--primary-color); border-color: var(--primary-color); color: #fff; }
.station-picker-item.picked .spi-name { color: var(--primary-color); }
.station-picker-item .spi-text { flex: 1 1 auto; min-width: 0; }
.station-picker-item.already-added { background: #f7f7fa; cursor: default; opacity: 0.72; }
.station-picker-item.already-added .spi-name { color: #888; }
.spi-added-badge {
    display: inline-block; margin-left: 8px; padding: 2px 10px; border-radius: 20px;
    font-size: 11px; font-weight: 700; color: #fff; background: #e74c3c;  /* 红色「已添加」 */
    vertical-align: middle;
}
.station-picker-empty { padding: 22px; text-align: center; color: #999; font-size: 13px; }
.picked-station-info {
    margin-top: 10px; padding: 12px 14px; border-radius: 12px;
    background: rgba(109, 90, 230,0.08); border: 1px solid rgba(109, 90, 230,0.2);
}
.psi-name { font-size: 15px; font-weight: 700; color: #6D5AE6; }
.psi-meta { font-size: 12.5px; color: #555; margin: 4px 0 8px; }
.psi-clear {
    background: none; border: 1px solid #6D5AE6; color: #6D5AE6;
    padding: 4px 14px; border-radius: 20px; font-size: 12px; cursor: pointer;
}
.manual-stcd-box { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border-color); }

/* ============ 移动端 UI 增强 ============ */
/* 安全区适配（iPhone 刘海 / 底部 Home 指示条） */
.bottom-nav, .modal-dialog, .station-actions { padding-bottom: env(safe-area-inset-bottom); }
.modal-header-custom { padding-top: env(safe-area-inset-top); }
/* 触摸点击反馈 */
.btn-confirm:active, .station-btn:active, .bottom-nav-item:active, .station-picker-item:active { transform: scale(0.97); }
/* 输入框 16px，防止 iOS 聚焦时页面缩放 */
input, textarea, select { font-size: 16px; }
/* 更大点击区，方便手指操作 */
.station-btn { min-height: 44px; }
.bottom-nav-item { min-height: 52px; }
/* 底部导航毛玻璃精致化 */
.bottom-nav {
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    background: rgba(255,255,255,0.86);
    border-top: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 -2px 12px rgba(0,0,0,0.05);
}
/* 卡片圆角统一 */
.card { border-radius: 16px; }
/* 更细响应式断点 */
@media (max-width: 380px) {
    .current-level { font-size: 34px; }
    .water-level-card .card-body { padding: 14px; }
}
@media (max-width: 340px) {
    .spi-meta { font-size: 11px; }
    .flood-limit-info { font-size: 12px; }
}

/* ===== 测站卡片网格（水库水位页：不切换，点卡片看详情才扣积分） ===== */
.stations-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 16px;
    box-sizing: border-box;
    /* 显式 width:100%：与 .wl-top-bar 严格同宽，不再靠"兄弟天然等宽" */
    width: 100%;
}
/* 移动端：一行 1 个，避免卡片过窄 */
@media (max-width: 640px) {
    .stations-grid {
        grid-template-columns: 1fr;
    }
}

/* 水库水位页全页 loading（学习 sw_html：集中 loading + 进度，替代骨架条） */
.water-loading-full {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}
.water-loading-spinner {
    position: relative;
    width: 60px;
    height: 60px;
    margin: 0 auto 16px;
}
.wl-spinner-ring {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 4px solid transparent;
    border-top-color: var(--primary-color);
    border-bottom-color: var(--accent-color);
    animation: wl-spin 1.2s linear infinite;
}
@keyframes wl-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.wl-fish {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 22px;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.15));
}
.wl-title {
    color: var(--text-color);
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 6px;
}
.wl-hint {
    color: var(--text-secondary);
    font-size: 13px;
}

/* 水库水位页：点击加载提示 */
.water-load-prompt {
    background: #fff;
    border-radius: 14px;
    padding: 28px 16px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
    border: 2px dashed var(--primary-light);
    text-align: center;
    color: var(--text-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.water-load-icon {
    font-size: 36px;
    color: var(--primary-color);
}
.water-load-title {
    font-size: 18px;
    font-weight: 600;
}
.water-load-sub {
    font-size: 13px;
    color: var(--text-secondary);
}
.water-load-btn {
    background: var(--primary-color);
    color: #fff;
    border: none;
    padding: 10px 28px;
    border-radius: 24px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    margin-top: 6px;
    transition: background-color 0.2s;
}
.water-load-btn:hover { background: var(--primary-dark); }

.station-card {
    background: #fff;
    border-radius: 15px;
    padding: 15px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease;
    border: 1px solid #eef2f7;
}
.station-card:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(109, 90, 230,0.18); }
.station-card:active { transform: scale(0.98); }
.station-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 12px; padding-bottom: 10px; border-bottom: 2px solid #ecf0f1;
}
.station-name {
    font-size: 17px; color: #1F2233; font-weight: 700;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.station-header .badge {
    font-size: 11px; color: #6B7280; background: #F5F6FB;
    padding: 2px 8px; border-radius: 10px; flex-shrink: 0; margin-left: 6px;
}
/* 卡片右上角时间胶囊，对齐 sw_html 参考图（蓝色圆角） */
.station-card .status {
    background: #3498db; color: #fff; padding: 5px 11px; border-radius: 15px;
    font-size: 12px; flex-shrink: 0; margin-left: 8px; white-space: nowrap;
}
.current-data { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.data-box { padding: 12px 8px; border-radius: 10px; color: #fff; text-align: center; }
.water-box { background: linear-gradient(135deg, #667eea, #764ba2); }
.flow-box { background: linear-gradient(135deg, #f093fb, #f5576c); }
.no-flow-box { background: linear-gradient(135deg, #bdc3c7, #95a5a6); }
.data-label { font-size: 13px; opacity: .95; margin-bottom: 5px; }
.data-value { font-size: 20px; font-weight: 700; white-space: nowrap; line-height: 1.2; }
.data-unit { font-size: 11px; margin-left: 2px; opacity: .9; }
.data-time { font-size: 12px; opacity: .9; margin-top: 4px; }
/* 卡片底部信息行（最新水情 / 距警戒 / 水势），对齐 sw_html */
.water-info { margin-top: 10px; padding: 6px 0; font-size: 12px; color: #1a1a2e; line-height: 1.6; }
/* 无流量等缺失数据：灰色“无数据” */
.flow-na { color: #8a94a6; font-size: 13px; font-weight: 600; }
/* 列表卡片灰盒内：白字放大，与数据值区协调且清晰 */
.no-flow-box .flow-na { color: #fff; font-size: 18px; font-weight: 600; }
.station-card .skeleton {
    height: 16px; border-radius: 6px;
    background: linear-gradient(90deg, #eef2f7 25%, #ECECF2 37%, #eef2f7 63%);
    background-size: 400% 100%; animation: sd-shimmer 1.4s ease infinite;
}
@keyframes sd-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* 详情弹窗内的图表 / 表格区 */
.detail-section { margin-top: 16px; }
.detail-section .section-title { font-size: 14px; font-weight: 700; color: #1F2233; margin-bottom: 8px; }
.detail-section .water-chart-container { width: 100%; }
.detail-section .water-chart-container canvas { width: 100% !important; }

/* ════════════════ 实时水位详情弹窗：铺满屏幕 + 内容缩进（现代重做） ════════════════ */
/* 手机：铺满全屏；桌面：留缩进大框，避免超宽难看 */
#water-detail-modal {
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
}
#water-detail-modal .detail-modal-content {
    width: 100%;
    max-width: 100%;
    max-height: 100vh;
    min-height: 100vh;
    height: auto;
    border-radius: 0;
    display: block;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 20px);
}
#water-detail-modal .detail-modal-header {
    flex-shrink: 0;
    padding: calc(env(safe-area-inset-top, 0px) + 16px) 20px 14px;
}
#water-detail-modal .detail-modal-body {
    padding: 8px 16px 4px;
    flex-shrink: 0;
}
/* 图表 / 表格左右缩进，不再贴边 */
#water-detail-modal .detail-section {
    margin-top: 10px;
    padding: 0 16px;
}
/* 站名更精致：左对齐 + 底部分隔线 */
#water-detail-modal .water-station-name {
    text-align: left;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-color);
    margin: 0;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}
/* 当前数据摘要行：位于图表下方、表格上方（对齐 sw_html 顺序） */
.water-summary {
    text-align: center;
    font-size: 0.9em;
    color: #2c3e50;
    line-height: 1.7;
    margin: 12px 0 6px;
    padding: 0 16px;
}
.water-summary strong { font-weight: 700; }
/* 历史数据标题 */
.water-table-title {
    font-size: 15px;
    font-weight: 700;
    color: #2c3e50;
    margin: 0 0 8px;
}
/* 图表紧凑，确保一屏能放下表格 */
#water-detail-modal .water-chart-container {
    height: 400px;
    min-height: 300px;
    margin: 0;
    padding: 10px;
}
@media (max-width: 768px) {
    #water-detail-modal .water-chart-container { height: 65vw; min-height: 300px; }
}
/* 弹窗内表格默认自然高度，点击"显示全部"后由 .is-expanded 控制滚动 */
#water-detail-modal .water-history-table {
    max-height: none;
}
#water-detail-modal .detail-modal-header h3 {
    font-size: 20px;
    font-weight: 700;
}
/* 桌面端：不全屏拉伸，居中大框 + 留屏幕边距形成缩进 */
@media (min-width: 600px) {
    #water-detail-modal {
        padding: 28px;
        align-items: center;
        justify-content: center;
    }
    #water-detail-modal .detail-modal-content {
        width: 100%;
        max-width: 820px;
        max-height: 90vh;
        min-height: 0;
        height: auto;
        border-radius: 20px;
    }
}

/* 通用加载提示（玩赚渔豆等异步页面进入时优先显示，避免「旧数据」体感） */
.loading-tip {
    padding: 18px 12px;
    text-align: center;
    font-size: 14px;
    color: var(--text-muted, #888);
    opacity: .8;
}
.loading-tip::before {
    content: "";
    display: inline-block;
    width: 14px; height: 14px;
    margin-right: 8px;
    vertical-align: -2px;
    border: 2px solid var(--primary-color, #6D5AE6);
    border-top-color: transparent;
    border-radius: 50%;
    animation: fishing-spin .7s linear infinite;
}
@keyframes fishing-spin { to { transform: rotate(360deg); } }

/* ===== 代理未连接轻量提示条 ===== */
.proxy-banner {
    position: sticky;
    top: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    background: #fff8e1;
    color: #8d6e00;
    border-bottom: 1px solid #ffe082;
    font-size: 13px;
    line-height: 1.4;
}
.proxy-banner-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ff9800;
    flex-shrink: 0;
}
.proxy-banner-text {
    flex: 1;
}
.proxy-banner-btn {
    background: #ff9800;
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 4px 10px;
    font-size: 12px;
    cursor: pointer;
    flex-shrink: 0;
}
.proxy-banner-close {
    background: transparent;
    color: #8d6e00;
    border: none;
    font-size: 18px;
    line-height: 1;
    padding: 0 2px;
    cursor: pointer;
    opacity: 0.7;
    flex-shrink: 0;
}
.proxy-banner-close:hover { opacity: 1; }

/* ═══════════════ 编辑资料弹窗重做 ═════════════ */
.pe-card {
    width: 90%;
    max-width: 420px;
    background: var(--card-background);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    animation: peIn 0.32s cubic-bezier(0.16,1,0.3,1);
}
@keyframes peIn { from { opacity:0; transform: translateY(24px) scale(0.94);} to {opacity:1; transform:none;} }
.pe-header {
    position: relative;
    padding: 30px 20px 22px;
    text-align: center;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 55%, var(--accent-color) 135%);
    color: #fff;
}
.pe-close {
    position: absolute; top: 12px; right: 12px;
    width: 32px; height: 32px; border: none; border-radius: 50%;
    background: rgba(255,255,255,0.2); color: #fff; font-size: 15px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; transition: background 0.2s;
}
.pe-close:hover { background: rgba(255,255,255,0.34); }
.pe-avatar {
    width: 72px; height: 72px; margin: 0 auto 12px; border-radius: 50%;
    background: rgba(255,255,255,0.2); border: 3px solid rgba(255,255,255,0.55);
    display: flex; align-items: center; justify-content: center; font-size: 36px; line-height: 1;
    box-shadow: 0 6px 18px rgba(0,0,0,0.18);
}
.pe-title { font-size: 19px; font-weight: 700; letter-spacing: 0.5px; }
.pe-subtitle { font-size: 13px; opacity: 0.85; margin-top: 3px; }
.pe-body { padding: 22px 22px 6px; }
.pe-tip { font-size: 12px; color: var(--text-secondary); margin: 8px 0 0; line-height: 1.6; }
.pe-footer { display: flex; gap: 12px; padding: 16px 22px 22px; }
.btn-pe-cancel, .btn-pe-save {
    flex: 1; padding: 12px 0; border-radius: 12px; font-size: 15px; font-weight: 600;
    cursor: pointer; border: none; transition: transform 0.12s, box-shadow 0.2s, background 0.2s;
}
.btn-pe-cancel { background: var(--background-color); color: var(--text-color); }
.btn-pe-cancel:hover { background: #ececec; }
.btn-pe-save {
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    color: #fff; box-shadow: 0 6px 16px rgba(109,90,230,0.32);
}
.btn-pe-save:hover { box-shadow: 0 8px 22px rgba(109,90,230,0.42); }
.btn-pe-save:active, .btn-pe-cancel:active { transform: scale(0.97); }
.btn-pe-save:disabled { opacity: 0.6; cursor: not-allowed; }

/* 添加站点：搜索框带图标 */
.sp-search-wrap { position: relative; display: flex; align-items: center; }
.sp-search-wrap > i { position: absolute; left: 14px; color: #b3b3c0; font-size: 14px; pointer-events: none; }
.sp-search-wrap input { padding-left: 40px !important; }

/* 管理站点：空状态 + 当前徽章 */
.ss-empty { text-align: center; padding: 40px 20px; color: var(--text-secondary); }
.ss-empty i { font-size: 40px; color: var(--primary-color); opacity: 0.8; margin-bottom: 12px; }
.ss-empty p { font-size: 16px; font-weight: 600; color: var(--text-color); margin: 0 0 6px; }
.ss-empty span { font-size: 13px; color: var(--text-secondary); }
.station-current-badge {
    font-size: 10px; font-weight: 700; color: #fff; background: var(--primary-color);
    padding: 1px 8px; border-radius: 20px; flex: 0 0 auto; margin-left: 6px;
}