/* ============================================================
   保色现代升级外壳  upgrade.css  v20261008
   ------------------------------------------------------------
   保留项（用户明确要求）：
     - 登录页氛围背景 / 卡片 / tab / 按钮 / 输入框 / 链接
     - 弹窗圆角阴影 / 下拉面板 / 状态徽标 / 全局过渡
     - 消息铃铛升级 + 消息中心标准格式（15 节）
     - 登录页背景纹理动态（16 节）
   已恢复原始：登录后主页面布局（body 背景 / 容器 / header /
   搜索区 / 题目列表全部回归 index.min.css 原始排版）
   ============================================================ */

/* ---------- 1. 全局渲染 ---------- */
body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- 2. 登录前氛围背景（原色淡蓝渐变，仅登录页 #loginPage） ---------- */
body:has(#loginPage) {
  background: linear-gradient(160deg, #f0f5ff 0%, #e6f0ff 38%, #fafafa 100%) !important;
  background-attachment: fixed !important;
}

/* ---------- 3. 卡片体系：圆角 + 柔和主色阴影 ---------- */
.login-card,
.notice-card {
  border-radius: 16px !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow:
    0 20px 48px rgba(22, 119, 255, 0.10),
    0 4px 14px rgba(22, 119, 255, 0.05) !important;
  background: rgba(255, 255, 255, 0.94) !important;
}
.login-card h1,
.notice-card h1 {
  letter-spacing: 1px;
}
.login-card .form-subtitle,
.notice-card .form-subtitle {
  color: #888 !important;
}

/* ---------- 4. 登录/注册 tab ---------- */
.login-tab {
  transition: color 0.2s, border-color 0.2s;
  border-bottom: 2px solid transparent;
  color: #666 !important;
}
.login-tab.active {
  color: #1677ff !important;
  border-bottom: 2px solid #1677ff !important;
  font-weight: 600;
}
.login-tab:hover {
  color: #1677ff !important;
}

/* ---------- 5. 输入框：聚焦主色环（登录页） ---------- */
.login-card input,
.form-item input,
.input-wrap input,
.form-group input {
  border-radius: 8px !important;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.login-card input:focus,
.form-item input:focus,
.input-wrap input:focus {
  border-color: #1677ff !important;
  box-shadow: 0 0 0 3px rgba(22, 119, 255, 0.12) !important;
  background: #fff !important;
}

/* ---------- 6. 主按钮：原色渐变 + 阴影（登录页/弹窗） ---------- */
.login-btn,
.confirm-btn,
.send-code-btn {
  background: linear-gradient(135deg, #1677ff 0%, #4096ff 100%) !important;
  border: none !important;
  border-radius: 8px !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(22, 119, 255, 0.28) !important;
  transition: all 0.2s ease !important;
}
.login-btn:hover,
.confirm-btn:hover,
.send-code-btn:hover {
  background: linear-gradient(135deg, #1890ff 0%, #40a9ff 100%) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(22, 119, 255, 0.34) !important;
}
.login-btn:active,
.confirm-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(22, 119, 255, 0.22) !important;
}

/* 次级按钮：描边主色（颜色不变，仅统一圆角） */
.cancel-btn {
  border-radius: 8px !important;
  transition: all 0.2s;
}
.cancel-btn:hover {
  border-color: #1677ff !important;
  color: #1677ff !important;
}

/* ---------- 7. 链接 ---------- */
.link-group a,
.link-group span,
.form-group a,
.other-links a {
  transition: color 0.2s;
}
.link-group a:hover,
.link-group span:hover,
.form-group a:hover {
  color: #1677ff !important;
}

/* ---------- 8a. 铃铛 hover 与管理/退出按钮一致（实心主色 + 白色图标） ---------- */
.header-operate .msg-center-btn {
  border-radius: 20px !important;
  transition: background 0.2s, color 0.2s, transform 0.18s !important;
}
.header-operate .msg-center-btn:hover {
  background: #1677ff !important;
  color: #fff !important;
  border-color: #1677ff !important;
}
.header-operate .msg-center-btn:hover svg {
  fill: #fff !important;
}

/* ---------- 11. 弹窗：圆角 + 阴影 + 遮罩模糊 ---------- */
.admin-modal,
.answer-modal,
.bind-email-modal,
.notice-modal,
.pwd-modal,
.register-modal,
.findpwd-modal,
.feedback-modal,
.faq-modal,
.vip-modal,
.auth-modal,
.redeem-modal,
.msg-modal,
.one-time-modal,
.lucky-modal,
.tonke-modal,
.progress-modal {
  border-radius: 16px !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow:
    0 20px 56px rgba(22, 119, 255, 0.14),
    0 6px 18px rgba(22, 119, 255, 0.06) !important;
}
.admin-modal h3,
.answer-modal h3,
.pwd-modal h3,
.bind-email-modal h3,
.register-modal h3,
.findpwd-modal h3,
.feedback-modal h3,
.vip-modal h3 {
  color: #1a1a1a !important;
  letter-spacing: 0.5px;
}
/* 遮罩：保留原 rgba(0,0,0,.6)，加轻微模糊提升质感 */
.mask {
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

/* ---------- 12. 下拉面板 ---------- */
.msg-center-panel,
.user-dropdown {
  border-radius: 12px !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 12px 32px rgba(22, 119, 255, 0.12) !important;
}

/* ---------- 13. 状态徽标 / 提示 ---------- */
.tonke-status,
.badge,
.tag {
  border-radius: 10px !important;
}

/* ---------- 14. 全局过渡（不改变任何颜色值） ---------- */
button,
input,
select,
a,
.login-card,
.notice-card {
  transition: all 0.22s ease !important;
}

/* ---------- 15. 消息中心：标准 Web 通知中心格式 ---------- */
/* 面板展开动画（下滑 + 淡入，从右上角原点） */
.msg-center-panel.show {
  animation: msgPanelDrop 0.22s ease;
  transform-origin: top right;
}
@keyframes msgPanelDrop {
  from {
    opacity: 0;
    transform: translateY(-10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* 面板打开时铃铛保持激活态（蓝底白图标，与管理/退出 hover 一致） */
.msg-center-wrap:has(.msg-center-panel.show) .msg-center-btn {
  background: #1677ff !important;
  color: #fff !important;
  border-color: #1677ff !important;
}
.msg-center-wrap:has(.msg-center-panel.show) .msg-center-btn svg {
  fill: #fff !important;
}

/* 消息铃铛本体：圆形胶囊 */
.msg-center-btn {
  position: relative !important;
  width: 34px !important;
  height: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #e6f0ff 0%, #f0f5ff 100%) !important;
  border: 1px solid #f0f5ff !important;
  cursor: pointer !important;
  box-shadow: 0 2px 8px rgba(22, 119, 255, 0.14) !important;
  transition: all 0.25s ease !important;
}
.msg-center-btn svg {
  width: 19px !important;
  height: 19px !important;
  fill: none !important;
  stroke: #1677ff !important;
  stroke-width: 1.7 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  transition: stroke 0.2s ease !important;
}
.msg-center-btn:hover {
  background: linear-gradient(135deg, #1677ff 0%, #4096ff 100%) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(22, 119, 255, 0.36) !important;
}
.msg-center-btn:hover svg { stroke: #fff !important; }
.msg-center-btn:active { transform: scale(0.94); }

/* 未读徽标：红色胶囊 */
.msg-center-badge {
  position: absolute !important;
  top: 1px !important;
  right: 1px !important;
  min-width: 16px !important;
  height: 16px !important;
  padding: 0 4px !important;
  border-radius: 9px !important;
  background: #cf1322 !important;
  color: #fff !important;
  font-size: 10px !important;
  line-height: 13px !important;
  font-weight: 600 !important;
  text-align: center !important;
  border: 1.5px solid #fff !important;
  box-shadow: 0 1px 5px rgba(207, 19, 34, 0.45) !important;
}

/* 有未读时铃铛轻摆 */
.msg-center-btn:has(.msg-center-badge:not([style*="display: none"])) {
  animation: bellRing 1.4s ease 1;
}
@keyframes bellRing {
  0%, 100% { transform: rotate(0deg); }
  10% { transform: rotate(16deg); }
  25% { transform: rotate(-12deg); }
  40% { transform: rotate(9deg); }
  55% { transform: rotate(-6deg); }
  70% { transform: rotate(3deg); }
}

/* 消息面板内部细节 */
.msg-center-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  border-bottom: 1px solid #eef1f5 !important;
  padding: 14px 18px !important;
  background: linear-gradient(180deg, #fafafa 0%, #fff 100%) !important;
}
#msgCenterTitle {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #1a1a1a !important;
  letter-spacing: 0.5px;
}
#msgReadAllBtn {
  font-size: 12px !important;
  color: #1677ff !important;
  padding: 3px 12px !important;
  border-radius: 12px !important;
  background: #e6f0ff !important;
  transition: all 0.2s !important;
}
#msgReadAllBtn:hover {
  background: #1677ff !important;
  color: #fff !important;
}
.msg-center-list {
  padding: 6px !important;
  max-height: 380px !important;
  overflow-y: auto !important;
}
.msg-center-list::-webkit-scrollbar {
  width: 6px;
}
.msg-center-list::-webkit-scrollbar-thumb {
  background: #e2e8f0;
  border-radius: 3px;
}
.msg-center-list::-webkit-scrollbar-thumb:hover {
  background: #ccc;
}
.msg-center-item {
  border-radius: 10px !important;
  border-bottom: none !important;
  padding: 11px 14px !important;
  margin-bottom: 2px !important;
  transition: background 0.2s ease !important;
}
.msg-center-item:hover {
  background: #f0f5ff !important;
}
.msg-center-item.unread {
  background: #f2f6ff !important;
}
.msg-center-item.unread .msg-center-title {
  font-weight: 600 !important;
  color: #1a1a1a !important;
}
.msg-center-item.read .msg-center-title {
  color: #666 !important;
}
.msg-center-time {
  font-size: 11px !important;
  color: #999 !important;
  margin-top: 3px !important;
}
.msg-center-dot {
  width: 8px !important;
  height: 8px !important;
  margin-top: 6px !important;
  margin-right: 12px !important;
  box-shadow: 0 0 0 3px rgba(245, 34, 45, 0.12) !important;
}
.msg-center-item.read .msg-center-dot {
  box-shadow: none !important;
}
.msg-center-empty {
  color: #999 !important;
  padding: 48px 0 !important;
  font-size: 13px !important;
}
.msg-center-footer {
  border-top: 1px solid #eef1f5 !important;
  padding: 10px 18px !important;
  background: #fafafa !important;
}
.msg-center-footer a {
  color: #1677ff !important;
}

/* ---------- 16. 登录页背景纹理动态化 ---------- */
/* 原版 CSS 将登录装饰（网格+圆点）默认隐藏，这里强制显示 */
.login-wrap .login-bg-circle,
.login-wrap .login-bg-grid {
  display: block !important;
}
/* 网格线条缓慢流动（40px 无缝循环，颜色不变） */
.login-bg-grid {
  animation: gridFlow 60s linear infinite;
}
@keyframes gridFlow {
  from {
    background-position: 0 0, 0 0;
  }
  to {
    background-position: 40px 40px, 40px 40px;
  }
}

/* 装饰圆点缓慢漂浮（不同节奏/相位，仅位移不换色） */
.login-bg-circle {
  animation: bgCircleFloat 16s ease-in-out infinite;
  will-change: transform;
}
.bg-circle-1 {
  animation-duration: 18s;
  animation-delay: 0s;
}
.bg-circle-2 {
  animation-duration: 14s;
  animation-delay: -4s;
}
.bg-circle-3 {
  animation-duration: 20s;
  animation-delay: -7s;
}
.bg-circle-4 {
  animation-duration: 15s;
  animation-delay: -2s;
}
.bg-circle-5 {
  animation-duration: 22s;
  animation-delay: -10s;
}
.bg-circle-6 {
  animation-duration: 17s;
  animation-delay: -5s;
}
@keyframes bgCircleFloat {
  0%, 100% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(18px, -22px);
  }
  50% {
    transform: translate(-14px, 14px);
  }
  75% {
    transform: translate(12px, 20px);
  }
}

/* 17. 新消息提示 Toast（z.js showNewMsgToast 配套样式） */
.msg-new-toast{position:fixed;top:18px;right:18px;z-index:99999;display:flex;align-items:center;gap:10px;max-width:320px;padding:12px 16px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;box-shadow:0 6px 20px rgba(0,0,0,.12);animation:msgToastIn .35s ease;cursor:pointer}
.msg-new-toast.msg-new-toast-hide{animation:msgToastOut .3s ease forwards}
@keyframes msgToastIn{from{transform:translateX(40px);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes msgToastOut{from{transform:translateX(0);opacity:1}to{transform:translateX(40px);opacity:0}}
.msg-toast-icon{width:38px;height:38px;flex:0 0 38px;display:flex;align-items:center;justify-content:center;font-size:18px;background:#f0f5ff;border-radius:50%}
.msg-toast-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.msg-toast-title{font-size:14px;font-weight:600;color:#1a1a1a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msg-toast-content{font-size:12px;color:#666;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- 16. 状态 tooltip：对齐与数字等宽（不改变颜色） ---------- */
.tonke-status-tooltip {
  min-width: 170px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 12px 32px rgba(22, 119, 255, 0.22);
  background: #1d2129;
  z-index: 999;
}
.tonke-status-tooltip-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 4px 0;
  font-size: 12px;
  line-height: 1.5;
}
.tonke-status-tooltip-label {
  color: #a9b0bb;
  white-space: nowrap;
}
.tonke-status-tooltip-value {
  color: #fff;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---------- 17. 余额不足：红色闪烁 ---------- */
@keyframes balanceWarnFlash {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
.tonke-status.critical .tonke-status-text {
  color: #f5222d !important;
  animation: balanceWarnFlash 1s ease-in-out infinite;
}
#tooltipStatus.low-balance-flash {
  color: #f5222d !important;
  animation: balanceWarnFlash 1s ease-in-out infinite;
}