/* 回忆地图 · 样式 — 底部栏「欧洲 / 中国」切换按钮
 * 位置：最左侧（原「新增」按钮的位置），黑底圆角方形 + 当前区域的地图轮廓
 * 「新增」按钮退为普通图标，排在它后面
 */

/* ── 区域切换按钮：黑底白图标（与之前的新增按钮同款） ── */
html #home-actions #btn-region.action-btn-round {
    order: -2 !important;
    width: 46px !important;
    height: 46px !important;
    background: #1c1c1e !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 14px !important;
    box-shadow:
        0 0 0 0.5px rgba(255, 255, 255, 0.15) inset,
        0 6px 20px rgba(0, 0, 0, 0.30),
        0 2px 6px rgba(0, 0, 0, 0.16) !important;
    margin: 0 8px 0 0 !important;
    margin-bottom: 0 !important;
    z-index: auto !important;
    position: static !important;
    flex-shrink: 0 !important;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.2s ease, background 0.15s !important;
}

html #home-actions #btn-region.action-btn-round:hover {
    background: #2c2c2e !important;
    transform: scale(1.07) translateY(-1px) !important;
}

html #home-actions #btn-region.action-btn-round:active {
    background: #1c1c1e !important;
    transform: scale(0.88) !important;
}

/* 夜间模式：柔和的深灰底 + 浅色轮廓，不抢眼 */
html.dark-mode #home-actions #btn-region.action-btn-round {
    background: #3a3a3c !important;
    color: rgba(242, 242, 247, 0.92) !important;
    box-shadow:
        0 0 0 0.5px rgba(255, 255, 255, 0.08) inset,
        0 4px 14px rgba(0, 0, 0, 0.35) !important;
}

html.dark-mode #home-actions #btn-region.action-btn-round:hover {
    background: #48484a !important;
}

html.dark-mode #home-actions #btn-region.action-btn-round:active {
    background: #3a3a3c !important;
}

/* 夜间模式下全局规则会把图标描边强制成浅色，这里让地图轮廓跟随按钮文字色（浅底深图标） */
html #home-actions #btn-region .region-map,
html.dark-mode #home-actions #btn-region .region-map {
    stroke: currentColor !important;
}

/* 地图轮廓：欧洲模式显示欧洲，中国模式显示中国；切换时轻微翻转 */
#home-actions #btn-region .region-map {
    display: block !important;
    width: 31px !important;
    height: 31px !important;
    transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 中国轮廓是横向的，同样的框里显得偏小，单独放大一点 */
#home-actions #btn-region .region-map-cn {
    width: 35px !important;
    height: 35px !important;
}

#home-actions #btn-region .region-map-cn { display: none !important; }
#home-actions #btn-region.region-cn .region-map-eu { display: none !important; }
#home-actions #btn-region.region-cn .region-map-cn { display: block !important; }

#home-actions #btn-region:active .region-map {
    transform: rotateY(90deg);
}

/* ── 新增按钮：恢复成普通图标（透明底、无阴影），放在区域按钮后面 ── */
html #home-actions #btn-add-main.action-btn-round {
    order: 0 !important;
    width: 46px !important;
    height: 46px !important;
    background: transparent !important;
    color: rgba(28, 28, 30, 0.85) !important;
    border: none !important;
    border-radius: 16px !important;
    box-shadow: none !important;
    margin: 0 !important;
    z-index: auto !important;
    flex-shrink: 0 !important;
}

html #home-actions #btn-add-main.action-btn-round:hover {
    background: rgba(0, 0, 0, 0.055) !important;
    transform: none !important;
    box-shadow: none !important;
}

html #home-actions #btn-add-main.action-btn-round:active {
    background: rgba(0, 0, 0, 0.09) !important;
    transform: scale(0.85) !important;
    box-shadow: none !important;
}

html.dark-mode #home-actions #btn-add-main.action-btn-round {
    background: transparent !important;
    color: #f2f2f7 !important;
}

html.dark-mode #home-actions #btn-add-main.action-btn-round:hover {
    background: rgba(255, 255, 255, 0.08) !important;
}

/* 底部栏现在有 8 个按钮：窄屏手机上整体收紧一点，避免超出屏幕 */
@media (max-width: 768px) {
    html #home-actions #btn-region.action-btn-round {
        width: 44px !important;
        height: 44px !important;
        border-radius: 13px !important;
        margin: 0 6px 0 0 !important;
    }
}

@media (max-width: 420px) {
    #home-actions {
        padding: 9px 8px !important;
    }

    #home-actions .action-btn-round,
    html #home-actions #btn-add-main.action-btn-round {
        width: 40px !important;
        height: 40px !important;
    }

    html #home-actions #btn-region.action-btn-round {
        width: 40px !important;
        height: 40px !important;
        margin: 0 4px 0 0 !important;
    }

    #home-actions #btn-region .region-map {
        width: 28px !important;
        height: 28px !important;
    }

    #home-actions #btn-region .region-map-cn {
        width: 32px !important;
        height: 32px !important;
    }
}