/* 提钱退休计划 - 全局扩展样式与字体缩放体系 */
@charset "UTF-8";

:root {
  --base-font-size: 16px;
}

html {
  font-size: var(--base-font-size);
}

body {
  font-size: 14px;
  line-height: 1.6;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 统一表单元素继承字体 */
input, textarea, select, button {
  font-family: inherit;
}

/* ==========================================================================
   中文排版黄金比例字阶 (默认正文 14px，护眼舒适，阶梯清晰)
   - 辅助/微标/时间/次级标签: 12px (行高 1.45)
   - 正文/段落/列表项/输入框: 14px (行高 1.6，默认基准，告别费眼)
   - 次标/强调/操作按钮: 15.5px (行高 1.5)
   - 卡片主标/博主姓名: 17px (行高 1.4)
   - 区块/日历/模块主标: 19px (行高 1.35)
   - 专区大标/Modal主标题: 22px (行高 1.3)
   - Hero大标/大数指标: 25px (行高 1.25)
   ========================================================================== */

/* 1. 默认中字号 (基准 14px 黄金排版) */
html[data-font-size="medium"] .text-\[9px\]:not(.material-symbols-outlined),
html[data-font-size="medium"] .text-\[10px\]:not(.material-symbols-outlined),
html[data-font-size="medium"] .text-\[11px\]:not(.material-symbols-outlined) {
  font-size: 12px !important;
  line-height: 1.45 !important;
}
html[data-font-size="medium"] .text-\[12px\]:not(.material-symbols-outlined),
html[data-font-size="medium"] .text-\[13px\]:not(.material-symbols-outlined),
html[data-font-size="medium"] .text-\[13\.5px\]:not(.material-symbols-outlined),
html[data-font-size="medium"] .text-xs:not(.material-symbols-outlined),
html[data-font-size="medium"] .text-\[14px\]:not(.material-symbols-outlined) {
  font-size: 14px !important;
  line-height: 1.6 !important;
}
html[data-font-size="medium"] .text-\[14\.5px\]:not(.material-symbols-outlined),
html[data-font-size="medium"] .text-sm:not(.material-symbols-outlined),
html[data-font-size="medium"] .text-\[15px\]:not(.material-symbols-outlined) {
  font-size: 15.5px !important;
  line-height: 1.5 !important;
}
html[data-font-size="medium"] .text-base:not(.material-symbols-outlined) {
  font-size: 17px !important;
  line-height: 1.4 !important;
}
html[data-font-size="medium"] .text-lg:not(.material-symbols-outlined) {
  font-size: 19px !important;
  line-height: 1.35 !important;
}
html[data-font-size="medium"] .text-xl:not(.material-symbols-outlined) {
  font-size: 22px !important;
  line-height: 1.3 !important;
}
html[data-font-size="medium"] .text-2xl:not(.material-symbols-outlined) {
  font-size: 25px !important;
  line-height: 1.25 !important;
}

/* 2. 小字号适配 (紧凑模式) */
html[data-font-size="small"] .text-\[9px\]:not(.material-symbols-outlined),
html[data-font-size="small"] .text-\[10px\]:not(.material-symbols-outlined),
html[data-font-size="small"] .text-\[11px\]:not(.material-symbols-outlined) {
  font-size: 11px !important;
  line-height: 1.4 !important;
}
html[data-font-size="small"] .text-\[12px\]:not(.material-symbols-outlined),
html[data-font-size="small"] .text-\[13px\]:not(.material-symbols-outlined),
html[data-font-size="small"] .text-\[13\.5px\]:not(.material-symbols-outlined),
html[data-font-size="small"] .text-xs:not(.material-symbols-outlined),
html[data-font-size="small"] .text-\[14px\]:not(.material-symbols-outlined) {
  font-size: 13px !important;
  line-height: 1.55 !important;
}
html[data-font-size="small"] .text-\[14\.5px\]:not(.material-symbols-outlined),
html[data-font-size="small"] .text-sm:not(.material-symbols-outlined),
html[data-font-size="small"] .text-\[15px\]:not(.material-symbols-outlined) {
  font-size: 14.5px !important;
  line-height: 1.45 !important;
}
html[data-font-size="small"] .text-base:not(.material-symbols-outlined) {
  font-size: 15.5px !important;
  line-height: 1.4 !important;
}
html[data-font-size="small"] .text-lg:not(.material-symbols-outlined) {
  font-size: 17.5px !important;
  line-height: 1.35 !important;
}
html[data-font-size="small"] .text-xl:not(.material-symbols-outlined) {
  font-size: 20px !important;
  line-height: 1.3 !important;
}
html[data-font-size="small"] .text-2xl:not(.material-symbols-outlined) {
  font-size: 23px !important;
  line-height: 1.25 !important;
}

/* 3. 大字号适配 (长辈/超大阅读模式) */
html[data-font-size="large"] .text-\[9px\]:not(.material-symbols-outlined),
html[data-font-size="large"] .text-\[10px\]:not(.material-symbols-outlined),
html[data-font-size="large"] .text-\[11px\]:not(.material-symbols-outlined) {
  font-size: 13.5px !important;
  line-height: 1.5 !important;
}
html[data-font-size="large"] .text-\[12px\]:not(.material-symbols-outlined),
html[data-font-size="large"] .text-\[13px\]:not(.material-symbols-outlined),
html[data-font-size="large"] .text-\[13\.5px\]:not(.material-symbols-outlined),
html[data-font-size="large"] .text-xs:not(.material-symbols-outlined),
html[data-font-size="large"] .text-\[14px\]:not(.material-symbols-outlined) {
  font-size: 16px !important;
  line-height: 1.65 !important;
}
html[data-font-size="large"] .text-\[14\.5px\]:not(.material-symbols-outlined),
html[data-font-size="large"] .text-sm:not(.material-symbols-outlined),
html[data-font-size="large"] .text-\[15px\]:not(.material-symbols-outlined) {
  font-size: 17.5px !important;
  line-height: 1.5 !important;
}
html[data-font-size="large"] .text-base:not(.material-symbols-outlined) {
  font-size: 19px !important;
  line-height: 1.4 !important;
}
html[data-font-size="large"] .text-lg:not(.material-symbols-outlined) {
  font-size: 21.5px !important;
  line-height: 1.35 !important;
}
html[data-font-size="large"] .text-xl:not(.material-symbols-outlined) {
  font-size: 24.5px !important;
  line-height: 1.3 !important;
}
html[data-font-size="large"] .text-2xl:not(.material-symbols-outlined) {
  font-size: 28px !important;
  line-height: 1.25 !important;
}

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined' !important;
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
}

.tabular-nums {
  font-variant-numeric: tabular-nums;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
  animation: fadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* VIP Glow & Frosted glass */
.vip-glow {
  box-shadow: 0 0 25px rgba(234, 179, 8, 0.25);
}

.glass-blur {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.glass-dark {
  background: rgba(15, 23, 42, 0.8);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* Drawer transitions */
.drawer-backdrop {
  transition: opacity 0.3s ease-in-out;
}

.drawer-panel {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Modal transitions */
.modal-backdrop {
  transition: opacity 0.2s ease-in-out;
}

/* Lightbox cursors and helpers */
.cursor-zoom-in {
  cursor: zoom-in;
}

.cursor-zoom-out {
  cursor: zoom-out;
}

#lightbox-modal {
  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   Header Navigation Responsive Architecture & Anti-Wrap Rules
   ========================================================================== */
.nav-tab-link {
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  position: relative;
}

/* 1. 方案 A：自适应图标模式 (Icon-Adaptive Mode - 推荐) */
/* 当屏幕宽度 <= 1260px 或 用户设置为【大字号】时生效：未激活项自动隐藏文字，仅显示图标；当前激活项保留文字高亮 */
body[data-nav-mode="icon"] .nav-tab-link:not(.tab-active) .nav-tab-text,
html[data-font-size="large"] body[data-nav-mode="icon"] .nav-tab-link:not(.tab-active) .nav-tab-text {
  display: none !important;
}

body[data-nav-mode="icon"] .nav-tab-link:not(.tab-active),
html[data-font-size="large"] body[data-nav-mode="icon"] .nav-tab-link:not(.tab-active) {
  padding-left: 0.65rem !important;
  padding-right: 0.65rem !important;
}

/* 紧凑图标模式下，HOT / VIP 文字徽章自适应为右上角精致指示小圆点 */
body[data-nav-mode="icon"] .nav-tab-link:not(.tab-active) .nav-tab-badge,
html[data-font-size="large"] body[data-nav-mode="icon"] .nav-tab-link:not(.tab-active) .nav-tab-badge {
  position: absolute !important;
  top: 5px !important;
  right: 5px !important;
  width: 7px !important;
  height: 7px !important;
  min-width: 0 !important;
  padding: 0 !important;
  border-radius: 9999px !important;
  font-size: 0 !important;
  border: 1.5px solid #ffffff !important;
}

/* 2. 方案 B：折叠更多下拉模式 (Collapse Mode) */
body[data-nav-mode="collapse"] #nav-tab-sites,
body[data-nav-mode="collapse"] #nav-tab-producthub,
body[data-nav-mode="collapse"] #nav-tab-podcasts {
  display: none !important;
}
body[data-nav-mode="collapse"] #nav-more-dropdown {
  display: block !important;
}

/* 当屏幕宽度 <= 1180px 时，桌面顶栏导航未激活项自适应紧凑为精致图标，激活项保留图标加文字高亮 */
@media (max-width: 1180px) {
  header nav .nav-tab-link:not(.tab-active) .nav-tab-text {
    display: none !important;
  }
  header nav .nav-tab-link:not(.tab-active) {
    padding-left: 0.65rem !important;
    padding-right: 0.65rem !important;
  }
  header nav .nav-tab-link:not(.tab-active) .nav-tab-badge {
    position: absolute !important;
    top: 5px !important;
    right: 5px !important;
    width: 6px !important;
    height: 6px !important;
    min-width: 0 !important;
    padding: 0 !important;
    border-radius: 9999px !important;
    font-size: 0 !important;
  }
}

/* 移动端视口防横向滚动与溢出遮挡全局保护 */
html, body {
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
  overflow-x: clip;
}

/* 隐藏平滑水平滚动条 (保持触摸原生滑动) */
.scrollbar-none::-webkit-scrollbar {
  display: none !important;
}
.scrollbar-none {
  -ms-overflow-style: none !important;
  scrollbar-width: none !important;
}

/* 管理后台子导航专属高质感微型横向滚动条 */
.admin-subnav-scroll {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin !important;
  scrollbar-color: #94a3b8 #f1f5f9 !important;
  padding-bottom: 6px !important;
}
.admin-subnav-scroll::-webkit-scrollbar {
  height: 6px !important;
  display: block !important;
}
.admin-subnav-scroll::-webkit-scrollbar-track {
  background: #f1f5f9 !important;
  border-radius: 9999px !important;
}
.admin-subnav-scroll::-webkit-scrollbar-thumb {
  background: #94a3b8 !important;
  border-radius: 9999px !important;
  border: 1px solid #f1f5f9 !important;
}
.admin-subnav-scroll::-webkit-scrollbar-thumb:hover {
  background: #64748b !important;
}

/* ==========================================================================
   X 长文沉浸阅读器与规范排版排版系统 (Article Reader Typography)
   ========================================================================== */
.article-reader-container {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  color: #1e293b;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.article-paragraph {
  font-size: 15.5px;
  line-height: 1.85;
  color: #334155;
  margin-bottom: 1.25rem;
  letter-spacing: 0.012em;
  word-break: break-word;
}
@media (min-width: 640px) {
  .article-paragraph {
    font-size: 16px;
    line-height: 1.88;
    margin-bottom: 1.35rem;
  }
}

.article-strong {
  font-weight: 700;
  color: #0f172a;
  background: rgba(254, 243, 199, 0.55);
  padding: 0.1em 0.3em;
  border-radius: 0.25rem;
}

.article-link {
  color: #2563eb;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: #93c5fd;
  transition: all 0.15s ease-in-out;
  word-break: break-all;
}
.article-link:hover {
  color: #1d4ed8;
  text-decoration-color: #2563eb;
}

.article-inline-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.88em;
  padding: 0.15em 0.4em;
  border-radius: 0.35rem;
  background: #f1f5f9;
  color: #e11d48;
  border: 1px solid #e2e8f0;
}

.article-blockquote {
  border-left: 4px solid #3b82f6;
  background: linear-gradient(to right, rgba(239, 246, 255, 0.8), rgba(248, 250, 252, 0.4));
  padding: 0.85rem 1.15rem;
  border-radius: 0 0.75rem 0.75rem 0;
  margin: 1.25rem 0;
  color: #475569;
  font-size: 14.5px;
  line-height: 1.75;
}

.article-list-container {
  margin: 1rem 0 1.25rem 0;
}

.article-code-wrapper {
  margin: 1.25rem 0;
  border-radius: 0.85rem;
  overflow: hidden;
  background: #0f172a;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

/* ==========================================================================
   Lightbox 推文文字说明面板高对比度深色模式样式 (Lightbox Dark Theme Text Panel)
   ========================================================================== */
#lightbox-text-container {
  color: #f8fafc !important;
}

#lightbox-text-container .bg-slate-900\/95,
#lightbox-text-container .rounded-2xl {
  background-color: rgba(15, 23, 42, 0.94) !important;
  border-color: rgba(148, 163, 184, 0.25) !important;
  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.1) !important;
}

#lightbox-fulltext,
#lightbox-fulltext .article-paragraph,
#lightbox-fulltext p {
  color: #f1f5f9 !important;
  font-size: 14px !important;
  line-height: 1.75 !important;
  letter-spacing: 0.01em !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}

#lightbox-fulltext h2,
#lightbox-fulltext h3,
#lightbox-fulltext h4 {
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) !important;
}

#lightbox-fulltext strong,
#lightbox-fulltext .article-strong {
  color: #fef08a !important; /* 高亮明黄琥珀色 */
  background: rgba(245, 158, 11, 0.22) !important;
  border: 1px solid rgba(245, 158, 11, 0.35) !important;
  border-radius: 0.25rem !important;
  padding: 0.08em 0.3em !important;
  font-weight: 700 !important;
}

#lightbox-fulltext a,
#lightbox-fulltext .article-link {
  color: #60a5fa !important; /* 明亮天蓝色高亮链接 */
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  text-decoration-color: #3b82f6 !important;
  font-weight: 500 !important;
}
#lightbox-fulltext a:hover,
#lightbox-fulltext .article-link:hover {
  color: #93c5fd !important;
  text-decoration-color: #60a5fa !important;
}

#lightbox-fulltext .article-inline-code,
#lightbox-fulltext code {
  color: #93c5fd !important;
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 0.3rem !important;
  padding: 0.1em 0.35em !important;
}

#lightbox-fulltext blockquote,
#lightbox-fulltext .article-blockquote {
  border-left: 4px solid #3b82f6 !important;
  background: rgba(30, 58, 138, 0.3) !important;
  color: #e2e8f0 !important;
  border-radius: 0 0.5rem 0.5rem 0 !important;
  padding: 0.6rem 0.9rem !important;
}

#lightbox-fulltext .article-list-container > div {
  color: #f1f5f9 !important;
}