/* 全站顶栏：与首页同一套品牌、扫码、声音、下载、登录 */
.site-nav {
  position: relative; z-index: 120; max-width: 1260px; margin: 0 auto; height: 68px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 0 34px; overflow: visible;
}
.site-nav .brand { display: flex; align-items: center; gap: 12px; min-width: 0; color: inherit; text-decoration: none; }
.site-nav .seal {
  width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%;
  border: 1px solid rgba(238, 211, 155, .55);
  display: grid; place-items: center; color: #f1d392;
  font-family: "Songti SC", "Noto Serif SC", "STSong", serif; font-size: 22px;
}
.site-nav .brand-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; overflow: hidden; }
.site-nav .brand-copy b, .site-nav .brand-copy em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-nav .brand-copy b {
  font-family: "Songti SC", "Noto Serif SC", "STSong", serif;
  font-size: 16px; font-weight: 500; letter-spacing: .09em; color: #f7ecd7;
}
.site-nav .brand-copy em { font-style: normal; color: rgba(237, 221, 193, .52); font-size: 14px; letter-spacing: .08em; }
.site-nav .top-right { display: flex; align-items: center; gap: 18px; flex: 0 0 auto; }
.site-nav .top-right > * { flex: 0 0 auto; }
.site-nav .count { color: rgba(239, 221, 188, .52); font-size: 14px; letter-spacing: .08em; white-space: nowrap; }
.site-nav button { font: inherit; }
.site-nav .sound, .site-nav .lan-qr-btn, .site-nav .download-link {
  display: inline-flex; align-items: center; height: 33px; padding: 0 13px; border-radius: 999px;
  font-size: 14px; letter-spacing: .04em; white-space: nowrap; text-decoration: none; cursor: pointer;
}
.site-nav .sound {
  background: rgba(22, 39, 31, .44); color: rgba(245, 230, 201, .75);
  border: 1px solid rgba(235, 208, 155, .22);
}
.site-nav .sound:hover { border-color: rgba(237, 206, 143, .55); color: #f8ead0; }
.site-nav .lan-qr-btn {
  border: 1px solid rgba(232, 196, 119, .55); background: rgba(25, 43, 34, .45); color: #f0d9a4; letter-spacing: .06em;
}
.site-nav .lan-qr-btn:hover { border-color: #e8c477; color: #fff1d2; background: rgba(123, 82, 35, .35); }
.site-nav .download-link {
  border: 1px solid rgba(226, 192, 123, .48); background: rgba(83, 54, 25, .42); color: #f4d79a;
}
.site-nav .download-link:hover, .site-nav .download-link.is-here {
  background: rgba(123, 82, 35, .62); border-color: #e8c477; color: #fff1d2;
}
.site-nav .dl-short { display: none; }

.lan-qr-modal {
  position: fixed; inset: 0; z-index: 320; display: none; align-items: center; justify-content: center; padding: 20px;
}
.lan-qr-modal.is-open { display: flex; }
.lan-qr-backdrop { position: absolute; inset: 0; background: rgba(4, 13, 9, .72); backdrop-filter: blur(8px); }
.lan-qr-card {
  position: relative; z-index: 1; width: min(360px, 100%); padding: 26px 24px 22px; text-align: center;
  border-radius: 6px; border: 1px solid rgba(255, 255, 255, .4);
  background: linear-gradient(145deg, #f8efda, #ead9bc);
  box-shadow: 0 28px 90px rgba(0, 0, 0, .45); color: #3c4538;
}
.lan-qr-close {
  position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid rgba(120, 92, 55, .28); background: transparent; color: #7b674d; cursor: pointer; font-size: 18px; line-height: 1;
}
.lan-qr-card h2 { margin: 0 0 6px; font-family: "Songti SC", "Noto Serif SC", "STSong", serif; font-weight: 500; font-size: 24px; letter-spacing: .08em; color: #334c3d; }
.lan-qr-tip { margin: 0 0 14px; color: #7b6d58; font-size: 14px; line-height: 1.5; min-height: 1.5em; }
.lan-qr-frame {
  width: 236px; height: 236px; margin: 0 auto 12px; padding: 8px; border-radius: 10px;
  background: #f5ead4; border: 1px solid rgba(120, 92, 55, .18); display: grid; place-items: center;
}
.lan-qr-frame img { display: block; width: 220px; height: 220px; object-fit: contain; background: #f5ead4; }
.lan-qr-pick { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 0 0 10px; }
.lan-qr-ip {
  border: 1px solid rgba(120, 92, 55, .28); background: rgba(255, 251, 241, .7); color: #5a4a34;
  border-radius: 999px; padding: 4px 10px; font-size: 12px; cursor: pointer;
}
.lan-qr-ip.on { background: #9d4a37; border-color: #9d4a37; color: #fff0d5; }
.lan-qr-url {
  display: block; width: 100%; border: 0; background: transparent; cursor: pointer; text-align: center;
  color: #6f5a3d; font-size: 12px; line-height: 1.45; word-break: break-all; padding: 4px 2px;
}

.auth-slot { display: inline-flex; align-items: center; gap: 6px; position: relative; z-index: 30; }
.auth-menu { position: relative; }
.auth-avatar {
  width: 42px; height: 42px; padding: 0; border-radius: 50%; overflow: hidden; flex: 0 0 42px;
  border: 2px solid #f0d294; box-shadow: 0 0 0 2px rgba(12, 23, 18, .65);
  background: #3a2a22; cursor: pointer;
}
.auth-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 28% 32%; display: block; }
.auth-pop {
  position: absolute; top: calc(100% + 12px); right: 0; z-index: 50;
  width: 188px; padding: 8px; display: grid;
  border-radius: 16px; border: 1px solid rgba(240, 210, 148, .42);
  background: #163028; box-shadow: 0 18px 44px rgba(0, 0, 0, .48);
}
.auth-pop::before {
  content: ""; position: absolute; top: -6px; right: 15px; width: 12px; height: 12px;
  background: #163028; border-top: 1px solid rgba(240, 210, 148, .42); border-left: 1px solid rgba(240, 210, 148, .42);
  transform: rotate(45deg);
}
.auth-pop[hidden] { display: none; }
.auth-pop-user {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  margin: 2px 4px 6px; padding: 4px 4px 10px; border-bottom: 1px solid rgba(240, 210, 148, .2);
}
.auth-pop-user img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; object-position: 28% 32%; flex: 0 0 28px; }
.auth-pop-user b {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: #f8edd4; font-weight: 500; font-size: 15px; font-family: "Songti SC", "Noto Serif SC", "STSong", serif;
}
.auth-pop-item {
  display: flex; align-items: center; width: 100%; height: 38px; padding: 0 12px;
  border: 0; border-radius: 10px; background: transparent; cursor: pointer;
  color: #f4e7cf; font-size: 14px; letter-spacing: .04em; text-align: left; text-decoration: none;
}
.auth-pop-item:hover { background: rgba(240, 210, 148, .14); color: #fff8ea; }
#logoutBtn.auth-pop-item { color: #efc3b4; }
.auth-entry {
  height: 33px; padding: 0 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(235, 208, 155, .32); background: rgba(25, 43, 34, .45);
  color: rgba(248, 234, 208, .9); font-size: 14px; letter-spacing: .04em;
}
.auth-entry:hover { border-color: rgba(241, 205, 137, .65); color: #fff1d2; }
.auth-modal {
  position: fixed; inset: 0; z-index: 300; display: none; align-items: center; justify-content: center; padding: 20px;
}
.auth-modal.is-open { display: flex; }
.auth-backdrop { position: absolute; inset: 0; background: rgba(4, 13, 9, .7); backdrop-filter: blur(9px); }
.auth-card {
  position: relative; z-index: 1; width: min(430px, 100%); padding: 28px 30px 22px;
  border-radius: 5px; border: 1px solid rgba(255, 255, 255, .45);
  background: linear-gradient(135deg, #f9efdb, #ecddc1);
  box-shadow: 0 28px 90px rgba(0, 0, 0, .44); color: #3c4538;
}
.auth-close {
  position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid rgba(120, 92, 55, .28); background: transparent; color: #7b674d; cursor: pointer;
}
.auth-close .ui-ico { width: 1em; height: 1em; object-fit: contain; }
.auth-brand { display: flex; align-items: center; gap: 8px; color: #7a6447; font-family: "Songti SC", "Noto Serif SC", "STSong", serif; font-size: 14px; letter-spacing: .08em; }
.auth-seal { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; color: #f4dfb4; background: #9d4a37; font-size: 14px; }
.auth-tabs { display: flex; gap: 16px; margin-top: 19px; border-bottom: 1px solid rgba(113, 89, 54, .22); }
.auth-tab { padding: 7px 2px 9px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: #95846a; font-family: "Songti SC", "Noto Serif SC", "STSong", serif; font-size: 16px; cursor: pointer; }
.auth-tab.active { color: #3f5c49; border-bottom-color: #9a7440; }
.auth-card h2 { margin: 18px 0 5px; font-family: "Songti SC", "Noto Serif SC", "STSong", serif; font-size: 28px; font-weight: 500; color: #334c3d; }
.auth-sub { margin: 0 0 16px; color: #7b6d58; font-size: 14px; line-height: 1.65; }
.auth-form { display: grid; gap: 12px; }
.auth-field { display: grid; gap: 5px; }
.auth-field > span { color: #76664e; font-size: 14px; }
.auth-field input {
  height: 42px; width: 100%; padding: 0 11px; border-radius: 6px;
  border: 1px solid rgba(116, 91, 56, .28); background: rgba(255, 251, 241, .74); color: #3a3a2f; font-size: 15px;
}
.auth-error { min-height: 19px; color: #a14836; font-size: 14px; }
.auth-submit {
  height: 45px; border: 1px solid rgba(232, 207, 159, .4); border-radius: 7px; cursor: pointer;
  background: linear-gradient(135deg, #a24f3a, #7f3429); color: #fff0d5; font-size: 15px;
}
.auth-submit:disabled { opacity: .6; cursor: wait; }
.auth-demo { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 16px; padding-top: 12px; border-top: 1px dashed rgba(127, 99, 61, .25); color: #8c7b62; font-size: 14px; }
.auth-demo b { color: #916e42; font-weight: 500; }
.auth-demo span { color: #4f654f; }
.auth-demo i { font-style: normal; color: #b7a58a; }
.auth-policy { margin: 10px 0 0; text-align: center; color: #a2947f; font-size: 14px; }
.auth-realname[hidden] { display: none !important; }

@media (max-width: 900px) {
  .site-nav { padding: 0 20px; }
  .site-nav .count { display: none; }
}
@media (max-width: 620px) {
  .site-nav { height: 64px; padding: 0 12px; gap: 8px; }
  .site-nav .lan-qr-btn { display: none; }
  .site-nav .brand-copy em { display: none; }
  .site-nav .brand-copy b { font-size: 14px; }
  .site-nav .top-right { gap: 6px; }
  .site-nav .dl-long { display: none; }
  .site-nav .dl-short { display: inline; }
  .site-nav .sound, .site-nav .download-link, .site-nav .auth-entry { height: 30px; padding: 0 10px; font-size: 13px; }
}
@media (min-width: 744px) and (max-width: 1400px) {
  .site-nav { height: 72px; padding: 0 24px; }
  .site-nav .top-right { gap: 10px; }
  .site-nav .sound, .site-nav .lan-qr-btn, .site-nav .download-link, .site-nav .auth-entry { height: 40px; padding: 0 14px; }
}