/* 前端信息架构重构（首页 / 卖家运营 / 我的权益）新增样式。
   沿用现有 CSS 变量与 token，不引入新的视觉体系。三个页面都加载本文件。 */

/* ---------- 首页 ---------- */
.home-workspace .hero-banner{padding-top:52px}
.home-entry{margin:40px 0 8px}
.home-entry-card{
  display:flex;align-items:center;justify-content:space-between;gap:28px;
  background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:26px 28px;
}
.home-entry-copy{min-width:0}
.home-entry-copy h2{font-size:22px;margin-bottom:8px}
.home-entry-copy p{color:var(--muted);font-size:14px;line-height:1.75;max-width:60ch}
.home-entry-copy .hero-eyebrow{margin-bottom:12px}
.home-entry-copy .caption{margin-top:8px}
.home-entry-card .button{flex:0 0 auto;min-height:46px}
/* 首页次要 CTA 比主 CTA 弱一档，两个按钮并排不抢焦点 */
.hero-cta-quiet{background:transparent}

/* ---------- 卖家运营页 ---------- */
.ops-gate{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  margin:20px 0 4px;padding:14px 18px;border:1px solid var(--line);
  border-radius:12px;background:var(--tint);
}
.ops-gate p{margin:0;font-size:13px;line-height:1.7;flex:1 1 320px;min-width:0}
.ops-gate .button{flex:0 0 auto}
.ops-gate-close{flex:0 0 auto;margin-left:auto;font-size:12px}
/* 左侧区块导航：时间轴 / 成交榜 / 周类目雷达。
   用「绝对定位撑满 main 高度 + 内层 sticky」实现，不改动主内容的文档流结构，
   内容只靠 main 的左内边距让位，因此不影响既有区块的选择器与脚本查询。
   尺寸变量与 .wrap 在各断点的 padding-inline 保持一致（40/30/26/16），
   主内容左侧因此固定让出 --ops-rail + --ops-gap = 160px，换断点不会错位。
   代价是主内容比改动前窄 160px（1440 视口实测：内容 1208 → 1048px，
   三列榜单卡片 392 → 339px，列数不变，各断点均无横向溢出）。 */
.ops-workspace{--ops-pad:40px;--ops-rail:136px;--ops-gap:24px}
@media (min-width:1500px){.ops-workspace{--ops-pad:30px}}
@media (max-width:1100px){.ops-workspace{--ops-pad:26px}}
@media (max-width:540px){.ops-workspace{--ops-pad:16px}}

.ops-workspace main.wrap{position:relative;padding-left:calc(var(--ops-pad) + var(--ops-rail) + var(--ops-gap))}
/* 页脚同样让位，保证 brand 与主内容左缘对齐（右缘本来就是对齐的）。 */
.ops-workspace footer.wrap{padding-left:calc(var(--ops-pad) + var(--ops-rail) + var(--ops-gap))}
.ops-side-nav{position:absolute;left:var(--ops-pad);top:0;bottom:0;width:var(--ops-rail)}
.ops-side-nav-inner{
  position:sticky;top:92px;display:flex;flex-direction:column;gap:2px;
  padding:14px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface);
}
.ops-side-nav-title{font-size:11px;font-weight:600;letter-spacing:.06em;color:var(--muted);padding:0 10px 9px}
.ops-side-nav a{
  display:block;padding:9px 10px;border-radius:8px;
  font-size:13px;font-weight:600;color:var(--muted);transition:background .18s,color .18s;
}
.ops-side-nav a:hover{background:var(--tint);color:var(--text)}
.ops-side-nav a[aria-current="true"]{background:var(--accent-soft);color:var(--accent);font-weight:700}

.ops-filter-note{margin-top:-6px}
.ops-filter-note:empty{display:none}
.ops-workspace #ops-private .shop-panel{margin-top:20px}
.ops-workspace .ops-help{margin-top:32px}
/* 筛选器里的分组下拉：类目名可能较长，允许在窄屏换行显示而不是截断 */
.ops-workspace .filters select{max-width:100%}
.ops-workspace .filters select optgroup{font-weight:700;color:var(--muted)}
.ops-workspace .filters select option{font-weight:500;color:var(--text)}

/* ---------- 我的权益页 ---------- */
.benefits-workspace #account{margin-top:8px}
.benefits-workspace #monitor-plans{margin-top:36px}
.benefits-workspace .member-config-head h2{font-size:20px;margin:0 0 12px;letter-spacing:-.02em}
.benefits-workspace #designated-category-label{display:flex;align-items:center;gap:10px;font-size:12px;margin:0 0 12px}
.benefits-workspace #designated-category-label[hidden]{display:none}
.benefits-workspace #designated-category-label select{min-width:200px;max-width:100%}
.benefits-workspace #payment-return{margin-top:20px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.benefits-workspace #payment-return .inline-link{flex:0 0 auto}

/* ---------- 窄屏 ---------- */
/* 视口不够宽时，竖栏会明显挤压图表与榜单网格，收起为贴在主导航下方的横向锚点条。
   这里必须用 fixed 而不是 sticky：sticky 的活动范围受最近块级祖先限制，
   而横向条所在的 nav 只有自身高度，粘住几像素就会被推走；fixed 才真正吸顶，
   不占文档流的部分由 main 的 padding-top 补回来。 */
@media (max-width:1080px){
  .ops-workspace main.wrap{padding-left:var(--ops-pad);padding-top:52px}
  .ops-workspace footer.wrap{padding-left:var(--ops-pad)}
  .ops-side-nav{position:static;width:auto}
  .ops-side-nav-inner{
    position:fixed;top:72px;left:0;right:0;z-index:9;height:52px;
    flex-direction:row;align-items:center;gap:6px;overflow-x:auto;
    padding:0 calc(50vw - 50% + var(--ops-pad));
    border:0;border-bottom:1px solid var(--line);border-radius:0;background:var(--bg);
  }
  .ops-side-nav-title{display:none}
  .ops-side-nav a{flex:0 0 auto;white-space:nowrap;padding:8px 12px;font-size:12px}
}
@media (max-width:800px){.ops-side-nav-inner{top:66px}}

@media (max-width:720px){
  .home-entry-card{flex-direction:column;align-items:flex-start;gap:18px;padding:22px 20px}
  .home-entry-card .button{width:100%}
  .ops-gate{padding:14px 16px}
  .ops-gate-close{margin-left:0}
}