body,
html {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: sans-serif;
}

#map {
    height: 100vh;
    width: 100vw;
    z-index: 1;
}

/*  核心：一体化面板 */
#app-panel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 130px;
    /* 初始高度：刚好装下搜索框、分类栏和箭头，你可以微调 */
    background: white;
    z-index: 1000;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    border-radius: 0 0 15px 15px;
    display: flex;
    flex-direction: column;
    transition: height 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), border-radius 0.3s ease;
    /* 丝滑的推拉动画 */
    overflow: hidden;
    user-select: none;
}

/* 展开状态：高度撑满全屏 */
#app-panel.open {
    height: 100vh;
    border-radius: 0;
}

/* 1. 搜索框 */
#search-box {
    position: relative;
    margin: 15px 15px 5px 15px;
    flex-shrink: 0;
}

.search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #888;
}

#search-input {
    width: 100%;
    padding: 10px 10px 10px 35px;
    border-radius: 20px;
    border: 1px solid #ddd;
    box-sizing: border-box;
    outline: none;
    background: #f9f9f9;
    user-select: text;
}

#search-results {
    position: absolute;
    top: 45px;
    width: 100%;
    background: white;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    display: none;
    z-index: 1001;
}

/* 2. 列表区（默认被压扁隐藏） */
#list-wrapper {
    flex: 1;
    /* 占据中间所有剩余空间 */
    overflow-y: auto;
    display: none;
    /* 没展开时隐藏 */
}

#app-panel.open #list-wrapper {
    display: block;
    /* 展开时显示 */
}

/* 3. 底部控制区 */
#bottom-controls {
    flex-shrink: 0;
    background: white;
}

#filter-bar {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 5px 15px;
}


#filter-bar button.active {
    background: #4CAF50;
    color: white;
}

#drag-handle {
    text-align: center;
    padding: 5px 0 8px 0;
    cursor: pointer;
    color: #555;
    font-size: 14px;
    user-select: none;
    font-weight: bold;
}

/* 列表项与定位按钮 (保持原样) */
.list-item {
    padding: 15px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.list-item-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
    cursor: pointer;
}

.list-item-name {
    font-weight: bold;
    font-size: 16px;
    color: #333;
}

.list-item-meta {
    font-size: 12px;
    color: #888;
}

.locate-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid #ccc;
    background: white;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

.locate-icon {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid #4CAF50;
    position: relative;
}

.locate-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: #4CAF50;
}

.locate-btn:hover {
    background: #f0f8ff;
    border-color: #4CAF50;
}

.locate-btn.disabled {
    background: #e0e0e0;
    border-color: #e0e0e0;
    cursor: not-allowed;
}

.locate-btn.disabled .locate-icon {
    border-color: #999;
}

.locate-btn.disabled .locate-icon::after {
    background-color: #999;
}



/* ==========================================
   悬浮定位按钮
   ========================================== */
#locate-me-btn {
    position: absolute;
    right: 15px;
    bottom: 80px;
    z-index: 1000;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: white;
    border: none;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    font-size: 20px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.2s ease;
}

#locate-me-btn:hover {
    background: #f0f8ff;
    transform: scale(1.05);
}

/* 转圈动画关键代码 */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 必须给 span 加上 inline-block 才能旋转 */
#locate-icon-inner {
    display: inline-block; 
}

#locate-me-btn.loading #locate-icon-inner {
    animation: spin 1s linear infinite; /* 转起来！ */
}

#locate-me-btn.loading {
    background: #f0f0f0;
    cursor: wait;
}

/* ==========================================
   添加地点按钮
   ========================================== */
#add-place-btn {
    position: absolute;
    right: 15px;
    bottom: 140px; /* 在定位按钮上面 */
    z-index: 1000;
    width: 45px; height: 45px;
    border-radius: 50%;
    background: #ffffff; 
    color: white;
    border: none;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    font-size: 24px;
    cursor: pointer;
    display: flex; justify-content: center; align-items: center;
    transition: all 0.2s ease;
}
#add-place-btn:hover { transform: scale(1.05); background: #45a049; }

/* ==========================================
   添加地点表单弹窗
   ========================================== */
#add-modal {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5); z-index: 2000;
    display: flex; justify-content: center; align-items: center;
}
#add-modal-content {
    background: white; padding: 20px; border-radius: 15px;
    width: 85%; max-width: 400px; position: relative;
    max-height: 80vh; overflow-y: auto;
}
#close-add-modal {
    position: absolute; top: 10px; right: 15px;
    cursor: pointer; font-size: 18px; color: #888;
}
.form-group { margin-bottom: 12px; }
.form-group label { display: block; font-size: 14px; margin-bottom: 4px; color: #555; }
.form-group input, .form-group select, .form-group textarea {
    width: 100%; padding: 8px; border: 1px solid #ddd;
    border-radius: 8px; box-sizing: border-box; outline: none;
}
.form-group textarea { height: 60px; resize: none; }
#submit-place-btn {
    width: 100%; padding: 12px; background: #4CAF50; color: white;
    border: none; border-radius: 8px; font-size: 16px; cursor: pointer;
    margin-top: 10px;
}
#submit-place-btn:disabled { background: #ccc; cursor: wait; }
/* ==========================================
   线上/线下过滤条
   ========================================== */
#online-filter-bar {
    display: none; /* 默认隐藏（地图模式下看不到） */
    gap: 8px;
    overflow-x: auto;
    padding: 0 15px 10px 15px;
    background: white;
}

/* 当大面板展开时，显示过滤条 */
#app-panel.open #online-filter-bar {
    display: flex;
}

/* 复用之前的按钮样式，或者单独写（这里写一套稍微小一点的） */
#online-filter-bar button {
    border: none;
    background: #f0f0f0;
    padding: 5px 10px;
    border-radius: 12px;
    cursor: pointer;
    font-size: 12px;
    color: #555;
    white-space: nowrap;
}

#online-filter-bar button.active {
    background: #2196F3; /* 用蓝色区分食物分类 */
    color: white;
}
/* ==========================================
   详情弹窗与评论区样式
   ========================================== */
.hidden {
    display: none !important;
}

#detail-modal {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: center;
}

#modal-content {
    background: white;
    padding: 20px;
    border-radius: 15px;
    width: 80%;
    max-width: 350px;
    position: relative;
    max-height: 80vh;
    overflow-y: auto;
}
/* 🌟 核心：美化滚动条，让它不破坏圆角 */
#modal-content::-webkit-scrollbar {
    width: 6px;
}
#modal-content::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 10px;
}
#modal-content::-webkit-scrollbar-track {
    background: transparent;
    margin: 15px 0;
}
#close-modal {
    position: absolute;
    top: 10px;
    right: 15px;
    cursor: pointer;
    font-size: 18px;
    color: #888;
}

#comments-section input, 
#comments-section textarea {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 6px;
    box-sizing: border-box;
    outline: none;
    font-family: sans-serif;
}

#comment-input {
    height: 60px;
    resize: none;
}

#submit-comment-btn {
    width: 100%;
    padding: 10px;
    margin-top: 8px;
    background: #2196F3; /* 用蓝色区分评论按钮 */
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
}

#submit-comment-btn:disabled {
    background: #ccc;
    cursor: wait;
}

.comment-item {
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px dashed #ddd;
}
.comment-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
}
.comment-header {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #888;
    margin-bottom: 4px;
}
.comment-user {
    font-weight: bold;
    color: #4CAF50;
}
.comment-text {
    font-size: 14px;
    color: #333;
}
/* ==========================================
   个人中心按钮
   ========================================== */
#my-profile-btn {
    position: absolute;
    right: 15px;
    bottom: 200px; /* 放在添加按钮的上面 */
    z-index: 1000;
    width: 45px; height: 45px;
    border-radius: 50%;
    background: white;
    border: none;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    font-size: 20px;
    cursor: pointer;
    display: flex; justify-content: center; align-items: center;
    transition: all 0.2s ease;
}
#my-profile-btn:hover { background: #f0f8ff; transform: scale(1.05); }
/* ==========================================
   个人中心弹窗样式
   ========================================== */
#profile-modal {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5); z-index: 2000;
    display: flex; justify-content: center; align-items: center;
}
#profile-modal-content {
    background: white; padding: 20px; border-radius: 15px;
    width: 85%; max-width: 400px; position: relative;
    max-height: 80vh; overflow-y: auto;
}
#close-profile-modal {
    position: absolute; top: 10px; right: 15px;
    cursor: pointer; font-size: 18px; color: #888;
}
.my-comment-item {
    border-bottom: 1px dashed #eee;
    padding: 10px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}
.my-comment-content {
    font-size: 14px;
    color: #333;
    flex: 1;
}
.my-comment-shop {
    font-size: 12px;
    color: #2196F3;
    font-weight: bold;
}
.my-comment-date {
    font-size: 11px;
    color: #aaa;
}
.delete-comment-btn {
    background: #ffebee;
    color: #f44336;
    border: none;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 12px;
    flex-shrink: 0;
}
.delete-comment-btn:hover {
    background: #ffcdd2;
}
/* 排序选项卡样式 */
#sort-controls {
    display: flex;
    gap: 5px;
}
.sort-btn {
    background: transparent;
    border: none;
    color: #888;
    font-size: 13px;
    cursor: pointer;
    padding: 2px 8px;
    border-radius: 10px;
    transition: all 0.2s;
}
.sort-btn.active {
    background: #e8f5e9;
    color: #4CAF50;
    font-weight: bold;
}

/* 点赞按钮样式 */
.like-btn {
    background: transparent;
    border: none;
    color: #999;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 2px 5px;
    border-radius: 5px;
    transition: all 0.2s;
    margin-left: 10px;
}
.like-btn:hover { background: #ffebee; color: #f44336; }
.like-btn.liked { color: #f44336; font-weight: bold; cursor: default; }
#edit-desc-btn {
    background: transparent;
    border: 1px dashed #4CAF50;
    color: #4CAF50;
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 5px;
    cursor: pointer;
    margin-bottom: 10px;
}
#edit-desc-btn:hover {
    background: #e8f5e9;
}
/* 店铺点赞按钮样式 */
#shop-like-btn {
    width: 100%;
    padding: 10px;
    background: #fff3e0; /* 浅橙色 */
    color: #ff5722;
    border: 1px solid #ff5722;
    border-radius: 8px;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
}
#shop-like-btn:hover {
    background: #ffe0b2;
}
#shop-like-btn.liked {
    background: #e0e0e0;
    color: #888;
    border-color: #ccc;
    cursor: default;
}
/* 菜品卡片样式 */
.dish-card {
    min-width: 120px;
    max-width: 120px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    position: relative;
}
.dish-card img {
    width: 100%;
    height: 80px;
    object-fit: cover;
    background: #f5f5f5;
}
.dish-info {
    padding: 8px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.dish-name {
    font-size: 13px;
    font-weight: bold;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dish-price {
    color: #ff5722;
    font-size: 12px;
    margin: 4px 0;
}
.dish-like-btn {
    background: #f9f9f9;
    border: none;
    padding: 4px;
    border-radius: 4px;
    font-size: 11px;
    color: #666;
    cursor: pointer;
    text-align: center;
}
.dish-like-btn.liked { color: #ff5722; background: #fff3e0; font-weight: bold; }

/* 新增弹窗复用的小样式 */
#add-dish-modal {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5); z-index: 3000;
    display: flex; justify-content: center; align-items: center;
}
.modal-content-small {
    background: white; padding: 20px; border-radius: 15px;
    width: 80%; max-width: 320px; position: relative;
}
.close-btn { position: absolute; top: 10px; right: 15px; cursor: pointer; font-size: 18px; color: #888; }
.primary-btn { width: 100%; padding: 10px; background: #4CAF50; color: white; border: none; border-radius: 6px; margin-top: 10px; cursor: pointer;}
/* ==========================================
   全屏菜单瀑布流样式
   ========================================== */
#full-menu-modal {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: #f5f5f5; z-index: 4000; display: flex; flex-direction: column;
}
#full-menu-header {
    background: white; padding: 15px; display: flex; justify-content: space-between;
    align-items: center; font-weight: bold; font-size: 16px; box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    z-index: 10;
}
#full-menu-grid {
    flex: 1; overflow-y: auto; padding: 15px;
    display: grid; grid-template-columns: 1fr 1fr; /* 🌟 两列等宽瀑布流 */
    gap: 15px;
}

/* 全屏模式下的卡片要大一点 */
.full-dish-card {
    background: white; border-radius: 12px; overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05); display: flex; flex-direction: column;
    position: relative;
}
.full-dish-card img, .full-dish-card .no-img {
    width: 100%; height: 120px; object-fit: cover;
}
.full-dish-info { padding: 10px; flex: 1; display: flex; flex-direction: column; justify-content: space-between; }

/* 悬浮按钮组 */
#full-menu-actions {
    position: absolute; right: 20px; bottom: 40px;
    display: flex; flex-direction: column; gap: 15px;
}
#floating-add-dish-btn, #scroll-to-top-btn {
    width: 50px; height: 50px; border-radius: 50%; background: #4CAF50; color: white;
    border: none; font-size: 24px; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    display: flex; justify-content: center; align-items: center;
}
#scroll-to-top-btn { background: white; color: #333; font-size: 20px; }
/* 展开更多卡片（放在横向列表末尾） */
.expand-card {
    min-width: 80px; /* 比菜品卡片窄一点 */
    background: #f9f9f9;
    border: 2px dashed #ccc;
    border-radius: 8px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    color: #666;
    font-size: 13px;
    transition: all 0.2s;
}
.expand-card:hover {
    background: #f0f0f0;
    border-color: #4CAF50;
    color: #4CAF50;
}
/* ==========================================
   全屏图集查看器
   ========================================== */
#gallery-modal {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.9); z-index: 5000;
    display: flex; justify-content: center; align-items: center;
    flex-direction: column;
}
#gallery-main-img {
    max-width: 95%; max-height: 80vh;
    object-fit: contain; /* 保证图片完整显示不裁剪 */
    border-radius: 8px;
    user-select: none;
}
#close-gallery {
    position: absolute; top: 20px; right: 20px;
    color: white; font-size: 30px; cursor: pointer; z-index: 5001;
}
.gallery-controls {
    position: absolute; bottom: 40px;
    display: flex; align-items: center; gap: 30px;
}
#gallery-prev, #gallery-next {
    background: rgba(255,255,255,0.2); color: white; border: none;
    width: 50px; height: 50px; border-radius: 50%;
    font-size: 24px; cursor: pointer; transition: 0.2s;
}
#gallery-prev:hover, #gallery-next:hover { background: rgba(255,255,255,0.4); }
#gallery-counter { color: white; font-size: 16px; font-family: sans-serif; }

/* 详情页的那张入口图，加个鼠标手势 */
#shop-env-img { cursor: pointer; transition: opacity 0.2s; }
#shop-env-img:hover { opacity: 0.8; }
/* ==========================================
   自定义下拉框终极美化版
   ========================================== */

/* 1. 容器不乱跑 */
#app-panel, #bottom-controls, #filter-bar, .custom-dropdown {
    overflow: visible !important;
}

#filter-bar {
    display: flex;
    gap: 12px; /* 拉开一点间距 */
    padding: 8px 15px;
    background: white;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    z-index: 100;
}

.custom-dropdown {
    flex: 1;
    position: relative;
}

/* 2. 上面的胶囊按钮 */
.dropdown-trigger {
    background-color: #f5f6f8;
    border: 1px solid #eee;
    border-radius: 20px;
    padding: 8px 15px;
    font-size: 13px;
    font-weight: 500;
    color: #333;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
    user-select: none;
}

.dropdown-trigger:hover {
    background-color: #eef0f4;
}

.dropdown-arrow {
    font-size: 10px;
    color: #888;
    transition: transform 0.3s ease;
}

.custom-dropdown.active .dropdown-arrow {
    transform: rotate(180deg); /* 打开时箭头翻转 */
}

/* 3. 弹出来的菜单框（医美核心） */
.dropdown-menu {
    display: none; 
    position: absolute;
    bottom: 55px; /* 稍微抬高一点，不贴着按钮 */
    left: 0;
    width: 100%;
    z-index: 9999;
    background: rgba(255, 255, 255, 0.98); /* 稍微带点透明的高级感 */
    backdrop-filter: blur(10px); /* 毛玻璃效果 */
    border: 1px solid #f0f0f0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12); /* 极其柔和的弥散阴影 */
    border-radius: 14px;
    list-style: none;
    margin: 0;
    padding: 6px;
    max-height: 220px;
    overflow-y: auto;
    
    /* 隐藏默认滚动条，显得干净 */
    scrollbar-width: thin;
    scrollbar-color: #ccc transparent;
}

/* 打开时的出场动画（弹跳感） */
.custom-dropdown.active .dropdown-menu {
    display: block;
    animation: dropUp 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

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

/* 4. 菜单里的每一个选项 */
.dropdown-item {
    padding: 10px 12px;
    font-size: 13px;
    color: #444;
    text-align: center;
    cursor: pointer;
    border-radius: 8px; /* 选项也做成圆角 */
    transition: background 0.2s, color 0.2s;
    margin-bottom: 2px;
}

.dropdown-item:last-child {
    margin-bottom: 0;
}

.dropdown-item:hover {
    background: #f5f5f5;
}

/* 被选中的那个选项（高级感拉满） */
.dropdown-item.active {
    color: #4CAF50;
    font-weight: 600;
    background: #e8f5e9;
}

/* ==========================================
   下拉框智能弹出方向
   ========================================== */

/* 1. 默认状态（收缩时）：向下弹出 */
.dropdown-menu {
    display: none; 
    position: absolute;
    top: 55px; /* 按钮下方 */
    left: 0;
    width: 100%;
    z-index: 9999;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    border: 1px solid #f0f0f0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    border-radius: 14px;
    list-style: none;
    margin: 0;
    padding: 6px;
    max-height: 220px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #ccc transparent;
    transform-origin: top center; /* 从顶部向下展开 */
}

/* 2. 展开状态（open）：向上弹出 */
#app-panel.open .dropdown-menu {
    top: auto; /* 清除向下的定位 */
    bottom: 55px; /* 从按钮上方弹出 */
    transform-origin: bottom center; /* 从底部向上展开 */
}

/* 3. 向下弹出的动画（收缩时用） */
.custom-dropdown.active .dropdown-menu {
    display: block;
    animation: dropDownAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    min-height: 100px; 
}

@keyframes dropDownAnim {
    from { opacity: 0; transform: translateY(-10px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* 4. 向上弹出的动画（展开时用） */
#app-panel.open .custom-dropdown.active .dropdown-menu {
    animation: dropUpAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes dropUpAnim {
    from { opacity: 0; transform: translateY(10px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
/* 给卡片加上相对定位，让垃圾桶能在卡片里定位 */
.dish-card, .full-dish-card {
    position: relative;
}

/* 优雅的垃圾桶按钮样式 */
.dish-card, .full-dish-card {
    position: relative;
}

/* 确保垃圾桶浮在最上层 */
.delete-dish-btn {
    position: absolute; 
    top: 5px; 
    right: 5px; 
    background: rgba(255, 255, 255, 0.8); 
    border-radius: 50%; 
    width: 22px; 
    height: 22px; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    cursor: pointer; 
    font-size: 12px; 
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    z-index: 10; /* 关键：确保浮在图片上面 */
}

/* 悬停时微微放大，提升手感 */
.delete-dish-btn:hover {
    background: #ffffff;
    transform: scale(1.1);
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}
/* 评论区的小垃圾桶样式 */
.delete-comment-btn {
    background: none; 
    border: none; 
    cursor: pointer; 
    margin-left: 8px; 
    font-size: 12px; 
    opacity: 0.6;
    transition: all 0.2s ease;
}

/* 鼠标移上去时，变红且放大，提示用户这是个危险操作 */
.delete-comment-btn:hover {
    opacity: 1;
    transform: scale(1.2);
}
/* ==========================================
   意见反馈入口样式 (抽离版)
   ========================================== */
#feedback-entry {
    margin-top: 20px; 
    border-top: 1px dashed #eee; 
    padding-top: 15px; 
    text-align: center; 
    color: #2196F3; 
    font-size: 14px; 
    font-weight: bold; 
    cursor: pointer;
    transition: color 0.2s;
}

#feedback-entry:hover {
    color: #1976D2;
    text-decoration: underline;
}

/* ==========================================
   意见反馈弹窗 (核心修复)
   ========================================== */
#feedback-modal {
    position: fixed; /* 核心：固定在屏幕上 */
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* 半透明黑底 */
    z-index: 5000; /* 层级极高，保证在所有内容之上 */
    display: flex; 
    justify-content: center; 
    align-items: center; /* 垂直水平居中 */
}

/* 顺便给反馈弹窗里的文本域和下拉框加点好看的样式 */
#feedback-modal select,
#feedback-modal textarea,
#feedback-modal input[type="text"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-sizing: border-box;
    outline: none;
    font-family: sans-serif;
    font-size: 13px;
    background: #f9f9f9;
}

#feedback-modal select:focus,
#feedback-modal textarea:focus,
#feedback-modal input[type="text"]:focus {
    border-color: #2196F3;
    background: #fff;
}
/* ==========================================
   收纳式悬浮工具栏 (右下角)
   ========================================== */
#fab-container {
    position: absolute;
    bottom: 80px; /* 距离底部的距离 */
    right: 15px;
    z-index: 1500;
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* 靠右对齐 */
    gap: 10px;
}

/* 展开后的按钮组容器 */
#fab-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-end;
    /* 默认隐藏并向下偏移，配合动画 */
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none; 
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 展开状态 */
#fab-container.active #fab-actions {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* 子按钮（白色文字胶囊） */
.fab-action-btn {
    background: white;
    color: #333;
    border: none;
    padding: 10px 16px;
    border-radius: 25px;
    font-size: 14px;
    font-weight: bold;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s;
}
.fab-action-btn:hover {
    background: #f0f8ff;
    color: #2196F3;
    transform: scale(1.05);
}

/* 主开关按钮 */
#fab-main-btn {
    background: #333;
    color: white;
    border: none;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    font-size: 16px;
    font-weight: bold;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
    /* 防止按钮变形 */
    flex-shrink: 0;
}

#fab-container.active #fab-main-btn {
    background: #555;
    transform: rotate(90deg); /* 旋转一下，代表切换状态 */
}

/* 定位按钮原有的转圈动画（保留） */
#btn-locate.loading {
    background: #ccc;
    cursor: wait;
}
/* ==========================================
   系统公告弹窗
   ========================================== */
#announcement-modal {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.6); z-index: 5000;
    display: flex; justify-content: center; align-items: center;
    backdrop-filter: blur(3px); /* 稍微加点背景模糊，更高级 */
}

#announcement-content-box {
    background: #fff; padding: 25px 20px; border-radius: 16px;
    width: 85%; max-width: 400px; position: relative;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    text-align: left;
}

#announcement-text {
    white-space: pre-wrap; /* 支持换行 */
    max-height: 40vh;
    overflow-y: auto;
}
/* ==========================================
   加载小贴士卡片
   ========================================== */
#loading-tip {
    position: fixed;
    top: 150px; /* 稍微偏上，不挡地图中心 */
    left: 50%;
    transform: translateX(-50%) translateY(-20px);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    padding: 12px 20px;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    border: 1px solid rgba(255,255,255,0.8);
    z-index: 4000; /* 保证在地图之上 */
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    opacity: 0; /* 默认透明 */
    pointer-events: none; /* 不阻挡鼠标点击 */
}

/* 显示时的动画状态 */
#loading-tip.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto; /* 显示时可以点击关闭 */
    cursor: pointer;
}

.tip-content {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: #444;
    font-weight: 500;
}

.tip-icon {
    font-size: 18px;
    animation: pulse 1.5s infinite;
}

/* 小灯泡呼吸灯动画 */
@keyframes pulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.8; }
    100% { transform: scale(1); opacity: 1; }
}
/* ==========================================
   随机盲盒弹窗
   ========================================== */
#random-modal {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.6); z-index: 5000;
    display: flex; justify-content: center; align-items: center;
    backdrop-filter: blur(3px);
}

#random-content-box {
    background: #fff; padding: 25px 20px; border-radius: 20px;
    width: 85%; max-width: 350px; position: relative;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    text-align: center;
}

/* 选项卡 */
.random-tabs {
    display: flex;
    background: #f0f0f0;
    border-radius: 10px;
    padding: 4px;
    margin-bottom: 20px;
}
.random-tab {
    flex: 1; border: none; background: transparent; padding: 8px 0;
    border-radius: 8px; cursor: pointer; font-size: 14px; color: #666;
    transition: all 0.2s;
}
.random-tab.active {
    background: white; color: #333; font-weight: bold;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* 结果展示区 */
#random-display-box {
    background: #fff9f5;
    border: 2px dashed #ffccbc;
    border-radius: 12px;
    padding: 20px 10px;
    margin-bottom: 20px;
    min-height: 100px;
    display: flex; flex-direction: column; justify-content: center;
}

#random-result-name {
    font-size: 22px; font-weight: bold; color: #ff5722;
    margin-bottom: 8px; transition: all 0.1s;
}
#random-result-sub {
    font-size: 13px; color: #888;
}

/* 抽奖动画抖动 */
.rolling {
    animation: shake 0.2s infinite;
}
@keyframes shake {
    0% { transform: translateY(0); opacity: 0.8; }
    50% { transform: translateY(-3px); opacity: 1; }
    100% { transform: translateY(0); opacity: 0.8; }
}