/* ================================================================
   opc-brand.css — OPC 社区中心 · 品牌层
   防城港跨境电商综合试验区 × 广西民族大学相思湖学院
   配色：综试区海蓝 #0070C0 + 学院金 #F0A000（NOTHING 三色打底）
   v2：登录页换相思湖学院实景背景 + 中英双语国际化标题框
   ================================================================ */

html[data-opc] {
  --opc-blue: #0070C0;
  --opc-blue-deep: #005A9E;
  --opc-blue-light: #4FA3E3;
  --opc-gold: #F0A000;
  --opc-gold-light: #FFC24B;
}

/* ① 侧栏：NOTHING 主 LOGO 保留，其下机构小字 */
html[data-opc] .sb-brand { flex-direction: column; gap: 6px; }
html[data-opc] .opc-side-tag {
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 10px; letter-spacing: 1px; line-height: 1.55;
  color: var(--txt, var(--text, #e8e8ec));
  text-align: center; opacity: .9;
}
html[data-opc] .opc-side-tag b { color: var(--opc-gold); font-weight: 700; }

/* ================================================================
   ② 登录页背景：相思湖学院实景（替换原赛博朋克图）
   亮底图 + 中心柔光径向遮罩：中心提亮留白，四周压暗收边，
   让深色玻璃卡片浮在校园实景之上。
   ================================================================ */
html[data-opc] .login-page {
  background-image: url('opc-login-bg.webp') !important;
  background-position: center 58% !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-color: #0b1018 !important;
}
html[data-opc] .login-page::before {
  background:
    radial-gradient(ellipse 100% 84% at 50% 46%,
      rgba(8, 14, 26, .06) 0%,
      rgba(8, 14, 26, .34) 55%,
      rgba(5, 9, 17, .76) 100%) !important;
  backdrop-filter: saturate(1.08) !important;
}

/* ================================================================
   ③ 登录页标题框（国际化中英双语排版）
      主标题：OPC 社区中心 / OPC COMMUNITY CENTER
      副行：防城港跨境电商综合试验区 · 广西民族大学相思湖学院（中+英双行）
   ================================================================ */
html[data-opc] .login-page .opc-portal-tag {
  display: block; text-align: center;
  margin: 4px 0 16px; padding: 0 2px;
  color: #fff; letter-spacing: 0;
}
html[data-opc] .opc-portal-tag .opc-name-zh {
  font-family: "Songti SC", "Noto Serif SC", "STSong", serif;
  font-size: 22px; font-weight: 700; letter-spacing: 5px;
  line-height: 1.15; color: #fff; text-indent: 5px;
  text-shadow: 0 2px 20px rgba(0, 0, 0, .65);
}
html[data-opc] .opc-portal-tag .opc-name-en {
  font-family: "Nunito", "Segoe UI", sans-serif;
  font-size: 9px; font-weight: 800; letter-spacing: 4.2px;
  text-transform: uppercase; color: var(--opc-gold-light);
  margin-top: 7px; text-indent: 4.2px;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .6);
}
html[data-opc] .opc-portal-tag .opc-rule {
  width: 64px; height: 1px; margin: 11px auto 10px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .58), transparent);
}
html[data-opc] .opc-portal-tag .opc-org-zh {
  font-size: 12px; letter-spacing: 1px; line-height: 1.5;
  color: rgba(255, 255, 255, .92);
}
html[data-opc] .opc-portal-tag .opc-org-sep { color: rgba(255, 255, 255, .45); margin: 0 5px; }
html[data-opc] .opc-portal-tag .opc-org-en {
  font-family: "Nunito", "Segoe UI", sans-serif;
  font-size: 8.5px; letter-spacing: .8px; line-height: 1.55;
  color: rgba(255, 255, 255, .46); margin-top: 5px;
}
html[data-opc] .opc-portal-tag .opc-gate {
  margin-top: 9px; font-size: 9.5px; letter-spacing: .3px;
  color: rgba(255, 255, 255, .34);
}
html[data-opc] .opc-portal-tag .opc-gate b { color: var(--opc-blue-light); font-weight: 700; }

/* 卡片：亮背景上改用冷调玻璃 + 品牌细描边，LOGO 略收以容纳双语标题 */
html[data-opc] .login-page .login-card {
  background: linear-gradient(162deg, rgba(15, 20, 34, .86) 0%, rgba(8, 12, 21, .9) 100%) !important;
  border: 1px solid rgba(120, 168, 232, .24) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5), 0 0 0 1px rgba(240, 160, 0, .07),
              0 0 90px rgba(0, 112, 192, .16) !important;
  backdrop-filter: blur(18px) saturate(1.05) !important;
}
html[data-opc] .login-page .login-logo { height: 128px !important; margin-bottom: 12px !important; }

/* ④ 登录按钮等强调件（综试区海蓝） */
html[data-opc] .login-page .lbtn { background: var(--opc-blue) !important; border-color: var(--opc-blue-deep) !important; }
html[data-opc] .login-page .lbtn:hover { background: var(--opc-blue-deep) !important; }
html[data-opc] .login-page .ltab.active { color: var(--opc-blue-light); border-bottom-color: var(--opc-blue-light); }

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

/* ================================================================
   ⑦ 主界面顶栏标题框：机构名中英双层（替代「智能体协作空间」）
      中文主行 13px + 英文副行 8.5px 大写，超宽省略号兜底
   ================================================================ */
html[data-opc] .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-opc] .topbar .topbar-title .bi > .zh {
  font-size: 13px; font-weight: 700; letter-spacing: .2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
html[data-opc] .topbar .topbar-title .bi > .en {
  display: block !important; font-size: 8.5px; font-weight: 600; letter-spacing: .9px;
  text-transform: uppercase; opacity: .58; margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
html[data-opc] .topbar .topbar-title .ver-chip { flex: none; }
@media (max-width: 900px) {
  html[data-opc] .topbar .topbar-title .bi { max-width: 46vw; }
  html[data-opc] .topbar .topbar-title .bi > .en { display: none; }
}

/* ⑥ 窄屏：标题降一号，避免换行破版 */
@media (max-width: 430px) {
  html[data-opc] .opc-portal-tag .opc-name-zh { font-size: 19px; letter-spacing: 3.5px; }
  html[data-opc] .opc-portal-tag .opc-name-en { font-size: 8px; letter-spacing: 3.2px; text-indent: 3.2px; }
  html[data-opc] .opc-portal-tag .opc-org-zh { font-size: 10px; letter-spacing: .8px; }
  html[data-opc] .login-page .login-logo { height: 100px !important; }
}

/* ================================================================
   ⑧ 侧栏「NOTHING logo 被顶出视口」修复（2026-10-08 溪哥报）
   ---------------------------------------------------------------
   现象：点「登录 NOTHING」进来后，左上角 NOTHING logo 只剩半截，
        看着像"被遮挡"（尤其全屏、视口≈1040 时最明显）。

   实测证据（Playwright 行投影，用户截图 vs 真机渲染逐行对齐）：
        侧栏每个元素都整齐上移 61px ——
        N图形底 52↔113、NOTHING 70↔131、OPC 125↔186、新建任务 162↔224，
        差值恒为 -61px。即：不是遮挡，是整条侧栏被滚动，
        logo 被滚出了视口顶部。

   根因：nothing.css 把 .sb-logo 定成固定 height:150px、.sb-brand
        padding:26px 20px 10px；而 .sb-brand/.sb-nav/.sb-foot 的
        min-height:auto 让它们全都不可收缩，侧栏内容总高恒为 1098px。
        偏偏 style.css 给 .sidebar 写了 overflow:hidden auto ——
        整条侧栏可滚。全屏视口只有 ≈1040px < 1098px，天生溢出，
        手指一滚，100px 高的 logo 就整体移出视野。

   修法：①侧栏本体禁止滚动（overflow:hidden），滚动下沉到
           「创作工作室 / 导航区」内部 —— logo、新建任务、底部栏钉死；
         ②品牌区 flex:0 0 auto，永不被压缩；
         ③logo 高度改为随视口自适应 clamp()，小屏自动收小，
           不再用固定 150px 硬撑总高。

   验收：1920x1040 / 1920x1080 / 1366x768 / 1366x640 下
        sidebar.scrollHeight 必须 == clientHeight，scrollTop 恒为 0。
   ================================================================ */
html[data-opc] .sidebar {
  overflow: hidden;                                  /* ★ 侧栏本体不再滚动 */
}
html[data-opc] .sb-brand {
  flex: 0 0 auto;                                    /* ★ 禁止被压缩 */
  padding: clamp(16px, 2.6vh, 26px) 20px 8px;        /* 矮屏自动收紧留白 */
}
html[data-opc] .sb-logo {
  height: clamp(64px, 12.5vh, 150px);                /* ★ 随视口自适应 */
  max-height: none;
}
html[data-opc] .opc-side-tag { line-height: 1.45; }

html[data-opc] .sb-new-btn { flex: 0 0 auto; }

/* 导航区：可收缩（矮屏兜底），内部滚动，保底露出约 2.5 项 */
html[data-opc] .sb-nav {
  flex: 0 1 auto; min-height: 132px;
  overflow-y: auto; scrollbar-width: thin;
}

/* 创作工作室列表：主弹性区，超高时在这里滚 */
html[data-opc] .sb-section.sb-apps-section { flex: 1 1 auto; min-height: 0; }
html[data-opc] .sb-section.sb-apps-section > .sb-apps { min-height: 0; overflow-y: auto; }

/* 任务区 + 底部栏：不可收缩，钉在底部 */
html[data-opc] #sbTaskSection { flex: 0 0 auto; }
html[data-opc] .sb-foot { flex: 0 0 auto; }

/* ================================================================
   ⑨ 侧栏「境外拓客」在 NOTHING 内开右侧分栏（2026-10-08 溪哥令）
   ---------------------------------------------------------------
   复用 NOTHING 自带抽屉 #ntDrawer（WorkBuddy 式右侧分栏，不跳页、不丢对话）。
   抽屉默认宽 min(760px,62vw) 是为「HTML 运行预览」定的；拓客作战台是数据
   密集页，打开时给 #ntDrawer 加 .nt-drawer-wide 放宽分栏。
   注意：只在点「境外拓客」时加这个类，关闭即移除 —— 其它预览宽度不变。
   ================================================================ */
html[data-opc] #ntDrawer.nt-drawer-wide { width: min(1040px, 72vw); }
@media (max-width: 1100px) {
  html[data-opc] #ntDrawer.nt-drawer-wide { width: min(760px, 88vw); }
}
@media (max-width: 700px) {
  html[data-opc] #ntDrawer.nt-drawer-wide { width: 100%; }
}