/* ============================================================
   oj-nav.css —— OJ 全站统一导航（OJ-NAV-UNIFY-001 / 001B-C）
   001B-C 缩小规格：桌面 64px（移动 56px）/ 内层 max-width 1280px 居中 /
   内层 padding 28px（移动 16px）/ Logo 22px / 菜单 16px·padding 6px 16px /
   登录注册间距 18px / 按钮高度略降 / active #167BFF / blur(20px) saturate(140%)。
   外层 fixed 全宽透明磨砂保留；菜单内容由 js/oj-nav.js 注入 OJ 六项菜单。
   ============================================================ */

/* ===== OJ-PAGE-WIDTH-UNIFY-001：全站统一内容宽度（基准 = oj_home_v2.html 实测）=====
   --oj-page-max  主内容列最大宽度（首页 main 实测 1440px）
   --oj-page-pad  主内容列左右水平内边距（首页 px-6 = 24px）
   全站唯一来源；页面侧统一使用 .oj-page-wrap，不要各自散落 1120/1152/1200/1280/1400/1440。 */
:root { --oj-page-max: 1440px; --oj-page-pad: 24px; }

/* 统一主内容容器：max-width + 居中 + 水平 padding（box-sizing 全局 border-box） */
.oj-page-wrap {
  max-width: var(--oj-page-max, 1440px);
  margin-left: auto; margin-right: auto;
  padding-left: var(--oj-page-pad, 24px); padding-right: var(--oj-page-pad, 24px);
  box-sizing: border-box;
}

.oj-nav {
  position: fixed; top: 0; left: 0; right: 0; width: 100%; max-width: 100vw; height: 64px; padding: 0;
  background: rgba(255,255,255,0.88);
  -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%);
  border-bottom: 1px solid rgba(255,255,255,0.95);
  box-shadow: 0 5px 25px rgba(0,0,0,0.05);
  z-index: 1000; transition: background .3s;
}
.oj-nav.scrolled { background: rgba(255,255,255,0.96); }

/* 内层容器：max-width 1280px 居中（OJ-NAV-UNIFY-001B-C） */
.oj-nav .oj-nav-inner {
  max-width: var(--oj-page-max, 1440px); margin: 0 auto; padding: 0 var(--oj-page-pad, 24px);
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}

/* Logo —— OJ 自己的标识（原点创客 OJ，22px；固定高度防字体回退抖动） */
.oj-nav .logo {
  display: flex; align-items: center; gap: 5px; flex: 0 0 auto;
  font-size: 22px; font-weight: 800; color: #1D2129; letter-spacing: 1px;
  height: 26px; line-height: 26px;
  white-space: nowrap; text-decoration: none; cursor: pointer;
}

/* 中央菜单（16px / padding 6px 16px） */
.oj-nav .nav_link { display: flex; align-items: center; flex: 1 1 auto; justify-content: center; }
.oj-nav .nav_link a {
  font-size: 16px; color: rgb(50,50,50); padding: 6px 16px; line-height: 24px;
  white-space: nowrap; transition: color .2s; text-decoration: none; cursor: pointer;
}
.oj-nav .nav_link a:hover { color: #167BFF; }
.oj-nav .nav_link a.current { color: #167BFF; font-weight: 700; }

/* 右侧：登录/注册 + 用户区（#userArea 由 auth.js 接管渲染头像/退出） */
.oj-nav .nav_right { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.oj-nav .nav_right button.user-pa-btn { cursor: pointer; font-family: inherit; line-height: 1.2; }
.oj-nav .user-pa-btn {
  font-size: 14px; color: #323232; padding: 6px 16px; border-radius: 18px;
  height: 30px; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  border: 1px solid rgba(0,0,0,.15); background: rgba(255,255,255,.6);
  transition: all .2s; white-space: nowrap; text-decoration: none;
}
/* 登录/注册按钮间距（OJ-NAV-UNIFY-001B-C：18px） */
.oj-nav .nav_right #userArea { display: flex; align-items: center; gap: 18px; }
.oj-nav .nav_right .user-pa-btn:hover { border-color: #167BFF; color: #167BFF; }
.oj-nav .nav_right .user-pa-btn.primary { background: #FF8819; border-color: #FF8819; color: #fff; }
.oj-nav .nav_right .user-pa-btn.primary:hover { background: #e9750a; color: #fff; }

/* OJ-STYLE-LOADING-001A：用户区首帧骨架——与最终用户区同尺寸（按钮对 30px 高 × 同 padding/间距），
   ready 前后导航宽度与高度零变化，不出现「空位/登录/注册 → 头像」的双层渲染。 */
.oj-nav .nav_right .oj-user-skb { display: flex; align-items: center; gap: 18px; }
.oj-nav .nav_right .oj-user-skb-btn {
  display: inline-block; height: 30px; padding: 6px 16px; border-radius: 18px; box-sizing: border-box;
  background: #EEF2F7; border: 1px solid rgba(0,0,0,.06); min-width: 62px;
}
.oj-nav .nav_right .oj-user-skb-btn.primary { min-width: 62px; }
@media (max-width: 768px) {
  .oj-nav .nav_right .oj-user-skb { gap: 18px; }
  .oj-nav .nav_right .oj-user-skb-btn { height: 30px; padding: 5px 13px; min-width: 54px; }
  .oj-nav .nav_right .oj-user-skb-btn.primary { min-width: 54px; }
}

/* 登录态：社区同款头像 + 昵称 + caret + hover 下拉（渲染自 js/oj-nav.js） */.oj-nav .oj-nav-bell {
  position: relative; width: 38px; height: 38px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #475569; background: rgba(255,255,255,.72);
  border: 1px solid rgba(148,163,184,.28); text-decoration: none;
  transition: color .18s, background .18s, border-color .18s;
}
.oj-nav .oj-nav-bell:hover { color: #0F172A; background: #fff; border-color: #CBD5E1; }
.oj-nav .oj-nav-bell:focus-visible { outline: 3px solid rgba(37,99,235,.24); outline-offset: 2px; }
.oj-nav .oj-nav-bell svg { width: 20px; height: 20px; }
.oj-nav .oj-nav-bell-badge {
  position: absolute; top: -4px; right: -5px; min-width: 18px; height: 18px;
  padding: 0 4px; border-radius: 999px; background: #DC2626; color: #fff;
  border: 2px solid #fff; font-size: 10px; line-height: 14px; font-weight: 800;
  text-align: center; font-variant-numeric: tabular-nums;
}
.oj-nav .oj-nav-bell-badge[hidden] { display: none; }
.oj-nav .oj-user-logined { position: relative; }
.oj-nav .oj-user-logined::before {
  content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 24px; z-index: 999; pointer-events: auto;
}
.oj-nav .oj-user-logined .oj-user-trigger { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.oj-nav .oj-user-logined .oj-user-head {
  width: 34px; height: 34px; border-radius: 50%; border: 2px solid #fff; background: #fff;
  overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,.12); display: block;
}
.oj-nav .oj-user-logined .oj-user-head img { width: 100%; height: 100%; object-fit: cover; }
.oj-nav .oj-user-logined .oj-user-name {
  font-size: 14px; color: #1D2129; max-width: 80px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.oj-nav .oj-user-logined .oj-user-caret {
  display: inline-block; width: 0; height: 0;
  border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid #323232;
}
.oj-nav .oj-user-logined .oj-user-menu {
  display: none; position: absolute; top: calc(100% + 10px); right: 0; left: auto; z-index: 1001;
  min-width: 150px; background: #fff; border: 1px solid rgba(0,0,0,.06); border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,.12); padding: 6px 0; list-style: none;
}
.oj-nav .oj-user-logined:hover .oj-user-menu { display: block; }
.oj-nav .oj-user-logined .oj-user-menu a:hover { background: #f2f6ff; color: #167BFF; }
.oj-nav .oj-user-logined .oj-user-divider { height: 1px; margin: 6px 0; background: rgba(0,0,0,.06); }

/* 汉堡（移动端） */
.oj-hamburger {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 40px; height: 40px; border: none; border-radius: 10px; cursor: pointer;
  background: rgba(255,255,255,.6); padding: 10px 9px;
}
.oj-hamburger span { display: block; height: 2.5px; border-radius: 2px; background: #3A4150; }

/* ===== 复杂页面二级工具栏（problem_detail / exam / topic_problem，001B 独立工作区） =====
   001B-C 收口：桌面单行明确高度 56px（不换行、flex-shrink:0）；
   三页 body 为纵向 flex，主体 flex:1 自动填满工具栏以下全部视口（高度自适应消化）。 */
.oj-subbar {
  background: linear-gradient(135deg, #0F172A 0%, #1E3A8A 50%, #1E40AF 100%);
  padding: 10px 32px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: 56px; flex-wrap: nowrap; overflow: hidden; flex-shrink: 0;
}
.oj-subbar .oj-subbar-group {
  display: flex; align-items: center; gap: 12px; flex-wrap: nowrap;
  min-width: 0; white-space: nowrap;
}
.oj-subbar .oj-subbar-title { font-size: 15px; font-weight: 700; color: rgba(255,255,255,.92); }

/* ===== body 顶部避让（OJ-NAV-STABILITY-001）
   浏览页 body 静态标记 class="oj-nav-page"（HTML 内写死，css 随 head 首屏生效），
   初始渲染前即预留导航高度 64px（移动 56px）——oj-nav.js 注入导航前后主体 top 零变化。
   旧运行时方案（oj-nav.js 加 body.oj-nav-pad）已废弃删除。 */
body.oj-nav-page { padding-top: 64px; }

/* ===== 响应式（OJ-NAV-UNIFY-001B-C：移动端 56px） ===== */
@media (max-width: 1024px) {
  .oj-nav .nav_link a { padding: 6px 12px; }
}
@media (max-width: 768px) {
  .oj-nav { height: 56px; }
  .oj-nav .oj-nav-inner { padding: 0 16px; }
  .oj-nav .nav_link {
    display: none; position: absolute; top: 56px; left: 0; right: 0;
    flex-direction: column; background: rgba(255,255,255,.97);
    padding: 12px 16px 20px; box-shadow: 0 12px 30px rgba(0,0,0,.12); align-items: flex-start;
  }
  .oj-nav.open .nav_link { display: flex; }
  .oj-nav .nav_link a { width: 100%; padding: 11px 14px; font-size: 16px; }
  .oj-hamburger { display: flex; }
  .oj-nav .nav_right .user-pa-btn { padding: 5px 13px; font-size: 13px; }
  body.oj-nav-page { padding-top: 56px; }
  /* 移动端 subbar 允许换行（高度自适应），三页 body flex 消化，主体仍满屏 */
  .oj-subbar { padding: 8px 16px; height: auto; min-height: 48px; flex-wrap: wrap; overflow: visible; }
  .oj-subbar .oj-subbar-group { flex-wrap: wrap; white-space: normal; }
}

/* OJ-STYLE-LOADING-001A：三个独立工具栏页（problem_detail/exam/topic_problem）深色底用户区骨架。
   与最终按钮同尺寸（px-3/4 py-1.5 text-sm/base + rounded-lg），ready 后由 __ojCustomUserUI 单次替换。 */
.oj-tb-skb { display: inline-flex; align-items: center; gap: 8px; }
.oj-tb-skb .oj-tb-skb-btn {
  display: inline-block; height: 30px; padding: 6px 12px; border-radius: 8px; box-sizing: border-box;
  min-width: 54px; background: rgba(255,255,255,0.14);
}
.oj-tb-skb .oj-tb-skb-btn.primary { min-width: 62px; background: rgba(255,255,255,0.22); }
.oj-tb-skb .oj-tb-skb-btn.lg { height: 34px; padding: 6px 16px; min-width: 62px; }
.oj-tb-skb .oj-tb-skb-btn.lg.primary { min-width: 70px; }
/* OJ-PAGE-WIDTH-UNIFY-001：全宽工作区工具栏（problem_detail/topic_problem/exam）
   背景与工作区保持全宽，仅把「内层内容」内缩到统一内容列（与首页同 x）。
   max(16px, …) 保证窄屏下不低于原有 16px，不产生横向溢出。 */
.oj-subbar {
  /* 工具栏内容贴边：左右仅留固定 24px（原先按 1440 内容列内缩，宽屏下「返回」会离左边很远） */
  padding-left: var(--oj-page-pad, 24px);
  padding-right: var(--oj-page-pad, 24px);
}


/* OJ-COMMUNITY-LOGIN-RETURN-FIX2：门控页未登录首帧即隐藏主体，避免先闪目标页再弹登录层。
   auth.js 判定登录成功后给 body 加 oj-gate-ready 才显示内容。 */
body[data-oj-gate]:not(.oj-gate-ready){opacity:0;pointer-events:none;animation:ojGateFailSafe 0s linear 8s forwards;}
/* 兜底：若 auth.js 未加载/出错/被缓存成旧版，8s 后自动显示，避免页面永久空白 */
@keyframes ojGateFailSafe{to{opacity:1;pointer-events:auto;}}

/* 工具栏用户区的头像/昵称悬停下拉需要「溢出工具栏」显示。
   .oj-subbar 桌面规则带 overflow:hidden 会把往下弹出的 .user-menu 裁掉 ⇒ 悬停无任何反应。
   改为 visible；三页 body 均为 overflow:hidden，横向仍被兜底裁切，不会产生横向滚动。 */
.oj-subbar { overflow: visible; }
/* 工具栏用户区下拉：与首页 .oj-user-menu 视觉完全对齐。
   原先三页用的是 <div class="user-menu-item">，而 .user-menu-item 全仓无任何样式定义，
   导致下拉呈“裸 div 堆叠”（无内边距/无悬停高亮）⇒ 与首页观感不一致。 */
.oj-subbar .user-menu {
  padding: 6px 0 !important;
  min-width: 150px !important;
  border: 1px solid rgba(0,0,0,.06) !important;
  border-radius: 12px !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.12) !important;
  overflow: hidden;
}
.oj-subbar .user-menu-item {
  display: block; padding: 9px 16px; color: #333; font-size: 14px; line-height: 20px;
  white-space: nowrap; cursor: pointer; transition: background .15s, color .15s;
}
.oj-subbar .user-menu-item:hover { background: #f2f6ff; color: #167BFF; }
/* 悬停桥接：鼠标从头像移向下拉菜单途中不误触 mouseleave */
/* 纯 CSS 悬停展开（与首页 .oj-user-logined:hover 同机制）：不依赖 JS 的 mouseleave+300ms 定时器，
   彻底消除「鼠标从头像移向菜单途中菜单自己消失」的竞态；::before 桥接保证跨间隙 hover 不中断。 */
.oj-subbar .user-dropdown:hover .user-menu { display: block !important; }
.oj-subbar .user-dropdown::before {
  content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 12px; z-index: 9998;
}

/* 三段式工具栏：首尾两组等宽，「中间组」真正居中（problem_detail/topic_problem/exam 共用） */
.oj-subbar > .oj-subbar-group:first-child { flex: 1 1 0%; min-width: 0; }
.oj-subbar > .oj-subbar-group:last-child { flex: 1 1 0%; min-width: 0; justify-content: flex-end; }