/* ============================================================
   8A317 LAB — design system
   深空蓝黑 · 青蓝辉光 · 轨道母题
   ============================================================ */

/* ---------- 字体 ----------
   原始字体在项目根的 fonts/（思源黑/宋单个 8~11MB，全站 31.8MB），
   3M 带宽下让访客整包下载太重。scripts/build-fonts.py 把它们按 unicode
   码点切成小片 woff2，用 unicode-range 声明 —— 浏览器只为「本页真的
   出现的字」下载对应小片；高频字单独成片，冷首访字体传输量
   从 31.8MB 降到 2MB 以内。（Google Fonts 中文 Noto Sans SC 的同款做法。）
   切片声明在 /assets/fonts.css：几百条 unicode-range 规则太长，
   不能放进这个阻塞首屏渲染的文件；页面已异步加载它，
   文字先用回退字体渲染，字体到位后再换。
   ⚠ 下面这个区块必须保持「只有注释」，多一个裸字符都会让 CSS
   解析器把后面的 :root 变量块当成无效规则吞掉。 */
/* @fonts:auto:start */
/* 切片声明见 /assets/fonts.css；重新生成请运行 scripts/build-fonts.py */
/* @fonts:auto:end */



:root{
  --deep:#050A14;
  --deep-2:#0A1220;
  --panel:#0C1626;
  --panel-hi:#102038;
  --line:#1A2B45;
  --line-hi:#2A4165;

  --cyan:#22D3EE;
  --cyan-dim:#0E7490;
  --cyan-soft:rgba(34,211,238,.10);
  --cyan-edge:rgba(34,211,238,.32);

  --amber:#EF9F27;
  --green:#34D399;
  --red:#F87171;

  --text:#E8F4FF;
  --text-2:#93A9C4;
  --text-3:#5A7391;

  --font-sans:'LabSans',"Inter","Segoe UI Variable Text","Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei UI","Microsoft YaHei",system-ui,sans-serif;
  /* 中文标题/引文用思源宋体 Heavy，压得住场面 */
  --font-serif:'LabSerif','LabTimes',"Songti SC","SimSun",Georgia,serif;
  /* 英文与数字用 Times New Roman，学术、严谨 */
  --font-times:'LabTimes',"Times New Roman",Times,Georgia,serif;
  --font-mono:"JetBrains Mono","Cascadia Mono","Cascadia Code",ui-monospace,Consolas,"Courier New",monospace;

  --ease:cubic-bezier(.22,1,.36,1);
  --maxw:1180px;
  --r:10px;
  --nav-h:62px;
}

*,*::before,*::after{box-sizing:border-box}

/* 必须放在所有组件样式之前并加 !important：
   .btn/.card 等组件自带 display，会盖过浏览器默认的 [hidden]{display:none}，
   导致 data-auth 之类的元素该隐藏时仍然显示。 */
[hidden]{display:none !important}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:var(--deep);
  color:var(--text);
  font:400 15px/1.7 var(--font-sans);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* 底纹坐标网格 */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(34,211,238,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(34,211,238,.04) 1px,transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(ellipse 130% 70% at 50% 0%,#000 10%,transparent 78%);
  mask-image:radial-gradient(ellipse 130% 70% at 50% 0%,#000 10%,transparent 78%);
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}

::selection{background:rgba(34,211,238,.28)}

:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:3px;
  border-radius:3px;
}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------- 排版基元 ---------- */

.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}

.eyebrow{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--cyan);
}

.eyebrow-dim{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--text-3);
}

h1,h2,h3,h4{margin:0;font-weight:700;line-height:1.25;letter-spacing:-.01em}
p{margin:0}

.lede{color:var(--text-2);max-width:62ch}

/* ---------- 轨道母题 ---------- */

.rail{
  height:9px;
  border-top:1px solid var(--line-hi);
  border-bottom:1px solid var(--line-hi);
  background:repeating-linear-gradient(90deg,var(--line) 0 1.5px,transparent 1.5px 20px);
  background-size:100% 9px;
}

.rail-cyan{
  border-color:var(--cyan-edge);
  background:repeating-linear-gradient(90deg,rgba(34,211,238,.34) 0 1.5px,transparent 1.5px 20px);
}

/* 角标括号 */
.brk{position:relative}
.brk::before,.brk::after{
  content:"";
  position:absolute;
  width:10px;height:10px;
  border:1px solid var(--cyan);
  opacity:.55;
  transition:opacity .3s var(--ease);
}
.brk::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.brk::after{bottom:-1px;right:-1px;border-left:0;border-top:0}

/* ---------- 容器 ---------- */

.wrap{
  position:relative;
  z-index:1;
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 24px;
}

.sec{
  position:relative;
  z-index:1;
  max-width:var(--maxw);
  margin:0 auto;
  padding:clamp(52px,7vw,86px) 24px 0;
}

.sec-head{margin-bottom:28px}
.sec-head .rail{margin-bottom:20px}
.sec-title-row{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
}
.sec-idx{
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--cyan);
  letter-spacing:.2em;
  display:block;
  margin-bottom:6px;
}
.sec-title{font-size:clamp(21px,3vw,27px)}
.sec-note{color:var(--text-3);font-size:13px}

/* ---------- 导航 ---------- */

.nav{
  position:sticky;
  top:0;
  z-index:60;
  background:rgba(5,10,20,.84);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid var(--line);
}
.nav-in{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 24px;
  height:var(--nav-h);
  display:flex;
  align-items:center;
  gap:30px;
}
.brand{display:flex;align-items:center;gap:12px;flex:none;min-width:0}
/* 上海工程技术大学 白色横版组合标（含英文校名） */
.brand-sues{height:29px;width:auto;flex:none;display:block}
/* 城市轨道交通学院 白色组合标 */
.brand-rail{height:34px;width:auto;flex:none;display:block}
/* 校徽 与 院徽 之间的细分隔线 */
.brand-sep{width:1px;height:24px;background:var(--line-hi);flex:none}
/* 天枢实验室 NEXUS Lab 标识（白色透明底，透明 PNG） */
.brand-lab{height:31px;width:auto;flex:none;display:block}
/* 实验室名：中英上下锁定成一组，与「上标识下中英双语」组合标同构。
   中英始终同时显示——它是实验室的正式名称，不参与语言切换。 */
.brand-name{display:flex;flex-direction:column;gap:1px;min-width:0;line-height:1.05}
.brand-name b{
  font-size:17px;
  font-weight:800;
  letter-spacing:.01em;
  color:var(--text);
  white-space:nowrap;
}
.brand-name i{
  font-family:var(--font-times);
  font-style:normal;
  font-size:10px;
  font-weight:700;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--cyan);
  white-space:nowrap;
}
@media (max-width:1180px){
  .brand{gap:10px}
  .brand-sues{height:26px}
  .brand-rail{height:30px}
  .brand-lab{height:27px}
  .brand-name b{font-size:15px}
  .brand-name i{font-size:9px;letter-spacing:.19em}
}
@media (max-width:900px){
  .brand-rail,.brand-sep{display:none}
}
@media (max-width:760px){
  /* 手机宽度放不下两行，英文行收掉，让中文名独占 */
  .brand-name i{display:none}
}
@media (max-width:620px){
  /* 顶栏只留「实验室标识 + 天枢实验室」，8A317 只在页脚与主视觉说明出现 */
  .brand-sues{display:none}
  .brand-lab{height:25px}
  .brand-name b{font-size:15px}
}

.nav-links{
  display:flex;
  align-items:center;
  gap:2px;
  margin-left:8px;
  flex:1;
  min-width:0;
  /* 英文标签比中文长，窄窗口下放不下：宁可横向滚动也绝不压到右侧按钮上
     （历史上溢出的链接直接画到了语言胶囊上，看起来就是「错位」） */
  overflow-x:auto;
  scrollbar-width:none;
}
.nav-links::-webkit-scrollbar{display:none}
.nav-links a{
  position:relative;
  padding:8px 13px;
  border-radius:7px;
  font-size:14px;
  color:var(--text-2);
  transition:color .22s var(--ease),background .22s var(--ease);
  white-space:nowrap;
}
.nav-links a:hover{color:var(--text);background:rgba(34,211,238,.06)}
.nav-links a[aria-current="page"]{color:var(--text)}
.nav-links a[aria-current="page"]::after{
  content:"";
  position:absolute;
  left:13px;right:13px;bottom:2px;
  height:1px;
  background:var(--cyan);
}

.nav-side{display:flex;align-items:center;gap:10px;flex:none}
/* 移动端才出现的导航项（登录态相关），桌面端隐藏，避免与顶栏按钮重复 */
.nav-mob{display:none}
/* 中宽窗口（英文标签最长的一段）：收紧间距，让 EN 也放得下，尽量不出现横向滚动 */
@media (max-width:1380px) and (min-width:861px){
  .nav-in{gap:16px}
  .nav-links{margin-left:2px}
  .nav-links a{padding:8px 9px;font-size:13.5px}
  .nav-side{gap:7px}
  .lang-btn{padding:6px 8px}
  .nav-side .btn{padding:9px 13px}
}

.lang-btn{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.1em;
  color:var(--text-2);
  border:1px solid var(--line-hi);
  border-radius:7px;
  padding:6px 10px;
  transition:all .22s var(--ease);
}
.lang-btn:hover{color:var(--cyan);border-color:var(--cyan-edge);background:var(--cyan-soft)}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:9px 18px;
  border-radius:8px;
  border:1px solid var(--line-hi);
  font-size:14px;
  color:var(--text);
  background:var(--panel);
  transition:all .24s var(--ease);
  white-space:nowrap;
}
.btn:hover{border-color:var(--cyan-edge);background:var(--panel-hi);transform:translateY(-1px)}
.btn-primary{
  background:var(--cyan);
  border-color:var(--cyan);
  color:#04121A;
  font-weight:700;
}
.btn-primary:hover{background:#5EE7F8;border-color:#5EE7F8;color:#04121A}
.btn-ghost{background:transparent}
.btn-sm{padding:7px 13px;font-size:13px}
.btn-block{width:100%}

.nav-toggle{
  display:none;
  width:38px;height:38px;
  border:1px solid var(--line-hi);
  border-radius:8px;
  align-items:center;
  justify-content:center;
}
.nav-toggle span{
  display:block;width:15px;height:1.5px;background:var(--text);
  position:relative;
}
.nav-toggle span::before,.nav-toggle span::after{
  content:"";position:absolute;left:0;width:15px;height:1.5px;background:var(--text);
}
.nav-toggle span::before{top:-5px}
.nav-toggle span::after{top:5px}

/* ---------- Hero ---------- */

.hero{
  position:relative;
  z-index:1;
  max-width:var(--maxw);
  margin:0 auto;
  padding:clamp(46px,7vw,86px) 24px 0;
}
.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 268px;
  gap:clamp(28px,5vw,64px);
  align-items:end;
}
/* 主视觉大字 = 实验室正式中文名，下面挂一行加宽的英文名。
   中文名固定 5 个字，用 vw 控制字号即可稳定不换行。 */
.hero-title{
  font-size:clamp(44px,7.8vw,96px);
  line-height:1;
  letter-spacing:.01em;
  font-weight:800;
  margin:14px 0 0;
}
.hero-title .ht-en{
  display:block;
  font-family:var(--font-times);
  font-style:normal;
  font-weight:700;
  font-size:.335em;
  line-height:1;
  letter-spacing:.30em;
  text-transform:uppercase;
  color:var(--cyan);
  margin-top:.30em;
}
.hero-sub{
  margin-top:20px;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.hero-sub .zh{font-size:clamp(15px,2vw,17px);color:var(--text)}
/* 第二行现在是「学生科创工作室」——按机构名的分量排，不再当英文小字压暗 */
.hero-sub .en{
  font-family:var(--font-serif);
  font-weight:900;
  font-size:clamp(18px,2.5vw,22px);
  letter-spacing:.01em;
  color:var(--cyan);
  margin-top:3px;
}
.hero-actions{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap}

/* 主视觉当前时间：读秒的仪表感，放在引言上方 */
.hero-clock{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin:0 0 16px;
  padding:6px 13px;
  border:1px solid var(--line);
  border-radius:20px;
  background:rgba(34,211,238,.05);
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.1em;
  color:var(--text-2);
  font-variant-numeric:tabular-nums;
}
.hero-clock #heroClockTime{color:var(--cyan)}
.hero-clock-sep{color:var(--text-3)}

/* 主视觉引文（可在后台改，默认「把论文写在祖国的大地上」） */
.hero-quote{
  margin:0;
  display:flex;
  align-items:baseline;
  gap:12px;
  flex-wrap:wrap;
}
.hero-quote-text{
  font-family:var(--font-serif);
  font-size:clamp(16px,2.2vw,20px);
  font-weight:700;
  color:var(--cyan);
  letter-spacing:.03em;
}
.hero-quote-src{
  font-size:12.5px;
  color:var(--text-3);
  letter-spacing:.06em;
}

/* 主视觉右侧：实验室标识（固定位置，不再放轮播）。
   后台填了 lab_logo 就显示图片，否则显示轨道母题占位。 */
.hero-mark{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  min-height:210px;
  padding:22px 18px;
  border:1px solid var(--line);
  border-radius:var(--r);
  background:linear-gradient(180deg,var(--panel-hi),var(--panel));
}
.hero-mark-img{
  max-width:100%;
  max-height:190px;
  width:auto;
  height:auto;
  object-fit:contain;
}
.hero-mark-ph{display:block;line-height:0}
.hero-mark-cap{
  font-size:10px;
  letter-spacing:.22em;
  color:var(--text-3);
  text-transform:uppercase;
}

/* 仪表读数条 */
.readout{
  margin-top:clamp(34px,5vw,52px);
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(132px,1fr));
  border-top:1px solid var(--line);
}
.readout > div{
  padding:18px 0 0 18px;
  border-left:1px solid var(--line);
  position:relative;
}
.readout > div:first-child{border-left:0;padding-left:0}
.readout > div::before{
  content:"";
  position:absolute;
  top:-1px;left:0;
  width:1px;height:9px;
  background:var(--cyan);
  opacity:.7;
}
.readout > div:first-child::before{display:none}
.readout .k{
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.16em;
  color:var(--text-3);
  text-transform:uppercase;
}
.readout .v{
  font-family:var(--font-mono);
  font-size:clamp(26px,4vw,34px);
  line-height:1.2;
  margin-top:4px;
  font-variant-numeric:tabular-nums;
}
.readout .v small{font-size:12px;color:var(--text-3);margin-left:3px;letter-spacing:.06em}

/* ---------- 活动影像长条（原来四个数字统计的位置） ----------
   一条横向匀速滚动的照片带。JS 算好「半段位移」写进 --ps-shift，
   CSS 只负责匀速平移；鼠标移入整条暂停、指针下那张放大。 */

.photo-strip{
  margin-top:clamp(34px,5vw,52px);
  border-top:1px solid var(--line);
  padding-top:16px;
}
.ps-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;
  margin-bottom:12px;
}
.ps-more{font-size:12.5px}
.ps-view{
  position:relative;
  overflow:hidden;
  /* 上下留出余量：照片放大时不会被裁掉 */
  padding:14px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 30px,#000 calc(100% - 44px),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 30px,#000 calc(100% - 44px),transparent);
}
.photo-strip.is-static .ps-view{overflow-x:auto;overflow-y:hidden;-webkit-mask-image:none;mask-image:none}
.ps-track{
  display:flex;
  gap:12px;
  width:max-content;
  will-change:transform;
}
.ps-track.is-animated{
  animation:psScroll 34s linear infinite;
}
@keyframes psScroll{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(calc(-1 * var(--ps-shift,0px)),0,0)}
}
/* 鼠标进入这条带子：暂停滚动，方便看清并放大某一张 */
.ps-view:hover .ps-track.is-animated{animation-play-state:paused}
.ps-item{
  position:relative;
  flex:0 0 212px;
  width:212px;height:134px;
  display:block;
  border-radius:9px;
  border:1px solid var(--line);
  overflow:hidden;
  background-color:var(--deep-2);
  background-size:cover;
  background-position:center;
  transition:transform .38s var(--ease),border-color .38s var(--ease),box-shadow .38s var(--ease);
}
.ps-item::after{
  content:"";
  position:absolute;left:0;right:0;bottom:0;height:58%;
  background:linear-gradient(to top,rgba(4,10,20,.88),transparent);
  pointer-events:none;
}
.ps-item:hover{
  transform:scale(1.15);
  z-index:3;
  border-color:var(--cyan-edge);
  box-shadow:0 18px 42px -14px rgba(0,0,0,.78),0 0 0 1px var(--cyan-edge);
}
.ps-cap{
  position:absolute;left:10px;right:10px;bottom:8px;z-index:1;
  font-size:11.5px;line-height:1.4;color:var(--text);
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;
  overflow:hidden;text-shadow:0 1px 8px rgba(0,0,0,.65);
}
.photo-strip.is-empty .ps-view{display:none}
.ps-empty{
  border:1px dashed var(--line-hi);
  border-radius:9px;
  padding:26px;text-align:center;font-size:13px;color:var(--text-3);
}

/* ---------- 页脚数字条（原首页四个统计，挪到页脚保留） ---------- */

.footer-stats{
  max-width:var(--maxw);
  margin:0 auto;
  padding:28px 24px 0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(124px,1fr));
}
.footer-stats > div{
  padding:0 0 0 16px;
  border-left:1px solid var(--line);
  display:flex;flex-direction:column;gap:3px;
  position:relative;
}
.footer-stats > div:first-child{border-left:0;padding-left:0}
.footer-stats > div::before{
  content:"";
  position:absolute;top:-1px;left:0;
  width:1px;height:8px;
  background:var(--cyan);opacity:.7;
}
.footer-stats > div:first-child::before{display:none}
.footer-stats .k{
  font-family:var(--font-mono);
  font-size:10px;letter-spacing:.16em;
  color:var(--text-3);text-transform:uppercase;
}
.footer-stats .v{
  font-family:var(--font-mono);
  font-size:22px;line-height:1.15;
  color:var(--cyan);
  font-variant-numeric:tabular-nums;
}

/* ---------- 个人中心：页头右上角头像 ---------- */

.page-head-flex{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:26px;
  flex-wrap:wrap;
}
.me-card{
  display:flex;align-items:center;gap:14px;
  padding:12px 16px 12px 12px;
  border:1px solid var(--line);
  border-radius:999px;
  background:linear-gradient(180deg,var(--panel-hi),var(--panel));
}
.me-card .avatar{width:52px;height:52px;font-size:18px}
.me-card-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.me-card-name{
  font-family:var(--font-serif);font-weight:900;
  font-size:16px;line-height:1.2;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:190px;
}
.me-card-sub{font-size:11px;color:var(--text-3);letter-spacing:.06em}

/* ---------- 档案概览：简历式排版 ---------- */

.resume-top{
  display:flex;gap:22px;align-items:flex-start;flex-wrap:wrap;
}
.resume-id{flex:1 1 260px;min-width:0}
.resume-name{
  font-family:var(--font-serif);font-weight:900;
  font-size:clamp(22px,3.4vw,30px);line-height:1.15;
  letter-spacing:-.01em;
}
.resume-name-en{
  font-family:var(--font-times);
  font-size:14px;color:var(--text-3);
  margin-top:4px;letter-spacing:.04em;
}
.resume-role{
  margin-top:10px;font-size:13px;color:var(--text-2);
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.resume-bio{
  margin-top:14px;font-size:13.5px;line-height:1.85;color:var(--text-2);
  max-width:74ch;
}
.resume-sec{
  margin-top:24px;padding-top:18px;
  border-top:1px solid var(--line);
}
.resume-sec-head{
  display:flex;align-items:center;gap:9px;margin-bottom:14px;
}
.resume-sec-head h4{
  font-family:var(--font-mono);
  font-size:11px;letter-spacing:.18em;
  color:var(--text-3);text-transform:uppercase;
  margin:0;font-weight:600;
}
.resume-sec-head .rail{flex:1}
.resume-kv{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(196px,1fr));
  gap:12px 22px;
}
.resume-kv > div{min-width:0}
.resume-kv .k{
  font-family:var(--font-mono);
  font-size:10px;letter-spacing:.14em;
  color:var(--text-3);text-transform:uppercase;
}
.resume-kv .v{
  font-size:13.5px;color:var(--text);margin-top:3px;
  word-break:break-word;
}
.resume-list{display:flex;flex-direction:column;gap:10px}
.resume-item{
  padding:11px 14px;
  border:1px solid var(--line);
  border-left:2px solid var(--cyan-edge);
  border-radius:0 8px 8px 0;
  background:rgba(12,22,38,.5);
}
.resume-item-top{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;flex-wrap:wrap;
}
.resume-item-title{font-size:13.5px;color:var(--text);font-weight:600}
.resume-item-when{
  font-family:var(--font-mono);
  font-size:11px;color:var(--cyan);white-space:nowrap;
}
.resume-item-sub{font-size:12.5px;color:var(--text-2);margin-top:5px;line-height:1.7}
.resume-chips{display:flex;flex-wrap:wrap;gap:7px}
.resume-empty{font-size:13px;color:var(--text-3)}
.resume-foot{
  display:flex;gap:10px;flex-wrap:wrap;align-items:center;
  margin-top:8px;
}

/* ---------- 文件阅览 ---------- */

.file-list{display:flex;flex-direction:column;gap:10px}
.file-row{
  display:flex;align-items:center;gap:14px;
  padding:14px 16px;
  border:1px solid var(--line);
  border-radius:var(--r);
  background:linear-gradient(180deg,rgba(16,32,56,.5),rgba(12,22,38,.5));
  transition:border-color .3s var(--ease),transform .3s var(--ease);
}
.file-row:hover{border-color:var(--cyan-edge);transform:translateY(-2px)}
.file-ico{
  flex:none;width:38px;height:38px;
  display:flex;align-items:center;justify-content:center;
  border-radius:8px;
  border:1px solid var(--line-hi);
  background:var(--deep-2);
  color:var(--cyan);
}
.file-main{flex:1 1 auto;min-width:0}
.file-title{
  font-size:14.5px;font-weight:600;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.file-sub{
  font-family:var(--font-mono);
  font-size:11px;color:var(--text-3);
  margin-top:5px;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.file-cat{
  display:inline-block;
  padding:2px 8px;border-radius:999px;
  border:1px solid var(--line-hi);
  color:var(--text-2);font-size:10.5px;letter-spacing:.04em;
}
.file-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px 20px;margin-bottom:20px}
.file-meta > div{min-width:0}
.file-meta .k{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;
  color:var(--text-3);text-transform:uppercase;
}
.file-meta .v{font-family:var(--font-mono);font-size:19px;color:var(--cyan);margin-top:3px}
.file-actions{display:flex;gap:8px;flex:none;align-items:center;flex-wrap:wrap}
.file-lock{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12px;color:var(--text-3);
}
.file-note{
  display:flex;align-items:flex-start;gap:10px;
  padding:12px 14px;
  border:1px dashed var(--line-hi);
  border-radius:var(--r);
  font-size:12.5px;line-height:1.7;color:var(--text-2);
  margin-bottom:18px;
}
.file-cat-manage{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.file-cat-manage .cat-pill{
  display:inline-flex;align-items:center;gap:7px;
  padding:5px 6px 5px 12px;
  border:1px solid var(--line-hi);
  border-radius:999px;
  font-size:12.5px;color:var(--text);
}
.file-cat-manage .cat-pill button{
  width:18px;height:18px;padding:0;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;border:1px solid var(--line-hi);
  background:transparent;color:var(--text-3);
  font-size:11px;line-height:1;cursor:pointer;
  transition:all .25s var(--ease);
}
.file-cat-manage .cat-pill button:hover{
  border-color:rgba(248,113,113,.5);color:var(--red);
}


/* ---------- 通栏 ---------- */

.hero-rail{
  position:relative;
  z-index:1;
  max-width:var(--maxw);
  margin:clamp(34px,5vw,56px) auto 0;
  padding:0 24px;
}
.hero-rail .rail{position:relative}
.hero-rail .tick{
  position:absolute;
  top:0;
  width:1px;height:20px;
  background:var(--line-hi);
}
.hero-rail .tick span{
  position:absolute;
  top:24px;
  left:-7px;
  font-family:var(--font-mono);
  font-size:9.5px;
  color:var(--text-3);
  letter-spacing:.06em;
}

/* ---------- 卡片 ---------- */

.card{
  border:1px solid var(--line);
  border-radius:var(--r);
  background:var(--panel);
  transition:border-color .28s var(--ease),transform .28s var(--ease),background .28s var(--ease);
}
.card-hover:hover{
  border-color:var(--cyan-edge);
  background:var(--panel-hi);
  transform:translateY(-2px);
}

.grid{display:grid;gap:14px}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g-auto{grid-template-columns:repeat(auto-fill,minmax(238px,1fr))}

/* ---------- 成员卡 ---------- */

.member{
  display:block;
  padding:20px 18px 16px;
}
.member-top{display:flex;gap:15px;align-items:center;min-width:0}
.avatar{
  width:60px;height:60px;flex:none;
  border-radius:50%;
  border:1px solid var(--line-hi);
  background:
    repeating-linear-gradient(45deg,rgba(34,211,238,.07) 0 4px,transparent 4px 8px),
    var(--deep-2);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);
  font-size:16px;
  color:var(--cyan);
  overflow:hidden;
}
.avatar img{width:100%;height:100%;object-fit:cover}
.avatar-lg{width:104px;height:104px;font-size:26px}
.avatar-xl{width:132px;height:132px;font-size:32px}

/* 姓名与届别/职务必须纵向排列并各自截断：
   之前两者都是 inline，role 的 margin-top 不生效，长姓名会和后面的属性挤在一行重叠 */
.member-meta{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
  flex:1 1 auto;
}
.member-name{
  font-size:18px;
  font-weight:800;
  letter-spacing:-.005em;
  line-height:1.3;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.member-role{
  font-family:var(--font-mono);
  font-size:11.5px;
  color:var(--text-3);
  letter-spacing:.07em;
  margin-top:5px;
  line-height:1.35;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
/* 研究方向：标签固定（思源宋体 Heavy）+ 方向内容，横排、可换行，不再截断 */
.member-dir{
  margin-top:15px;
  display:flex;
  align-items:baseline;
  gap:8px;
  flex-wrap:wrap;
}
.member-dir-k{
  font-family:var(--font-serif);
  font-weight:900;
  font-size:13px;
  letter-spacing:.02em;
  color:var(--cyan);
  flex:none;
  white-space:nowrap;
}
.member-dir-v{
  font-family:var(--font-serif);
  font-weight:900;
  font-size:15px;
  line-height:1.55;
  color:var(--text);
  min-width:0;
}
.member-foot{
  margin-top:16px;
  padding-top:12px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}
.member-foot .stat{font-family:var(--font-mono);font-size:11.5px;color:var(--text-3)}
.member-foot .go{font-family:var(--font-mono);font-size:11.5px;color:var(--cyan)}

/* ---------- 标签 ---------- */

.tag{
  display:inline-flex;
  align-items:center;
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.06em;
  padding:3px 8px;
  border-radius:5px;
  border:1px solid var(--line-hi);
  color:var(--text-2);
  background:rgba(255,255,255,.02);
}
.tag-cyan{border-color:var(--cyan-edge);color:var(--cyan);background:var(--cyan-soft)}
.tag-amber{border-color:rgba(239,159,39,.35);color:var(--amber);background:rgba(239,159,39,.08)}
.tag-plain{border-color:transparent;background:rgba(255,255,255,.04)}
.tag-row{display:flex;flex-wrap:wrap;gap:6px}

/* ---------- 筛选栏 ---------- */

.filter{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  margin-bottom:24px;
}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{
  font-family:var(--font-mono);
  font-size:12px;
  padding:7px 13px;
  border-radius:7px;
  border:1px solid var(--line);
  color:var(--text-2);
  transition:all .2s var(--ease);
  white-space:nowrap;
}
.chip:hover{border-color:var(--line-hi);color:var(--text)}
.chip[aria-pressed="true"]{
  border-color:var(--cyan-edge);
  background:var(--cyan-soft);
  color:var(--cyan);
}

.field{
  display:flex;
  align-items:center;
  gap:8px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--panel);
  padding:0 12px;
  height:38px;
  transition:border-color .2s var(--ease);
}
.field:focus-within{border-color:var(--cyan-edge);background:var(--panel-hi)}
.field input{
  border:0;background:none;outline:none;
  width:180px;font-size:13.5px;
}
.field input::placeholder{color:var(--text-3)}
.field svg{flex:none;opacity:.55}
/* 筛选栏里的「年份 / 级别」等字段标签：思源宋体 Heavy，横排贴在控件左侧 */
.field .eyebrow-dim{
  font-family:var(--font-serif);
  font-weight:900;
  font-size:13px;
  letter-spacing:.06em;
  color:var(--text-2);
  white-space:nowrap;
}

/* ---------- 届别分组 ---------- */

.cohort{margin-bottom:34px}
.cohort-head{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:16px;
}
.cohort-year{
  font-family:var(--font-serif);
  font-weight:900;
  font-size:19px;
  color:var(--cyan);
  letter-spacing:.01em;
  flex:none;
  white-space:nowrap;
}
.cohort-line{flex:1;height:1px;background:var(--line)}
.cohort-meta{font-family:var(--font-mono);font-size:11px;color:var(--text-3);flex:none}
.cohort-alumni .cohort-year{color:var(--text-3)}
.cohort-alumni .member{opacity:.72}
.cohort-alumni .member:hover{opacity:1}

/* ---------- 获奖 ---------- */

/* 年份 / 级别 / 类型一律横向排布。
   旧版是 3 列 grid，窄窗口会塌成单列 —— 年份、级别就被压成上下竖排，
   这里改成 flex 且不允许换列，任何宽度下都保持一行。 */
.award{
  display:flex;
  align-items:stretch;
  gap:10px 20px;
  padding:16px 0;
  border-bottom:1px solid var(--line);
  transition:background .24s var(--ease);
}
.award:hover{background:rgba(34,211,238,.03)}
.award-main{flex:1 1 auto;min-width:0}

/* 顶部横排：年份 → 类型（带小图标）→ 审核状态 */
.award-top{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:7px;
}
.award-date{
  font-family:var(--font-serif);
  font-weight:900;
  font-size:15px;
  letter-spacing:.01em;
  color:var(--cyan);
  white-space:nowrap;
  flex:none;
}
.award-kind{
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-family:var(--font-serif);
  font-weight:900;
  font-size:12.5px;
  letter-spacing:.02em;
  color:var(--text-2);
  white-space:nowrap;
}
.award-status{
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.08em;
  color:var(--text-3);
  white-space:nowrap;
}
.award-title{font-size:15px;line-height:1.5}
.award-sub{margin-top:6px;font-size:12.5px;color:var(--text-3);line-height:1.6}
/* 右列：佐证材料（获奖证书 / 论文封面 / 专利文件…）挪到这里，
   管理端的审核 / 编辑 / 删除按钮也在这一列。 */
.award-side{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  justify-content:center;
  gap:8px;
  flex:none;
  margin-left:auto;
  min-width:0;
}
.award-actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
/* max-width 要跟着 .proof-thumb 走：3 张 104 + 2×8 间隙 = 328，留一点余量给边框 */
.award-side .proof-strip{margin-top:0;justify-content:flex-end;max-width:340px}

/* 等级标签挪到左侧后换思源宋体 Heavy，和年份的观感对齐 */
.award-top .tag{
  font-family:var(--font-serif);
  font-weight:900;
  font-size:12.5px;
  letter-spacing:.02em;
  padding:4px 11px;
}

/* 竞赛名录等级（中国大学生竞赛名录 A1 / A2 / A3 / B1 / B2 / B）：青色描边徽标 */
.award-rank{
  display:inline-flex;
  align-items:baseline;
  gap:5px;
  flex:none;
  white-space:nowrap;
  padding:3px 10px;
  border:1px solid var(--cyan-edge);
  border-radius:999px;
  background:var(--cyan-soft);
  color:var(--cyan);
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.02em;
}
.award-rank-k{font-size:10px;color:var(--text-3);letter-spacing:.06em}

/* 窄屏：右侧那一列沉到下面一行，别把标题挤成一条缝 */
@media (max-width:720px){
  .award{flex-wrap:wrap}
  .award-main{flex:1 1 100%}
  .award-side{width:100%;align-items:flex-start;margin-left:0}
  .award-side .proof-strip{justify-content:flex-start;max-width:none}
  .award-actions{justify-content:flex-start}
}

/* 成果类型小图标：细线白描边，列表行与分组头共用一套 */
.kind-ico{display:inline-flex;align-items:center;justify-content:center;flex:none;line-height:0}
.kind-ico-svg{display:block;stroke:currentColor}
.award-kind .kind-ico{color:var(--cyan)}
.award-group-head .kind-ico{color:var(--cyan)}

/* 佐证材料缩略图（获奖证书 / 论文封面 / 专利文件…） */
.proof-strip{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.proof-thumb{
  width:104px;height:76px;flex:none;
  border:1px solid var(--line-hi);
  border-radius:8px;
  background-color:var(--deep-2);
  background-size:cover;
  background-position:center;
  cursor:zoom-in;
  padding:0;
  transition:border-color .2s var(--ease),transform .2s var(--ease);
}
.proof-thumb:hover{border-color:var(--cyan-edge);transform:translateY(-2px)}

/* 时间线（档案页） */
.tl{position:relative;padding-left:22px}
.tl::before{
  content:"";position:absolute;left:4px;top:6px;bottom:6px;
  width:1px;background:var(--line-hi);
}
.tl-item{position:relative;padding-bottom:20px}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{
  content:"";position:absolute;left:-22px;top:7px;
  width:9px;height:9px;border-radius:50%;
  border:1px solid var(--cyan);
  background:var(--deep);
}
.tl-y{
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--cyan);
  letter-spacing:.08em;
}
.tl-t{font-size:14.5px;margin-top:3px}
.tl-d{font-size:13px;color:var(--text-2);margin-top:3px;line-height:1.65}

/* 定义列表 */
.dl{display:grid;grid-template-columns:96px minmax(0,1fr);gap:0}
.dl dt{
  font-size:12.5px;
  color:var(--text-3);
  padding:11px 0;
  border-bottom:1px solid var(--line);
}
.dl dd{
  margin:0;
  font-size:13.5px;
  padding:11px 0;
  border-bottom:1px solid var(--line);
  color:var(--text);
}

/* ---------- 照片 ---------- */

.photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(216px,1fr));gap:12px}
.photo{
  position:relative;
  aspect-ratio:4/3;
  border-radius:9px;
  border:1px solid var(--line);
  overflow:hidden;
  background:
    linear-gradient(135deg,rgba(34,211,238,.06),transparent 55%),
    repeating-linear-gradient(45deg,rgba(255,255,255,.022) 0 6px,transparent 6px 12px),
    var(--panel);
  display:flex;
  align-items:flex-end;
  padding:12px;
  transition:all .3s var(--ease);
}
.photo:hover{border-color:var(--cyan-edge);transform:translateY(-2px)}
.photo::after{
  content:"";
  position:absolute;top:10px;right:10px;
  width:7px;height:7px;
  border-top:1px solid var(--cyan);
  border-right:1px solid var(--cyan);
  opacity:.6;
}
.photo-meta{position:relative;z-index:1}
.photo-idx{
  font-family:var(--font-mono);
  font-size:10px;
  color:var(--cyan);
  letter-spacing:.14em;
  display:block;
  margin-bottom:3px;
}
.photo-cap{font-size:13px;color:var(--text)}
.photo-date{
  font-family:var(--font-mono);
  font-size:10.5px;
  color:var(--text-3);
  margin-top:2px;
}
.photo-lg{aspect-ratio:16/10;grid-column:span 2}

/* 照片星标按钮（管理员收藏） */
.photo-star{
  position:absolute;
  top:8px;right:8px;
  z-index:3;
  width:30px;height:30px;
  border-radius:8px;
  border:1px solid var(--line-hi);
  background:rgba(5,10,20,.72);
  color:var(--text-3);
  font-size:15px;
  line-height:1;
  cursor:pointer;
  transition:all .2s var(--ease);
}
.photo-star:hover{color:#FFD666;border-color:rgba(255,214,102,.5)}
.photo-star.on{color:#FFD666;border-color:rgba(255,214,102,.55);background:rgba(60,42,6,.72)}

/* ---------- 相册（叠放封皮） ---------- */

.albums{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(232px,1fr));
  gap:22px 16px;
}
.album-card{
  position:relative;
  display:block;
  text-align:left;
  background:none;
  border:0;
  padding:0;
  cursor:pointer;
  font:inherit;
  color:inherit;
  -webkit-tap-highlight-color:transparent;
}
.album-pile{
  position:relative;
  display:block;
  aspect-ratio:4/3;
}
/* 叠放效果：两张「压在底下」的照片斜着露出边 */
.album-pile .pile{
  position:absolute;
  inset:0;
  border-radius:10px;
  border:1px solid var(--line);
  background:
    repeating-linear-gradient(45deg,rgba(255,255,255,.022) 0 6px,transparent 6px 12px),
    var(--panel);
}
.album-pile .p2{transform:rotate(2.6deg) translate(5px,4px)}
.album-pile .p1{transform:rotate(-2.2deg) translate(-5px,3px)}
.album-pile .cover{
  transform:none;
  background-size:cover;
  background-position:center;
  overflow:hidden;
  transition:transform .3s var(--ease),border-color .3s var(--ease);
}
.album-card:hover .cover{transform:translateY(-4px);border-color:var(--cyan-edge)}
.album-card:hover .album-name{color:var(--cyan)}
.album-count{
  position:absolute;
  right:9px;bottom:9px;
  z-index:2;
  font-size:10.5px;
  letter-spacing:.1em;
  color:#C8F4FF;
  background:rgba(5,10,20,.78);
  border:1px solid var(--line-hi);
  border-radius:999px;
  padding:3px 9px;
}
.album-star-badge{
  position:absolute;
  left:9px;top:9px;
  z-index:2;
  font-size:12px;
  color:#FFD666;
  background:rgba(30,22,4,.78);
  border:1px solid rgba(255,214,102,.4);
  border-radius:999px;
  padding:3px 10px;
}
/* 相册可见权限徽标（成员可见 / 仅自己可见） */
.album-vis{
  display:inline-flex;
  align-items:center;
  gap:4px;
  align-self:flex-start;
  font-size:10.5px;
  letter-spacing:.06em;
  border-radius:999px;
  padding:2px 9px;
  margin-top:2px;
}
.album-vis.vis-members{
  color:#9BE8FF;
  background:rgba(8,32,44,.7);
  border:1px solid rgba(80,200,255,.35);
}
.album-vis.vis-private{
  color:#F3C6C6;
  background:rgba(40,12,12,.7);
  border:1px solid rgba(248,113,113,.4);
}
.album-name{
  display:block;
  margin-top:12px;
  font-size:14.5px;
  font-weight:700;
  color:var(--text);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  transition:color .22s var(--ease);
}
.album-sub{
  display:block;
  margin-top:3px;
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--text-3);
  letter-spacing:.06em;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
/* 星标相册没有封面时给一个暗金渐变 */
.album-pile .cover.cover-star{
  background:
    radial-gradient(120% 90% at 20% 0%,rgba(255,214,102,.16),transparent 55%),
    repeating-linear-gradient(45deg,rgba(255,214,102,.03) 0 6px,transparent 6px 12px),
    var(--panel);
}

/* ---------- 星标照片条（活动影像页顶部） ---------- */

/* 相册内页头部：返回 + 标题 + 元信息 + 编辑 */
.album-open-head{
  display:flex;
  align-items:center;
  gap:14px;
  margin:4px 0 20px;
  flex-wrap:wrap;
}
.album-open-title{min-width:0}
.album-open-title h2{margin:0;font-size:20px;letter-spacing:.02em}
.album-open-title p{margin:3px 0 0;font-size:11.5px;color:var(--text-3);letter-spacing:.08em}

.star-strip{margin:0 0 30px}
.star-strip-head{
  display:flex;
  align-items:baseline;
  gap:12px;
  margin-bottom:12px;
}
.star-strip-head h3{
  margin:0;
  font-size:17px;
  letter-spacing:.02em;
}
.star-strip-head .star-link{
  margin-left:auto;
  font-size:12.5px;
  color:var(--cyan);
  text-decoration:none;
}
.star-strip-head .star-link:hover{text-decoration:underline}
.star-row{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(168px,1fr));
  gap:10px;
}
.star-row .photo{aspect-ratio:4/3;padding:8px}
.star-row .photo-cap{font-size:12px}

.album-head{
  display:flex;align-items:center;gap:12px;
  margin:30px 0 14px;
}

/* ---------- 成果一览：年份组内的类型分块 ---------- */

.award-summary{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  margin:20px 0 22px;
  min-height:26px;
}

.award-group{margin:0 0 6px}
.award-group + .award-group{margin-top:2px}
.award-group-head{
  display:flex;align-items:center;gap:9px;
  margin:16px 0 2px;
  padding-left:9px;
  border-left:2px solid var(--cyan-edge);
}
.award-group-head .mono{
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--cyan);
}
.award-group-n{
  font-size:10.5px;
  color:var(--text-3);
  border:1px solid var(--line);
  border-radius:20px;
  padding:1px 7px;
}

/* ---------- 上传缩略图（带审核状态） ---------- */

.thumb-wrap{display:flex;flex-direction:column;gap:5px;width:150px}
.thumb-wrap .photo{width:150px;aspect-ratio:4/3}
.thumb-side{
  display:flex;align-items:center;justify-content:space-between;gap:6px;
  min-width:0;
}
.thumb-side .mono{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.thumb-side .btn{padding:3px 8px;font-size:11px}
.thumb-flag{
  position:absolute;left:4px;bottom:4px;z-index:2;
  font-family:var(--font-mono);
  font-size:9.5px;letter-spacing:.1em;
  padding:1px 6px;border-radius:20px;
  background:rgba(4,10,20,.86);
  border:1px solid var(--line-hi);
  color:var(--amber);
}

@media (max-width:620px){
  .award-group-head{margin-top:14px}
  .thumb-wrap,.thumb-wrap .photo{width:100%}
  .thumb-strip{gap:12px}
  .thumb-wrap{width:calc(50% - 6px)}
}

/* ---------- 空状态 ---------- */

.empty{
  border:1px dashed var(--line-hi);
  border-radius:var(--r);
  padding:46px 24px;
  text-align:center;
  color:var(--text-3);
  font-size:13.5px;
}
.empty .mono{display:block;color:var(--cyan);font-size:11px;letter-spacing:.2em;margin-bottom:10px}

.notice{
  display:flex;
  align-items:flex-start;
  gap:10px;
  border:1px solid rgba(239,159,39,.3);
  background:rgba(239,159,39,.06);
  border-radius:9px;
  padding:11px 14px;
  font-size:12.5px;
  color:#F3D9A8;
  margin-bottom:22px;
}
.notice .mono{color:var(--amber);flex:none;font-size:11px;letter-spacing:.1em;padding-top:2px}

/* ---------- 表单 ---------- */

.form-card{
  max-width:440px;
  margin:0 auto;
  border:1px solid var(--line);
  border-radius:var(--r);
  background:var(--panel);
  padding:28px;
}
.form-row{margin-bottom:15px}
.form-row label{
  display:block;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.12em;
  color:var(--text-3);
  text-transform:uppercase;
  margin-bottom:7px;
}
.input,.select,.textarea{
  width:100%;
  background:var(--deep-2);
  border:1px solid var(--line);
  border-radius:8px;
  padding:10px 12px;
  font-size:14px;
  outline:none;
  transition:border-color .2s var(--ease),background .2s var(--ease);
}
.input:focus,.select:focus,.textarea:focus{border-color:var(--cyan-edge);background:var(--panel)}
.textarea{min-height:96px;resize:vertical;line-height:1.65}
.help{font-size:12px;color:var(--text-3);margin-top:6px}
.form-foot{
  margin-top:20px;padding-top:18px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
  font-size:13px;color:var(--text-3);
}
.link-cyan{color:var(--cyan)}
.link-cyan:hover{text-decoration:underline}

/* 分段控件 */
.seg{
  display:inline-flex;
  border:1px solid var(--line);
  border-radius:8px;
  overflow:hidden;
  background:var(--panel);
}
.seg button{
  padding:8px 15px;
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--text-2);
  transition:all .2s var(--ease);
  border-right:1px solid var(--line);
}
.seg button:last-child{border-right:0}
.seg button[aria-selected="true"]{background:var(--cyan-soft);color:var(--cyan)}

/* ---------- 个人中心 ---------- */

.dash{
  display:grid;
  grid-template-columns:216px minmax(0,1fr);
  gap:26px;
  align-items:start;
}
.side{
  border:1px solid var(--line);
  border-radius:var(--r);
  background:var(--panel);
  padding:8px;
  position:sticky;
  top:calc(var(--nav-h) + 18px);
}
.side button{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  text-align:left;
  padding:9px 12px;
  border-radius:7px;
  font-size:13.5px;
  color:var(--text-2);
  transition:all .2s var(--ease);
}
.side button:hover{background:rgba(34,211,238,.06);color:var(--text)}
.side button[aria-selected="true"]{background:var(--cyan-soft);color:var(--cyan)}
.side .idx{font-family:var(--font-mono);font-size:10.5px;color:var(--text-3)}
.side button[aria-selected="true"] .idx{color:var(--cyan)}
/* 侧栏底部常驻的退出入口：任何页签都看得见 */
.side-logout{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  margin-top:6px;
  padding:11px 12px 9px;
  border-top:1px solid var(--line);
  font-size:13px;
  color:var(--text-3);
  transition:all .2s var(--ease);
}
.side-logout:hover{color:var(--cyan);background:rgba(34,211,238,.06)}

/* ---------- 管理后台的子目录 ----------
   把原来一长条要上下拖动的板块拆成独立子页面，这里只放导航条；
   每个子页面用 [data-subpane] 控制显隐（见 dashboard.html）。 */
.admin-sub{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  padding:7px;
  margin-bottom:16px;
  border:1px solid var(--line);
  border-radius:var(--r);
  background:var(--panel);
}
.admin-sub button{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:8px 13px;
  border-radius:7px;
  font-size:13px;
  color:var(--text-2);
  transition:all .2s var(--ease);
}
.admin-sub button:hover{background:rgba(34,211,238,.06);color:var(--text)}
.admin-sub button[aria-selected="true"]{background:var(--cyan-soft);color:var(--cyan)}
.admin-sub .idx{font-family:var(--font-mono);font-size:10.5px;color:var(--text-3)}
.admin-sub button[aria-selected="true"] .idx{color:var(--cyan)}
/* 待审数量：即使人在别的子页面也能一眼看到有活要干 */
.admin-sub .sub-n{
  min-width:17px;
  padding:1px 5px;
  border-radius:9px;
  font-family:var(--font-mono);
  font-size:10.5px;
  line-height:1.45;
  text-align:center;
  background:rgba(239,159,39,.16);
  color:var(--amber);
}
.admin-sub .sub-n[hidden]{display:none}

.panel{
  border:1px solid var(--line);
  border-radius:var(--r);
  background:var(--panel);
  padding:24px;
}
.panel + .panel{margin-top:16px}
.panel-head{
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--line);
  flex-wrap:wrap;
}
.panel-title{font-size:16px}

.progress{
  height:3px;background:var(--line);border-radius:2px;overflow:hidden;
}
.progress i{display:block;height:100%;background:var(--cyan);border-radius:2px}

/* ---------- 页脚 ---------- */

.footer{
  position:relative;
  z-index:1;
  margin-top:clamp(64px,9vw,110px);
  border-top:1px solid var(--line);
  background:var(--deep-2);
}
.footer-in{
  max-width:var(--maxw);
  margin:0 auto;
  padding:44px 24px 26px;
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);
  gap:32px;
}
.footer h4{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.18em;
  color:var(--text-3);
  text-transform:uppercase;
  margin-bottom:13px;
}
.footer p,.footer li{font-size:13px;color:var(--text-2);line-height:1.9}
/* 页脚里实验室正式名：比分正文亮一档，站名该有的分量 */
.footer-lab{color:var(--text);font-weight:600;letter-spacing:.01em}
.footer ul{list-style:none;padding:0;margin:0}
.footer a:hover{color:var(--cyan)}
.footer-bar{
  border-top:1px solid var(--line);
  max-width:var(--maxw);
  margin:0 auto;
  padding:16px 24px;
  display:flex;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--text-3);
  letter-spacing:.06em;
}
/* ICP 备案号：法定展示，链接到工信部备案系统 */
.footer-bar .icp{color:inherit;text-decoration:none;transition:color .2s}
.footer-bar .icp:hover{color:var(--cyan);text-decoration:underline}

/* ---------- 灯箱 ---------- */

.lightbox{
  position:fixed;
  inset:0;
  z-index:200;
  background:rgba(3,7,14,.9);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  display:none;
  align-items:center;
  justify-content:center;
  padding:32px;
}
.lightbox.open{display:flex}
.lightbox-body{max-width:min(1100px,94vw)}
/* 原图直出：完整显示不裁剪，最大不超过视口 */
.lightbox-img{
  display:block;
  max-width:min(1100px,94vw);
  max-height:76vh;
  border-radius:12px;
  border:1px solid var(--line);
  background:var(--panel);
  margin:0 auto;
}
.lightbox-stage .lightbox-tile{
  width:min(860px,88vw);
  aspect-ratio:16/10;
  border-radius:12px;
  grid-column:auto;
  cursor:default;
}
.lightbox-stage .lightbox-tile:hover{transform:none;border-color:var(--line)}
.lightbox-cap{
  margin-top:14px;
  text-align:center;
  font-size:14px;
  color:var(--text-2);
}
.lightbox-close{
  position:absolute;
  top:22px;right:24px;
  width:38px;height:38px;
  border:1px solid var(--line-hi);
  border-radius:8px;
  color:var(--text-2);
  font-size:15px;
  transition:all .2s var(--ease);
}
.lightbox-close:hover{color:var(--cyan);border-color:var(--cyan-edge)}

.is-hidden{display:none !important}

/* ---------- 动画 ---------- */

.reveal{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .6s var(--ease),transform .6s var(--ease);
}
.reveal.in{opacity:1;transform:none}

.page-head{
  position:relative;
  z-index:1;
  max-width:var(--maxw);
  margin:0 auto;
  padding:clamp(34px,5vw,56px) 24px 0;
}
.page-head h1{font-size:clamp(28px,5vw,42px);letter-spacing:-.02em}
.page-head .lead{margin-top:14px;color:var(--text-2);max-width:66ch}

.breadcrumb{
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--text-3);
  letter-spacing:.1em;
  margin-bottom:14px;
}
.breadcrumb a:hover{color:var(--cyan)}
.breadcrumb span{margin:0 7px;opacity:.5}

/* ---------- 照片底部压暗，保证说明文字可读 ---------- */

.photo::before{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:62%;
  background:linear-gradient(to top,rgba(4,10,20,.9),rgba(4,10,20,.35) 55%,transparent);
  pointer-events:none;
}

/* ---------- 提示条 ---------- */

.toast-box{
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:400;
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:flex-end;
  pointer-events:none;
}
.toast{
  max-width:min(360px,86vw);
  background:var(--panel-hi);
  border:1px solid var(--cyan-edge);
  border-radius:9px;
  padding:11px 15px;
  font-size:13.5px;
  color:var(--text);
  box-shadow:0 6px 26px rgba(0,0,0,.45);
  animation:toast-in .32s var(--ease) both;
}
.toast-error{border-color:rgba(248,113,113,.45);color:#FCC9C9}
.toast-ok{border-color:rgba(52,211,153,.45);color:#C8F5E4}
.toast.out{opacity:0;transform:translateY(6px);transition:all .4s var(--ease)}

@keyframes toast-in{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:none}
}

/* ---------- 弹窗 ---------- */

.modal{
  position:fixed;
  inset:0;
  z-index:300;
  background:rgba(3,7,14,.86);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:5vh 20px;
  overflow:auto;
}
.modal-card{
  width:100%;
  max-width:560px;
  background:var(--panel);
  border:1px solid var(--line-hi);
  border-radius:var(--border-radius-lg,12px);
  overflow:hidden;
  animation:modal-in .3s var(--ease) both;
}
@keyframes modal-in{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}
}
.modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:16px 20px;
  border-bottom:1px solid var(--line);
}
.modal-head h3{font-size:15.5px;font-weight:700}
.modal-close{
  width:32px;height:32px;
  border:1px solid var(--line-hi);
  border-radius:7px;
  color:var(--text-2);
  font-size:13px;
  transition:all .2s var(--ease);
}
.modal-close:hover{color:var(--cyan);border-color:var(--cyan-edge)}
.modal-body{padding:20px;max-height:70vh;overflow:auto}

/* ---------- 头像圆形裁剪 ---------- */

.crop-wrap{display:flex;flex-direction:column;gap:16px;align-items:center}
.crop-stage{
  position:relative;
  width:min(320px,74vw);
  height:min(320px,74vw);
  border-radius:12px;
  overflow:hidden;
  background:
    repeating-linear-gradient(45deg,rgba(255,255,255,.03) 0 6px,transparent 6px 12px),
    var(--deep-2);
  cursor:grab;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
}
.crop-stage.dragging{cursor:grabbing}
.crop-stage canvas{display:block;width:100%;height:100%}
/* 圆环内是最终保留的画面，环外用一张超大 box-shadow 压暗做蒙版 */
.crop-ring{
  position:absolute;
  inset:var(--crop-pad,26px);
  border-radius:50%;
  border:1.5px solid var(--cyan-edge);
  box-shadow:0 0 0 9999px rgba(3,7,14,.68);
  pointer-events:none;
}
.crop-zoom-row{display:flex;align-items:center;gap:12px;width:min(320px,74vw)}
.crop-zoom-row .mono{flex:none;font-size:11px;letter-spacing:.08em;color:var(--text-3)}
.crop-zoom{flex:1;accent-color:var(--cyan)}
.crop-foot{display:flex;gap:10px;justify-content:flex-end;width:100%}

/* ---------- 上传区 ---------- */

.upload-zone{
  border:1px dashed var(--line-hi);
  border-radius:var(--r);
  padding:26px 20px;
  text-align:center;
  cursor:pointer;
  transition:all .24s var(--ease);
  background:rgba(255,255,255,.015);
  /* 让「UPLOAD / 主提示 / 补充说明」各占一行，不要挤成一行 */
  display:flex;
  flex-direction:column;
  align-items:center;
}
.upload-zone:hover,.upload-zone.drag{
  border-color:var(--cyan-edge);
  background:var(--cyan-soft);
}
.upload-zone .big{display:block;font-size:13.5px;color:var(--text);line-height:1.6}
.upload-zone .mono{display:block;font-size:10.5px;letter-spacing:.18em;color:var(--cyan);margin-bottom:8px}
.upload-zone .small{display:block;font-size:12px;color:var(--text-3);margin-top:6px;line-height:1.6}

/* ---------- 成果佐证材料上传位（获奖证书 / 论文封面 / 专利文件…） ---------- */

.proof-block{
  border:1px dashed var(--line-hi);
  border-radius:var(--r);
  padding:14px;
  background:rgba(255,255,255,.015);
}
.proof-slots{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.proof-slot{
  position:relative;
  width:104px;height:78px;
  flex:none;
  border-radius:8px;
  overflow:hidden;
}
.proof-slot-img{
  display:block;
  width:100%;height:100%;
  background-size:cover;
  background-position:center;
  background-color:var(--deep-2);
  border:1px solid var(--line-hi);
  border-radius:8px;
}
.proof-slot-del{
  position:absolute;
  right:4px;top:4px;
  z-index:2;
  width:20px;height:20px;
  padding:0;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(6,12,22,.6);
  border-radius:50%;
  background:rgba(6,12,22,.78);
  color:var(--text-2);
  font-size:11px;line-height:1;
  cursor:pointer;
  transition:background .2s var(--ease),color .2s var(--ease);
}
.proof-slot-del:hover{background:var(--red);color:#fff;border-color:var(--red)}
.proof-slot-add{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  border:1px dashed var(--line-hi);
  background:transparent;
  color:var(--text-3);
  font-size:11.5px;
  cursor:pointer;
  transition:all .22s var(--ease);
}
.proof-slot-add .mono{color:var(--cyan);font-size:19px}
.proof-slot-add:hover{border-color:var(--cyan-edge);background:var(--cyan-soft);color:var(--text-2)}

.thumb-strip{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.thumb{
  position:relative;
  width:84px;height:64px;
  border-radius:7px;
  border:1px solid var(--line);
  background-size:cover;
  background-position:center;
  overflow:hidden;
}
.thumb button{
  position:absolute;top:3px;right:3px;
  width:19px;height:19px;
  border-radius:5px;
  background:rgba(4,10,20,.82);
  border:1px solid var(--line-hi);
  color:var(--text-2);
  font-size:10px;
  line-height:1;
}
.thumb button:hover{color:var(--red);border-color:rgba(248,113,113,.5)}
.thumb .thumb-star{right:26px;font-size:11px}
.thumb .thumb-star:hover{color:var(--gold,#FFD666);border-color:rgba(255,214,102,.55)}
.thumb .thumb-star.on{color:#FFD666;border-color:rgba(255,214,102,.7);background:rgba(60,42,4,.85)}

/* ---------- 管理列表行 ---------- */

.admin-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:16px;
  align-items:center;
  padding:14px 0;
  border-bottom:1px solid var(--line);
}
.admin-row:last-child{border-bottom:0}
.admin-row-main{display:flex;gap:12px;align-items:center;min-width:0}
.admin-row-title{font-size:14.5px}
.admin-row-sub{font-size:12.5px;color:var(--text-3);margin-top:3px;line-height:1.6}
.admin-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}

/* ---------- 表单栅格 ---------- */

.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.form-grid .full{grid-column:1 / -1}
.check-line{display:flex;gap:9px;align-items:center;font-size:13.5px;color:var(--text-2)}

/* ---------- 其它 ---------- */

.badge{
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.08em;
  padding:3px 8px;
  border-radius:5px;
  border:1px solid var(--line-hi);
  color:var(--text-3);
}
.badge-amber{border-color:rgba(239,159,39,.4);color:var(--amber);background:rgba(239,159,39,.07)}
.badge-green{border-color:rgba(52,211,153,.35);color:var(--green)}
.badge-red{border-color:rgba(248,113,113,.35);color:var(--red)}

.hint{font-size:12.5px;color:var(--text-3);line-height:1.7}
.center-note{text-align:center;padding:34px 20px;color:var(--text-3);font-size:13.5px}
.loading{opacity:.45;transition:opacity .3s var(--ease)}

.photo-none{
  grid-column:1 / -1;
  border:1px dashed var(--line-hi);
  border-radius:9px;
  padding:28px;
  text-align:center;
  font-size:13px;
  color:var(--text-3);
}

.track-card{padding:20px}
.track-card h3{font-size:16px;margin-top:12px}
.track-card p{margin-top:9px;font-size:13px;color:var(--text-2);line-height:1.75}

/* ---------- 响应式 ---------- */

@media (max-width:1000px){
  .hero-grid{grid-template-columns:minmax(0,1fr)}
  .hero-mark{max-width:340px}
  .dash{grid-template-columns:minmax(0,1fr)}
  .side{position:static;display:flex;gap:4px;overflow-x:auto}
  .side button{width:auto;flex:none}
  .side-logout{
    width:auto;flex:none;margin-top:0;
    padding:9px 12px 9px 15px;
    border-top:0;border-left:1px solid var(--line);
  }
  .footer-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media (max-width:860px){
  .nav-links{display:none}
  .nav-toggle{display:flex}
  /* 窄屏顶栏只留「中/EN + 汉堡」，登录态按钮收进下拉菜单，避免顶栏挤爆 */
  .nav-side > .btn-sm,.nav-side > .btn{display:none}
  .nav.open .nav-links .nav-mob{display:block;color:var(--text-2)}
  .nav.open .nav-links .nav-mob[data-logout]{color:var(--text)}
  .nav.open .nav-links{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    position:absolute;
    top:var(--nav-h);
    left:0;right:0;
    background:rgba(6,12,22,.98);
    border-bottom:1px solid var(--line);
    padding:12px 20px 18px;
    gap:2px;
  }
  .nav.open .nav-links a{padding:11px 12px}
  .nav.open .nav-links a[aria-current="page"]::after{left:12px;right:auto;width:3px;bottom:11px;top:11px;height:auto}
  .g-3,.g-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .readout{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:22px}
  .readout > div:nth-child(3){border-left:0;padding-left:0}
  /* 年份 / 级别 / 名录等级即使在小窗口也要横排，只是把间距收紧一些 */
  .award{gap:8px 12px}
  .award-date{font-size:14px}
  .award-top .tag{font-size:11.5px;padding:3px 9px}
  .award-rank{font-size:11px;padding:2px 8px}
  /* 窄屏只放得下 2 张：2×104 + 8 间隙 */
  .award-side .proof-strip{max-width:216px}
  .photo-lg{grid-column:span 1}
}
@media (max-width:620px){
  .wrap,.sec,.hero,.page-head{padding-left:18px;padding-right:18px}
  .g-2,.g-3,.g-4{grid-template-columns:minmax(0,1fr)}
  .readout{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-in{grid-template-columns:minmax(0,1fr)}
  /* 中文标题不吃负字距，横排的英文行在小屏上收紧一点才不溢出 */
  .hero-title{letter-spacing:0}
  .hero-title .ht-en{letter-spacing:.20em}
  .dl{grid-template-columns:minmax(0,1fr);gap:0}
  .dl dt{padding-bottom:0;border-bottom:0}
  .dl dd{padding-top:2px}
  .form-grid{grid-template-columns:minmax(0,1fr)}
  .admin-row{grid-template-columns:minmax(0,1fr)}
  .admin-actions{justify-content:flex-start}
  .modal{padding:16px}
  .toast-box{right:14px;left:14px;bottom:14px;align-items:stretch}
  .toast{max-width:none}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
}

/* ============================================================
   全站动态背景
   内容层（.nav/.sec/.wrap/.page-head/.footer）都在 z-index:1 以上，
   背景层固定在 0，pointer-events:none，不挡点击也不抢焦点。
   1) body::after —— 三团青蓝辉光缓慢漂移（纯 CSS，GPU 合成）
   2) #bgFx —— canvas 星点 + 邻近连线 + 极慢自转的轨道弧
   ============================================================ */

body::after{
  content:"";
  position:fixed;
  inset:-20vmax;
  /* 注意：z-index 必须为负。卡片（.panel/.card/.member）是 static 定位，
     若背景层用 z-index:0 就会盖到卡片正面，星点会像脏点一样糊在内容上。
     负值让它沉到所有常规内容之下，只在页头、留白与卡片缝隙里透出来。 */
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(38vmax 30vmax at 22% 24%,rgba(34,211,238,.17),transparent 62%),
    radial-gradient(34vmax 28vmax at 78% 70%,rgba(64,124,255,.145),transparent 64%),
    radial-gradient(24vmax 20vmax at 64% 12%,rgba(239,159,39,.075),transparent 66%);
  filter:blur(9px);
  animation:bg-drift 38s ease-in-out infinite alternate;
  will-change:transform;
}

@keyframes bg-drift{
  0%{transform:translate3d(-3.4%,-2.2%,0) scale(1)}
  50%{transform:translate3d(2.6%,3.4%,0) scale(1.09)}
  100%{transform:translate3d(-1.6%,2%,0) scale(1.03)}
}

#bgFx{
  position:fixed;
  inset:0;
  z-index:-1; /* 同上：沉到内容之下 */
  display:block;
  width:100%;
  height:100%;
  pointer-events:none;
}

/* ---------- 悬浮上传球（活动影像） ---------- */

.fab{
  position:fixed;
  right:clamp(18px,3.4vw,36px);
  bottom:clamp(18px,3.4vw,36px);
  z-index:80;
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:13px 20px 13px 15px;
  border-radius:999px;
  color:#04141F;
  background:linear-gradient(135deg,#7DEBFF,#22D3EE 44%,#12A6C6);
  border:1px solid rgba(255,255,255,.38);
  box-shadow:0 12px 34px -10px rgba(34,211,238,.62),0 4px 16px rgba(0,0,0,.42);
  font-weight:700;
  font-size:13.5px;
  letter-spacing:.02em;
  transition:transform .28s var(--ease),box-shadow .28s var(--ease);
}
.fab:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 18px 44px -10px rgba(34,211,238,.78),0 4px 16px rgba(0,0,0,.42)}
.fab:active{transform:translateY(-1px) scale(.99)}
.fab:focus-visible{outline:2px solid #E8F4FF;outline-offset:4px}
.fab-ico{
  display:inline-flex;align-items:center;justify-content:center;
  width:27px;height:27px;border-radius:999px;
  background:rgba(4,20,31,.18);
}
.fab-ico svg{display:block}
.fab::before{
  content:"";
  position:absolute;inset:-7px;
  border-radius:inherit;
  border:1px solid rgba(34,211,238,.55);
  animation:fab-pulse 3s ease-out infinite;
  pointer-events:none;
}
@keyframes fab-pulse{
  0%{opacity:.7;transform:scale(.93)}
  72%{opacity:0;transform:scale(1.2)}
  100%{opacity:0;transform:scale(1.2)}
}

/* ---------- 活动影像：扁平照片墙 ---------- */

#activityWall .photos{grid-template-columns:repeat(auto-fill,minmax(202px,1fr));gap:13px}
#activityWall .photo{cursor:zoom-in}
/* 照片上方叠一层自下而上的暗角，保证相册名与编号在亮照片上也读得清 */
#activityWall .photo::before{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:62%;
  background:linear-gradient(to top,rgba(5,10,20,.88),rgba(5,10,20,.34) 48%,transparent);
  pointer-events:none;
}
#activityWall .photo{
  box-shadow:0 1px 0 rgba(255,255,255,.03) inset;
}

@media (max-width:760px){
  .fab{right:16px;bottom:16px;padding:14px}
  .fab-txt{display:none}
  /* 移动端提示条是通底的，抬高一点别压住悬浮球 */
  .toast-box{bottom:84px}
}