/* ============================================================
   液态极光主题 Liquid Aurora Mesh Theme v4
   —— 2025-26 最流行的 Mesh Gradient 多彩极光 + 液态玻璃
   紫罗兰 × 品红 × 青蓝 极光光斑，与紫靛胶囊导航无缝搭配
   ============================================================ */

/* ---------- 全局背景：多彩极光 Mesh 光斑 ---------- */
body {
    background-color: #08060f !important;
    background-image:
        radial-gradient(900px 480px at 88% -6%, rgba(168, 85, 247, 0.20) 0%, transparent 58%),
        radial-gradient(760px 420px at -8% 18%, rgba(236, 72, 153, 0.14) 0%, transparent 56%),
        radial-gradient(820px 520px at 108% 42%, rgba(59, 130, 246, 0.13) 0%, transparent 58%),
        radial-gradient(900px 700px at 45% 118%, rgba(34, 211, 238, 0.10) 0%, transparent 60%),
        linear-gradient(160deg, #0d0a1a 0%, #08060f 55%) !important;
    background-attachment: fixed !important;
}
/* 隐藏各页面原有的单一紫靛光晕伪元素，用上面的多彩光斑代替 */
body::before, body::after { display: none !important; }

/* ---------- 通用卡片：通透液态玻璃 ---------- */
.card,
.welcome-card,
.stats-grid, .stat-card,
.section, .section-card,
.todo-section,
.progress-section,
.project-item, .announcement-item,
.plan-card, .archive-card, .customer-item, .user-item,
.record-item, .report-item, .todo-item, .expense-item,
.pending-grid, .popup-content, .modal-content,
.fuel-card, .chat-list-item, .message-bubble {
    background: linear-gradient(155deg, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0.028) 45%, rgba(255, 255, 255, 0.012) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 16px 40px rgba(8, 4, 24, 0.42),
                inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
    backdrop-filter: blur(24px) saturate(140%);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
}

/* ---------- 欢迎卡片：极光渐变液态玻璃 ---------- */
.welcome-card {
    background:
        linear-gradient(135deg, rgba(168, 85, 247, 0.34) 0%, rgba(236, 72, 153, 0.20) 50%, rgba(59, 130, 246, 0.22) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    box-shadow: 0 18px 48px rgba(8, 4, 24, 0.5),
                0 0 60px rgba(168, 85, 247, 0.14),
                inset 0 1px 0 rgba(255, 255, 255, 0.30) !important;
}
.welcome-title {
    background: linear-gradient(110deg, #ffffff 8%, #e9d5ff 40%, #fbcfe8 70%, #bae6fd 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent;
    text-shadow: none !important;
}
.welcome-subtitle { color: rgba(240, 235, 255, 0.72) !important; }

/* ---------- 标题与板块 ---------- */
.section-title, .todo-title-home, .popup-title { color: #f2eeff !important; }
.section-title::before, .todo-title-home::before {
    background: linear-gradient(180deg, #c084fc 0%, #ec4899 100%) !important;
    box-shadow: 0 0 12px rgba(192, 132, 252, 0.6);
}

/* ---------- 统计卡片 ---------- */
.stat-number {
    background: linear-gradient(115deg, #f0abfc 8%, #a78bfa 55%, #7dd3fc 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent;
}
.stat-label { color: rgba(226, 220, 250, 0.55) !important; }

/* ---------- 按钮与强调元素：彩虹极光渐变 ---------- */
button, .btn, input[type="submit"], input[type="button"],
.progress-summary,
.badge, .tag,
.add-btn, .map-add-btn, .popup-del-btn,
.submit-btn, .save-btn, .confirm-btn, .publish-btn,
.primary-btn, .action-btn, .quick-action {
    background-image: linear-gradient(120deg, #a855f7 0%, #ec4899 55%, #6366f1 100%) !important;
    border-color: rgba(240, 171, 252, 0.45) !important;
}
button:not(.popup-del-btn), .btn, .submit-btn, .save-btn, .confirm-btn, .publish-btn,
.primary-btn, .action-btn, .add-btn, .map-add-btn {
    color: #fff !important;
    text-shadow: 0 1px 2px rgba(60, 10, 90, 0.35);
    box-shadow: 0 8px 22px rgba(168, 85, 247, 0.38),
                inset 0 1px 0 rgba(255, 255, 255, 0.30) !important;
}
button:hover, .btn:hover, .primary-btn:hover {
    filter: brightness(1.1);
    box-shadow: 0 8px 28px rgba(236, 72, 153, 0.45),
                inset 0 1px 0 rgba(255, 255, 255, 0.30) !important;
}

/* 次级/取消/幽灵按钮：毛玻璃质感 */
button.secondary, .cancel-btn, .btn-secondary, .ghost-btn, button[style*="transparent"] {
    background-image: linear-gradient(145deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.03) 100%) !important;
    color: rgba(240, 235, 255, 0.85) !important;
    text-shadow: none;
}

/* 危险操作按钮保持红色系 */
.popup-del-btn, .delete-btn, .danger-btn {
    background-image: linear-gradient(135deg, #fb7185 0%, #e11d48 100%) !important;
    color: #fff !important;
}

/* 绿色系（完成状态）升级为翡翠渐变 */
.todo-dot.completed, .status-completed {
    background-image: linear-gradient(90deg, #6ee7b7 0%, #10b981 100%) !important;
}

/* ---------- 列表项悬停：极光描边发光 ---------- */
.project-item:hover, .announcement-item:hover, .todo-item-home:hover,
.plan-card:hover, .record-item:hover, .pending-item:hover, .customer-item:hover {
    border-color: rgba(217, 160, 255, 0.45) !important;
    background: linear-gradient(155deg, rgba(255, 255, 255, 0.11) 0%, rgba(255, 255, 255, 0.04) 100%) !important;
    box-shadow: 0 14px 34px rgba(8, 4, 24, 0.45), 0 0 26px rgba(168, 85, 247, 0.14) !important;
}

/* ---------- 输入控件 ---------- */
input, select, textarea {
    background: rgba(16, 12, 30, 0.60) !important;
    border: 1px solid rgba(192, 132, 252, 0.24) !important;
    color: #f2eeff !important;
}
input:focus, select:focus, textarea:focus {
    border-color: rgba(232, 121, 249, 0.60) !important;
    box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.18), 0 0 20px rgba(236, 72, 153, 0.22) !important;
    outline: none !important;
}
input::placeholder, textarea::placeholder { color: rgba(200, 190, 235, 0.38) !important; }

/* ---------- 强调色 ---------- */
a:not(.nav-item) { color: #d8b4fe; }
progress, .todo-dot.pending {
    background-image: linear-gradient(90deg, #a855f7 0%, #ec4899 100%) !important;
}

/* ---------- 滚动条 ---------- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(168, 85, 247, 0.4), rgba(236, 72, 153, 0.4));
    border-radius: 3px;
}
::-webkit-scrollbar-track { background: transparent; }

/* ---------- 弹窗遮罩 ---------- */
.popup-overlay, .modal-overlay {
    background: rgba(8, 4, 20, 0.70) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* ---------- 底部导航：只微调文字色，不改变样式 ---------- */
.bottom-nav .nav-item:not(.active) .nav-text { color: rgba(226, 220, 250, 0.45); }

/* ---------- 维保进度修正：进度条与图例保持高对比 ---------- */
/* 轨道：深色凹槽，与亮色填充明显区分 */
.progress-bar-track {
    background: rgba(0, 0, 0, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
}
/* 填充：高亮极光渐变 + 发光，远亮于轨道 */
.progress-bar-fill {
    background-image: linear-gradient(90deg, #e879f9 0%, #a855f7 55%, #818cf8 100%) !important;
    box-shadow: 0 0 12px rgba(232, 121, 249, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}
/* 图例圆点：强制保留绿/红语义色（覆盖渐变规则，不覆盖内联色） */
.legend-dot {
    background-image: none !important;
}

/* ---------- 登录页角色切换标签：恢复选中/未选中区分 ---------- */
/* 未选中：透明玻璃底 */
.group-btn {
    background-image: none !important;
    background: transparent !important;
    color: rgba(226, 220, 250, 0.55) !important;
    text-shadow: none !important;
    box-shadow: none !important;
    border: 1px solid transparent !important;
}
.group-btn:not(.active):hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: rgba(240, 235, 255, 0.85) !important;
}
/* 选中：极光渐变胶囊 + 发光，一眼可辨 */
.group-btn.active {
    background-image: linear-gradient(120deg, #a855f7 0%, #ec4899 55%, #6366f1 100%) !important;
    color: #fff !important;
    text-shadow: 0 1px 2px rgba(60, 10, 90, 0.35);
    box-shadow: 0 4px 18px rgba(168, 85, 247, 0.45),
                inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
}