/* site.css —— 300班同学录 前台公共样式（2026-11-09）
   首页与相册页共用，零外部依赖。 */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:#2d3748;background:#f7f9fb;
  font:15px/1.7 -apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:#2b6cb0;text-decoration:none}
a:hover{text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}

/* 顶栏 */
header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid #e6ebf1}
.nav{display:flex;align-items:center;justify-content:space-between;height:60px;gap:16px}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;color:#1a202c;font-size:15px;white-space:nowrap}
.brand .mark{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#2c5282,#2a8f8f);color:#fff;font-size:12px;font-weight:700}
.nav ul{display:flex;gap:22px;list-style:none;margin:0;padding:0;font-size:14px}
.nav ul a{color:#4a5568}
.nav ul a:hover{color:#2a8f8f}
.nav ul a.on{color:#2a8f8f;font-weight:600}
.nav .act{display:flex;gap:10px;align-items:center}
.btn{display:inline-block;padding:8px 16px;border-radius:8px;font-size:14px;font-weight:500;transition:.15s}
.btn-line{border:1px solid #cbd5e0;color:#4a5568}
.btn-line:hover{border-color:#2a8f8f;color:#2a8f8f}
.btn-fill{background:linear-gradient(135deg,#2c5282,#2a8f8f);color:#fff}
.btn-fill:hover{opacity:.9}
/* 手机端：导航不再隐藏，改为顶栏第二行可左右滑动的条
   （2026-11-09：原先 nav ul 在 720px 以下直接 display:none，
     新增的猜猜看/同学分布等入口在手机上完全够不到） */
@media(max-width:720px){
  .nav{height:auto;flex-wrap:wrap;gap:10px;padding:10px 20px 0}
  .nav .brand{font-size:14px}
  .nav .brand .mark{width:29px;height:29px;border-radius:8px}
  .nav .act .btn{padding:7px 13px;font-size:13px}
  .nav ul{
    display:flex;order:3;width:auto;gap:2px;font-size:13.5px;
    margin:2px -20px 0;padding:0 12px;
    overflow-x:auto;overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    border-top:1px solid #eef2f6;
    scrollbar-width:none;-ms-overflow-style:none;
  }
  .nav ul::-webkit-scrollbar{display:none;height:0}
  .nav ul li{flex:0 0 auto}
  .nav ul a{display:block;padding:10px 11px;white-space:nowrap;position:relative}
  .nav ul a.on{font-weight:600}
  .nav ul a.on::after{content:"";position:absolute;left:11px;right:11px;bottom:0;
    height:2px;border-radius:2px;background:#2a8f8f}
}

/* 首屏 */
.hero{position:relative;overflow:hidden;color:#fff;
  background:linear-gradient(135deg,#1e3a5f 0%,#2c5282 48%,#2a8f8f 100%)}
.hero:after{content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 78% 18%,rgba(255,255,255,.16),transparent 45%)}
.hero .wrap{position:relative;z-index:1;padding:76px 20px 84px;text-align:center}
.hero h1{margin:0;font-size:34px;line-height:1.3;font-weight:600;letter-spacing:.5px}
.hero p{margin:14px 0 0;font-size:16px;color:rgba(255,255,255,.85)}
.hero .cta{margin-top:26px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.hero .cta .btn{padding:11px 26px;font-size:15px}
.hero .cta .ghost{border:1px solid rgba(255,255,255,.55);color:#fff}
.hero .cta .ghost:hover{background:rgba(255,255,255,.14)}
.hero .cta .solid{background:#fff;color:#2c5282}
.stats{margin-top:34px;display:flex;gap:38px;justify-content:center;flex-wrap:wrap;
  font-size:13px;color:rgba(255,255,255,.8)}
.stats b{display:block;font-size:22px;font-weight:600;color:#fff;line-height:1.2}
@media(max-width:600px){.hero .wrap{padding:56px 18px 64px}.hero h1{font-size:26px}.stats{gap:26px}}

/* 区块 */
section{padding:58px 0}
.page-head{padding:34px 0 6px}
.page-head h1{margin:0;font-size:24px;font-weight:600;color:#1a202c}
.page-head p{margin:6px 0 0;font-size:14px;color:#718096}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:24px;gap:12px;flex-wrap:wrap}
.sec-head h2{margin:0;font-size:21px;font-weight:600;color:#1a202c}
.sec-head h2 span{color:#a0aec0;font-weight:400;font-size:14px;margin-left:8px}
.sec-head .more{font-size:13px;color:#718096}
.sec-head .more:hover{color:#2a8f8f}
.alt{background:#fff;border-top:1px solid #eef2f6;border-bottom:1px solid #eef2f6}

/* 相册 */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.ph{position:relative;overflow:hidden;border-radius:10px;background:#e9eef3;cursor:zoom-in;aspect-ratio:1/1}
.ph img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.ph:hover img{transform:scale(1.06)}
@media(max-width:820px){.gallery{grid-template-columns:repeat(3,1fr);gap:10px}}
@media(max-width:560px){.gallery{grid-template-columns:repeat(2,1fr)}}

/* 同学 */
.members{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.mem{display:flex;align-items:center;gap:11px;padding:12px 14px;background:#fff;border:1px solid #eef2f6;
  border-radius:10px;transition:.15s}
.mem:hover{border-color:#cfe3e3;box-shadow:0 6px 18px rgba(30,58,95,.06)}
.mem .av{width:38px;height:38px;flex:0 0 38px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#e2ecf5,#d6ecec);color:#2c5282;font-weight:600;font-size:15px}
.mem .nm{flex:1;min-width:0;font-size:14px;color:#2d3748;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mem .tag{display:inline-block;margin-top:3px;font-size:11px;color:#2a8f8f;background:#e9f6f6;
  padding:1px 7px;border-radius:20px}

/* 留言 */
.notes{display:grid;gap:12px}
.note{background:#fff;border:1px solid #eef2f6;border-radius:10px;padding:16px 18px}
.note .top{display:flex;justify-content:space-between;gap:12px;font-size:13px;margin-bottom:7px}
.note .who{font-weight:600;color:#2c5282}
.note .when{color:#a0aec0;white-space:nowrap}
.note .txt{font-size:14px;color:#4a5568;white-space:pre-wrap;word-break:break-word}
.note .txt a{word-break:break-all}
.empty{padding:34px;text-align:center;color:#a0aec0;font-size:14px;background:#fff;border-radius:10px;border:1px dashed #e2e8f0}

footer{background:#1a202c;color:#a0aec0;padding:34px 0;font-size:13px}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
footer a{color:#cbd5e0}
footer a:hover{color:#fff}

/* 灯箱 */
#lb{position:fixed;inset:0;z-index:100;background:rgba(12,22,34,.94);display:none;
  align-items:center;justify-content:center;padding:24px;cursor:zoom-out}
#lb.on{display:flex}
#lb img{max-width:94vw;max-height:90vh;border-radius:8px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
#lb .x{position:absolute;top:18px;right:24px;color:#fff;font-size:30px;line-height:1;opacity:.8}
#lb .nav-btn{position:absolute;top:50%;transform:translateY(-50%);color:#fff;font-size:38px;opacity:.65;
  padding:10px 16px;user-select:none;cursor:pointer}
#lb .prev{left:8px}
#lb .next{right:8px}

@media(max-width:560px){.sec-head h2 span{display:none}.sec-head .more{font-size:12px}}

/* 相册分类 / 上传 / 提示（2026-11-09 追加） */
.fl{padding:11px 16px;border-radius:10px;font-size:14px;margin-bottom:20px;border:1px solid}
.fl.ok{background:#f0faf6;border-color:#c6ebdc;color:#237a5b}
.fl.err{background:#fdf3f3;border-color:#f3d2d2;color:#b04141}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 24px}
.tabs a{padding:7px 15px;border-radius:20px;border:1px solid #e6ebf1;background:#fff;color:#4a5568;font-size:13px}
.tabs a:hover{border-color:#2a8f8f;color:#2a8f8f}
.tabs a.on{background:linear-gradient(135deg,#2c5282,#2a8f8f);border-color:transparent;color:#fff}
.upbox{background:#fff;border:1px solid #e6ebf1;border-radius:12px;padding:0 20px;margin-bottom:24px}
.upbox summary{cursor:pointer;padding:13px 0;font-size:14px;font-weight:600;color:#2c5282;list-style:none}
.upbox summary::-webkit-details-marker{display:none}
.upbox[open] summary{border-bottom:1px solid #eef2f6;margin-bottom:16px}
.uprow{display:grid;grid-template-columns:1fr 148px 1fr auto;gap:10px;padding-bottom:18px;align-items:center}
.uprow input[type=file],.uprow select,.uprow input[type=text]{width:100%;height:38px;border:1px solid #dfe6ee;
  border-radius:8px;padding:7px 11px;font-size:13px;font-family:inherit;color:#2d3748;background:#fff}
.ph-tag{position:absolute;left:6px;bottom:6px;background:rgba(0,0,0,.5);color:#fff;font-size:11px;
  padding:2px 7px;border-radius:10px}
@media(max-width:760px){.uprow{grid-template-columns:1fr}}

/* 游客留言表单 */
.guest{background:#fff;border:1px solid #e6ebf1;border-radius:12px;padding:20px 22px;margin-top:20px}
.guest h3{margin:0 0 4px;font-size:15px;font-weight:600;color:#2c5282}
.guest .hint{margin:0 0 14px;font-size:12px;color:#a0aec0}
.guest input[type=text],.guest textarea{width:100%;border:1px solid #dfe6ee;border-radius:8px;padding:9px 12px;
  font-size:14px;font-family:inherit;color:#2d3748;background:#fff;box-sizing:border-box}
.guest textarea{min-height:88px;resize:vertical;line-height:1.7}
.guest input[type=text]:focus,.guest textarea:focus{outline:0;border-color:#2a8f8f;box-shadow:0 0 0 3px rgba(42,143,143,.12)}
.guest .row{display:grid;grid-template-columns:170px 1fr;gap:10px}
.guest .code{display:flex;gap:10px;align-items:center;margin-top:12px;flex-wrap:wrap}
.guest .code input{width:112px;text-align:center;letter-spacing:2px}
.guest .code img{height:38px;width:auto;border-radius:8px;border:1px solid #e6ebf1;cursor:pointer}
.guest .sub{margin-top:14px;display:flex;justify-content:flex-end}
@media(max-width:600px){.guest .row{grid-template-columns:1fr}}
/* 时光对照（当年的我 / 现在的我） */
.cmps{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.cmp{background:#fff;border:1px solid #e6ebf1;border-radius:14px;padding:12px}
.cmp .pair{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cmp figure{margin:0;position:relative;border-radius:10px;overflow:hidden;background:#e9eef3}
.cmp img{width:100%;height:100%;aspect-ratio:3/4;object-fit:cover;display:block;transition:transform .3s}
.cmp figure:hover img{transform:scale(1.04)}
.cmp .lb{position:absolute;top:8px;left:8px;font-size:11px;padding:2px 9px;border-radius:10px;color:#fff;letter-spacing:.5px}
.cmp .lb-old{background:rgba(30,58,95,.78)}
.cmp .lb-now{background:rgba(42,143,143,.88)}
.cmp .meta{padding:12px 6px 4px}
.cmp .meta b{font-size:15px;color:#1a202c;font-weight:600}
.cmp .meta p{margin:5px 0 0;font-size:13px;color:#4a5568;line-height:1.7}
.cmp .meta .when{display:block;margin-top:7px;font-size:12px;color:#a0aec0}
@media(max-width:760px){.cmps{grid-template-columns:1fr}}

/* 时光对照空状态（首页常驻区块） */
.cmp-empty{border:1px dashed #d6e0ea;background:#fbfdff;border-radius:14px;padding:34px 24px;text-align:center}
.cmp-empty b{display:block;font-size:15px;color:#2c5282;margin-bottom:6px}
.cmp-empty p{margin:0 auto 16px;font-size:13px;color:#718096;max-width:520px;line-height:1.8}

/* 名录卡片做成链接（2026-11-09） */
.members a.mem{color:inherit}
.members a.mem:hover .nm{color:#2a8f8f}

/* 相册上传的验证码行：用类名承载列宽，手机端回落单列（2026-11-09） */
.up-code3{grid-template-columns:104px auto 1fr}
@media(max-width:760px){.up-code3{grid-template-columns:1fr;gap:10px}}

/* 手机端同学名录：固定两列（原来 auto-fill 会算出 3 列，第三列被挤出屏幕） */
@media(max-width:560px){.members{grid-template-columns:repeat(2,1fr);gap:10px}}


/* 首页「班里还有这些」入口（2026-11-10） */
.fun-links{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
@media(max-width:1000px){.fun-links{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:720px){.fun-links{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:420px){.fun-links{grid-template-columns:1fr}}
.fun-links a{position:relative;display:block;background:#fff;border:1px solid #e6ebf1;border-radius:13px;
  padding:18px 20px;text-decoration:none;transition:.2s;overflow:hidden}
.fun-links a::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,#2c5282,#2a8f8f);transform:scaleY(0);transform-origin:top;transition:.25s}
.fun-links a:hover{border-color:#c3d8e4;transform:translateY(-2px);box-shadow:0 8px 20px rgba(44,82,130,.09)}
.fun-links a:hover::before{transform:scaleY(1)}
.fun-links b{display:block;font-size:15px;color:#2c5282;font-weight:600;margin-bottom:5px}
.fun-links span{font-size:12.5px;color:#8fa0b3;line-height:1.7;display:block}
@media(max-width:560px){.fun-links{grid-template-columns:1fr 1fr;gap:10px}
  .fun-links a{padding:14px 15px}
  .fun-links b{font-size:14px}
  .fun-links span{font-size:11.5px}}