/**
 * 用户前端 Soft UI 壳 — html.jiyu-stg-frontend
 * 由 _middleware.js / deploy-env.js 在正式站与内测站注入（管理后台除外）。
 */
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap");

html.jiyu-stg-frontend {
  --stg-fe-brand: #ec4899;
  --stg-fe-brand-2: #f97316;
  --stg-fe-bg: #f7f3ec;
  --stg-fe-surface: #ffffff;
  --stg-fe-ink: #172033;
  --stg-fe-muted: #64748b;
  --stg-fe-border: rgba(23, 32, 51, 0.12);
  --stg-fe-radius: 14px;
  --stg-fe-radius-sm: 10px;
  --stg-fe-shadow-soft: 0 1px 2px rgba(23, 32, 51, 0.06), 0 10px 28px rgba(84, 54, 25, 0.08);
  --stg-fe-shadow: 0 2px 4px rgba(23, 32, 51, 0.06), 0 18px 40px rgba(84, 54, 25, 0.12);
  --stg-fe-motion: 200ms ease-out;
  --stg-fe-font: "Plus Jakarta Sans", "PingFang SC", "Noto Sans SC", sans-serif;
  --brand: var(--stg-fe-brand);
  --brand-2: var(--stg-fe-brand-2);
  --bg: var(--stg-fe-bg);
  --ink: var(--stg-fe-ink);
  font-family: var(--stg-fe-font);
}

html.jiyu-stg-frontend body {
  font-family: var(--stg-fe-font);
  color: var(--stg-fe-ink);
  background:
    radial-gradient(circle at 10% 0%, rgba(236, 72, 153, 0.14), transparent 36%),
    radial-gradient(circle at 92% 4%, rgba(249, 115, 22, 0.12), transparent 34%),
    linear-gradient(180deg, #fff9f3 0%, var(--stg-fe-bg) 48%, #faf8f4 100%);
  -webkit-font-smoothing: antialiased;
}

/* —— 侧栏 —— */
html.jiyu-stg-frontend .poe-sidebar {
  background: rgba(255, 255, 255, 0.88) !important;
  border-right: 1px solid var(--stg-fe-border) !important;
  box-shadow: 6px 0 28px rgba(84, 54, 25, 0.06) !important;
  backdrop-filter: blur(18px) saturate(1.05) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.05) !important;
  padding: 16px 12px 12px !important;
}

html.jiyu-stg-frontend .poe-brand {
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}

html.jiyu-stg-frontend .poe-brand__mark {
  border-radius: var(--stg-fe-radius-sm) !important;
  box-shadow: 0 8px 18px rgba(236, 72, 153, 0.28) !important;
}

html.jiyu-stg-frontend .poe-thread-row {
  min-height: 44px !important;
  border-radius: var(--stg-fe-radius-sm) !important;
  transition: background var(--stg-fe-motion), transform var(--stg-fe-motion) !important;
  cursor: pointer !important;
}

html.jiyu-stg-frontend .poe-thread-row:hover {
  background: rgba(236, 72, 153, 0.06) !important;
}

html.jiyu-stg-frontend .poe-thread-row.is-active {
  background: linear-gradient(90deg, rgba(236, 72, 153, 0.14), rgba(249, 115, 22, 0.06)) !important;
  box-shadow: inset 3px 0 0 var(--stg-fe-brand) !important;
}

html.jiyu-stg-frontend .poe-thread-row:focus-visible,
html.jiyu-stg-frontend .poe-sidebar__links a:focus-visible,
html.jiyu-stg-frontend .poe-composer__tool:focus-visible,
html.jiyu-stg-frontend .poe-composer__send:focus-visible,
html.jiyu-stg-frontend .btn:focus-visible,
html.jiyu-stg-frontend .recharge-card:focus-visible,
html.jiyu-stg-frontend .poe-account-subnav__btn:focus-visible {
  outline: 2px solid rgba(236, 72, 153, 0.55) !important;
  outline-offset: 2px !important;
}

html.jiyu-stg-frontend .poe-sidebar__links a,
html.jiyu-stg-frontend .poe-sidebar__links .poe-sidebar__link {
  min-height: 40px !important;
  border-radius: var(--stg-fe-radius-sm) !important;
  transition: background var(--stg-fe-motion), color var(--stg-fe-motion) !important;
  cursor: pointer !important;
}

html.jiyu-stg-frontend .poe-sidebar__links a.is-active {
  background: rgba(236, 72, 153, 0.1) !important;
  color: var(--stg-fe-brand) !important;
  font-weight: 650 !important;
}

html.jiyu-stg-frontend .poe-sidebar__auth .preview-nav-auth__btn--primary,
html.jiyu-stg-frontend .btn-primary,
html.jiyu-stg-frontend .member-simple-order-btn.btn-primary {
  background: linear-gradient(135deg, var(--stg-fe-brand), var(--stg-fe-brand-2)) !important;
  border: 0 !important;
  border-radius: var(--stg-fe-radius-sm) !important;
  box-shadow: 0 10px 24px rgba(236, 72, 153, 0.28) !important;
  color: #fff !important;
  transition: filter var(--stg-fe-motion), transform var(--stg-fe-motion), box-shadow var(--stg-fe-motion) !important;
  cursor: pointer !important;
}

html.jiyu-stg-frontend .poe-sidebar__auth .preview-nav-auth__btn--primary:hover,
html.jiyu-stg-frontend .btn-primary:hover:not(:disabled),
html.jiyu-stg-frontend .member-simple-order-btn.btn-primary:hover:not(:disabled) {
  filter: brightness(1.05) !important;
  box-shadow: 0 14px 28px rgba(236, 72, 153, 0.34) !important;
}

html.jiyu-stg-frontend .poe-sidebar__auth .preview-nav-auth__btn--outline {
  border-radius: var(--stg-fe-radius-sm) !important;
  border-color: var(--stg-fe-border) !important;
  background: rgba(255, 255, 255, 0.95) !important;
  box-shadow: var(--stg-fe-shadow-soft) !important;
}

/* 夜间：覆盖上方白底 !important，避免浅色字看不清 */
html.theme-night.jiyu-stg-frontend .poe-sidebar__auth .preview-nav-auth__btn--outline {
  background: #2a3140 !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  color: #e8edf3 !important;
  box-shadow: none !important;
}

html.theme-night.jiyu-stg-frontend .poe-sidebar__auth .preview-nav-auth__btn--outline:hover {
  background: #323a4c !important;
  border-color: rgba(236, 72, 153, 0.35) !important;
  color: #f9a8d4 !important;
}

/* —— 顶栏 / 主区 —— */
html.jiyu-stg-frontend .preview-nav,
html.jiyu-stg-frontend .poe-topbar {
  background: rgba(255, 249, 243, 0.9) !important;
  border-bottom-color: var(--stg-fe-border) !important;
  backdrop-filter: blur(18px) saturate(1.06) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.06) !important;
  box-shadow: 0 8px 24px rgba(84, 54, 25, 0.05) !important;
}

html.jiyu-stg-frontend .poe-app-shell,
html.jiyu-stg-frontend .preview-shell {
  position: relative;
  z-index: 1;
}

/* —— Composer —— */
html.jiyu-stg-frontend .poe-composer__box {
  border-radius: var(--stg-fe-radius) !important;
  border: 1px solid var(--stg-fe-border) !important;
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: var(--stg-fe-shadow-soft) !important;
  transition: box-shadow var(--stg-fe-motion), border-color var(--stg-fe-motion) !important;
}

html.jiyu-stg-frontend .poe-composer__box:focus-within {
  border-color: rgba(236, 72, 153, 0.45) !important;
  box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.12), var(--stg-fe-shadow-soft) !important;
}

html.jiyu-stg-frontend .poe-composer__tool {
  min-width: 40px !important;
  min-height: 40px !important;
  border-radius: 10px !important;
  transition: background var(--stg-fe-motion), color var(--stg-fe-motion) !important;
  cursor: pointer !important;
}

html.jiyu-stg-frontend .poe-composer__tool:hover {
  background: rgba(236, 72, 153, 0.08) !important;
  color: var(--stg-fe-brand) !important;
}

html.jiyu-stg-frontend .poe-composer__send {
  min-width: 44px !important;
  min-height: 44px !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, var(--stg-fe-brand), var(--stg-fe-brand-2)) !important;
  box-shadow: 0 8px 20px rgba(236, 72, 153, 0.3) !important;
  transition: filter var(--stg-fe-motion), transform var(--stg-fe-motion), opacity var(--stg-fe-motion) !important;
  cursor: pointer !important;
}

html.jiyu-stg-frontend .poe-composer__send:not(:disabled):hover {
  filter: brightness(1.06) !important;
}

html.jiyu-stg-frontend .poe-composer__send:disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
}

html.jiyu-stg-frontend .poe-composer__model {
  border-radius: 999px !important;
  border: 1px solid var(--stg-fe-border) !important;
  background: rgba(255, 255, 255, 0.95) !important;
  transition: border-color var(--stg-fe-motion), background var(--stg-fe-motion) !important;
  cursor: pointer !important;
}

html.jiyu-stg-frontend .poe-composer__model:hover {
  border-color: rgba(236, 72, 153, 0.4) !important;
}

html.jiyu-stg-frontend .poe-composer__model-dot {
  background: linear-gradient(135deg, var(--stg-fe-brand), var(--stg-fe-brand-2)) !important;
}

/* —— 面板头 / 会员 / 账户 —— */
html.jiyu-stg-frontend .poe-panel-head h1,
html.jiyu-stg-frontend .poe-account-head-title {
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  color: var(--stg-fe-ink) !important;
}

html.jiyu-stg-frontend .poe-member-panel,
html.jiyu-stg-frontend .poe-account-panel {
  background: rgba(255, 255, 255, 0.72) !important;
}

html.jiyu-stg-frontend .poe-member-inner,
html.jiyu-stg-frontend .poe-account-inner {
  border-radius: var(--stg-fe-radius) !important;
}

html.jiyu-stg-frontend .poe-account-subnav {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  padding: 4px !important;
  margin-bottom: 14px !important;
}

html.jiyu-stg-frontend .poe-account-subnav__btn {
  min-height: 40px !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  border: 1px solid var(--stg-fe-border) !important;
  background: rgba(255, 255, 255, 0.9) !important;
  color: var(--stg-fe-muted) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  cursor: pointer !important;
  transition: background var(--stg-fe-motion), color var(--stg-fe-motion), border-color var(--stg-fe-motion), box-shadow var(--stg-fe-motion) !important;
}

html.jiyu-stg-frontend .poe-account-subnav__btn:hover {
  color: var(--stg-fe-ink) !important;
  border-color: rgba(236, 72, 153, 0.35) !important;
}

html.jiyu-stg-frontend .poe-account-subnav__btn.is-active {
  color: #fff !important;
  border-color: transparent !important;
  background: linear-gradient(135deg, var(--stg-fe-brand), var(--stg-fe-brand-2)) !important;
  box-shadow: 0 8px 18px rgba(236, 72, 153, 0.25) !important;
}

html.jiyu-stg-frontend .poe-account-frame {
  border-radius: var(--stg-fe-radius) !important;
  border: 1px solid var(--stg-fe-border) !important;
  box-shadow: var(--stg-fe-shadow-soft) !important;
  background: var(--stg-fe-surface) !important;
}

/* 充值卡：覆盖内联紫，统一粉橙 */
html.jiyu-stg-frontend .recharge-card {
  border-radius: var(--stg-fe-radius) !important;
  border: 1.5px solid var(--stg-fe-border) !important;
  background: rgba(255, 255, 255, 0.92) !important;
  box-shadow: var(--stg-fe-shadow-soft) !important;
  transition: border-color var(--stg-fe-motion), background var(--stg-fe-motion), transform var(--stg-fe-motion), box-shadow var(--stg-fe-motion) !important;
  cursor: pointer !important;
}

html.jiyu-stg-frontend .recharge-card:hover {
  border-color: rgba(236, 72, 153, 0.45) !important;
  transform: translateY(-1px) !important;
}

html.jiyu-stg-frontend .recharge-card.is-active {
  border-color: var(--stg-fe-brand) !important;
  background: linear-gradient(145deg, rgba(236, 72, 153, 0.1), rgba(249, 115, 22, 0.08)) !important;
  box-shadow: 0 10px 24px rgba(236, 72, 153, 0.16) !important;
}

html.jiyu-stg-frontend .member-balance-bar {
  border-radius: var(--stg-fe-radius) !important;
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.1), rgba(249, 115, 22, 0.08)) !important;
  border: 1px solid rgba(236, 72, 153, 0.22) !important;
  box-shadow: var(--stg-fe-shadow-soft) !important;
}

html.jiyu-stg-frontend .member-months-preset {
  min-height: 40px !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  border: 1px solid var(--stg-fe-border) !important;
  background: #fff !important;
  cursor: pointer !important;
  transition: border-color var(--stg-fe-motion), background var(--stg-fe-motion), color var(--stg-fe-motion) !important;
}

html.jiyu-stg-frontend .member-months-preset.is-active {
  border-color: transparent !important;
  color: #fff !important;
  background: linear-gradient(135deg, var(--stg-fe-brand), var(--stg-fe-brand-2)) !important;
}

html.jiyu-stg-frontend .member-payment-card--modern {
  border-radius: var(--stg-fe-radius) !important;
  border: 1px solid var(--stg-fe-border) !important;
  box-shadow: var(--stg-fe-shadow) !important;
  background: rgba(255, 255, 255, 0.96) !important;
}

html.jiyu-stg-frontend .member-simple-lead {
  color: var(--stg-fe-muted) !important;
  line-height: 1.65 !important;
}

html.jiyu-stg-frontend .member-simple-lead a {
  color: var(--stg-fe-brand) !important;
  font-weight: 600 !important;
}

/* —— 夜色 —— */
html.jiyu-stg-frontend.theme-night {
  --stg-fe-bg: #12151c;
  --stg-fe-surface: #1a1f2a;
  --stg-fe-ink: #f1f5f9;
  --stg-fe-muted: #94a3b8;
  --stg-fe-border: rgba(248, 250, 252, 0.12);
  --stg-fe-shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.35), 0 12px 28px rgba(0, 0, 0, 0.28);
  --stg-fe-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), 0 18px 40px rgba(0, 0, 0, 0.35);
}

html.jiyu-stg-frontend.theme-night body {
  background:
    radial-gradient(circle at 12% 0%, rgba(236, 72, 153, 0.16), transparent 38%),
    radial-gradient(circle at 90% 8%, rgba(249, 115, 22, 0.12), transparent 36%),
    linear-gradient(180deg, #0f1218 0%, #12151c 100%) !important;
}

html.jiyu-stg-frontend.theme-night .poe-sidebar {
  background: rgba(22, 26, 36, 0.92) !important;
  border-right-color: var(--stg-fe-border) !important;
}

/* 夜间：面板必须盖过日间白底 !important，否则用户中心下方会出现大块浅灰 */
html.jiyu-stg-frontend.theme-night .poe-main,
html.jiyu-stg-frontend.theme-night .poe-member-panel,
html.jiyu-stg-frontend.theme-night .poe-changelog-panel,
html.jiyu-stg-frontend.theme-night .poe-translate-panel,
html.jiyu-stg-frontend.theme-night .poe-rpa-panel,
html.jiyu-stg-frontend.theme-night .poe-fbreply-panel,
html.jiyu-stg-frontend.theme-night .poe-tools-panel,
html.jiyu-stg-frontend.theme-night .poe-account-panel,
html.jiyu-stg-frontend.theme-night .poe-embed-panel,
html.jiyu-stg-frontend.theme-night .poe-member-inner,
html.jiyu-stg-frontend.theme-night .poe-account-inner,
html.jiyu-stg-frontend.theme-night .poe-translate-inner,
html.jiyu-stg-frontend.theme-night .poe-rpa-inner,
html.jiyu-stg-frontend.theme-night .poe-fbreply-inner,
html.jiyu-stg-frontend.theme-night .poe-tools-inner,
html.jiyu-stg-frontend.theme-night .poe-embed-inner,
html.jiyu-stg-frontend.theme-night .poe-changelog-inner {
  background: #12151c !important;
  color: var(--stg-fe-ink) !important;
}

html.jiyu-stg-frontend.theme-night .poe-composer__box,
html.jiyu-stg-frontend.theme-night .recharge-card,
html.jiyu-stg-frontend.theme-night .poe-account-frame,
html.jiyu-stg-frontend.theme-night .member-payment-card--modern {
  background: rgba(26, 31, 42, 0.96) !important;
  border-color: var(--stg-fe-border) !important;
  color: var(--stg-fe-ink) !important;
}

html.jiyu-stg-frontend.theme-night .poe-account-subnav__btn,
html.jiyu-stg-frontend.theme-night .member-months-preset,
html.jiyu-stg-frontend.theme-night .poe-composer__model {
  background: rgba(26, 31, 42, 0.95) !important;
  color: var(--stg-fe-muted) !important;
}

html.jiyu-stg-frontend.theme-night .poe-thread-row:hover {
  background: rgba(236, 72, 153, 0.12) !important;
}

html.jiyu-stg-frontend.theme-night .poe-thread-row.is-active {
  background: linear-gradient(90deg, rgba(236, 72, 153, 0.22), rgba(249, 115, 22, 0.1)) !important;
}

/* —— 响应式 —— */
@media (max-width: 720px) {
  html.jiyu-stg-frontend .poe-composer__tool {
    min-width: 44px !important;
    min-height: 44px !important;
  }

  html.jiyu-stg-frontend .poe-account-subnav {
    gap: 6px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.jiyu-stg-frontend *,
  html.jiyu-stg-frontend *::before,
  html.jiyu-stg-frontend *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}