/* 按钮样式 */
.navbar-nav .nav-item .chb-btn { margin-left: 10px; }
.chb-btn { display: inline-flex !important; align-items: center; justify-content: center; gap: 6px; padding: 8px 16px !important; border-radius: 8px !important; font-size: 14px; font-weight: bold; line-height: 1; text-decoration: none !important; transition: all 0.2s ease-in-out; border: 2px solid transparent; white-space: nowrap; }
.chb-login-btn { background-color: #4a55ff !important; color: #ffffff !important; } .chb-login-btn:hover { background-color: #3b44cc !important; transform: translateY(-2px); }
.chb-register-btn { background-color: transparent !important; color: #4a55ff !important; border-color: #4a55ff !important; } .chb-register-btn:hover { background-color: #4a55ff !important; color: #ffffff !important; transform: translateY(-2px); }
.chb-logout-btn { background-color: transparent !important; color: #d9534f !important; border-color: #d9534f !important; } .chb-logout-btn:hover { background-color: #d9534f !important; color: #ffffff !important; }

/* 登出确认弹窗的玻璃拟态样式 V1.0 (高级版) */
.als-swal-popup {
    background: rgba(30, 30, 30, 0.1) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important; /* 邊框更明顯 */
    border-radius: 16px !important; /* 圓角更柔和 */
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4) !important; /* 陰影更深邃 */
}
.als-swal-popup .swal2-title { color: #fff !important; font-size: 1.2em !important; font-weight: 500 !important; }
.als-swal-popup.als-swal-toast { min-width: 320px !important; padding: 20px !important; }
.als-swal-popup.als-swal-toast .swal2-title { font-size: 1.1em !important; }

/* 新增：為彈窗的按鈕容器增加間距 */
.als-swal-popup .swal2-actions {
    gap: 15px !important;
}

/* 升級版按鈕樣式 */
.als-swal-confirm, .als-swal-cancel {
    border-radius: 8px !important;
    padding: 10px 24px !important;
    font-weight: 500 !important;
    border: none !important;
    transition: all 0.25s ease-out !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.als-swal-confirm {
    background: linear-gradient(45deg, #4a55ff, #6a11cb) !important;
    color: #fff !important;
}
.als-swal-cancel {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
}

/* 懸停動態效果 */
.als-swal-confirm:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 7px 20px rgba(0, 0, 0, 0.25);
    filter: brightness(1.1);
}
.als-swal-cancel:hover {
    transform: translateY(-3px) scale(1.05);
    background: rgba(255, 255, 255, 0.25) !important;
}


/* 日夜模式自适应样式 */
.als-swal-popup.als-light-mode {
    background: rgba(255, 255, 255, 0.5) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
}
.als-swal-popup.als-light-mode .swal2-title { color: #333 !important; }
.als-swal-popup.als-light-mode .swal2-icon.swal2-warning { color: #856404 !important; border-color: #ffeeba !important; }
.als-swal-popup.als-light-mode .als-swal-cancel {
    background: rgba(0,0,0,0.5) !important;
    color: #fff !important;
    border: none !important;
}
.als-swal-popup.als-light-mode .als-swal-cancel:hover {
    background: rgba(0,0,0,0.6) !important;
}

.nav-item:has(.chb-login-btn) {
    margin-top: 6px;
    margin-left: 10px;
}

.nav-item:has(.chb-register-btn) {
    margin-top: 6px; /* 使用 margin-left 来创建水平间距 */
    margin-left: 10px;
}