/* ================================================================
   kjhub-brand.css — KJ Hub · 品牌层（海外版，源自 opc-brand.css）
   KJ Hub · Cross-Border AI Agent Platform
   配色：品牌红 #C8102E（手写体主色）+ 深炭 #15131a（NOTHING 三色打底）
   ================================================================ */

html[data-kjhub] {
  --kjh-red: #c8102e;
  --kjh-red-deep: #a00d25;
  --kjh-red-light: #ff5c72;
}

/* ① 侧栏：主 LOGO 保留，其下品牌小字 */
html[data-kjhub] .sb-brand { flex-direction: column; gap: 6px; }
html[data-kjhub] .kjh-side-tag {
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: 10px; letter-spacing: 2.4px; line-height: 1.55;
  text-transform: uppercase; font-weight: 700;
  color: var(--txt, var(--text, #e8e8ec));
  text-align: center; opacity: .78;
}
html[data-kjhub] .kjh-side-tag b { color: var(--kjh-red-light); font-weight: 700; letter-spacing: 2.6px; }

/* ================================================================
   ② 登录页背景：改用平台自有科幻工位底图（移除校园实景）
      深色底 + 中心柔光，深色玻璃卡片浮在上方。
   ================================================================ */
html[data-kjhub] .login-page {
  background-image: url('login-bg.webp?v=2') !important;
  background-position: center 54% !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-color: #070b14 !important;
}
html[data-kjhub] .login-page::before {
  background:
    radial-gradient(ellipse 100% 84% at 50% 46%,
      rgba(8, 14, 26, .10) 0%,
      rgba(8, 14, 26, .42) 55%,
      rgba(5, 9, 17, .82) 100%) !important;
  backdrop-filter: saturate(1.06) !important;
}

/* ================================================================
   ③ 登录页标题框（中英双语）
   ================================================================ */
html[data-kjhub] .login-page .kjh-portal-tag {
  display: block; text-align: center;
  margin: 4px 0 16px; padding: 0 2px;
  color: #fff; letter-spacing: 0;
}
html[data-kjhub] .kjh-portal-tag .kjh-name {
  font-family: "Playfair Display", "Noto Serif SC", Georgia, serif;
  font-size: 30px; font-weight: 700; letter-spacing: 3px;
  line-height: 1.15; color: #fff;
  text-shadow: 0 2px 20px rgba(0, 0, 0, .65);
}
html[data-kjhub] .kjh-portal-tag .kjh-name-en {
  font-family: "Inter", "Segoe UI", sans-serif;
  font-size: 9px; font-weight: 800; letter-spacing: 3.6px;
  text-transform: uppercase; color: var(--kjh-red-light);
  margin-top: 8px;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .6);
}
html[data-kjhub] .kjh-portal-tag .kjh-rule {
  width: 64px; height: 1px; margin: 12px auto 10px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .58), transparent);
}
html[data-kjhub] .kjh-portal-tag .kjh-org {
  font-size: 11px; letter-spacing: .5px; line-height: 1.6;
  color: rgba(255, 255, 255, .62);
}

/* 卡片：深色玻璃 + 品牌细描边 */
html[data-kjhub] .login-page .login-card {
  background: linear-gradient(162deg, rgba(15, 20, 34, .88) 0%, rgba(8, 12, 21, .92) 100%) !important;
  border: 1px solid rgba(200, 16, 46, .26) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 92, 114, .07),
              0 0 90px rgba(200, 16, 46, .16) !important;
  backdrop-filter: blur(18px) saturate(1.05) !important;
}
html[data-kjhub] .login-page .login-logo { height: 120px !important; margin-bottom: 12px !important; }

/* ④ 登录按钮等强调件 */
html[data-kjhub] .login-page .lbtn { background: var(--kjh-red) !important; border-color: var(--kjh-red-deep) !important; }
html[data-kjhub] .login-page .lbtn:hover { background: var(--kjh-red-deep) !important; }
html[data-kjhub] .login-page .ltab.active { color: var(--kjh-red-light); border-bottom-color: var(--kjh-red-light); }

/* ⑤ 版本脚标 */
html[data-kjhub] #sbVer b { color: var(--kjh-red) !important; }

/* ================================================================
   ⑥ 主界面顶栏标题框
   ================================================================ */
html[data-kjhub] .topbar .topbar-title .bi {
  flex-direction: column !important; align-items: flex-start !important;
  gap: 0 !important; line-height: 1.2 !important;
  max-width: min(760px, 62vw);
}
html[data-kjhub] .topbar .topbar-title .bi > .zh {
  font-size: 13px; font-weight: 700; letter-spacing: .3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
html[data-kjhub] .topbar .topbar-title .bi > .en {
  display: block !important; font-size: 8.5px; font-weight: 600; letter-spacing: 1.1px;
  text-transform: uppercase; opacity: .58; margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
html[data-kjhub] .topbar .topbar-title .ver-chip { flex: none; }
@media (max-width: 900px) {
  html[data-kjhub] .topbar .topbar-title .bi { max-width: 46vw; }
  html[data-kjhub] .topbar .topbar-title .bi > .en { display: none; }
}

/* 窄屏：标题降一号 */
@media (max-width: 430px) {
  html[data-kjhub] .kjh-portal-tag .kjh-name { font-size: 25px; letter-spacing: 2.2px; }
  html[data-kjhub] .kjh-portal-tag .kjh-name-en { font-size: 8px; letter-spacing: 2.8px; }
  html[data-kjhub] .kjh-portal-tag .kjh-org { font-size: 10px; }
  html[data-kjhub] .login-page .login-logo { height: 96px !important; }
}

/* ================================================================
   ⑦ 侧栏高度治理（延续 opc-brand.css 的修复，防 logo 被滚出视口）
   ================================================================ */
html[data-kjhub] .sidebar { overflow: hidden; }
html[data-kjhub] .sb-brand {
  flex: 0 0 auto;
  padding: clamp(16px, 2.6vh, 26px) 20px 8px;
}
html[data-kjhub] .sb-logo { height: clamp(64px, 12.5vh, 150px); max-height: none; }
html[data-kjhub] .kjh-side-tag { line-height: 1.45; }
html[data-kjhub] .sb-new-btn { flex: 0 0 auto; }
html[data-kjhub] .sb-nav { flex: 0 1 auto; min-height: 132px; overflow-y: auto; scrollbar-width: thin; }
html[data-kjhub] .sb-section.sb-apps-section { flex: 1 1 auto; min-height: 0; }
html[data-kjhub] .sb-section.sb-apps-section > .sb-apps { min-height: 0; overflow-y: auto; }
html[data-kjhub] #sbTaskSection { flex: 0 0 auto; }
html[data-kjhub] .sb-foot { flex: 0 0 auto; }

/* ⑧ 宽抽屉 */
html[data-kjhub] #ntDrawer.nt-drawer-wide { width: min(1040px, 72vw); }
@media (max-width: 1100px) {
  html[data-kjhub] #ntDrawer.nt-drawer-wide { width: min(760px, 88vw); }
}
@media (max-width: 700px) {
  html[data-kjhub] #ntDrawer.nt-drawer-wide { width: 100%; }
}