/* ===== forum-plus 增强层 UI（通知/签到/成就 + 全站细节美化） ===== */

/* ---- 增强层根 ---- */
#fp-root { position: fixed; inset: 0; pointer-events: none; z-index: 9990; font-family: inherit; }
#fp-root * { box-sizing: border-box; pointer-events: auto; }

/* 悬浮铃铛 */
#fp-fab {
  position: fixed; right: 18px; bottom: 84px;
  width: 52px; height: 52px; border-radius: 50%;
  background: #33539E; color: #FDFCFA;
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  box-shadow: 0 6px 18px rgba(42, 68, 128, .35);
  transition: transform .18s ease, box-shadow .18s ease;
}
#fp-fab:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(42, 68, 128, .42); }
#fp-fab:active { transform: scale(.95); }
#fp-badge {
  position: absolute; top: -4px; right: -4px;
  min-width: 20px; height: 20px; padding: 0 5px;
  background: #B91C1C; color: #fff; border-radius: 10px;
  font-size: 12px; font-weight: 700; line-height: 20px;
  border: 2px solid #FCFBF7; display: none;
}
#fp-fab.has-unread #fp-badge { display: block; animation: fp-pop .3s ease; }
@keyframes fp-pop { 0% { transform: scale(0); } 70% { transform: scale(1.25); } 100% { transform: scale(1); } }

/* 面板 */
#fp-panel {
  position: fixed; right: 18px; bottom: 148px;
  width: 372px; max-width: calc(100vw - 24px);
  max-height: min(560px, calc(100vh - 180px));
  background: #FFFFFF; border: 1px solid #DDD9CC; border-radius: 16px;
  box-shadow: 0 12px 40px rgba(31, 39, 51, .16);
  display: none; flex-direction: column; overflow: hidden;
  animation: fp-slideup .22s ease;
}
#fp-panel.open { display: flex; }
@keyframes fp-slideup { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

#fp-head {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px 0 14px;
}
#fp-head .fp-online { margin-left: auto; font-size: 12px; color: #566074; display: flex; align-items: center; gap: 5px; }
.fp-dot { width: 8px; height: 8px; border-radius: 50%; background: #2E9E5B; animation: fp-blink 2s infinite; }
@keyframes fp-blink { 0%,100% { opacity: 1; } 50% { opacity: .4; } }

#fp-tabs { display: flex; gap: 4px; padding: 10px 14px 0 14px; border-bottom: 1px solid #EFEBE0; }
#fp-tabs button {
  flex: 1; padding: 9px 4px 10px; background: none; border: none; cursor: pointer;
  font-size: 13px; color: #566074; border-bottom: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease; font-family: inherit;
}
#fp-tabs button.on { color: #2A4480; border-bottom-color: #33539E; font-weight: 700; }

#fp-body { overflow-y: auto; padding: 10px 14px 14px; flex: 1; }
#fp-body::-webkit-scrollbar { width: 8px; }
#fp-body::-webkit-scrollbar-thumb { background: #DDD9CC; border-radius: 6px; }

/* 通知项 */
.fp-noti {
  display: flex; gap: 10px; padding: 10px 10px; border-radius: 12px; cursor: pointer;
  transition: background-color .15s ease; align-items: flex-start;
}
.fp-noti:hover { background: #F6F8FD; }
.fp-noti.unread { background: #EEF2FB; }
.fp-noti.unread:hover { background: #E6ECF9; }
.fp-noti .fp-ico {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center; font-size: 16px;
  background: #E9EDF8;
}
.fp-noti .fp-txt { flex: 1; min-width: 0; }
.fp-noti .fp-line1 { font-size: 13px; color: #1F2733; line-height: 1.45; }
.fp-noti .fp-line1 b { color: #2A4480; }
.fp-noti .fp-time { font-size: 11px; color: #8B8574; margin-top: 2px; }
.fp-noti .fp-dotnew { width: 8px; height: 8px; background: #B91C1C; border-radius: 50%; flex: none; margin-top: 6px; }

/* 签到卡 */
.fp-checkin { text-align: center; padding: 8px 4px 4px; }
.fp-flame { font-size: 44px; line-height: 1; }
.fp-streak-num { font-size: 30px; font-weight: 800; color: #2A4480; margin: 4px 0 0; }
.fp-streak-label { font-size: 12px; color: #566074; margin-bottom: 14px; }
#fp-checkin-btn {
  padding: 12px 38px; border: none; border-radius: 26px; cursor: pointer;
  background: linear-gradient(135deg, #33539E, #2A4480); color: #FDFCFA;
  font-size: 15px; font-weight: 700; font-family: inherit;
  box-shadow: 0 6px 16px rgba(42, 68, 128, .3);
  transition: transform .15s ease, filter .15s ease;
}
#fp-checkin-btn:hover { transform: translateY(-2px); }
#fp-checkin-btn:disabled { filter: grayscale(.6); opacity: .75; cursor: default; transform: none; }
.fp-days { display: flex; gap: 6px; justify-content: center; margin-top: 16px; }
.fp-day { width: 30px; height: 34px; border-radius: 8px; background: #F6F5F0; border: 1px solid #EFEBE0; font-size: 10px; color: #8B8574; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
.fp-day.on { background: #E9EDF8; border-color: #C9D6EF; color: #2A4480; }
.fp-day em { font-style: normal; font-size: 14px; }

/* 徽章格 */
.fp-badges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.fp-badge {
  border: 1px solid #EFEBE0; background: #FFFFFF; border-radius: 12px;
  padding: 10px 6px; text-align: center; transition: transform .15s ease, box-shadow .15s ease;
}
.fp-badge:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(31,39,51,.08); }
.fp-badge .fp-bemoji { font-size: 24px; }
.fp-badge .fp-bname { font-size: 11.5px; color: #1F2733; font-weight: 700; margin-top: 3px; }
.fp-badge .fp-bdesc { font-size: 10px; color: #8B8574; margin-top: 2px; line-height: 1.35; }
.fp-badge.locked { opacity: .42; filter: grayscale(.9); }
.fp-badge.earned { border-color: #C9D6EF; background: #F8FAFE; }

.fp-empty { text-align: center; color: #8B8574; font-size: 13px; padding: 30px 0; }
#fp-readall {
  width: 100%; margin-top: 8px; padding: 9px; border: 1px solid #DDD9CC; background: #fff;
  border-radius: 10px; color: #2A4480; cursor: pointer; font-size: 12.5px; font-family: inherit;
  transition: background-color .15s ease;
}
#fp-readall:hover { background: #F6F8FD; }

/* toast */
#fp-toast {
  position: fixed; top: 18px; left: 50%; transform: translateX(-50%) translateY(-80px);
  background: #1F2733; color: #FDFCFA; padding: 10px 20px; border-radius: 12px;
  font-size: 13.5px; box-shadow: 0 8px 24px rgba(31,39,51,.25);
  transition: transform .3s ease; z-index: 9995; max-width: 88vw; text-align: center;
}
#fp-toast.show { transform: translateX(-50%) translateY(0); }

/* ---- 论坛 SPA 细节美化（低强度，不改布局） ---- */
#app button { transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .12s ease; }
#app button:active { transform: scale(.98); }
#app a { transition: color .15s ease; }
#app img { border-radius: 10px; }
#app input:focus, #app textarea:focus { outline: 2px solid rgba(51,83,158,.35); outline-offset: 1px; }
#app ::selection { background: rgba(51,83,158,.16); }
#app { -webkit-font-smoothing: antialiased; }

@media (max-width: 640px) {
  #fp-fab { right: 14px; bottom: 76px; width: 48px; height: 48px; font-size: 20px; }
  #fp-panel { right: 12px; left: 12px; width: auto; bottom: 136px; }
}