@charset "utf-8";
/*
*[ MBKFW.COM] Copyright (c) 2010-2066
*dz-CSS-qq:290948585
*/

html{font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', "Microsoft Yahei",Tahoma,Verdana,Arial;}
*{-webkit-box-sizing: border-box;box-sizing: border-box;-webkit-text-size-adjust: none;transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;}
body {margin:0;font-size: 16px;color:#333333;background: var(--mbui-bodybg);transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;}
button:hover {transform: translateY(2);transition:all 0.2s ease;}
input,button,select,textarea{outline:none;}
::-webkit-scrollbar {width:8px;height:8px;}
::-webkit-scrollbar-track {background:#F3F4F6;border-radius:4px;}
::-webkit-scrollbar-thumb {background:#D1D5DB;border-radius:4px;transition:var(--transition);}
::-webkit-scrollbar-thumb:hover {background:#4F46E5;}
#morePopup .overflow-y-auto {scrollbar-width:thin;scrollbar-color:#ccc transparent;}
#morePopup .overflow-y-auto::-webkit-scrollbar {width:6px;}
#morePopup .overflow-y-auto::-webkit-scrollbar-thumb {background-color:#ccc;border-radius:3px;}
#morePopup .overflow-x-auto::-webkit-scrollbar {height:4px;}
.scrollbar-hide::-webkit-scrollbar {display:none;}
/* 基础暗色模式样式*/
.dark {background-color:#1a1a2e;color:#e6e6e6;}
.dark .bg-white {background-color:#252a41;}
.dark .bg-gray-100 {background-color:#16213e;}
.dark h4.text-gray-800,.dark h3.text-gray-800,.dark h2.text-gray-800 {color:#e6e6e6;}
.dark .border-gray-200 {border-color:#3a3f58;}
.dark .border-gray-100,.dark .border-blue-100,.dark .border-amber-100{border-color: rgb(78 78 78 / var(--tw-border-opacity, 1));}
.dark .text-blue-800,.dark .text-blue-700{color:#9ca3af;}
.dark .bg-blue-100.text-blue-800{color: rgb(30 64 175 / var(--tw-text-opacity, 1));}
.dark .toolarea{background-color:#16213e;color:#9ca3af;}
/* 主题图标切换样式*/
#themeToggle .fa-sun-o {opacity:0;transform:scale(0);}
#themeToggle .fa-moon-o {opacity:1;transform:scale(1);}
.dark #themeToggle .fa-sun-o {opacity:1;transform:scale(1);}
.dark #themeToggle .fa-moon-o {opacity:0;transform:scale(0);}

.shadow-content {transition:all 0.3s cubic-bezier(0.4,0,0.2,1);}
.animate-spin-slow {animation: spin 2s linear infinite;}
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
/**/
@keyframes slideUp {
    from {transform:translateY(100%);}
to {transform:translateY(0);}
}
@keyframes slideDown {
    from {transform:translateY(0);}
to {transform:translateY(100%);}
}
#notification.show {top: 4px;opacity: 1;pointer-events: auto;animation:slideUp 0.3s forwards,slideDown 0.3s forwards 2.7s;}
/**/
#like {cursor:pointer;transition:all 0.3s ease;}
#like:hover {background-color:#e9d5ff;}
#like.loading {opacity:0.7;cursor:wait;}
#like i.fa-heart {color:#d946ef;}

/* 登录提示窗样式 - 左侧显示*/
.login-tooltip {position:absolute;right: 0;top:53px;transform:translateY(-0%);background:white;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,0.12);padding:20px;width:280px;z-index:10;border:1px solid #f0f0f0;box-shadow:0 10px 30px rgba(0,0,0,0.12);padding:20px;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);}
@keyframes fadeIn {from {opacity:0;visibility:hidden;transform:translateY(-50%) translateX(-5px);}to {opacity:1;visibility:visible;transform:translateY(-50%) translateX(-15px);}}
.login-tooltip .tooltip-arrow {position:absolute;right:58px;top:-15px;border-width:8px;border-style:solid;border-color:#fdfdfd transparent transparent transparent;transform:rotate(180deg);}
.login-tooltip.active {opacity:0;right: 0;transform: translateY(-150%);}
/* 提示窗内容*/
.tooltip-content {display:flex;flex-direction:column;gap:12px;}
/* 提示窗图标*/
.tooltip-icon {align-self:center;width:40px;height:40px;border-radius:50%;background:#f0f7ff;display:flex;align-items:center;justify-content:center;color:#165DFF;font-size:20px;}
/* 提示窗文本*/
.tooltip-text {text-align:center;}
.tooltip-text h4 {margin:0 0 5px 0;font-size:16px;color:#1D2129;font-weight:600;}
.tooltip-text p {margin:0;font-size:13px;color:#4E5969;line-height:1.5;}
/* 提示窗按钮*/
.tooltip-btn {background:#165DFF;color:white;border:none;border-radius:6px;padding:8px 16px;font-size:14px;font-weight:500;cursor:pointer;transition:all 0.2s ease;align-self:center;margin-top:5px;}
.tooltip-btn:hover {background:#0E42D2;transform:translateY(-1px);}
.tooltip-btn:active {transform:translateY(1px);}
/* 当用户已登录或点击头像后隐藏提示*/
/* 浮动容器基础样式*/
.member-float-container {position:fixed;right:25px;bottom:8%;transform:translateY(-50%);z-index: 20;display:flex;flex-direction:column;align-items:center;gap:12px;}
@media (min-width: 768px){
    .member-float-container.md\:hidden{display: none}
}
/* 主触发按钮*/
.member-float-trigger {width: 38px;height: 38px;border-radius:50%;box-shadow:0 6px 16px rgba(64,150,255,0.25);background:linear-gradient(135deg,#165DFF 0%,#6aa8ff 100%);transition:all 0.3s cubic-bezier(0.4,0,0.2,1);display:flex;align-items:center;justify-content:center;position:relative;border:3px solid white;}
/* 头像样式*/
.avatar-wrapper {position:relative;width: 35px;height: 35px;border-radius:50%;border:2px solid rgba(255,255,255,0.8);transition: transform 0.5s ease;border-radius: 50%;cursor: pointer;}
.avatar-wrapper:hover {transform:scale(1.1) translateY(0%);box-shadow:0 8px 24px rgba(64,150,255,0.35);}
.avatar-img {width:90%;height:90%;object-fit:cover;transition:transform 0.5s ease;border-radius:50%;margin-top:5%;margin-left:5%;overflow: hidden;}
.member-float-trigger:hover .avatar-img {transform:scale(1.0);}
/* 状态指示器*/
.online-indicator {position:absolute;bottom:2px;right:2px;width: 8px;height: 8px;border-radius:50%;border:2px solid white;transition:all 0.3s ease;}
.online-indicator.online {background-color:#4cd964;box-shadow:0 0 0 2px rgba(76,217,100,0.3);}
.online-indicator.offline {background-color:#9e9e9e;}
/* 呼吸动画效果*/
.pulse-animation {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background-color:rgba(64,150,255,0.2);animation:pulses 2s infinite;z-index:-1;}
@keyframes pulses {
    0% {transform:translate(-50%,-50%) scale(1);opacity:1;}
    100% {transform:translate(-50%,-50%) scale(1.5);opacity:0;}
}
/* 快捷操作按钮组*/
.quick-actions {display:flex;flex-direction:column;gap:10px;align-items:center;}
.action-btn {width:44px;height:44px;border-radius:50%;background-color:white;border:none;box-shadow:0 3px 10px rgba(0,0,0,0.1);color:#666;font-size:18px;cursor:pointer;transition:all 0.25s ease;position:relative;display:flex;align-items:center;justify-content:center;}
.action-btn:hover {background-color:#f0f7ff;color:#165DFF;transform:translateY(-3px);box-shadow:0 5px 15px rgba(64,150,255,0.2);}
/* 消息徽章*/
.badge {position:absolute;top:-3px;right:-3px;background-color:#ff4d4f;color:white;font-size:12px;width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 5px rgba(255,77,79,0.3);}
/* 弹窗样式*/
.member-popup {position:absolute;right: 0;top: 57px;transform: translateY(-150%);width:350px;background-color:white;border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,0.12);padding:20px;opacity:0;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);}
.member-popup.active {opacity:1;right: 0;transform: translateY(-0%);}
.popup-arrow {position:absolute;right: 9px;top: -10px;transform: translateY(-0%);width:0;height:0;border-left: 10px solid transparent;border-right: 10px solid transparent;border-bottom: 10px solid white;box-shadow: 0px -2px 9px rgba(0, 0, 0, 0.05);}
.member-popup.nouseid .popup-arrow{}
.popup-header {display:flex;justify-content:space-between;align-items:center;padding-bottom: 10px;}
.popup-header h3 {margin:0;font-size:20px;color:#333;font-weight:600;display:flex;align-items:center;}
.popup-header h3::before {}
.close-btn {background:none;border:none;font-size:22px;cursor:pointer;color:#999;transition:all 0.2s;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;}
.close-btn:hover {color:#ff4d4f;background-color:#fff5f5;}
/* 统计数据网格*/
.stats-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin:20px 0;padding:15px;background-color:#fafafa;border-radius:10px;}
.stat-item {text-align:center;padding:10px 5px;transition:transform 0.2s ease;}
.stat-item:hover {transform:translateY(-3px);}
.stat-value {/* font-size: 22px; *//* font-weight: 700; *//* margin-bottom: 5px; */opacity: 1 !important;position: relative;z-index: 1;}
.stat-label {font-size:13px;color:#666;}
/* 弹窗内容样式*/
.popup-body {padding:5px 0;}
.user-info-item {display:flex;align-items:center;margin-bottom:14px;font-size:15px;}
.user-info-item .label {width:90px;color:#666;font-weight:500;}
.user-info-item .value {color:#333;}
/* 底部按钮*/
.popup-footer {margin-top:15px;padding-top:15px;border-top:1px solid #f0f0f0;display:flex;gap:12px;}
.member-btn {flex:1;padding:10px 0;border-radius:8px;border:none;font-size:15px;font-weight:500;cursor:pointer;transition:all 0.25s ease;text-align:center;text-decoration:none;position:relative;overflow:hidden;}
.member-btn::after {content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent);transition:all 0.4s ease;}
.member-btn:hover::after {left:100%;}
.member-btn.primary {background-color:#165DFF;color:white;}
.member-btn.primary:hover {background-color:#2984ff;box-shadow:0 4px 12px rgba(64,150,255,0.3);}
.member-btn.secondary {background-color:#f5f5f5;color:#333;}
.member-btn.secondary:hover {background-color:#e8e8e8;box-shadow:0 4px 12px rgba(0,0,0,0.08);}
/* 链接样式*/
.member-links {display:flex;flex-wrap:wrap;gap:10px;margin-top:15px;}
.member-link {color:#165DFF;text-decoration:none;font-size:14px;padding:5px 10px;border-radius:6px;transition:all 0.2s;display:inline-flex;align-items:center;}
.member-link i {margin-right:5px;font-size:12px;}
.member-link:hover {background-color:#f0f7ff;color:#2984ff;transform:translateY(-1px);}
/* 提示框*/
.tooltip {position:absolute;right:50px;background-color:#333;color:white;padding:5px 10px;border-radius:4px;font-size:12px;white-space:nowrap;opacity:0;pointer-events:none;transition:all 0.2s ease;box-shadow:0 2px 8px rgba(0,0,0,0.2);}
.tooltip.show {opacity:1;right:45px;}
/* 响应式调整*/
@media (max-width:768px) {
    .member-float-container {right:15px;}
    .member-popup {width:300px;}
}
/* 退出登录按钮美化*/
/* 弹窗遮罩层*/
.logout-modal-overlay {position:fixed;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,0.5);backdrop-filter:blur(2px);z-index: 100;opacity:0;transition:opacity 0.3s ease;}
/* 弹窗容器*/
.logout-modal {position:fixed;top:0;left:0;right:0;bottom:0;z-index: 101;display:flex;align-items:center;justify-content:center;padding:20px;visibility:hidden;opacity:0;transition:all 0.3s ease;}
.logout-modal.active {visibility:visible;opacity:1;}
.logout-modal.active .logout-modal-overlay {opacity:1;}
/* 弹窗内容*/
.logout-modal-content {background-color:white;width:100%;max-width:400px;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,0.15);overflow:hidden;transform:translateY(20px);transition:transform 0.3s ease;z-index: 100;}
.logout-modal.active .logout-modal-content {transform:translateY(0);}
/* 弹窗头部*/
.modal-header {padding:16px 20px;border-bottom:1px solid #f0f0f0;display:flex;justify-content:space-between;align-items:center;}
.modal-header h3 {margin:0;font-size:18px;color:#333;font-weight:600;}
/* 关闭按钮*/
.modal-close {background:none;border:none;font-size:22px;color:#999;cursor:pointer;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all 0.2s;}
.modal-close:hover {color:#ff4d4f;background-color:#fff5f5;}
/* 弹窗主体*/
.modal-body {padding:25px 20px;text-align:center;}
.modal-icon {width:60px;height:60px;margin:0 auto 15px;border-radius:50%;background-color:#f0f7ff;display:flex;align-items:center;justify-content:center;font-size:28px;color:#165DFF;}
.modal-body p {margin:0 0 8px;font-size:16px;color:#333;}
/* 弹窗底部按钮*/
.modal-footer {padding:15px 20px;border-top:1px solid #f0f0f0;display:flex;gap:12px;}
.modal-btn {flex:1;padding:12px 0;border-radius:8px;border:none;font-size:15px;font-weight:500;cursor:pointer;transition:all 0.25s ease;}
/* 取消按钮*/
.modal-btn.cancel {background-color:#f5f5f5;color:#333;}
.modal-btn.cancel:hover {background-color:#e8e8e8;transform:translateY(-2px);}
/* 确认按钮*/
.modal-btn.confirm {background-color:#ff4d4f;color:white;}
.modal-btn.confirm:hover {background-color:#f5222d;transform:translateY(-2px);}
/* 退出登录按钮样式*/
.member-btn.secondary.logout-btn {position:relative;overflow:hidden;transition:all 0.3s ease;background-color:#f8f9fa;color:#333;border:1px solid #e9ecef;}
.member-btn.secondary.logout-btn:hover {background-color:#fff5f5;color:#ff4d4f;border-color:#ffe3e3;}
.member-btn.secondary.logout-btn:active {background-color:#ffe3e3;}

#shareModal {backdrop-filter: blur(2px);}
#shareModal .scale-95 {transform: scale(0.95);}
#shareModal .scale-100 {transform: scale(1);}
#shareModal img { box-shadow: 0 4px 12px rgba(0,0,0,0.05);}
#shareModal .action-btn {cursor: pointer;}
#shareModal .gradient-bg{top: 87px;left: 87px; border-radius: 6px;}
.ui-toast {height:48px;line-height:48px;overflow:hidden;display:inline-block;padding:0 16px;background:#000000;opacity:0.8;filter:alpha(opacity=80);color:#FFFFFF;border-radius:6px;position:fixed;z-index:9999;top:40%;left:48%;font-size:16px;}