/**
 * 个人中心子页（收藏 / 关注 / 回复 / 通知 / 续期）—— V5 扩展布局
 * 令牌与基础组件来自 home-exact.css，此处仅布局与列表形态，禁止硬编码主题色值。
 *
 * 侧栏 DOM 约定（五页须一致）：body.fj-user-hub；main.fj-hub-page 仅含 .fj-layout-hub；
 * .fj-hub-main 内第一块为 .fj-hub-page-head（标题+副标题，仅占中间栏），其下为面板/表单。
 */
body.fj-user-hub main.fj-site-main.fj-hub-page {
  display: block;
  width: 100%;
  padding-top: 4px;
  box-sizing: border-box;
}

/* 与首页黄金侧栏同宽、同间距（双栏 = 左轨 + 主区）；仅 Hub 五页 */
body.fj-user-hub main.fj-site-main .fj-layout-hub {
  display: grid;
  grid-template-columns: var(--fj-golden-sidebar-width, 220px) minmax(0, 1fr);
  gap: var(--fj-golden-layout-gap, 48px);
  padding-top: 0;
  align-items: start;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-height: 0;
}

/* 左轨：占满与 .fj-hub-main 同一网格行高度（视觉对齐） */
body.fj-user-hub main.fj-site-main .fj-layout-hub > .fj-hub-sidebar-col {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  min-width: 0;
  width: 100%;
  max-width: var(--fj-golden-sidebar-width, 220px);
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body.fj-user-hub main.fj-site-main .fj-layout-hub > .fj-hub-sidebar-col aside.fj-hub-sidebar {
  position: sticky;
  /* 相对滚动壳略上移，与 fj-site-chrome 全局 24px 区分 */
  top: var(--fj-hub-sidebar-sticky-top, 10px);
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body.fj-user-hub main.fj-site-main .fj-layout-hub aside.fj-hub-sidebar .fj-nav-menu {
  width: 100%;
}

/* Hub 侧栏统一：与个人中心 GitHub 式 inset 左条高亮（仅 .fj-layout-hub，不影响首页左侧导航） */
body.fj-user-hub main.fj-site-main .fj-layout-hub .fj-nav-menu {
  gap: 2px;
}
body.fj-user-hub main.fj-site-main .fj-layout-hub .fj-nav-menu .fj-nav-item {
  margin: 2px 0;
}
body.fj-user-hub main.fj-site-main .fj-layout-hub .fj-nav-menu .fj-nav-item.active {
  font-weight: 600;
  background: var(--fj-bg-surface);
  color: var(--fj-text-primary);
  box-shadow: inset 3px 0 0 var(--fj-orange-500);
}
body.fj-user-hub main.fj-site-main .fj-layout-hub .fj-nav-menu .fj-nav-item.active::before {
  content: none;
}
body.fj-user-hub main.fj-site-main .fj-layout-hub .fj-nav-title {
  margin: 18px 0 8px 0;
  padding-left: 0;
  letter-spacing: 0.05em;
}
body.fj-user-hub main.fj-site-main .fj-layout-hub .fj-nav-menu > a:first-child + .fj-nav-title {
  margin-top: 14px;
}
@media (max-width: 1024px) {
  body.fj-user-hub main.fj-site-main .fj-layout-hub {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  body.fj-user-hub main.fj-site-main .fj-layout-hub > .fj-hub-sidebar-col {
    max-width: none;
  }
  body.fj-user-hub main.fj-site-main .fj-layout-hub > .fj-hub-sidebar-col aside.fj-hub-sidebar {
    position: static;
    top: auto;
  }
  body.fj-user-hub main.fj-site-main .fj-layout-hub .fj-nav-menu {
    position: static;
    top: auto;
  }
}
.fj-hub-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: stretch;
}
.fj-hub-main > .fj-hub-page-head {
  flex: none;
  margin: 0 0 4px;
}
.fj-hub-page-head {
  margin-bottom: 0;
}
.fj-hub-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--fj-text-primary);
  letter-spacing: -0.02em;
}
.fj-hub-desc {
  margin-top: 8px;
  font-size: 0.9rem;
  color: var(--fj-text-secondary);
  line-height: 1.55;
  max-width: 100%;
}
.fj-hub-panel {
  background-color: var(--fj-bg-surface);
  border: 1px solid var(--fj-border-base);
  border-radius: 12px;
  box-shadow: var(--fj-shadow-card);
  overflow: hidden;
}
.fj-hub-list {
  display: flex;
  flex-direction: column;
}
.fj-hub-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--fj-border-subtle);
  transition: background-color var(--fj-duration-normal) var(--fj-ease-out);
}
.fj-hub-row > div:first-child {
  min-width: 0;
}
.fj-hub-row:last-child {
  border-bottom: none;
}
.fj-hub-row:hover {
  background-color: var(--fj-bg-hover);
}
.fj-hub-row-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--fj-text-primary);
  line-height: 1.4;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.fj-hub-row-title a {
  color: inherit;
  transition: color var(--fj-duration-fast) var(--fj-ease-out);
}
.fj-hub-row-title a:hover {
  color: var(--fj-orange-500);
}
.fj-hub-row-body {
  margin-top: 8px;
  font-size: 0.88rem;
  color: var(--fj-text-secondary);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.fj-hub-row-meta {
  margin-top: 10px;
  font-family: ui-monospace, "Fira Code", SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.75rem;
  color: var(--fj-text-tertiary);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
}
.fj-hub-row-aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--fj-text-tertiary);
  text-align: right;
}
.fj-hub-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  background: var(--fj-bg-hover);
  color: var(--fj-text-secondary);
  border: 1px solid var(--fj-border-subtle);
}
.fj-hub-badge--muted {
  opacity: 0.85;
}
.fj-hub-empty-inset {
  padding: 48px 24px;
  text-align: center;
  border: 1px dashed var(--fj-border-base);
  border-radius: 12px;
  background: color-mix(in srgb, var(--fj-bg-surface) 88%, transparent);
}
/* 内嵌于 HTML 的首屏占位：避免空 .fj-hub-panel 先塌缩再被 JS 撑开导致侧栏/主区跳变 */
body.fj-user-hub .fj-hub-initial-skeleton {
  min-height: 140px;
  box-sizing: border-box;
}
.fj-hub-empty-inset .fj-home-empty-title {
  font-size: 1rem;
}
.fj-hub-form {
  padding: 28px 24px;
  max-width: 480px;
}
.fj-hub-form .fj-form-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--fj-text-secondary);
  margin-bottom: 8px;
}
.fj-hub-form .fj-input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid var(--fj-border-base);
  background: var(--fj-bg-hover);
  color: var(--fj-text-primary);
  font-size: 0.95rem;
  font-family: inherit;
  transition:
    border-color var(--fj-duration-normal) var(--fj-ease-out),
    box-shadow var(--fj-duration-normal) var(--fj-ease-out),
    background var(--fj-duration-normal) var(--fj-ease-out);
}
.fj-hub-form .fj-input:focus {
  outline: none;
  border-color: var(--fj-orange-500);
  background: var(--fj-bg-surface);
  box-shadow: 0 0 0 2px var(--fj-orange-glow);
}
.fj-hub-form .fj-form-actions {
  margin-top: 20px;
}
.fj-hub-form .fj-form-actions .fj-btn-primary {
  width: auto;
  display: inline-flex;
  margin-bottom: 0;
}
.fj-hub-form-hint {
  margin-top: 12px;
  font-size: 0.82rem;
  color: var(--fj-text-tertiary);
  line-height: 1.5;
}
.fj-notify-timeline {
  padding: 8px 0 24px;
}
.fj-notify-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--fj-border-subtle);
}
.fj-notify-item:last-child {
  border-bottom: none;
}
.fj-notify-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--fj-border-base);
  margin-top: 6px;
}
.fj-notify-item--soon .fj-notify-dot {
  background: var(--fj-warning);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fj-warning) 35%, transparent);
}
.fj-notify-title {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--fj-text-primary);
}
.fj-notify-desc {
  margin-top: 4px;
  font-size: 0.85rem;
  color: var(--fj-text-secondary);
  line-height: 1.5;
}

.fj-hub-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
  align-items: center;
}
.fj-notify-item--warn .fj-notify-title {
  color: var(--fj-orange-500);
}
.fj-notify-tag {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  vertical-align: middle;
  background: color-mix(in srgb, var(--fj-orange-500) 18%, transparent);
  color: var(--fj-orange-500);
}
.fj-notify-item--announcement .fj-notify-tag {
  background: color-mix(in srgb, var(--fj-accent) 22%, transparent);
  color: var(--fj-accent);
}
.fj-notify-meta {
  margin-top: 6px;
  font-size: 0.78rem;
  color: var(--fj-text-tertiary);
}
.fj-notify-body-multiline {
  white-space: normal;
  word-break: break-word;
}
.fj-notify-actions {
  margin-top: 10px;
}
.fj-notify-item--read .fj-notify-dot {
  opacity: 0.45;
}
.fj-notify-item--read .fj-notify-title {
  color: var(--fj-text-secondary);
}

/* 我的关注 */
.fj-hub-following-main {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  min-width: 0;
}
.fj-hub-following-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.fj-hub-following-btn {
  font-size: 0.82rem;
  padding: 6px 12px;
}
.fj-hub-row--following {
  align-items: flex-start;
}
.fj-hub-following-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex-shrink: 0;
  background-color: var(--fj-bg-hover);
  background-image: var(--fj-hub-following-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}