/* 我们的小校内 · 样式（蓝白怀旧风） */
:root {
  --blue: #2b659a; --blue-dark: #174b7a; --blue-light: #eaf2f8; --line: #cbd9e4; --line-soft: #e3ebf2;
  --text: #333; --muted: #8190a0; --link: #2b659a; --bg: #f3f6f9; --red: #d9534f; --gold: #f0ad4e;
}
* { box-sizing: border-box }
body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.6 Arial, "PingFang SC", "Microsoft YaHei", sans-serif; -webkit-text-size-adjust: 100% }
a { color: var(--link); text-decoration: none }
a:hover { text-decoration: underline }
p { overflow-wrap: anywhere; margin: 6px 0 }
img { max-width: 100% }
[hidden] { display: none !important }

/* ---------- 顶部 ---------- */
header { background: var(--blue); border-bottom: 4px solid #aecce4; color: #fff; padding-top: env(safe-area-inset-top) }
.nav { max-width: 1040px; margin: auto; display: flex; align-items: center; gap: 22px; padding: 12px 20px }
.logo { font-size: 26px; font-weight: bold; color: #fff; white-space: nowrap; line-height: 1.1 }
.logo:hover { text-decoration: none }
.logo small { display: block; font-size: 11px; font-weight: normal; color: #d7e8f5 }
.nav nav { display: flex; gap: 4px; flex: 1 }
.nav nav a, .navright a, .navright button { color: #fff; padding: 7px 11px; border-radius: 2px; white-space: nowrap; background: none; border: 0; font: inherit; cursor: pointer }
.nav nav a:hover, .navright a:hover, .navright button:hover, .nav a.on { background: var(--blue-dark); text-decoration: none }
.navright { display: flex; align-items: center; gap: 4px; margin-left: auto }
.bell { position: relative }
#badge { position: absolute; top: -2px; right: -6px; background: var(--red); color: #fff; font-size: 11px; line-height: 16px; min-width: 16px; padding: 0 4px; border-radius: 8px; text-align: center }
.ribbon { background: #e7f1f9; color: #53738e; text-align: center; padding: 6px; border-bottom: 1px solid #ccdfed; font-size: 13px }
main { max-width: 1040px; margin: 20px auto; min-height: 65vh; padding: 0 20px }
footer { text-align: center; font-size: 12px; color: #8a9baa; border-top: 1px solid #d6e1eb; padding: 20px 20px calc(20px + env(safe-area-inset-bottom)) }
#version { color: #aab6c2; margin-left: 6px }
#notice { display: none; position: fixed; left: 50%; bottom: calc(30px + env(safe-area-inset-bottom)); transform: translateX(-50%); background: #26496a; color: #fff; padding: 10px 20px; border-radius: 3px; z-index: 30; max-width: 90vw; box-shadow: 0 2px 8px #0003 }

/* ---------- 版式 ---------- */
.layout { display: grid; grid-template-columns: 200px minmax(0, 1fr) 220px; gap: 16px }
.profilegrid { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 16px }
.panel { background: #fff; border: 1px solid var(--line); margin-bottom: 14px }
.panel h2 { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 14px; background: var(--blue-light); border-bottom: 1px solid var(--line); margin: 0; padding: 7px 12px; color: #315d80 }
.panel h2 .more, .panel h2 .muted { font-weight: normal; font-size: 12px }
.inside { padding: 14px }
.center { text-align: center }
.grow { flex: 1; min-width: 0 }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap }
.row.end { justify-content: flex-end }
.row input { flex: 1; min-width: 120px }
.muted { font-size: 12px; color: var(--muted) }
.empty { padding: 30px 16px; text-align: center; color: #8999a8; line-height: 2 }
.welcome { font-size: 20px; color: #315d80; margin: 0 0 6px }
.more { font-size: 12px }

/* ---------- 按钮与表单 ---------- */
.btn { display: inline-block; background: #3976aa; border: 1px solid #255b89; color: #fff; padding: 6px 14px; cursor: pointer; font: inherit; border-radius: 2px; white-space: nowrap }
.btn:hover { background: #2f679a; text-decoration: none }
.btn:disabled { opacity: .6; cursor: wait }
.btn.small, .link.small { padding: 3px 10px; font-size: 12px }
.link { background: none; border: 0; color: var(--link); cursor: pointer; padding: 0 4px; font: inherit }
.link:hover { text-decoration: underline }
.link.del { color: #9aa7b4; font-size: 12px }
.link.del:hover { color: var(--red) }
input, textarea, select { font: inherit; border: 1px solid #b8cad8; padding: 7px 9px; border-radius: 2px; background: #fff; color: var(--text); max-width: 100% }
input:focus, textarea:focus, select:focus { outline: 2px solid #9cc1df; border-color: #6d9cc4 }
textarea { width: 100%; min-height: 80px; resize: vertical }
label { display: block; margin: 8px 0; color: #4d6478; font-size: 13px }
label input, label select, label textarea { display: block; width: 100%; margin-top: 4px }
label.check, label.file { color: var(--muted); font-size: 12px }
label.check input { display: inline; width: auto; margin-right: 4px }
label.file input { border: 0; padding: 4px 0 }
.tabs { display: flex; gap: 0; border-bottom: 1px solid var(--line-soft); padding: 0 12px }
.tabs button, .tabs a { background: none; border: 0; border-bottom: 2px solid transparent; padding: 8px 14px; cursor: pointer; color: var(--link); font: inherit }
.tabs .on { border-bottom-color: var(--blue); color: var(--text); font-weight: bold }

/* ---------- 头像 ---------- */
.face { display: inline-flex; align-items: center; justify-content: center; background: #dfeaf4; color: #456d91; flex: none; overflow: hidden; border: 1px solid var(--line); text-decoration: none !important }
.face img { width: 100%; height: 100%; object-fit: cover }
.face.tiny { width: 30px; height: 30px; font-size: 14px }
.face.mini { width: 48px; height: 48px; font-size: 20px }
.face.big { width: 100px; height: 100px; font-size: 40px; border: 4px solid #fff; outline: 1px solid var(--line) }
.face.huge { width: 130px; height: 130px; font-size: 54px; border: 4px solid #fff; outline: 1px solid var(--line) }
.facegrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 6px; padding: 12px; text-align: center; font-size: 12px }
.facegrid > div { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0 }
.facegrid a:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }

/* ---------- 首页 ---------- */
.mecard { text-align: center }
.mecard .face { margin: 0 auto 6px }
.mecard .name { display: block; font-size: 17px; font-weight: bold }
.quick { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 10px; font-size: 13px }
.quick a { background: #f3f7fa; padding: 4px; border: 1px solid var(--line-soft) }
.composer textarea { min-height: 70px }
.emoji { display: flex; flex-wrap: wrap; gap: 2px; margin: 6px 0 }
.emoji button { background: none; border: 1px solid transparent; font-size: 17px; line-height: 1; padding: 4px; cursor: pointer; border-radius: 3px }
.emoji button:hover { border-color: var(--line); background: #f5f9fc }
.composer .row { justify-content: space-between }
.install { background: #fff8e5; border: 1px solid #f1dca4; color: #6b5a2a; padding: 10px 12px; margin-bottom: 14px; font-size: 13px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center }
.bday { display: flex; align-items: center; gap: 6px; padding: 4px 0; flex-wrap: wrap }
.today { color: #d9534f; font-weight: bold }

/* ---------- 新鲜事 / 状态 ---------- */
.item { display: flex; gap: 12px; padding: 14px; border-bottom: 1px dashed var(--line-soft) }
.item:last-child { border-bottom: 0 }
.item .head { line-height: 1.7 }
.item .head .uname { font-weight: bold }
.item .body { white-space: pre-wrap; overflow-wrap: anywhere }
.item .head .body { font-weight: normal }
.item .title { font-weight: bold }
.item .meta { margin-top: 4px }
.item .meta a { color: var(--muted) }
.shot { display: block; max-height: 360px; margin-top: 8px; border: 1px solid var(--line-soft) }
.excerpt { color: #5e6f80; font-size: 13px }
.pair { display: flex; gap: 6px; margin-top: 6px }
.tools { display: flex; gap: 10px; align-items: center; margin-top: 6px; font-size: 13px; flex-wrap: wrap }
.tools .link { padding: 0 }
.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 6px; margin-top: 8px; padding: 0 }
.panel > .thumbs { padding: 12px }
.thumbs img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; border: 1px solid var(--line-soft) }

/* ---------- 评论 ---------- */
.comments { background: #f4f8fb; margin-top: 8px; padding: 6px 10px; border-top: 1px solid var(--line-soft) }
.comment { display: flex; gap: 8px; padding: 6px 0; border-bottom: 1px solid #e8eff5; font-size: 13px }
.comment .muted .link { font-size: 12px; padding: 0 3px }
.commentform { padding: 6px 0 2px }
.commentform input { padding: 5px 8px }
.replying { font-size: 12px }
.replying:empty { display: none }
.comments.closed { display: none }

/* ---------- 人 ---------- */
.person { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px dashed var(--line-soft) }
.person:last-child { border-bottom: 0 }
.pokebox { display: inline-block; position: relative }
.pokebox summary { list-style: none; cursor: pointer; color: var(--link); font-size: 12px; display: inline-block; padding: 3px 10px; border: 1px solid var(--line); background: #f5f9fc; border-radius: 2px }
.pokebox summary::-webkit-details-marker { display: none }
.pokemenu { position: absolute; z-index: 5; background: #fff; border: 1px solid var(--line); box-shadow: 0 2px 6px #0002; padding: 6px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; width: 160px; right: 0 }
.pokemenu .link { padding: 4px; text-align: left }

/* ---------- 个人主页 ---------- */
.profilehead .inside { display: flex; gap: 20px; align-items: flex-start }
.profilehead h1 { margin: 0 0 6px; font-size: 22px; color: #26496a }
.profilehead .status { font-size: 15px; background: #f5f9fc; border-left: 3px solid #aecce4; padding: 6px 10px; margin: 8px 0 }
.profilehead .actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px }
.sex { font-size: 16px }
.sex.m { color: #3a7bd5 }
.sex.f { color: #e0679b }
.details { display: grid; grid-template-columns: 52px 1fr; gap: 6px 8px; margin: 0; padding: 12px 14px; font-size: 13px }
.details dt { color: var(--muted) }
.details dd { margin: 0; overflow-wrap: anywhere }
.edit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px }
.avataredit { display: flex; gap: 16px; align-items: center; margin-bottom: 8px }
.birth { display: flex; gap: 6px; align-items: center; margin-top: 4px }
.birth select { width: auto; display: inline-block; margin: 0 }

/* ---------- 日志 ---------- */
.blogrow { padding: 12px 14px; border-bottom: 1px dashed var(--line-soft) }
.blogrow .title { font-size: 15px; font-weight: bold }
.cats { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--line-soft); font-size: 13px }
.cats a { padding: 2px 8px; border: 1px solid var(--line-soft); background: #f7fafc }
.cats a.on { background: var(--blue); color: #fff; border-color: var(--blue) }
.crumb { padding: 8px 14px; font-size: 12px; background: var(--blue-light); border-bottom: 1px solid var(--line) }
.blog h1 { font-size: 22px; margin: 4px 0 6px; color: #26496a }
.article { font-size: 15px; line-height: 1.9; margin: 16px 0; padding: 4px 0 12px; border-bottom: 1px solid var(--line-soft) }
.article p { margin: 0 0 4px; text-indent: 0 }
.source { background: #f5f9fc; border: 1px solid var(--line-soft); padding: 6px 10px; margin-top: 10px; font-size: 13px }
.prevnext { display: flex; justify-content: space-between; margin: 12px 0; font-size: 13px }
.writer input { width: 100%; margin-bottom: 8px }
.writer input[name=title] { font-size: 17px }
.writer textarea { min-height: 360px; line-height: 1.8 }

/* ---------- 相册 / 照片 ---------- */
.albums { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; padding: 14px }
.albumcard { display: flex; flex-direction: column; gap: 2px; color: var(--text); min-width: 0 }
.albumcard:hover { text-decoration: none }
.albumcard .cover { aspect-ratio: 1; background: #eef3f7; border: 1px solid var(--line); padding: 4px; box-shadow: 3px 3px 0 #e1e9f0; display: flex; align-items: center; justify-content: center; color: var(--muted); overflow: hidden }
.albumcard .cover img { width: 100%; height: 100%; object-fit: cover }
.albumcard b { margin-top: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.newalbum summary { list-style: none; display: inline-block }
.newalbum summary::-webkit-details-marker, .albumedit summary::-webkit-details-marker { display: none }
.newalbum form, .albumedit form { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px }
.newalbum input, .albumedit input { flex: 1; min-width: 160px }
.albumedit { margin-top: 10px }
.albumedit summary { list-style: none; cursor: pointer; display: inline-block; font-size: 13px }
.upload { display: flex; gap: 8px; flex-wrap: wrap; align-items: center }
.upload label { margin: 0 }
.upload input[name=caption] { flex: 1; min-width: 160px }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; padding: 14px }
.gallery a { display: flex; flex-direction: column; color: var(--muted); font-size: 12px; min-width: 0 }
.gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; border: 1px solid var(--line); padding: 3px; background: #fff }
.gallery span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-height: 18px }
.photo-nav { display: flex; justify-content: space-between; padding: 8px 14px; font-size: 13px }
.photo-stage { position: relative; width: fit-content; max-width: 100%; margin: 0 auto; background: #f6f8fa; line-height: 0 }
.photo-stage img { max-height: 75vh; display: block }
.photo-stage.tagging { cursor: crosshair; outline: 3px dashed var(--gold) }
.tag, .tag-preview { position: absolute; width: 56px; height: 56px; margin: -28px 0 0 -28px; border: 2px solid #fff; box-shadow: 0 0 0 1px #0006; line-height: 1.4 }
.tag span { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 4px; background: #000a; color: #fff; font-size: 12px; padding: 1px 6px; white-space: nowrap; opacity: 0; transition: opacity .15s }
.photo-stage:hover .tag span, .tag:focus span, .photo-stage.tagging .tag span { opacity: 1 }
.tag { opacity: .2 } .photo-stage:hover .tag, .photo-stage.tagging .tag { opacity: 1 }
.tag-preview { border-color: var(--gold) }
.tagged .link.del { padding: 0 2px }
#tag-form { background: #fff8e5; border: 1px solid #f1dca4; padding: 8px; margin-bottom: 8px }

/* ---------- 通知 ---------- */
.notice { display: flex; gap: 10px; align-items: center; padding: 10px 14px; border-bottom: 1px dashed var(--line-soft); color: var(--text) }
.notice:hover { background: #f7fafc; text-decoration: none }
.notice.unread { background: #fffbea }
.notice.unread b::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--red); margin-right: 6px; vertical-align: middle }
.noticeact { padding: 0 14px 10px 54px; border-bottom: 1px dashed var(--line-soft) }

/* ---------- 登录 ---------- */
.auth { max-width: 460px; margin: 30px auto }
.auth .tabs { padding: 0; margin: 14px 0 6px }
.auth .btn { width: 100%; padding: 9px; margin-top: 10px; font-size: 15px }

/* ---------- 相册大图预览 ---------- */
dialog.photo-dialog { border: 0; padding: 10px; max-width: 94vw; max-height: 94vh; text-align: center }
dialog.photo-dialog img { max-width: 100%; max-height: 82vh; display: block; margin: 0 auto 10px }
dialog::backdrop { background: #000c }

/* ---------- 窄屏 / 手机 ---------- */
@media (max-width: 960px) {
  .layout { grid-template-columns: 190px minmax(0, 1fr) }
  .layout .right { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 14px }
}
@media (max-width: 700px) {
  .nav { flex-wrap: wrap; gap: 6px 10px; padding: 10px 12px 0 }
  .logo { font-size: 22px }
  .logo small { display: none }
  .nav nav { order: 3; flex-basis: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin: 0 -12px; padding: 0 8px 6px }
  .nav nav::-webkit-scrollbar { display: none }
  .nav nav a { padding: 6px 10px }
  .ribbon { display: none }
  main { padding: 0 10px; margin-top: 12px }
  .layout, .profilegrid { grid-template-columns: 1fr }
  .layout .main { order: -1 }
  .layout .sidebar { display: grid; grid-template-columns: 1fr; }
  .layout .sidebar .panel:first-child { display: none }
  .layout .right { display: block }
  .profilehead .inside { flex-direction: column; align-items: center; text-align: center }
  .profilehead .actions { justify-content: center }
  .profilegrid .main { order: -1 }
  .edit-grid { grid-template-columns: 1fr }
  .item { padding: 12px 10px; gap: 10px }
  .face.mini { width: 40px; height: 40px }
  .albums { grid-template-columns: repeat(2, 1fr) }
  .gallery { grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 10px }
  .tag, .tag-preview { width: 40px; height: 40px; margin: -20px 0 0 -20px }
  input, textarea, select { font-size: 16px }   /* 防止 iPhone 输入时自动放大 */
}

/* ---------- 分享 ---------- */
.sharebox { display: flex; gap: 10px; align-items: flex-start; background: #f5f9fc; border: 1px solid var(--line-soft); border-left: 3px solid #aecce4; padding: 8px 10px; margin-top: 8px; color: var(--text); font-size: 13px; overflow-wrap: anywhere }
a.sharebox:hover { text-decoration: none; background: #eef5fa }
.sharebox .grow > * { display: block }
.sharebox .excerpt { display: block; margin: 2px 0 }
.sharebox img { display: block; max-height: 160px; margin-top: 6px; border: 1px solid var(--line-soft) }
.sharebox.photo { align-items: center }
.sharebox.photo img { width: 72px; height: 72px; object-fit: cover; margin: 0 }
.sharebox .play { flex: none; width: 64px; height: 48px; border: 0; background: #26496a; color: #fff; font-size: 20px; cursor: pointer; border-radius: 2px }
.sharebox.music .play { background: #c0392b }
.sharebox .play:hover { filter: brightness(1.15) }
.player { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; margin-top: 8px; background: #000 }
.player.music { aspect-ratio: auto; height: 86px; background: none }

/* ---------- 礼物 ---------- */
.gift { font-size: 26px; line-height: 1; display: inline-block; cursor: default }
.gift.big { font-size: 34px }
.giftwall { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 14px }
.giftline { display: flex; align-items: center; gap: 10px; margin-top: 6px; color: #5e6f80 }
.giftbtn { font-size: 12px; padding: 3px 10px; border: 1px solid #f1dca4; background: #fff8e5; border-radius: 2px; color: #8a6d1f }
.giftpick { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; margin: 10px 0 14px }
.giftpick label { position: relative; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; border: 1px solid var(--line-soft); cursor: pointer; text-align: center; color: var(--text) }
.giftpick input { position: absolute; top: 0; left: 0; opacity: 0; pointer-events: none }
form[data-form=gift] input[name=message] { width: 100% }
.giftpick label:has(input:checked) { border-color: var(--blue); background: var(--blue-light); box-shadow: inset 0 0 0 1px var(--blue) }
.giftpick label:hover { background: #f7fafc }