/* ==========================================================================
   page-header.css —— 第二层「页面页头」通用样式
   全站页面共用：页面标题、页面操作、内容形态 tab、页内筛选行
   在 global.css / frame.css 之后加载
   ========================================================================== */

/* --------------------------------------------------------------------------
   页头容器：吸顶
   吸顶基准 = 全局条高度（--topbar-h）。有认证提示条时由 body.has-alertbar 顶下来。
   -------------------------------------------------------------------------- */
.page-header {
    position: sticky;
    top: 0;
    z-index: 80;
    background: #fff;
    border-bottom: 1px solid var(--frame-line, #dfe3e8);
    padding: 16px 26px 0;
}
/* .main-content 是滚动容器，sticky 相对它生效，top:0 即贴在其可视区顶部，
   而 .main-content 本身已从 --topbar-h 之下开始，所以无需再叠加顶部条高度 */

.page-header .ph-top {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.page-header .ph-title { min-width: 0; flex: 1; }
.page-header .ph-title h1 {
    font-size: 19px;
    font-weight: 700;
    color: var(--frame-text-main, #111827);
    line-height: 1.3;
    margin: 0;
}
.page-header .ph-title .ph-sub {
    font-size: 13.5px;
    color: var(--frame-text-sub, #4b5563);
    margin-top: 3px;
}

/* 页面操作区：主按钮 + 次按钮 + 溢出，数量不限，右对齐可换行 */
.page-header .ph-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* 页头按钮（与业务里的 .btn 分开，避免样式互相污染） */
.ph-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 15px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    border: 1px solid var(--frame-line, #dfe3e8);
    background: #fff;
    color: var(--frame-text-label, #374151);
    transition: .15s;
}
.ph-btn:hover { border-color: var(--primary); color: var(--primary); }
.ph-btn i { font-size: 17px; }
.ph-btn.primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.ph-btn.primary:hover { background: var(--primary-hover, #0f766e); color: #fff; }
.ph-btn.ghost { border: none; background: transparent; padding: 8px 10px; }
.ph-btn.ghost:hover { background: #f1f3f5; color: var(--primary); }

/* 余额徽标 */
.ph-wallet {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    border-radius: 8px;
    background: #f6f8fa;
    border: 1px solid var(--frame-line, #dfe3e8);
    font-size: 13.5px;
    color: var(--frame-text-label, #374151);
}
.ph-wallet i { font-size: 16px; color: var(--primary); }
.ph-wallet .m { font-weight: 700; color: var(--frame-text-main, #111827); }
.ph-wallet .rc { color: var(--primary); font-weight: 600; margin-left: 2px; }

/* --------------------------------------------------------------------------
   内容形态 tab（有声书 / 播客 / 广播剧 / 知识 …）
   贴在页头底部，与页头一起吸顶。未来新增形态直接加一个 .ph-tab 即可。
   -------------------------------------------------------------------------- */
.page-header .ph-tabs {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-top: 14px;
    overflow-x: auto;
}
.page-header .ph-tabs::-webkit-scrollbar { height: 0; }

.ph-tab {
    padding: 10px 15px;
    font-size: 14.5px;
    color: var(--frame-text-sub, #4b5563);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: .15s;
}
.ph-tab:hover { color: var(--frame-text-main, #111827); }
.ph-tab.active {
    color: var(--primary);
    font-weight: 700;
    border-bottom-color: var(--primary);
}
.ph-tab .ph-tab-new {
    font-size: 10px;
    font-weight: 700;
    background: #fee2e2;
    color: var(--danger, #dc2626);
    padding: 0 5px;
    border-radius: 7px;
}
.ph-tab .ph-tab-count { color: #9aa4ae; font-weight: 400; }

/* --------------------------------------------------------------------------
   页内筛选行：与页头一起吸顶（跟在 .page-header 之后即可）
   -------------------------------------------------------------------------- */
.page-filter {
    position: sticky;
    z-index: 79;
    top: 0;            /* 与页头同一吸顶基准；实际位置靠 DOM 顺序叠在页头下方 */
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 26px;
    background: #fbfcfd;
    border-bottom: 1px solid var(--frame-line, #dfe3e8);
    font-size: 13.5px;
}
.page-filter .pf-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border: 1px solid var(--frame-line, #dfe3e8);
    border-radius: 7px;
    background: #fff;
    color: var(--frame-text-label, #374151);
    cursor: pointer;
}
.page-filter .pf-item:hover { border-color: var(--primary); color: var(--primary); }
.page-filter .pf-search {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--frame-line, #dfe3e8);
    border-radius: 7px;
    background: #fff;
    min-width: 220px;
}
.page-filter .pf-search input {
    border: none;
    outline: none;
    font-size: 13.5px;
    width: 100%;
    background: transparent;
}

/* --------------------------------------------------------------------------
   吸顶叠放：页头 + 筛选行是两个相邻 sticky 元素，
   sticky 不会自动堆叠，需让筛选行的 top 等于页头实际高度。
   页头高度不固定（有无 tab 不同），用 JS 在 page-header.js 里动态设。
   这里给个兜底初值。
   -------------------------------------------------------------------------- */
.page-filter { top: 96px; }

/* 内容区去掉原本 .top-header 之下的额外留白（页头自带 padding） */
.main-content > .content-body { padding-top: 18px; }

@media (max-width: 900px) {
    .page-header { padding: 14px 16px 0; }
    .page-filter { padding: 10px 16px; }
    .page-header .ph-title h1 { font-size: 17px; }
}

/* --------------------------------------------------------------------------
   兼容各页面原有的信息徽标：这些原本配 .header-right，现放进 .ph-actions，
   统一它们在页头操作区里的排版（不改各自的业务样式，只保证对齐与间距）
   -------------------------------------------------------------------------- */
.page-header .ph-actions .my-guild-status,
.page-header .ph-actions .mcn-status-badge,
.page-header .ph-actions .quick-stats,
.page-header .ph-actions .my-points,
.page-header .ph-actions .seal-status {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13.5px;
    color: var(--frame-text-sub, #4b5563);
}
.page-header .ph-actions .quick-stats { gap: 16px; }
.page-header .ph-actions .quick-stats .stat-item span { font-weight: 700; color: var(--frame-text-main, #111827); }
.page-header .ph-actions .join-link,
.page-header .ph-actions .my-course-link { color: var(--primary); font-weight: 600; white-space: nowrap; }
.page-header .ph-actions .pending-badge {
    display: inline-flex; align-items: center; gap: 4px;
    background: #fef3c7; color: #b45309; font-size: 12.5px; font-weight: 600;
    padding: 3px 9px; border-radius: 10px;
}

/* 工作台的三个全局功能项（商务合作 / 联系运营 / 消息中心）暂留页头，
   保持原 header-action-item 交互；下拉定位基准改为页头 */
.page-header .ph-actions .header-action-item { position: relative; }
.page-header .ph-actions .msg-dropdown { top: 46px; }