/* ============================================================
   神机百炼 · 官网设计系统 / 品牌署名模块
   与 https://www.shenjibailian.com 同源令牌：
   dark graphite canvas / cyan signal accents / sharp rectangular
   modules / system font stack. 禁止渐变与圆角卡片。
   ============================================================ */
:root{
  --sj-background:#011012;
  --sj-foreground:#F1FBFA;
  --sj-card:#07191B;
  --sj-primary:#12E3E3;
  --sj-accent:#28D4B2;
  --sj-secondary:#102325;
  --sj-muted:#96ADAF;
  --sj-border:rgba(255,255,255,.12);
  --sj-font:"PingFang SC","Microsoft YaHei","Hiragino Sans GB",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
}

/* ── 顶栏品牌标识：复用原顶栏高度，不额外占位 ── */
.sj-mark{
  flex:0 0 auto;
  display:inline-flex; align-items:center;
  height:30px; padding:0 11px 0 9px;
  background:var(--sj-background);
  border-left:3px solid var(--sj-primary);
  border-radius:0; text-decoration:none;
}
.sj-mark img{ display:block; height:19px; width:auto; max-width:none }
.sj-mark:hover,.sj-mark:focus-visible{ background:var(--sj-secondary) }
.sj-mark:focus-visible{ outline:2px solid var(--sj-primary); outline-offset:2px }

/* 登录页没有顶栏，把标识做成卡片顶部的一条 */
.sj-card-mark{
  display:flex; align-items:center;
  margin:-32px -32px 24px; padding:14px 32px;
  background:var(--sj-background);
  border-top:3px solid var(--sj-primary);
  text-decoration:none;
}
.sj-card-mark img{ display:block; height:28px; width:auto }
@media (max-width:460px){
  .sj-card-mark{ margin:-26px -22px 20px; padding:12px 22px }
  .sj-card-mark img{ height:24px }
}

/* ── 出品说明：可折叠，默认只占 36px，不挤压课件显示区 ── */
.sj-credit{
  flex:0 0 auto; width:100%; box-sizing:border-box;
  margin:0; padding:0; border:0;
  border-top:2px solid var(--sj-primary);
  border-radius:0;
  background:var(--sj-background);
  color:var(--sj-foreground);
  font-family:var(--sj-font);
  position:relative; z-index:30;
}
.sj-credit > summary{
  display:flex; align-items:center; gap:12px;
  min-height:36px; padding:7px 18px;
  cursor:pointer; list-style:none;
  background:var(--sj-background);
}
.sj-credit > summary::-webkit-details-marker{ display:none }
.sj-credit > summary:hover{ background:var(--sj-secondary) }
.sj-credit > summary:focus-visible{ outline:2px solid var(--sj-primary); outline-offset:-2px }
.sj-mini{ display:block; height:20px; width:auto; flex:0 0 auto }
.sj-mini.sj-mini-gf{ height:24px }
.sj-vline{ display:block; flex:0 0 auto; width:1px; height:20px; background:var(--sj-border) }
.sj-sum-tx{
  flex:1 1 auto; min-width:0;
  font-size:11.5px; letter-spacing:.04em; color:var(--sj-muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.sj-sum-tx b{ color:var(--sj-foreground); font-weight:700 }
.sj-more{
  flex:0 0 auto; font-size:11px; letter-spacing:.06em;
  color:var(--sj-primary); font-style:normal;
  border:1px solid var(--sj-border); padding:3px 9px;
}
.sj-credit[open] > summary{ border-bottom:1px solid var(--sj-border) }
.sj-credit[open] .sj-more{ color:var(--sj-muted) }

.sj-credit-in{
  /* 展开内容向上弹出，不占文档流高度 —— 学生端 / 老师端是
     flex 列 + overflow:hidden，若撑高会压缩课件区造成图片裁切 */
  position:absolute; bottom:100%; left:0; right:0;
  max-width:none; margin:0;
  display:flex; align-items:center; gap:28px; flex-wrap:wrap;
  padding:18px max(20px, calc((100% - 1080px) / 2)) 20px;
  border-top:1px solid var(--sj-border);
  box-shadow:0 -10px 30px rgba(0,0,0,.30);
  background:var(--sj-background);
}
.sj-logos{ display:flex; align-items:center; gap:20px; flex:0 0 auto }
.sj-logos img{ display:block; height:36px; width:auto }
.sj-logos img.sj-lg-gf{ height:44px }
.sj-sep{ display:block; width:1px; height:38px; background:var(--sj-border) }
.sj-txt{ flex:1 1 330px; min-width:0; max-width:760px }
.sj-txt p{ margin:0; line-height:1.75 }
.sj-l1{ font-size:13.5px; font-weight:700; letter-spacing:.02em; color:var(--sj-foreground) }
.sj-l2,.sj-l3{ font-size:11.8px; color:var(--sj-muted) }
.sj-l3{ margin-top:4px !important; letter-spacing:.04em }
.sj-l3 a{ color:var(--sj-primary); text-decoration:none }
.sj-l3 a:hover,.sj-l3 a:focus-visible{ text-decoration:underline }
.sj-badge{
  display:inline-block; margin-left:10px; padding:1px 7px;
  border:1px solid var(--sj-border); color:var(--sj-accent);
  font-size:10.5px; font-weight:600; letter-spacing:.08em; vertical-align:1px;
}

/* 登录页：body 是水平居中 flex，改纵向排列让品牌条落在底部 */
body.sj-has-credit{ flex-direction:column; justify-content:center; gap:0; padding:0 }
body.sj-has-credit .wrap{ margin:auto; box-sizing:border-box; padding:24px }

/* 简繁切换按钮由 tw.js 动态注入到 head 末尾，这里用 !important 抬高，
   避免新增的 36px 品牌条把按钮压到底栏「跳到」输入框上 */
.l6twbtn{ bottom:98px !important }
@media (max-width:720px){ .l6twbtn{ bottom:106px !important } }

@media (max-width:720px){
  /* 窄屏顶栏本就拥挤：隐藏顶栏标识（底部品牌条已含双 logo），
     并顺带收敛原系统顶栏按钮组造成的 24px 横向溢出 */
  .sj-mark{ display:none }
  header{ gap:6px }
  header .tools{ gap:4px }
  header .tools .tbtn{ padding:0 7px; font-size:12px }
  /* 多课程平台新增「全部课程」入口后顶栏更挤：
     工具条改为自身内部横滚，避免把整页撑出横向滚动条 */
  header .tools{ flex:1 1 auto; min-width:0; overflow-x:auto; overflow-y:hidden;
                 -webkit-overflow-scrolling:touch; scrollbar-width:none }
  header .tools::-webkit-scrollbar{ display:none }
  header .tools > *{ flex:0 0 auto }
  .eca-home{ font-size:11px !important; padding:5px 7px !important; margin-right:4px !important }
  .eca-home span{ font-size:13px !important }
  header .brand b{ font-size:13px }

  .sj-credit > summary{ gap:9px; padding:7px 12px }
  .sj-mini{ height:17px }
  .sj-mini.sj-mini-gf{ height:20px }
  .sj-sum-tx{ font-size:10.5px }
  .sj-credit-in{ gap:15px; padding:14px 14px 16px }
  .sj-logos{ gap:14px }
  .sj-logos img{ height:27px }
  .sj-logos img.sj-lg-gf{ height:33px }
  .sj-l1{ font-size:12.5px }
  .sj-l2,.sj-l3{ font-size:11px }
  .sj-badge{ display:none }
}