/* 会员中心：左侧导航（2026-11-03）
 *
 * 为什么单独一个文件而不是改 styles.css：
 *   styles.css 有 68KB，里面 .tabs / .main 的规则被登录卡、支付弹窗等多处复用，
 *   直接改容易误伤。这里只覆盖会员中心这一层，类名和选择器都限定在 .shell 下。
 */

.shell{
  display:flex; align-items:flex-start;
  max-width:1120px; margin:0 auto; padding:0 24px;
}
.side{
  width:214px; flex:none;
  padding:30px 16px 40px 0;
  border-right:1px solid var(--px-line-100);
  position:sticky; top:0;
}

/* 竖排：原来顶栏里是横着一排，现在一列 */
.side .tabs{
  display:flex; flex-direction:column; gap:2px;
  flex:none; min-width:0; justify-content:flex-start;
  overflow:visible;
}
.side .tab{
  width:100%; justify-content:flex-start; text-align:left;
  padding:10px 12px; border-radius:8px; font-size:13.5px;
  white-space:nowrap;
}
.side .tab.is-on{font-weight:600}

/* main 不再自己撑宽度，交给 shell */
.main{
  flex:1; min-width:0; max-width:none;
  padding:30px 0 60px 36px;
}

/* 手机：导航变横向滚动条，不占满一屏 */
@media (max-width: 900px){
  .shell{flex-direction:column; padding:0 16px}
  .side{
    width:100%; position:static;
    padding:14px 0 0; border-right:0;
    border-bottom:1px solid var(--px-line-100);
  }
  .side .tabs{
    flex-direction:row; gap:6px;
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    padding-bottom:10px;
  }
  .side .tab{
    width:auto; white-space:nowrap;
    padding:8px 13px; font-size:13px;
  }
  .main{padding:22px 0 50px}
}