/* ============================================================
   全站统一顶部导航（2026-11）
   与首页 /、/shiji/ 完全同一套：
   顶栏：品牌 + 右上角（首页 / 诗集 / 下载）+ 登录
   使用页面：/download/、/me/（加载 site-nav.js 的页面自动获得）
   ============================================================ */

/* ---------- 第一行：品牌 + 高频操作 ---------- */
.site-nav {
  position: sticky; top: var(--sat, env(safe-area-inset-top, 0px)); 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;
  background: rgba(9, 19, 14, .88);
  -webkit-backdrop-filter: blur(14px) saturate(1.05);
  backdrop-filter: blur(14px) saturate(1.05);
  border-bottom: 1px solid rgba(236, 209, 156, .1);
}
.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 { display: none; }
.site-nav button { font: inherit; }
.site-nav .sound, .site-nav .lan-qr-btn, .site-nav .auth-entry, .site-nav .auth-logout, .site-nav .auth-me {
  display: inline-flex; align-items: center; justify-content: center; height: 33px; padding: 0 13px; border-radius: 999px;
  font-size: 14px; letter-spacing: .04em; white-space: nowrap; text-decoration: none; cursor: pointer;
  border: 1px solid rgba(235, 208, 155, .22); background: rgba(22, 39, 31, .44); color: rgba(245, 230, 201, .75);
}
.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 .auth-slot { display: inline-flex; align-items: center; gap: 6px; position: relative; z-index: 30; }
.site-nav .auth-entry {
  color: rgba(248, 234, 208, .9); border-color: rgba(235, 208, 155, .32); background: rgba(25, 43, 34, .45);
}
.site-nav .auth-entry:hover { border-color: rgba(241, 205, 137, .65); color: #fff1d2; }
.site-nav .auth-entry.is-register {
  border-color: rgba(226, 192, 123, .62); background: rgba(123, 82, 35, .62); color: #f6dfa8;
}
.site-nav .auth-entry.is-register:hover { background: rgba(123, 82, 35, .82); border-color: #e8c477; color: #fff1d2; }

/* 「更多」：默认收起，仅平板显示（与首页一致） */
.site-nav .pad-more { display: none; position: relative; }
.site-nav .pad-more-pop[hidden] { display: none !important; }
.site-nav .pad-more-pop { display: none; }

/* ---------- 右上角：首页 / 诗集 / 下载 ---------- */
.site-nav .top-right .qb-views,
.top-right .qb-views.top-nav {
  display: flex; gap: 4px; padding: 4px; flex: 0 0 auto;
  border-radius: 999px; border: 1px solid rgba(236, 209, 156, .22);
  background: rgba(255, 250, 235, .05);
}
.site-nav .top-right .qb-view,
.top-right .qb-views.top-nav .qb-view {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 36px; padding: 0 14px; border-radius: 999px; border: 0;
  color: rgba(245, 232, 206, .74); font-size: 14px; letter-spacing: .06em;
  text-decoration: none; white-space: nowrap; transition: background .18s, color .18s;
  box-sizing: border-box;
}
.site-nav .top-right .qb-view:hover,
.top-right .qb-views.top-nav .qb-view:hover { color: #fff3d8; background: rgba(240, 210, 148, .1); }
.site-nav .top-right .qb-view.on,
.top-right .qb-views.top-nav .qb-view.on {
  background: linear-gradient(180deg, #f2d79a, #d5b36d);
  color: #2a2113; font-weight: 600;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .24);
}

/* 触屏反馈 + 键盘聚焦 */
.site-nav .top-right .qb-view, .site-nav .auth-entry { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
@media (hover: none) {
  .site-nav .auth-entry:active, .site-nav .top-right .qb-view:active {
    transform: scale(.96); transition: transform .08s ease;
  }
}
.site-nav .auth-entry:focus-visible, .site-nav .top-right .qb-view:focus-visible {
  outline: 2px solid rgba(240, 210, 148, .8); outline-offset: 2px;
}

.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-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.is-required > span::after { content: " *"; color: #a14836; font-weight: 600; }
.auth-required-hint { margin: 0 0 4px; font-size: 13px; color: #8c7b62; letter-spacing: .04em; }
.auth-required-hint .req-mark { color: #a14836; font-weight: 600; }
.auth-required-hint[hidden] { display: none !important; }
.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], .auth-invite[hidden] { display: none !important; }

/* ========== 安全区（--sat 等变量由 /safe-area.js 兜底写入） ========== */
body:not(:has(.hub)) {
  padding-top: var(--sat, env(safe-area-inset-top, 0px));
  padding-bottom: var(--sab, env(safe-area-inset-bottom, 0px));
  padding-left: var(--sal, env(safe-area-inset-left, 0px));
  padding-right: var(--sar, env(safe-area-inset-right, 0px));
}

/* ========== 手机：更紧凑，与首页一致 ========== */
@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; letter-spacing: .04em; }
  .site-nav .top-right { gap: 6px; }
  .site-nav .sound, .site-nav .auth-entry, .site-nav .auth-logout, .site-nav .auth-me {
    height: 30px; padding: 0 9px; font-size: 13px;
  }
  .site-nav .top-right .qb-view, .top-right .qb-views.top-nav .qb-view {
    min-height: 34px; padding: 0 10px; font-size: 13px;
  }
  .site-nav .top-right .qb-views, .top-right .qb-views.top-nav { padding: 3px; gap: 3px; }
  .top-right .count { display: none; }
}

/* ========== PAD / 平板：与首页顶部导航完全一致 ========== */
@media (min-width: 744px) and (max-width: 1400px) and (min-height: 640px) {
  .site-nav {
    height: 72px; padding: 0 28px; gap: 20px; max-width: 1380px;
    border-bottom: 1px solid rgba(236, 209, 156, .07);
  }
  .site-nav .brand { gap: 14px; }
  .site-nav .seal { width: 44px; height: 44px; flex-basis: 44px; font-size: 23px; }
  .site-nav .brand-copy b { font-size: 18px; letter-spacing: .1em; }
  .site-nav .brand-copy em { font-size: 13px; letter-spacing: .06em; }
  .site-nav .top-right { gap: 10px; }
  .site-nav .lan-qr-btn { display: none; }
  .site-nav .sound, .site-nav .auth-entry, .site-nav .auth-logout, .site-nav .auth-me {
    height: 44px; min-height: 44px; padding: 0 20px; font-size: 15px; letter-spacing: .05em;
  }
  .site-nav .auth-slot { gap: 8px; }
  .site-nav .auth-entry.is-register {
    background: linear-gradient(180deg, #f2d79a, #d5b36d);
    border-color: rgba(255, 234, 186, .85); color: #2a2113; font-weight: 600;
  }
  .site-nav .auth-entry.is-register:hover {
    background: linear-gradient(180deg, #f7e0ab, #dcbb75); color: #231b0f;
  }
  .site-nav .auth-avatar { width: 46px; height: 46px; flex-basis: 46px; }
  .site-nav .auth-pop { width: 220px; }
  .site-nav .auth-pop-item { height: 44px; font-size: 15px; }

  /* 更多菜单（与首页同一套） */
  .site-nav .pad-more { display: block; }
  .site-nav .pad-more-btn {
    width: 44px; height: 44px; display: grid; place-items: center;
    border-radius: 50%; border: 1px solid rgba(235, 208, 155, .3);
    background: rgba(25, 43, 34, .45); color: #f3e3c3;
    font-size: 22px; line-height: 1; cursor: pointer;
    transition: background .18s, border-color .18s, color .18s;
  }
  .site-nav .pad-more-btn:hover, .site-nav .pad-more-btn[aria-expanded="true"] {
    border-color: rgba(241, 205, 137, .7); background: rgba(123, 82, 35, .42); color: #fff1d2;
  }
  .site-nav .pad-more-pop {
    display: grid; position: absolute; right: 0; top: calc(100% + 10px); z-index: 60;
    min-width: 216px; padding: 6px; gap: 2px;
    border-radius: 16px; border: 1px solid rgba(240, 210, 148, .42);
    background: #163028; box-shadow: 0 18px 44px rgba(0, 0, 0, .5);
  }
  .site-nav .pad-more-item {
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
    min-height: 52px; padding: 10px 14px; border: 0; border-radius: 10px;
    background: transparent; color: #f4e7cf; font-size: 15px; text-align: left;
    text-decoration: none; cursor: pointer;
  }
  .site-nav .pad-more-item em { font-style: normal; font-size: 12px; color: rgba(240, 224, 192, .55); }
  .site-nav .pad-more-item:hover, .site-nav .pad-more-item:focus-visible { background: rgba(240, 210, 148, .14); color: #fff8ea; }
  .site-nav .pad-more-item:active { background: rgba(240, 210, 148, .2); }

  .site-nav .top-right .qb-view, .top-right .qb-views.top-nav .qb-view {
    min-height: 44px; padding: 0 20px; font-size: 15px;
  }
}

/* 横屏手机：保持紧凑头部 */
@media (orientation: landscape) and (max-height: 500px) {
  .site-nav { height: 52px; }
}

/* ============================================================
   与首页 /、/shiji/ 顶栏完全对齐（2026-11）
   高度、登录按钮尺寸、宽屏通栏与吸顶偏移
   ============================================================ */
:root { --topbar-h: 68px; }
@media (min-width: 744px) and (max-width: 1400px) and (min-height: 640px) {
  :root { --topbar-h: 72px; }
}
@media (orientation: landscape) and (max-height: 500px) {
  :root { --topbar-h: 52px; }
}

@media (min-width: 1401px) {
  .site-nav {
    max-width: none;
    padding-left: calc((100vw - 1260px) / 2 + 34px);
    padding-right: calc((100vw - 1260px) / 2 + 34px);
  }
}

@media (max-width: 620px) {
  .site-nav { height: 68px; }
  .site-nav .top-right .auth-entry,
  .site-nav .top-right .auth-logout,
  .site-nav .top-right .auth-me { height: 33px; padding: 0 12px; font-size: 14px; }
  .site-nav .top-right .auth-avatar { width: 42px; height: 42px; flex-basis: 42px; }
}

@media (min-width: 744px) and (max-width: 1400px) and (min-height: 640px) {
  .site-nav { height: 72px; padding: 0 28px; }
  .site-nav .top-right .auth-entry,
  .site-nav .top-right .auth-logout,
  .site-nav .top-right .auth-me { height: 44px; padding: 0 12px; font-size: 15px; }
  .site-nav .top-right .auth-avatar { width: 44px; height: 44px; flex-basis: 44px; }
}

/* 登录 / 注册按钮内边距与首页完全一致（桌面端 12px） */
.site-nav .auth-entry,
.site-nav .auth-logout,
.site-nav .auth-me { padding: 0 12px; }

/* 窄屏（≤480px）与首页完全对齐：印章 / 品牌字 / 登录按钮 */
@media (max-width: 480px) {
  .site-nav { padding: 0 12px; }
  .site-nav .brand { gap: 8px; }
  .site-nav .seal { width: 34px; height: 34px; flex-basis: 34px; font-size: 19px; }
  .site-nav .top-right { gap: 8px; }
  .site-nav .top-right .auth-entry,
  .site-nav .top-right .auth-logout,
  .site-nav .top-right .auth-me { padding: 0 12px; }
}

/* 登录按钮字距与首页一致（消除 1px 宽度差） */
.site-nav .auth-entry,
.site-nav .auth-logout,
.site-nav .auth-me { letter-spacing: .04em; }