/* 提钱退休计划 - 全局扩展样式与字体缩放体系 */
@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-perks,
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;
}