/* ================= 基础重置 ================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
  font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", Tahoma, Arial, sans-serif;
  color: #fff;
  user-select: none;
}

.hidden {
  display: none !important;
}

/* ================= 游戏容器 ================= */
#game-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
}

.screen.active {
  display: block;
}

/* ================= 标题界面 ================= */
#title-screen {
  background: #000;
  cursor: pointer;
}

.title-bg {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: radial-gradient(ellipse at center, #1a0505 0%, #000 70%);
  animation: titlePulse 6s ease-in-out infinite;
}

@keyframes titlePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.85; }
}

.title-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
}

.game-title {
  font-size: 140px;
  font-family: "KaiTi", "楷体", "SimSun", serif;
  color: #8B0000;
  text-shadow: 
    0 0 20px #4a0000,
    0 0 40px #2a0000,
    2px 2px 0 #000,
    -1px -1px 0 #330000;
  letter-spacing: 30px;
  margin-bottom: 40px;
  position: relative;
  animation: titleFlicker 4s ease-in-out infinite;
  padding-left: 30px;
}

@keyframes titleFlicker {
  0%, 100% { opacity: 1; text-shadow: 0 0 20px #4a0000, 0 0 40px #2a0000, 2px 2px 0 #000; }
  50% { opacity: 0.92; text-shadow: 0 0 30px #6a0000, 0 0 50px #3a0000, 2px 2px 0 #000; }
  75% { opacity: 0.97; }
}

/* 裂纹效果 */
.game-title::before,
.game-title::after {
  content: '';
  position: absolute;
  background: #2a0000;
}

.game-title::before {
  top: 10%;
  left: 25%;
  width: 2px;
  height: 60%;
  transform: rotate(15deg);
  opacity: 0.6;
}

.game-title::after {
  top: 20%;
  right: 30%;
  width: 2px;
  height: 50%;
  transform: rotate(-20deg);
  opacity: 0.5;
}

.subtitle-1 {
  font-size: 22px;
  color: #888;
  margin-bottom: 16px;
  letter-spacing: 4px;
  font-family: "SimSun", "宋体", serif;
}

.subtitle-2 {
  font-size: 18px;
  color: #555;
  letter-spacing: 2px;
  margin-bottom: 60px;
  font-family: "SimSun", "宋体", serif;
}

.start-hint {
  font-size: 16px;
  color: #444;
  animation: blink 2s ease-in-out infinite;
  letter-spacing: 2px;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.title-buttons {
  margin-top: 40px;
  display: flex;
  gap: 20px;
}

.title-btn {
  background: #1a0505;
  border: 1px solid #4a1010;
  color: #999;
  padding: 12px 40px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s;
  font-family: inherit;
  letter-spacing: 2px;
}

.title-btn:hover {
  background: #2a0808;
  border-color: #6a2020;
  color: #bb4444;
}

.title-footer {
  position: absolute;
  bottom: 30px;
  left: 0;
  width: 100%;
  text-align: center;
}

.footer-text {
  font-size: 12px;
  color: #333;
  letter-spacing: 2px;
}

/* ================= 名字输入界面 ================= */
#name-screen {
  background: #0a0505;
  display: flex;
  align-items: center;
  justify-content: center;
}

.name-input-wrapper {
  text-align: center;
  animation: fadeIn 1s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.name-label {
  font-size: 20px;
  color: #aaa;
  margin-bottom: 30px;
  letter-spacing: 3px;
  font-family: "SimSun", serif;
}

.name-input {
  width: 300px;
  padding: 12px 16px;
  font-size: 18px;
  background: #111;
  border: 1px solid #333;
  color: #ccc;
  text-align: center;
  outline: none;
  margin-bottom: 25px;
  font-family: inherit;
  letter-spacing: 2px;
}

.name-input:focus {
  border-color: #6a2020;
  box-shadow: 0 0 10px rgba(139, 0, 0, 0.3);
}

.name-submit {
  background: #1a0a0a;
  border: 1px solid #442222;
  color: #888;
  padding: 10px 40px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s;
  font-family: inherit;
  letter-spacing: 3px;
}

.name-submit:hover {
  background: #2a1010;
  color: #aa5555;
  border-color: #663333;
}

/* ================= 桌面界面 ================= */
#desktop-screen {
  background: #000;
}

#desktop {
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #0a1628 0%, #051020 100%);
  position: relative;
  overflow: hidden;
}

/* 桌面经典壁纸（简约Windows XP风格的暗色版） */
#desktop::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: 
    radial-gradient(ellipse at 30% 20%, rgba(20, 40, 60, 0.4) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 80%, rgba(40, 20, 20, 0.3) 0%, transparent 50%);
  pointer-events: none;
}

.desktop-icons {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 10px;
  height: calc(100% - 40px);
}

.desktop-icon {
  width: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  padding: 8px;
  border: 1px solid transparent;
  position: relative;
  transition: all 0.15s;
}

.desktop-icon:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}

.desktop-icon:active {
  background: rgba(255, 255, 255, 0.15);
}

.icon-img {
  width: 48px;
  height: 48px;
  margin-bottom: 6px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.qq-icon {
  background: #1e90ff;
  border-radius: 50%;
  position: relative;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.qq-icon::before {
  content: '企';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 22px;
  font-weight: bold;
}

.recycle-icon {
  background: linear-gradient(135deg, #999 0%, #666 100%);
  border-radius: 4px;
  position: relative;
}

.recycle-icon::before {
  content: '♻';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  color: #0a0;
  font-size: 24px;
}

.notepad-icon-desktop {
  background: #fff;
  border: 1px solid #999;
  position: relative;
}

.notepad-icon-desktop::before {
  content: '';
  position: absolute;
  top: 8px; left: 8px;
  right: 8px; bottom: 8px;
  background: repeating-linear-gradient(
    transparent,
    transparent 3px,
    #ccc 3px,
    #ccc 4px
  );
}

.browser-icon-desktop {
  background: linear-gradient(135deg, #4a90d9 0%, #2e6bb5 100%);
  border-radius: 6px;
  position: relative;
}

.browser-icon-desktop::before {
  content: 'e';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 28px;
  font-style: italic;
  font-weight: bold;
}

.icon-label {
  font-size: 12px;
  color: #fff;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
  text-align: center;
  line-height: 1.3;
  word-break: break-all;
}

.msg-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  background: #ff3333;
  color: #fff;
  font-size: 11px;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  animation: badgeBounce 1.5s ease-in-out infinite;
}

@keyframes badgeBounce {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

/* 任务栏 */
.taskbar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 36px;
  background: linear-gradient(180deg, #245edb 0%, #1a46b0 100%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px;
  z-index: 100;
  border-top: 1px solid #3a6fe5;
}

.start-btn {
  background: linear-gradient(180deg, #3c8f3c 0%, #2d7a2d 50%, #236a23 100%);
  color: #fff;
  padding: 4px 16px 4px 8px;
  border-radius: 0 12px 12px 0;
  font-size: 14px;
  font-weight: bold;
  font-style: italic;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
}

.start-logo {
  font-size: 18px;
  color: #fff;
}

.taskbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(180deg, #1a46b0 0%, #245edb 100%);
  padding: 0 12px;
  height: 100%;
  border-left: 1px solid #0d3a90;
}

.taskbar-time {
  font-size: 12px;
  color: #fff;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
}

.tray-icons {
  display: flex;
  gap: 6px;
}

.tray-icon {
  width: 16px;
  height: 16px;
  background-size: contain;
}

.qq-tray {
  background: #1e90ff;
  border-radius: 50%;
  position: relative;
  animation: trayBlink 1s ease-in-out infinite;
}

.qq-tray::before {
  content: '企';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 8px;
  font-weight: bold;
}

@keyframes trayBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* ================= 通用窗口样式 ================= */
.window {
  position: absolute;
  background: #fff;
  border: 1px solid #000;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
  z-index: 10;
  display: flex;
  flex-direction: column;
  min-width: 600px;
  min-height: 400px;
}

.window-titlebar {
  background: linear-gradient(180deg, #0a246a 0%, #0a1850 100%);
  color: #fff;
  padding: 6px 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  cursor: move;
  flex-shrink: 0;
}

.titlebar-left {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: bold;
}

.titlebar-right {
  display: flex;
  gap: 2px;
}

.win-btn {
  width: 26px;
  height: 22px;
  border: 1px solid rgba(255,255,255,0.3);
  background: linear-gradient(180deg, #3a5aa0 0%, #1a3a80 100%);
  color: #fff;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.win-btn:hover {
  background: linear-gradient(180deg, #5a7ac0 0%, #3a5aa0 100%);
}

.win-btn.close-btn:hover {
  background: #e04343;
}

/* ================= QQ窗口 ================= */
.qq-window {
  width: 520px;
  height: 560px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -55%);
  background: #e8f0ff;
}

.qq-body {
  display: flex;
  flex-direction: column;
  height: calc(100% - 30px);
  flex: 1;
  overflow: hidden;
}

.qq-toolbar {
  background: linear-gradient(180deg, #d0e0ff 0%, #c0d4f0 100%);
  padding: 6px 10px;
  border-bottom: 1px solid #94b0dd;
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.qq-tool-btn {
  width: 32px;
  height: 32px;
  border: 1px solid #88aadd;
  background: linear-gradient(180deg, #e8f0ff 0%, #d0e0ff 100%);
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #ff6a00;
  padding: 0;
  transition: all 0.15s;
}

.qq-tool-btn:hover {
  background: linear-gradient(180deg, #f0f5ff 0%, #e0ecff 100%);
  box-shadow: 0 0 6px rgba(255, 106, 0, 0.4);
}

.qzone-icon {
  color: #ffcc00;
  font-size: 20px;
}

.mail-icon {
  color: #0066cc;
  font-size: 18px;
}

.chat-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #f0f4ff;
  overflow: hidden;
}

.chat-header {
  background: linear-gradient(180deg, #c0d4f0 0%, #a8c0e8 100%);
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid #88aadd;
  flex-shrink: 0;
}

.chat-avatar {
  width: 40px;
  height: 40px;
  background: #888;
  border: 2px solid #fff;
  border-radius: 4px;
  position: relative;
}

.chat-avatar.offline::after {
  content: '';
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 12px;
  height: 12px;
  background: #999;
  border-radius: 50%;
  border: 2px solid #fff;
}

.chat-info {
  flex: 1;
}

.chat-name {
  font-size: 14px;
  font-weight: bold;
  color: #0a1850;
}

.chat-status {
  font-size: 11px;
  color: #666;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.chat-msg {
  display: flex;
  flex-direction: column;
  gap: 4px;
  animation: msgAppear 0.3s ease;
}

@keyframes msgAppear {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.msg-meta {
  font-size: 11px;
  color: #888;
}

.msg-sender {
  font-weight: bold;
  color: #0066cc;
  margin-right: 8px;
}

.msg-time {
  color: #999;
}

.msg-bubble {
  background: #fff;
  border: 1px solid #d0d8e8;
  border-radius: 4px;
  padding: 8px 10px;
  font-size: 13px;
  color: #333;
  max-width: 80%;
  line-height: 1.5;
  align-self: flex-start;
}

/* 最后一条消息（死后发送的）特殊样式 */
.chat-msg.final-msg .msg-sender {
  color: #660000;
}

.chat-msg.final-msg .msg-bubble {
  background: #fff8f8;
  border-color: #cc9999;
  color: #660000;
}

.chat-input-area {
  background: #fff;
  border-top: 1px solid #c0d4f0;
  padding: 8px;
  flex-shrink: 0;
}

.input-disabled-tip {
  font-size: 11px;
  color: #999;
  margin-bottom: 4px;
  text-align: center;
}

.chat-input {
  width: 100%;
  height: 60px;
  border: 1px solid #c0d4f0;
  border-radius: 4px;
  padding: 6px;
  resize: none;
  font-size: 13px;
  font-family: inherit;
  background: #f5f5f5;
  color: #999;
}

/* ================= QQ空间 ================= */
.qzone-window {
  width: 800px;
  height: 600px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -55%);
  background: #fff;
}

.qzone-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.qzone-banner {
  background: linear-gradient(180deg, #2a1a2a 0%, #1a0a1a 100%);
  color: #cc99cc;
  padding: 30px 40px;
  position: relative;
  flex-shrink: 0;
}

.banner-overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23996699' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}

.banner-title {
  font-size: 28px;
  font-family: "KaiTi", "楷体", serif;
  margin-bottom: 6px;
  position: relative;
  z-index: 1;
  text-shadow: 0 0 10px rgba(204, 153, 204, 0.5);
}

.banner-sub {
  font-size: 13px;
  color: #996699;
  position: relative;
  z-index: 1;
}

.qzone-nav {
  background: linear-gradient(180deg, #f0e8f0 0%, #e0d0e0 100%);
  display: flex;
  border-bottom: 2px solid #996699;
  flex-shrink: 0;
}

.nav-item {
  padding: 10px 24px;
  cursor: pointer;
  font-size: 13px;
  color: #663366;
  border-right: 1px solid #ccb0cc;
  transition: all 0.15s;
}

.nav-item:hover {
  background: #e8d8e8;
}

.nav-item.active {
  background: #fff;
  color: #660066;
  font-weight: bold;
  border-bottom: 2px solid #fff;
  margin-bottom: -2px;
}

.qzone-content {
  flex: 1;
  overflow-y: auto;
  background: #faf5fa;
}

.tab-pane {
  display: none;
  padding: 20px;
}

.tab-pane.active {
  display: block;
}

/* 主页 */
#tab-home {
  display: none;
  gap: 20px;
}

#tab-home.active {
  display: flex;
}

.home-sidebar {
  width: 180px;
  background: #fff;
  border: 1px solid #e0d0e0;
  padding: 16px;
  text-align: center;
  flex-shrink: 0;
}

.profile-avatar {
  width: 80px;
  height: 80px;
  background: #666;
  margin: 0 auto 10px;
  border: 3px solid #cc99cc;
  border-radius: 4px;
}

.profile-name {
  font-size: 16px;
  font-weight: bold;
  color: #660066;
  margin-bottom: 10px;
}

.profile-info {
  text-align: left;
  font-size: 12px;
  color: #666;
  line-height: 1.8;
}

.home-main {
  flex: 1;
  min-width: 0;
}

.latest-diary {
  background: #fff;
  border: 1px solid #e0d0e0;
  padding: 16px;
}

.latest-diary h3 {
  font-size: 14px;
  color: #660066;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px dashed #ccb0cc;
}

.diary-preview {
  font-size: 13px;
  color: #333;
  line-height: 1.6;
}

.diary-preview h4 {
  font-size: 15px;
  color: #330033;
  margin-bottom: 8px;
}

.diary-preview-text {
  color: #666;
  margin-bottom: 8px;
}

.read-more {
  color: #660066;
  font-size: 12px;
  cursor: pointer;
}

.read-more:hover {
  text-decoration: underline;
}

/* 日志 */
.diary-list {
  max-width: 700px;
  margin: 0 auto;
}

.diary-item {
  background: #fff;
  border: 1px solid #e0d0e0;
  margin-bottom: 20px;
  padding: 20px;
}

.diary-title {
  font-size: 18px;
  color: #330033;
  margin-bottom: 8px;
}

.diary-meta {
  font-size: 12px;
  color: #999;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px dashed #ddd;
}

.diary-content p {
  font-size: 14px;
  color: #333;
  line-height: 1.8;
  margin-bottom: 10px;
  text-indent: 2em;
}

/* 相册 */
.album-list {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.album-item {
  width: 160px;
  cursor: pointer;
  transition: transform 0.2s;
}

.album-item:hover {
  transform: translateY(-3px);
}

.album-cover {
  width: 160px;
  height: 120px;
  border: 1px solid #ccc;
  background: #ddd;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.locked-cover {
  background: linear-gradient(135deg, #888 0%, #555 100%);
}

.lock-icon {
  font-size: 40px;
}

.life-cover {
  background: linear-gradient(135deg, #f5deb3 0%, #deb887 100%);
}

.life-cover::before {
  content: '🌻';
  font-size: 48px;
}

.album-name {
  font-size: 13px;
  color: #333;
  font-weight: bold;
  margin-bottom: 2px;
}

.album-count {
  font-size: 11px;
  color: #999;
}

/* 相册密码弹窗 */
.album-password-modal {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.password-box {
  background: #fff;
  border: 1px solid #996699;
  padding: 24px;
  width: 360px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.password-box h4 {
  color: #660066;
  margin-bottom: 12px;
  font-size: 16px;
}

.password-hint {
  font-size: 13px;
  color: #666;
  margin-bottom: 16px;
  line-height: 1.5;
}

.password-input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #ccb0cc;
  font-size: 14px;
  margin-bottom: 8px;
  outline: none;
  font-family: inherit;
}

.password-error {
  color: #cc3333;
  font-size: 12px;
  min-height: 18px;
  margin-bottom: 8px;
}

.password-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.pw-btn {
  padding: 6px 18px;
  border: 1px solid #999;
  background: #f0f0f0;
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
}

.pw-btn.primary {
  background: #996699;
  border-color: #663366;
  color: #fff;
}

.pw-btn.primary:hover {
  background: #aa77aa;
}

/* 相册详情 */
.album-detail-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ddd;
}

.album-detail-header h3 {
  font-size: 18px;
  color: #330033;
}

.back-btn {
  color: #660066;
  font-size: 13px;
  cursor: pointer;
}

.back-btn:hover {
  text-decoration: underline;
}

.photo-grid {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.photo-item {
  cursor: pointer;
  width: 200px;
}

.photo-thumb {
  width: 200px;
  height: 150px;
  border: 1px solid #ccc;
  margin-bottom: 6px;
  overflow: hidden;
  position: relative;
}

.village-photo {
  background: linear-gradient(180deg, #889988 0%, #556655 50%, #334433 100%);
  position: relative;
}

.village-photo::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 40%;
  background: #445544;
}

.village-photo::after {
  content: '槐阴村 人口37';
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 11px;
  background: rgba(0,0,0,0.6);
  padding: 2px 6px;
  white-space: nowrap;
}

.photo-thumb .photo-figure {
  position: absolute;
  bottom: 15%;
  right: 15%;
  width: 12px;
  height: 25px;
  background: rgba(0,0,0,0.3);
  border-radius: 50% 50% 0 0;
  filter: blur(1px);
}

.photo-caption {
  font-size: 12px;
  color: #666;
  line-height: 1.4;
}

/* 照片查看器 */
.photo-viewer {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.photo-viewer-content {
  position: relative;
  text-align: center;
}

.photo-large {
  width: 600px;
  height: 450px;
  margin-bottom: 16px;
  border: 2px solid #333;
  position: relative;
}

.village-photo-large {
  background: linear-gradient(180deg, #778877 0%, #445544 50%, #223322 100%);
}

.village-photo-large::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 75%;
  height: 45%;
  background: #334433;
}

.village-photo-large::after {
  content: '槐阴村 人口37';
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 18px;
  background: rgba(0,0,0,0.6);
  padding: 4px 12px;
  white-space: nowrap;
  letter-spacing: 2px;
}

.large-figure {
  position: absolute;
  bottom: 20%;
  right: 20%;
  width: 30px;
  height: 60px;
  background: rgba(0,0,0,0.7);
  border-radius: 50% 50% 0 0;
  filter: blur(0.5px);
}

.large-figure::before {
  content: '';
  position: absolute;
  top: 30%;
  left: 20%;
  right: 20%;
  height: 2px;
  background: #000;
}

.photo-viewer-caption {
  color: #ccc;
  font-size: 14px;
}

.photo-close {
  position: absolute;
  top: -40px;
  right: 0;
  background: none;
  border: none;
  color: #fff;
  font-size: 28px;
  cursor: pointer;
}

/* 留言板 */
.board-list {
  max-width: 700px;
  margin: 0 auto;
}

.board-item {
  display: flex;
  gap: 12px;
  background: #fff;
  border: 1px solid #e0d0e0;
  padding: 14px;
  margin-bottom: 12px;
}

.board-avatar {
  width: 40px;
  height: 40px;
  background: #999;
  flex-shrink: 0;
  border-radius: 4px;
}

.board-avatar.anonymous {
  background: #666;
  position: relative;
}

.board-avatar.anonymous::after {
  content: '?';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-weight: bold;
  font-size: 20px;
}

.board-content {
  flex: 1;
  min-width: 0;
}

.board-name {
  font-size: 13px;
  font-weight: bold;
  color: #660066;
  margin-bottom: 2px;
}

.board-time {
  font-size: 11px;
  color: #999;
  margin-bottom: 6px;
}

.board-text {
  font-size: 13px;
  color: #333;
  line-height: 1.5;
}

.board-empty-tip {
  text-align: center;
  color: #999;
  font-size: 12px;
  padding: 20px;
}

/* ================= QQ邮箱 ================= */
.mail-window {
  width: 780px;
  height: 560px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -55%);
  background: #fff;
}

.mail-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* 登录 */
.mail-login {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #e8f0ff 0%, #d0e0f8 100%);
}

.login-box {
  background: #fff;
  border: 1px solid #aaccff;
  padding: 30px 40px;
  width: 360px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.login-title {
  color: #0066cc;
  text-align: center;
  margin-bottom: 24px;
  font-size: 20px;
}

.login-field {
  margin-bottom: 16px;
}

.login-field label {
  display: block;
  font-size: 13px;
  color: #333;
  margin-bottom: 6px;
}

.login-input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #aaccff;
  font-size: 14px;
  outline: none;
  font-family: inherit;
}

.login-input.readonly {
  background: #f5f5f5;
  color: #666;
}

.login-input:focus {
  border-color: #0066cc;
  box-shadow: 0 0 4px rgba(0, 102, 204, 0.3);
}

.login-hint {
  font-size: 11px;
  color: #999;
  margin-bottom: 12px;
}

.login-error {
  color: #cc3333;
  font-size: 12px;
  min-height: 18px;
  margin-bottom: 8px;
}

.login-btn {
  width: 100%;
  padding: 10px;
  background: linear-gradient(180deg, #0088ee 0%, #0066cc 100%);
  border: 1px solid #0055aa;
  color: #fff;
  font-size: 15px;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: 4px;
}

.login-btn:hover {
  background: linear-gradient(180deg, #2299ff 0%, #0077dd 100%);
}

/* 邮箱主界面 */
.mail-main {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.mail-sidebar {
  width: 180px;
  background: linear-gradient(180deg, #f0f5ff 0%, #e0ecff 100%);
  border-right: 1px solid #c0d4f0;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}

.mail-user {
  padding: 16px;
  border-bottom: 1px solid #c0d4f0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: bold;
  color: #003366;
}

.mail-user-avatar {
  width: 32px;
  height: 32px;
  background: #888;
  border-radius: 4px;
}

.mail-folders {
  flex: 1;
  padding: 10px 0;
}

.folder-item {
  padding: 10px 16px;
  font-size: 13px;
  color: #333;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.15s;
}

.folder-item:hover {
  background: #d0e0ff;
}

.folder-item.active {
  background: #aaccff;
  color: #003366;
  font-weight: bold;
}

.folder-count {
  font-size: 11px;
  background: #ccc;
  color: #fff;
  padding: 1px 6px;
  border-radius: 10px;
}

.folder-item.active .folder-count {
  background: #0066cc;
}

.mail-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
}

.mail-list-pane {
  display: none;
  flex: 1;
  flex-direction: column;
  overflow: hidden;
}

.mail-list-pane.active {
  display: flex;
}

.mail-list-header {
  padding: 12px 16px;
  font-size: 16px;
  font-weight: bold;
  color: #003366;
  border-bottom: 2px solid #aaccff;
  flex-shrink: 0;
}

.mail-list {
  flex: 1;
  overflow-y: auto;
}

.mail-item {
  padding: 10px 16px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  transition: background 0.15s;
}

.mail-item:hover {
  background: #f0f5ff;
}

.mail-item.unread {
  background: #fff8f0;
}

.mail-item.unread:hover {
  background: #fff0e0;
}

.mail-sender {
  font-size: 13px;
  font-weight: bold;
  color: #333;
  margin-bottom: 4px;
  display: flex;
  justify-content: space-between;
}

.mail-time {
  font-weight: normal;
  color: #999;
  font-size: 11px;
}

.mail-subject {
  font-size: 13px;
  color: #003366;
  margin-bottom: 4px;
}

.mail-preview {
  font-size: 12px;
  color: #999;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.draft-recipient {
  color: #0066cc;
}

/* 邮件详情 */
.mail-detail-pane {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.mail-detail-header {
  padding: 12px 16px;
  border-bottom: 2px solid #aaccff;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.mail-detail-header h3 {
  font-size: 16px;
  color: #003366;
}

.mail-detail-meta {
  padding: 10px 16px;
  font-size: 12px;
  color: #666;
  background: #f5f8ff;
  border-bottom: 1px solid #e0e8f0;
  flex-shrink: 0;
}

.mail-detail-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.puzzle-intro {
  font-size: 12px;
  color: #999;
  margin-bottom: 20px;
  font-style: italic;
}

.sentence-puzzle {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}

.sentence-item {
  padding: 12px 16px;
  background: #f0f5ff;
  border: 1px solid #c0d4f0;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  color: #333;
  transition: all 0.2s;
  line-height: 1.5;
}

.sentence-item:hover {
  background: #e0ecff;
  border-color: #aaccff;
}

.sentence-item.selected {
  background: #ffd6d6;
  border-color: #ff9999;
  opacity: 0.6;
}

.sentence-item.sorted {
  background: #e0ffe0;
  border-color: #99cc99;
  cursor: default;
}

.puzzle-status {
  font-size: 13px;
  color: #666;
  margin-bottom: 10px;
  min-height: 20px;
}

.puzzle-status.error {
  color: #cc3333;
}

.puzzle-status.success {
  color: #008833;
  font-weight: bold;
}

/* 邮件揭示内容 */
.mail-reveal {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px dashed #ccc;
  animation: fadeIn 1s ease;
}

.revealed-text p {
  font-size: 14px;
  color: #333;
  line-height: 2;
  margin-bottom: 4px;
  text-indent: 2em;
}

.audio-section {
  margin-top: 24px;
  padding: 16px;
  background: #f8f8f8;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.audio-label {
  font-size: 12px;
  color: #666;
  margin-bottom: 10px;
}

.audio-player {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.audio-play-btn {
  width: 44px;
  height: 32px;
  background: #0066cc;
  border: none;
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  font-family: inherit;
  padding: 0;
}

.audio-play-btn:hover {
  background: #0077ee;
}

.audio-wave {
  flex: 1;
  height: 32px;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 4px;
}

.wave-bar {
  flex: 1;
  background: #aaccff;
  height: 20%;
  border-radius: 2px 2px 0 0;
  transition: height 0.15s ease;
}

.audio-player.playing .wave-bar {
  animation: waveAnim 0.6s ease-in-out infinite alternate;
}

.audio-player.playing .wave-bar:nth-child(1) { animation-delay: 0s; }
.audio-player.playing .wave-bar:nth-child(2) { animation-delay: 0.05s; }
.audio-player.playing .wave-bar:nth-child(3) { animation-delay: 0.1s; }
.audio-player.playing .wave-bar:nth-child(4) { animation-delay: 0.15s; }
.audio-player.playing .wave-bar:nth-child(5) { animation-delay: 0.2s; }
.audio-player.playing .wave-bar:nth-child(6) { animation-delay: 0.25s; }
.audio-player.playing .wave-bar:nth-child(7) { animation-delay: 0.3s; }
.audio-player.playing .wave-bar:nth-child(8) { animation-delay: 0.35s; }
.audio-player.playing .wave-bar:nth-child(9) { animation-delay: 0.4s; }
.audio-player.playing .wave-bar:nth-child(10) { animation-delay: 0.45s; }
.audio-player.playing .wave-bar:nth-child(11) { animation-delay: 0.5s; }
.audio-player.playing .wave-bar:nth-child(12) { animation-delay: 0.55s; }

@keyframes waveAnim {
  from { height: 15%; }
  to { height: 90%; }
}

.audio-time {
  font-size: 12px;
  color: #666;
  min-width: 40px;
  font-family: monospace;
}

.audio-transcript {
  font-size: 13px;
  color: #666;
  font-style: italic;
  line-height: 1.8;
  padding: 10px;
  background: #fff;
  border: 1px dashed #ccc;
  min-height: 60px;
}

.audio-transcript .transcript-line {
  opacity: 0;
  animation: transcriptFade 0.5s ease forwards;
}

@keyframes transcriptFade {
  to { opacity: 1; }
}

.audio-transcript .transcript-line.distorted {
  color: #999;
}

.audio-transcript .transcript-line.whisper {
  color: #666;
  font-size: 12px;
}

.audio-transcript .transcript-line.other-voice {
  color: #660000;
  font-weight: bold;
}

/* ================= 记事本窗口 ================= */
.notepad-window {
  width: 480px;
  height: 360px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -55%);
  background: #fff;
  color: #000;
}

.notepad-titlebar {
  background: linear-gradient(180deg, #ffffff 0%, #e0e0e0 100%);
  color: #000;
  padding: 4px 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  border-bottom: 1px solid #ccc;
  flex-shrink: 0;
}

.notepad-titlebar .titlebar-left {
  display: flex;
  align-items: center;
  gap: 6px;
}

.notepad-icon {
  font-size: 14px;
}

.notepad-title {
  color: #000;
}

.notepad-menu {
  background: #f0f0f0;
  padding: 4px 10px;
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: #000;
  border-bottom: 1px solid #ccc;
  flex-shrink: 0;
}

.notepad-menu span {
  cursor: pointer;
  padding: 2px 4px;
}

.notepad-menu span:hover {
  background: #cceeff;
}

.notepad-body {
  flex: 1;
  overflow: auto;
  background: #fff;
}

.notepad-text {
  padding: 10px;
  font-family: "SimSun", "宋体", monospace;
  font-size: 14px;
  color: #000;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-all;
}

.notepad-text.scary {
  color: #660000;
  animation: textGlitch 0.3s ease;
}

@keyframes textGlitch {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-2px); }
  75% { transform: translateX(2px); }
}

/* ================= 浏览器窗口 ================= */
.browser-window {
  width: 880px;
  height: 620px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -55%);
  background: #fff;
  color: #000;
}

.browser-titlebar {
  background: linear-gradient(180deg, #f0f0f0 0%, #d8d8d8 100%);
  color: #000;
}

.browser-logo {
  color: #0066cc;
  font-style: italic;
  font-weight: bold;
  font-size: 18px;
}

.browser-toolbar {
  background: #f0f0f0;
  padding: 6px 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid #ccc;
  flex-shrink: 0;
}

.browser-btn {
  width: 28px;
  height: 26px;
  border: 1px solid #bbb;
  background: linear-gradient(180deg, #fff 0%, #eee 100%);
  cursor: pointer;
  font-size: 14px;
  border-radius: 3px;
  padding: 0;
  color: #333;
}

.browser-btn:hover:not(:disabled) {
  background: linear-gradient(180deg, #f8f8f8 0%, #ddd 100%);
  border-color: #999;
}

.browser-btn:disabled {
  color: #ccc;
  cursor: default;
}

.address-bar {
  flex: 1;
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid #bbb;
  border-radius: 3px;
  padding: 0 8px;
  height: 26px;
}

.address-prefix {
  font-size: 12px;
  color: #999;
}

.address-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 13px;
  font-family: inherit;
  background: transparent;
  padding: 0 4px;
}

.address-input.editable {
  background: #fffacd;
}

.go-btn {
  width: 50px;
  font-size: 12px;
}

.browser-content {
  flex: 1;
  overflow: auto;
  background: #fff;
  color: #000;
  font-size: 13px;
}

.tieba-page {
  display: none;
  min-height: 100%;
}

.tieba-page.active {
  display: block;
}

/* 贴吧头部 */
.tieba-header {
  background: linear-gradient(180deg, #2b7bd5 0%, #1a6bc5 100%);
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tieba-logo {
  font-size: 22px;
  font-weight: bold;
  color: #fff;
  font-style: italic;
}

.tieba-search {
  display: flex;
  align-items: center;
}

.tieba-search-input {
  width: 300px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid #ccc;
  font-size: 13px;
  outline: none;
  font-family: inherit;
  border-radius: 2px 0 0 2px;
}

.tieba-search-btn {
  height: 32px;
  padding: 0 18px;
  background: #e0e0e0;
  border: 1px solid #ccc;
  border-left: none;
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
  border-radius: 0 2px 2px 0;
}

.tieba-search-btn:hover {
  background: #d0d0d0;
}

.tieba-nav {
  background: #f5f5f5;
  border-bottom: 1px solid #ddd;
  padding: 0 20px;
  display: flex;
  gap: 24px;
}

.tieba-nav span {
  padding: 8px 0;
  font-size: 13px;
  color: #333;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}

.tieba-nav span:hover {
  color: #2b7bd5;
}

/* 贴吧首页欢迎 */
.tieba-welcome {
  padding: 60px 40px;
  text-align: center;
  background: linear-gradient(180deg, #e8f2ff 0%, #fff 100%);
}

.tieba-welcome h2 {
  font-size: 28px;
  color: #2b7bd5;
  margin-bottom: 12px;
}

.tieba-welcome p {
  font-size: 14px;
  color: #666;
  margin-bottom: 30px;
}

.hot-tags {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.hot-tag {
  padding: 6px 14px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 20px;
  font-size: 13px;
  color: #666;
  cursor: pointer;
  transition: all 0.2s;
}

.hot-tag:hover {
  border-color: #2b7bd5;
  color: #2b7bd5;
}

/* 搜索结果页 */
.search-result {
  padding: 20px;
}

.result-header {
  font-size: 14px;
  color: #666;
  padding-bottom: 12px;
  border-bottom: 1px solid #eee;
  margin-bottom: 20px;
}

.result-header strong {
  color: #cc0000;
  font-size: 16px;
}

.no-result {
  padding: 30px 20px;
}

.no-result p {
  font-size: 14px;
  color: #666;
  line-height: 2;
}

.suggest-text {
  margin-top: 16px;
}

.suggest-link {
  color: #2b7bd5;
  text-decoration: none;
  cursor: pointer;
}

.suggest-link:hover {
  text-decoration: underline;
}

/* 贴吧banner */
.tieba-banner {
  background: linear-gradient(135deg, #2b7bd5 0%, #1a5599 100%);
  color: #fff;
  padding: 24px 30px;
}

.tieba-banner h2 {
  font-size: 24px;
  margin-bottom: 8px;
}

.tieba-banner p {
  font-size: 13px;
  opacity: 0.9;
}

.banner-warn {
  margin-top: 8px;
  font-size: 12px !important;
  color: #ffcc99 !important;
}

.hidden-banner {
  background: linear-gradient(135deg, #3a3a3a 0%, #1a1a1a 100%);
}

/* 帖子列表 */
.tieba-thread-list {
  padding: 10px 20px;
}

.thread-item {
  padding: 12px 0;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  transition: background 0.15s;
}

.thread-item:hover {
  background: #f5f8ff;
}

.thread-item.pinned .thread-title::before {
  content: '置顶';
  display: inline-block;
  background: #ff6600;
  color: #fff;
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 2px;
  margin-right: 8px;
  vertical-align: middle;
}

.thread-item.pinned-red .thread-title::before {
  content: '置顶';
  display: inline-block;
  background: #cc0000;
  color: #fff;
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 2px;
  margin-right: 8px;
  vertical-align: middle;
}

.thread-title {
  font-size: 15px;
  color: #2b7bd5;
  margin-bottom: 6px;
  font-weight: bold;
}

.thread-item:hover .thread-title {
  color: #ff6600;
}

.thread-meta {
  font-size: 12px;
  color: #999;
  display: flex;
  gap: 16px;
}

.thread-author {
  color: #666;
}

/* 帖子详情 */
.thread-detail-header {
  padding: 14px 20px;
  border-bottom: 2px solid #2b7bd5;
  display: flex;
  align-items: center;
  gap: 16px;
  background: #f8f8f8;
}

.thread-detail-header h3 {
  font-size: 17px;
  color: #333;
}

.thread-posts {
  padding: 10px 20px;
}

.post-item {
  display: flex;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid #eee;
}

.post-item.floor-lz {
  background: #fff8f0;
  margin: -10px -20px 0;
  padding: 14px 20px;
  border-bottom: 2px solid #ffd8b8;
}

.post-left {
  width: 100px;
  text-align: center;
  flex-shrink: 0;
}

.post-avatar {
  width: 60px;
  height: 60px;
  background: #999;
  margin: 0 auto 6px;
  border-radius: 4px;
}

.post-avatar.special-avatar {
  background: linear-gradient(135deg, #333 0%, #111 100%);
  position: relative;
  overflow: hidden;
}

.post-avatar.special-avatar::before {
  content: '槐';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  color: #666;
  font-size: 24px;
  font-family: "KaiTi", serif;
}

.post-author {
  font-size: 12px;
  color: #2b7bd5;
  margin-bottom: 2px;
  cursor: pointer;
  word-break: break-all;
}

.post-author:hover {
  text-decoration: underline;
}

.author-special {
  color: #666;
}

.post-floor {
  font-size: 11px;
  color: #999;
}

.post-right {
  flex: 1;
  min-width: 0;
}

.post-content {
  font-size: 14px;
  color: #333;
  line-height: 1.6;
  margin-bottom: 8px;
}

.post-info {
  font-size: 11px;
  color: #999;
  display: flex;
  gap: 12px;
}

.post-highlight {
  background: #fff8f8;
  margin: 0 -20px;
  padding-left: 20px;
  padding-right: 20px;
  border-left: 3px solid #cc6666;
}

.weird-time {
  color: #660000;
  font-weight: bold;
}

.morse-like {
  font-family: monospace;
  letter-spacing: 2px;
  color: #666 !important;
}

.deleted-post {
  opacity: 0.6;
}

.deleted-content {
  color: #999;
  font-style: italic;
}

.deleted-avatar {
  background: #ddd;
  position: relative;
}

.deleted-avatar::after {
  content: '×';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 28px;
  font-weight: bold;
}

.filler-posts .post-item {
  opacity: 0.7;
}

/* 用户主页 */
.user-home {
  padding: 20px;
}

.user-home-header {
  margin-bottom: 16px;
}

.user-profile {
  display: flex;
  gap: 20px;
  margin-bottom: 30px;
  padding: 20px;
  background: #f8f8f8;
  border: 1px solid #ddd;
}

.user-avatar-big {
  width: 100px;
  height: 100px;
  background: #999;
  border-radius: 4px;
  flex-shrink: 0;
}

.user-avatar-big.special-avatar-big {
  background: linear-gradient(135deg, #333 0%, #111 100%);
  position: relative;
  overflow: hidden;
}

.user-avatar-big.special-avatar-big::before {
  content: '槐';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  color: #666;
  font-size: 42px;
  font-family: "KaiTi", serif;
}

.user-info h2 {
  font-size: 22px;
  color: #333;
  margin-bottom: 12px;
}

.user-stat {
  font-size: 13px;
  color: #666;
  margin-bottom: 6px;
  line-height: 1.5;
}

.weird-date {
  color: #660000;
  font-weight: bold;
}

.user-bg-section {
  margin-bottom: 30px;
}

.user-bg-section h3,
.user-posts-section h3 {
  font-size: 16px;
  color: #333;
  margin-bottom: 12px;
  padding-bottom: 6px;
  border-bottom: 2px solid #2b7bd5;
}

.user-bg-photo {
  width: 100%;
  max-width: 500px;
  height: 280px;
  background: #222;
  border: 1px solid #666;
  position: relative;
  cursor: pointer;
  overflow: hidden;
}

.bg-photo-inner {
  width: 100%;
  height: 100%;
  background: 
    linear-gradient(180deg, #444 0%, #333 40%, #222 100%);
  position: relative;
}

.bg-photo-inner::before {
  content: '';
  position: absolute;
  bottom: 20%;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 150px;
  background: #111;
  border-radius: 40% 40% 0 0;
}

.bg-photo-inner::after {
  content: '';
  position: absolute;
  bottom: 18%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  gap: 2px;
  width: 300px;
}

.bg-people {
  position: absolute;
  bottom: 20%;
  width: 12px;
  height: 24px;
  background: #111;
  border-radius: 40% 40% 0 0;
  opacity: 0.8;
}

.photo-tooltip {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0,0,0,0.8);
  color: #fff;
  padding: 4px 8px;
  font-size: 11px;
  opacity: 0;
  transition: opacity 0.3s;
  font-family: monospace;
}

.user-bg-photo:hover .photo-tooltip {
  opacity: 1;
}

.bg-caption {
  font-size: 12px;
  color: #999;
  margin-top: 6px;
}

.user-dynamic-list {
  margin-bottom: 10px;
}

.user-dynamic-item {
  padding: 12px;
  background: #f8f8f8;
  border-left: 3px solid #2b7bd5;
  margin-bottom: 8px;
}

.dynamic-time {
  font-size: 12px;
  color: #999;
  margin-bottom: 4px;
}

.dynamic-content {
  font-size: 14px;
  color: #333;
  line-height: 1.5;
}

.no-more {
  text-align: center;
  color: #999;
  font-size: 12px;
  padding: 16px;
}

/* 隐藏贴吧 */
.hidden-tieba-content {
  padding: 20px;
}

.village-rules {
  background: #fff8f8;
  border: 1px solid #cc9999;
  padding: 20px 24px;
  margin: 20px 0;
}

.village-rules h3 {
  color: #660000;
  margin-bottom: 16px;
  font-size: 18px;
}

.rules-list {
  padding-left: 20px;
  line-height: 2.2;
  color: #333;
  font-size: 15px;
}

.rules-list li::marker {
  color: #660000;
  font-weight: bold;
}

.member-section {
  margin-top: 30px;
}

.member-section h3 {
  font-size: 16px;
  color: #333;
  margin-bottom: 16px;
  padding-bottom: 6px;
  border-bottom: 2px solid #2b7bd5;
}

.member-list {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.member-card {
  width: 120px;
  padding: 12px 8px;
  border: 1px solid #ddd;
  background: #fafafa;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
}

.member-card:hover {
  border-color: #2b7bd5;
  background: #f0f5ff;
}

.member-card.player-card {
  border-color: #cc0000;
  background: #fff8f8;
  animation: playerCardPulse 2s ease-in-out infinite;
}

@keyframes playerCardPulse {
  0%, 100% { box-shadow: 0 0 0 rgba(204, 0, 0, 0); }
  50% { box-shadow: 0 0 10px rgba(204, 0, 0, 0.4); }
}

.member-avatar-small {
  width: 48px;
  height: 48px;
  background: #999;
  margin: 0 auto 8px;
  border-radius: 4px;
}

.member-name-small {
  font-size: 12px;
  color: #333;
  margin-bottom: 4px;
  word-break: break-all;
  line-height: 1.3;
}

.member-join-date {
  font-size: 10px;
  color: #999;
}

.member-card.player-card .member-name-small {
  color: #660000;
  font-weight: bold;
}

/* 成员详情弹窗 */
.member-detail-modal {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.member-detail-box {
  background: #fff;
  border: 1px solid #999;
  padding: 24px;
  width: 360px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  color: #000;
}

.member-detail-box h3 {
  color: #333;
  margin-bottom: 16px;
  font-size: 18px;
}

.member-detail-info {
  font-size: 14px;
  color: #333;
  line-height: 2;
  margin-bottom: 20px;
}

.member-detail-info .ban-reason {
  color: #cc0000;
  font-weight: bold;
  font-size: 16px;
  margin-top: 8px;
  padding: 8px;
  background: #fff0f0;
  border: 1px solid #ffcccc;
}

.close-modal-btn {
  width: 100%;
  padding: 8px;
  background: #eee;
  border: 1px solid #ccc;
  cursor: pointer;
  font-size: 14px;
  font-family: inherit;
}

.close-modal-btn:hover {
  background: #ddd;
}

/* 404页面 */
.error-404-container {
  padding: 80px 40px;
  text-align: center;
}

.error-code {
  font-size: 120px;
  font-weight: bold;
  color: #cc0000;
  line-height: 1;
  margin-bottom: 10px;
  font-family: "Arial", sans-serif;
}

.error-msg {
  font-size: 28px;
  color: #666;
  margin-bottom: 20px;
}

.error-sub {
  font-size: 14px;
  color: #999;
  margin-bottom: 30px;
}

.error-little {
  font-size: 12px;
  color: #660000;
  margin-bottom: 30px;
  letter-spacing: 1px;
  min-height: 20px;
}

.error-back-btn {
  padding: 10px 30px;
  background: #2b7bd5;
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 14px;
  font-family: inherit;
}

.error-back-btn:hover {
  background: #1a6bc5;
}

/* ================= Jump Scare ================= */
.jumpscare-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  background: #000;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.jumpscare-content {
  width: 400px;
  height: 400px;
  background: #000;
  position: relative;
  animation: scareFlash 0.3s ease;
}

@keyframes scareFlash {
  0% { transform: scale(0.8); opacity: 0; }
  50% { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* 无脸人形象 */
.jumpscare-content::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 300px;
  background: #111;
  border-radius: 100px 100px 40px 40px / 120px 120px 40px 40px;
  box-shadow: 0 0 60px rgba(255, 0, 0, 0.3);
}

/* 无脸 */
.jumpscare-content::after {
  content: '';
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 140px;
  background: #222;
  border-radius: 60px 60px 40px 40px / 80px 80px 40px 40px;
}

/* 屏幕抖动 */
.screen-shake {
  animation: screenShake 0.4s ease;
}

@keyframes screenShake {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-3px, 2px); }
  20% { transform: translate(3px, -2px); }
  30% { transform: translate(-2px, -3px); }
  40% { transform: translate(2px, 3px); }
  50% { transform: translate(-3px, 1px); }
  60% { transform: translate(3px, -1px); }
  70% { transform: translate(-2px, 2px); }
  80% { transform: translate(2px, -2px); }
  90% { transform: translate(-1px, 1px); }
}

/* 黑闪效果 */
.black-flash {
  animation: blackFlash 0.5s ease;
}

@keyframes blackFlash {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(0); }
}

/* 帖子全部变成同一句话效果 */
.text-glitch-all .thread-item .thread-title {
  color: #660000;
  animation: glitchText 0.5s ease infinite;
}

@keyframes glitchText {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-1px); color: #880000; }
  75% { transform: translateX(1px); color: #440000; }
}

/* ================= 游戏菜单 ================= */
.game-menu-btn {
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 5000;
  background: rgba(0, 0, 0, 0.6);
  color: #888;
  border: 1px solid #333;
  padding: 6px 12px;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
}

.game-menu-btn:hover {
  background: rgba(30, 10, 10, 0.8);
  color: #aa6666;
  border-color: #663333;
}

.game-menu-panel {
  position: fixed;
  top: 45px;
  right: 10px;
  z-index: 5001;
  background: rgba(0, 0, 0, 0.9);
  border: 1px solid #442222;
  padding: 16px;
  width: 160px;
}

.game-menu-panel h3 {
  font-size: 14px;
  color: #aa6666;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #442222;
}

.menu-btn {
  display: block;
  width: 100%;
  padding: 8px;
  margin-bottom: 6px;
  background: #111;
  border: 1px solid #333;
  color: #999;
  cursor: pointer;
  font-size: 13px;
  text-align: left;
  font-family: inherit;
}

.menu-btn:hover {
  background: #221;
  border-color: #664444;
  color: #cc8888;
}

/* 提示面板 */
.hint-panel {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 5000;
  background: rgba(0, 0, 0, 0.9);
  border: 1px solid #442222;
  padding: 16px 20px;
  width: 320px;
  max-height: 60vh;
  overflow-y: auto;
  font-size: 13px;
}

.hint-panel h3 {
  font-size: 14px;
  color: #aa6666;
  margin-bottom: 12px;
}

.hint-content {
  color: #aaa;
  line-height: 1.7;
  margin-bottom: 12px;
}

.hint-content p {
  margin-bottom: 8px;
}

.hint-content .hint-level {
  color: #cc8888;
  font-weight: bold;
  margin-top: 10px;
}

.hint-close {
  width: 100%;
  padding: 6px;
  background: #111;
  border: 1px solid #333;
  color: #999;
  cursor: pointer;
  font-size: 12px;
  font-family: inherit;
}

.hint-close:hover {
  background: #221;
  color: #cc8888;
}

/* ================= 章节完成 ================= */
.chapter-complete {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9000;
}

.complete-content {
  text-align: center;
  animation: fadeIn 1s ease;
}

.complete-content h2 {
  font-size: 36px;
  color: #8B0000;
  margin-bottom: 16px;
  font-family: "KaiTi", serif;
  letter-spacing: 8px;
  text-shadow: 0 0 20px rgba(139, 0, 0, 0.5);
}

.complete-content p {
  font-size: 16px;
  color: #999;
  margin-bottom: 30px;
}

.complete-btn {
  padding: 12px 40px;
  background: #1a0505;
  border: 1px solid #442222;
  color: #999;
  cursor: pointer;
  font-size: 16px;
  font-family: inherit;
  letter-spacing: 3px;
}

.complete-btn:hover {
  background: #2a0808;
  color: #cc8888;
  border-color: #663333;
}

/* ================= 响应式 ================= */
@media (max-width: 900px) {
  .window {
    min-width: auto;
    min-height: auto;
    width: 95vw;
    max-width: 100vw;
  }
  
  .qq-window { width: 95vw; height: 85vh; }
  .qzone-window { width: 95vw; height: 90vh; }
  .mail-window { width: 95vw; height: 90vh; }
  .browser-window { width: 95vw; height: 90vh; }
  .notepad-window { width: 90vw; height: 70vh; }
  
  .game-title {
    font-size: 80px;
    letter-spacing: 20px;
    padding-left: 20px;
  }
  
  .subtitle-1 { font-size: 16px; }
  .subtitle-2 { font-size: 14px; }
  
  .tieba-search-input { width: 180px; }
  .user-profile { flex-direction: column; align-items: center; text-align: center; }
  .post-left { width: 80px; }
  .post-avatar { width: 48px; height: 48px; }
  
  .mail-sidebar { width: 140px; }
  #tab-home.active { flex-direction: column; }
  .home-sidebar { width: 100%; }
}


/* ================= 小红书风格 ================= */
.xhs-page {
  display: none;
  min-height: 100%;
  background: #fff;
  color: #333;
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  flex-direction: column;
  position: relative;
}

.xhs-page.active {
  display: flex;
}

.xhs-topbar {
  background: #fff;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid #f0f0f0;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 10;
}

.xhs-logo {
  font-size: 18px;
  font-weight: bold;
  color: #ff2442;
  flex-shrink: 0;
  letter-spacing: 1px;
}

.xhs-searchbar {
  flex: 1;
  background: #f5f5f5;
  border-radius: 20px;
  padding: 6px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.xhs-search-icon {
  font-size: 14px;
  color: #999;
}

.xhs-search-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 13px;
  font-family: inherit;
  color: #333;
}

.xhs-actions {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}

.xhs-action-btn {
  font-size: 18px;
  cursor: pointer;
}

.xhs-tabs {
  background: #fff;
  padding: 10px 0;
  display: flex;
  justify-content: center;
  gap: 32px;
  border-bottom: 1px solid #f5f5f5;
  flex-shrink: 0;
}

.xhs-tab {
  font-size: 15px;
  color: #666;
  cursor: pointer;
  padding: 2px 0;
  position: relative;
}

.xhs-tab.active {
  color: #333;
  font-weight: bold;
}

.xhs-tab.active-main {
  color: #ff2442;
  font-weight: bold;
}

.xhs-tab.active-main::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 2px;
  background: #ff2442;
  border-radius: 1px;
}

/* 瀑布流 */
.xhs-waterfall {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-content: start;
  padding-bottom: 60px;
}

.xhs-card {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  transition: transform 0.2s;
}

.xhs-card:hover {
  transform: translateY(-2px);
}

.xhs-card-img {
  width: 100%;
  aspect-ratio: 3 / 4;
  background: #eee;
  position: relative;
  overflow: hidden;
}

.xhs-card-title {
  padding: 8px 10px;
  font-size: 13px;
  color: #333;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.xhs-card-footer {
  padding: 0 10px 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: #999;
}

.xhs-card-user {
  display: flex;
  align-items: center;
  gap: 4px;
  max-width: 70%;
  overflow: hidden;
}

.xhs-card-user-avatar {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ccc;
  flex-shrink: 0;
}

.xhs-card-username {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.xhs-card-like {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}

/* 底栏导航 */
.xhs-bottom-nav {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 56px;
  background: #fff;
  border-top: 1px solid #f0f0f0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-shrink: 0;
}

.xhs-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 10px;
  color: #999;
  cursor: pointer;
}

.xhs-nav-item.active {
  color: #ff2442;
}

.xhs-nav-item .nav-icon {
  font-size: 22px;
}

.xhs-nav-plus .plus-icon {
  width: 40px;
  height: 28px;
  background: linear-gradient(90deg, #ff2442, #ff6b81);
  color: #fff;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: bold;
}

/* 搜索页 */
.xhs-back-btn {
  font-size: 20px;
  color: #333;
  cursor: pointer;
  flex-shrink: 0;
  padding: 4px;
}

.xhs-search-go {
  color: #ff2442;
  font-size: 14px;
  cursor: pointer;
  flex-shrink: 0;
}

.xhs-search-user {
  padding: 12px;
  border-bottom: 8px solid #f7f7f7;
}

.xhs-user-card {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  transition: background 0.15s;
}

.xhs-user-card:hover {
  background: #f8f8f8;
}

.xhs-user-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #ddd;
  flex-shrink: 0;
}

.popo-avatar {
  background: linear-gradient(135deg, #d4a574 0%, #8b6f47 100%);
  position: relative;
  overflow: hidden;
}

.popo-avatar::before {
  content: '阿婆';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 16px;
  font-family: "KaiTi", serif;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

.xhs-user-info {
  flex: 1;
  min-width: 0;
}

.xhs-user-name {
  font-size: 15px;
  font-weight: bold;
  color: #333;
  margin-bottom: 2px;
}

.xhs-user-desc {
  font-size: 12px;
  color: #999;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.xhs-user-stats {
  font-size: 11px;
  color: #bbb;
}

.xhs-follow-btn {
  background: #ff2442;
  color: #fff;
  border: none;
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
  flex-shrink: 0;
}

.xhs-follow-btn:hover {
  background: #e01e39;
}

/* 用户主页 */
.xhs-user-topbar {
  background: rgba(255,255,255,0.95);
}

.xhs-username-top {
  flex: 1;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.xhs-more-btn {
  font-size: 20px;
  color: #666;
  cursor: pointer;
  width: 28px;
  text-align: center;
}

.xhs-user-header {
  position: relative;
  flex-shrink: 0;
}

.xhs-user-banner {
  height: 120px;
  background: linear-gradient(135deg, #f8e0e6 0%, #ffd6dc 50%, #f0c8d0 100%);
}

.xhs-user-profile {
  padding: 0 16px 16px;
  margin-top: -30px;
  display: flex;
  gap: 14px;
  align-items: flex-end;
}

.xhs-avatar-big {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: #ddd;
  border: 3px solid #fff;
  flex-shrink: 0;
  position: relative;
}

.popo-avatar-big {
  background: linear-gradient(135deg, #d4a574 0%, #8b6f47 100%);
  overflow: hidden;
}

.popo-avatar-big::before {
  content: '阿婆';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 22px;
  font-family: "KaiTi", serif;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

/* 无瞳孔效果 */
.popo-avatar-big::after {
  content: '';
  position: absolute;
  top: 42%;
  left: 30%;
  width: 6px;
  height: 6px;
  background: #5a4530;
  border-radius: 50%;
  box-shadow: 28px 0 0 #5a4530;
}

.xhs-profile-info {
  flex: 1;
  min-width: 0;
}

.xhs-profile-name {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 2px;
}

.xhs-profile-id {
  font-size: 12px;
  color: #999;
  margin-bottom: 6px;
}

.xhs-profile-bio {
  font-size: 13px;
  color: #666;
  line-height: 1.5;
  margin-bottom: 10px;
}

.xhs-profile-stats {
  font-size: 12px;
  color: #999;
  margin-bottom: 12px;
  display: flex;
  gap: 16px;
}

.xhs-profile-stats strong {
  color: #333;
  font-size: 14px;
}

.xhs-profile-actions {
  display: flex;
  gap: 8px;
}

.xhs-msg-btn {
  flex: 1;
  padding: 8px;
  background: #f5f5f5;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  color: #333;
  cursor: pointer;
  font-family: inherit;
}

.xhs-msg-btn:hover {
  background: #eee;
}

.xhs-profile-actions .xhs-follow-btn {
  flex: 1;
  padding: 8px;
  border-radius: 6px;
}

.xhs-user-tabs {
  display: flex;
  justify-content: space-around;
  padding: 10px 0;
  border-bottom: 1px solid #f0f0f0;
  flex-shrink: 0;
}

.xhs-user-tab {
  font-size: 14px;
  color: #666;
  cursor: pointer;
  padding: 4px 0;
}

.xhs-user-tab.active {
  color: #333;
  font-weight: bold;
  position: relative;
}

.xhs-user-tab.active::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 2px;
  background: #333;
  border-radius: 1px;
}

/* 笔记网格 */
.xhs-notes-grid {
  flex: 1;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  padding: 2px;
  align-content: start;
}

.xhs-note-thumb {
  aspect-ratio: 1;
  background: #eee;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.xhs-note-thumb .thumb-overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 12px;
}

/* 笔记详情 */
.xhs-note-scroll {
  flex: 1;
  overflow-y: auto;
  padding-bottom: 60px;
}

.xhs-note-images {
  width: 100%;
  aspect-ratio: 3 / 4;
  background: #eee;
  position: relative;
  cursor: pointer;
}

.xhs-note-body {
  padding: 16px;
}

.xhs-note-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 12px;
  line-height: 1.4;
}

.xhs-note-content {
  font-size: 14px;
  color: #333;
  line-height: 1.7;
  margin-bottom: 12px;
  white-space: pre-wrap;
}

.xhs-note-date {
  font-size: 12px;
  color: #999;
  margin-bottom: 12px;
}

.xhs-note-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.xhs-tag {
  color: #517eb8;
  font-size: 13px;
  cursor: pointer;
}

.xhs-note-stats {
  font-size: 13px;
  color: #666;
  display: flex;
  gap: 20px;
  padding: 10px 0;
  border-top: 1px solid #f0f0f0;
}

/* 评论区 */
.xhs-comments-section {
  padding: 16px;
  border-top: 8px solid #f7f7f7;
}

.xhs-comments-header {
  font-size: 14px;
  color: #333;
  font-weight: bold;
  margin-bottom: 14px;
}

.xhs-comments-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.xhs-comment-item {
  display: flex;
  gap: 10px;
}

.xhs-comment-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #ddd;
  flex-shrink: 0;
}

.xhs-comment-body {
  flex: 1;
  min-width: 0;
}

.xhs-comment-name {
  font-size: 12px;
  color: #999;
  margin-bottom: 4px;
}

.xhs-comment-text {
  font-size: 14px;
  color: #333;
  line-height: 1.5;
  word-break: break-all;
}

.xhs-comment-time {
  font-size: 11px;
  color: #ccc;
  margin-top: 4px;
}

.xhs-comment-item.linwan-comment .xhs-comment-name {
  color: #660000;
}

.xhs-comment-item.linwan-comment .xhs-comment-text {
  color: #660000;
  font-style: italic;
}

/* 笔记底部栏 */
.xhs-note-bottom-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 56px;
  background: #fff;
  border-top: 1px solid #f0f0f0;
  display: flex;
  align-items: center;
  padding: 0 14px;
  gap: 12px;
  flex-shrink: 0;
}

.xhs-comment-input {
  flex: 1;
  background: #f5f5f5;
  border-radius: 20px;
  padding: 8px 16px;
  font-size: 13px;
  color: #999;
}

.xhs-bottom-icons {
  display: flex;
  gap: 16px;
  font-size: 18px;
}

/* 图片查看器 */
.xhs-image-viewer {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.92);
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.xhs-image-viewer-content {
  position: relative;
  text-align: center;
  width: 90%;
  max-width: 600px;
}

.xhs-image-big {
  width: 100%;
  aspect-ratio: 3 / 4;
  margin-bottom: 16px;
  position: relative;
}

.xhs-image-info-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #ccc;
  font-size: 13px;
  padding: 0 10px;
}

.xhs-image-detail-btn,
.xhs-image-close {
  cursor: pointer;
  padding: 4px 8px;
}

.xhs-image-detail-panel {
  margin-top: 12px;
  background: rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 12px;
  text-align: left;
}

.detail-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 12px;
  color: #ccc;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.detail-row:last-child {
  border-bottom: none;
}

.detail-row span:first-child {
  color: #999;
}

.detail-row span:last-child {
  color: #fff;
  text-align: right;
  max-width: 60%;
}

/* 林晚主页 */
.linwan-banner {
  background: #1a1a1a;
}

.linwan-avatar {
  background: #000;
  border-color: #333;
}

.linwan-name {
  color: #333;
}

.linwan-bio {
  color: #660000;
  font-size: 13px;
}

.xhs-empty-notes {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #999;
  padding: 60px 0;
  font-size: 14px;
}

.empty-sub {
  font-size: 12px;
  color: #ccc;
  margin-top: 6px;
}

/* 私信界面 */
.xhs-chat-area {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  background: #f7f7f7;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.xhs-chat-offline-tip {
  text-align: center;
  padding: 40px 20px;
  color: #999;
}

.offline-text {
  font-size: 15px;
  margin-bottom: 16px;
  color: #666;
}

.offline-hint {
  font-size: 14px;
  color: #660000;
  margin-bottom: 8px;
  font-family: "KaiTi", serif;
  line-height: 1.6;
}

.offline-small {
  font-size: 11px;
  color: #bbb;
}

.xhs-chat-messages {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.xhs-msg {
  display: flex;
  gap: 8px;
  max-width: 75%;
  animation: msgAppear 0.3s ease;
}

.xhs-msg.me {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.xhs-msg-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #ddd;
  flex-shrink: 0;
}

.xhs-msg-bubble {
  background: #fff;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 14px;
  color: #333;
  line-height: 1.6;
  word-break: break-all;
  border-top-left-radius: 4px;
}

.xhs-msg.me .xhs-msg-bubble {
  background: #95ec69;
  border-top-left-radius: 14px;
  border-top-right-radius: 4px;
}

.xhs-msg.popo-msg .xhs-msg-bubble {
  font-family: "KaiTi", "SimSun", serif;
  font-size: 15px;
}

.xhs-msg-image {
  width: 200px;
  aspect-ratio: 3 / 4;
  background: #eee;
  border-radius: 8px;
  cursor: pointer;
  position: relative;
}

/* 问题选项 */
.xhs-chat-options {
  background: #fff;
  border-top: 1px solid #eee;
  padding: 12px 16px;
  flex-shrink: 0;
}

.chat-options-title {
  font-size: 12px;
  color: #999;
  margin-bottom: 10px;
}

.chat-option-btns {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.chat-option-btn {
  background: #fff5f7;
  border: 1px solid #ffc4d0;
  color: #ff2442;
  padding: 10px 14px;
  border-radius: 20px;
  font-size: 13px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: all 0.2s;
}

.chat-option-btn:hover {
  background: #ffe8ed;
}

.chat-option-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 聊天输入栏 */
.xhs-chat-input-bar {
  background: #fff;
  border-top: 1px solid #eee;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.xhs-chat-input {
  flex: 1;
  background: #f5f5f5;
  border-radius: 20px;
  padding: 8px 14px;
  font-size: 13px;
  color: #999;
}

.xhs-chat-send {
  color: #ff2442;
  font-size: 14px;
  cursor: pointer;
}

.xhs-chat-setting {
  font-size: 18px;
  cursor: pointer;
  flex-shrink: 0;
  padding: 4px;
}

/* 时间调整面板 */
.xhs-chat-time-setting {
  background: #fff8f8;
  border-bottom: 1px solid #ffcccc;
  padding: 12px 16px;
  flex-shrink: 0;
}

.time-setting-box p {
  font-size: 12px;
  color: #660000;
  margin-bottom: 8px;
  font-weight: bold;
}

.time-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  font-size: 13px;
  color: #666;
}

.time-row label {
  width: 50px;
  flex-shrink: 0;
}

.time-row select {
  flex: 1;
  padding: 6px 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 13px;
  font-family: inherit;
  background: #fff;
}

.time-apply-btn {
  width: 100%;
  padding: 8px;
  background: #ff2442;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  margin-top: 4px;
}

.time-hint {
  font-size: 11px;
  color: #999;
  margin-top: 8px !important;
  font-weight: normal !important;
}

/* 笔记图片样式 */
.note-img-1 {
  background: linear-gradient(180deg, #f5e6d3 0%, #e8d4b8 100%);
  position: relative;
}

.note-img-1::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 140px;
  background: #c8a878;
  border-radius: 4px;
  box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
}

.note-img-1::after {
  content: '回头是岸';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #4a3828;
  font-size: 22px;
  font-family: "KaiTi", serif;
  letter-spacing: 4px;
  writing-mode: vertical-rl;
}

/* 岸字缺笔 */
.note-img-1.missing-stroke::after {
  text-shadow: -1px 0 0 transparent;
  opacity: 0.85;
}

.note-img-2 {
  background: linear-gradient(180deg, #e8d8c8 0%, #d0b898 100%);
  position: relative;
}

.note-img-2::before {
  content: '';
  position: absolute;
  top: 15%;
  left: 10%;
  right: 10%;
  bottom: 15%;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(6, 1fr);
  gap: 2px;
}

.note-img-3 {
  background: linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%);
  position: relative;
}

.note-img-3::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120px;
  height: 160px;
  background: #222;
  border: 1px solid #440000;
  box-shadow: 0 0 20px rgba(102, 0, 0, 0.3);
}

.note-img-3::after {
  content: '晚';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #660000;
  font-size: 40px;
  font-family: "KaiTi", serif;
}

.note-img-4 {
  background: linear-gradient(180deg, #2a2a3a 0%, #1a1a2a 100%);
  position: relative;
  overflow: hidden;
}

.note-img-4::before {
  content: '';
  position: absolute;
  bottom: 20%;
  left: 40%;
  width: 50px;
  height: 110px;
  background: #111;
  border-radius: 30% 30% 0 0 / 20% 20% 0 0;
}

/* 河中无倒影 */
.note-img-4::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 20%;
  background: linear-gradient(180deg, transparent 0%, rgba(20,20,40,0.8) 100%);
}

.note-img-5 {
  background: linear-gradient(180deg, #d8c8b8 0%, #b8a898 100%);
  position: relative;
}

.note-img-5::before {
  content: '';
  position: absolute;
  top: 20%;
  left: 25%;
  width: 50%;
  height: 60%;
  background: repeating-linear-gradient(
    180deg,
    #8b4513 0px, #8b4513 8px,
    #a0522d 8px, #a0522d 16px
  );
  border-radius: 4px;
}

.note-img-5::after {
  content: '晚';
  position: absolute;
  top: 28%;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 14px;
  font-family: "KaiTi", serif;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

.note-img-6 {
  background: linear-gradient(180deg, #c8b8a0 0%, #a89880 100%);
  position: relative;
  filter: sepia(0.3);
}

.note-img-6::before {
  content: '';
  position: absolute;
  top: 25%;
  left: 30%;
  width: 40%;
  height: 55%;
  background: #d8c8b0;
  border-radius: 2px;
  border: 1px solid #8b7355;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.note-img-6::after {
  content: '';
  position: absolute;
  top: 35%;
  left: 42%;
  width: 16%;
  height: 30%;
  background: #4a3828;
  border-radius: 40% 40% 20% 20% / 30% 30% 10% 10%;
  box-shadow: -12px 20px 0 -2px #6a5038;
}

/* 无影子提示：脚下亮 */
.note-img-6 .no-shadow-mark {
  position: absolute;
  bottom: 20%;
  left: 42%;
  width: 16%;
  height: 4px;
  background: rgba(255,255,200,0.3);
  border-radius: 50%;
}

.note-img-7 {
  background: #000;
  position: relative;
}

/* 账号注销动画 */
.account-deleting .xhs-notes-grid > * {
  animation: fadeOutNote 0.5s ease forwards;
}

@keyframes fadeOutNote {
  to {
    opacity: 0;
    transform: scale(0.9);
  }
}

/* 老照片婴儿眼睛动画 */
.photo-baby-blink::after {
  animation: babyEyeMove 0.2s ease;
}

@keyframes babyEyeMove {
  0%, 100% { transform: translateX(-50%); }
  50% { transform: translateX(-48%); }
}

/* 屏幕泛红 */
.screen-redden {
  animation: redden 3s ease;
}

@keyframes redden {
  0% { filter: none; }
  50% { filter: sepia(0.3) saturate(1.5) hue-rotate(-10deg); }
  100% { filter: none; }
}

@media (max-width: 900px) {
  .xhs-waterfall { grid-template-columns: 1fr 1fr; }
  .xhs-notes-grid { grid-template-columns: repeat(3, 1fr); }
}


/* ================= 微博风格 ================= */
.weibo-page {
  display: none;
  min-height: 100%;
  background: #f5f5f5;
  color: #333;
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  flex-direction: column;
  position: relative;
}

.weibo-page.active {
  display: flex;
}

.weibo-topbar {
  background: #fff;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 20px;
  border-bottom: 1px solid #e5e5e5;
  height: 50px;
  flex-shrink: 0;
}

.weibo-logo {
  font-size: 20px;
  font-weight: bold;
  color: #ff8200;
  flex-shrink: 0;
  letter-spacing: 1px;
}

.weibo-search {
  flex: 1;
  display: flex;
  max-width: 500px;
}

.weibo-search input {
  flex: 1;
  padding: 6px 12px;
  border: 1px solid #ddd;
  border-right: none;
  border-radius: 4px 0 0 4px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  background: #f9f9f9;
}

.weibo-search button {
  padding: 6px 16px;
  background: #ff8200;
  color: #fff;
  border: none;
  border-radius: 0 4px 4px 0;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
}

.weibo-nav {
  display: flex;
  gap: 20px;
  flex-shrink: 0;
  font-size: 14px;
  color: #666;
}

.weibo-nav span {
  cursor: pointer;
}

.weibo-back-btn {
  font-size: 20px;
  color: #666;
  cursor: pointer;
  flex-shrink: 0;
}

.weibo-chat-title {
  flex: 1;
  text-align: center;
  font-size: 15px;
  color: #333;
}

.weibo-main {
  flex: 1;
  display: flex;
  overflow: hidden;
  max-width: 900px;
  margin: 0 auto;
  width: 100%;
  gap: 16px;
  padding: 16px 0;
}

.weibo-sidebar {
  width: 180px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.weibo-user-card {
  background: #fff;
  padding: 16px;
  border-radius: 4px;
  text-align: center;
  border: 1px solid #eee;
}

.weibo-user-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #ccc;
  margin: 0 auto 8px;
}

.weibo-user-name {
  font-size: 14px;
  font-weight: bold;
  color: #333;
}

.weibo-side-nav {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 4px;
  overflow: hidden;
}

.side-nav-item {
  padding: 10px 16px;
  font-size: 13px;
  color: #666;
  cursor: pointer;
  border-bottom: 1px solid #f5f5f5;
}

.side-nav-item:last-child { border-bottom: none; }
.side-nav-item.active {
  color: #ff8200;
  background: #fffaf0;
}

.weibo-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  padding-right: 4px;
}

.weibo-post {
  background: #fff;
  padding: 14px 16px;
  border-radius: 4px;
  border: 1px solid #eee;
}

.weibo-post-header {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

.post-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #ddd;
  flex-shrink: 0;
}

.police-avatar {
  background: linear-gradient(135deg, #1a4a8a 0%, #0d2a5a 100%);
  position: relative;
}
.police-avatar::after {
  content: '警';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  color: #fff;
  font-size: 14px;
  font-weight: bold;
}

.zhao-avatar-small {
  background: linear-gradient(135deg, #6b8e6b 0%, #4a6b4a 100%);
  position: relative;
}
.zhao-avatar-small::after {
  content: '赵';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  color: #fff;
  font-size: 14px;
}

.zhao-avatar-big {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6b8e6b 0%, #4a6b4a 100%);
  position: relative;
  flex-shrink: 0;
}
.zhao-avatar-big::after {
  content: '赵';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  color: #fff;
  font-size: 22px;
}

.post-info {
  flex: 1;
}

.post-name {
  font-size: 14px;
  font-weight: bold;
  color: #333;
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.verify-badge {
  font-size: 11px;
  color: #ff8200;
  border: 1px solid #ff8200;
  padding: 0 4px;
  border-radius: 2px;
}

.post-time {
  font-size: 12px;
  color: #999;
}

.weibo-post-text {
  font-size: 14px;
  color: #333;
  line-height: 1.7;
  margin-bottom: 10px;
}

.weibo-post-text strong {
  display: block;
  margin-bottom: 8px;
  font-size: 15px;
}

.weibo-post-actions {
  display: flex;
  gap: 24px;
  color: #999;
  font-size: 12px;
  padding-top: 8px;
  border-top: 1px solid #f5f5f5;
  cursor: pointer;
}

.weibo-post-actions span:hover {
  color: #ff8200;
}

.weibo-comments-preview {
  margin-top: 12px;
  background: #f9f9f9;
  padding: 12px;
  border-radius: 4px;
  border: 1px solid #f0f0f0;
}

.comment-item {
  display: flex;
  gap: 8px;
  cursor: pointer;
  padding: 6px;
  border-radius: 4px;
  transition: background 0.2s;
}

.comment-item:hover {
  background: #f0f0f0;
}

.comment-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #ccc;
  flex-shrink: 0;
}

.comment-body {
  flex: 1;
  min-width: 0;
}

.comment-name {
  font-size: 12px;
  color: #ff8200;
  margin-bottom: 2px;
}

.comment-text {
  font-size: 13px;
  color: #333;
  line-height: 1.5;
}

.comment-time {
  font-size: 11px;
  color: #bbb;
  margin-top: 2px;
}

/* 用户搜索结果 */
.weibo-user-result {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 4px;
  padding: 14px 16px;
}

.weibo-user-row {
  display: flex;
  gap: 14px;
  align-items: center;
  cursor: pointer;
}

.weibo-user-info {
  flex: 1;
  min-width: 0;
}

.weibo-user-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.weibo-uname {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.weibo-verified {
  font-size: 12px;
  color: #ff8200;
}

.weibo-user-bio {
  font-size: 13px;
  color: #666;
  margin-bottom: 4px;
}

.weibo-user-stats {
  font-size: 12px;
  color: #999;
}

.weibo-follow-btn {
  background: #ff8200;
  color: #fff;
  border: none;
  padding: 6px 16px;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
}

/* 老赵主页banner */
.weibo-banner {
  position: relative;
  flex-shrink: 0;
}

.weibo-banner-bg {
  height: 180px;
  background: linear-gradient(135deg, #2a3a5a 0%, #1a2a4a 100%);
}

.weibo-profile-box {
  max-width: 900px;
  margin: -40px auto 0;
  padding: 0 20px;
  display: flex;
  gap: 20px;
  align-items: flex-end;
  position: relative;
  z-index: 2;
}

.weibo-profile-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 3px solid #fff;
  flex-shrink: 0;
}

.weibo-profile-info h2 {
  font-size: 22px;
  color: #fff;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.weibo-profile-info p {
  font-size: 13px;
  color: #eee;
  margin-bottom: 8px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.weibo-profile-stats {
  display: flex;
  gap: 20px;
  font-size: 13px;
  color: #ddd;
  margin-bottom: 10px;
}

.weibo-profile-stats strong {
  color: #fff;
  font-size: 15px;
}

.weibo-pm-btn {
  background: rgba(255,255,255,0.2);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.4);
  padding: 6px 18px;
  border-radius: 20px;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
}

.weibo-pm-btn:hover {
  background: rgba(255,255,255,0.3);
}

.weibo-tab-bar {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 4px 4px 0 0;
  padding: 0 16px;
  display: flex;
  gap: 24px;
  font-size: 14px;
  color: #666;
}

.weibo-tab-bar span {
  padding: 12px 0;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}

.weibo-tab-bar span.active {
  color: #ff8200;
  border-bottom-color: #ff8200;
}

.old-post .strange-date {
  color: #660000;
  font-style: italic;
}

/* 微博私信 */
.weibo-chat-area {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  background: #f5f5f5;
}

.weibo-chat-messages {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.weibo-msg {
  display: flex;
  gap: 8px;
  max-width: 75%;
}

.weibo-msg.me {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.weibo-msg-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #ddd;
  flex-shrink: 0;
}

.weibo-msg-bubble {
  background: #fff;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 14px;
  color: #333;
  line-height: 1.6;
  word-break: break-all;
}

.weibo-msg.me .weibo-msg-bubble {
  background: #ff8200;
  color: #fff;
}

.weibo-msg-link {
  color: #ff8200;
  text-decoration: underline;
  cursor: pointer;
  font-weight: bold;
}

.weibo-chat-options {
  background: #fff;
  border-top: 1px solid #eee;
  padding: 12px 16px;
  flex-shrink: 0;
}

.weibo-chat-input-bar {
  background: #fff;
  border-top: 1px solid #eee;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.weibo-chat-input {
  flex: 1;
  background: #f5f5f5;
  border-radius: 20px;
  padding: 8px 14px;
  font-size: 13px;
  color: #999;
}

.weibo-chat-send {
  color: #ff8200;
  font-size: 14px;
  cursor: pointer;
}

/* ================= 公安系统风格 ================= */
.police-page {
  display: none;
  min-height: 100%;
  background: #0a1a3a;
  color: #e8e8e8;
  font-family: "SimSun", "FangSong", serif;
  flex-direction: column;
  position: relative;
}

.police-page.active {
  display: flex;
}

/* 登录页 */
.police-login-bg {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background:
    radial-gradient(ellipse at center, rgba(26,66,128,0.4) 0%, transparent 70%),
    linear-gradient(180deg, #0a1a3a 0%, #05102a 100%);
}

.police-login-box {
  position: relative;
  z-index: 2;
  margin: auto;
  width: 380px;
  background: rgba(10, 26, 58, 0.9);
  border: 1px solid #1a4a8a;
  border-radius: 6px;
  padding: 36px 32px;
  text-align: center;
  box-shadow: 0 0 40px rgba(0, 50, 120, 0.4);
}

.police-badge {
  width: 60px;
  height: 60px;
  margin: 0 auto 16px;
  background: radial-gradient(circle, #f0c040 0%, #c89020 70%, #a07010 100%);
  border-radius: 50%;
  position: relative;
  box-shadow: 0 0 20px rgba(240, 192, 64, 0.5);
}

.police-badge::after {
  content: '警';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  color: #2a0a0a;
  font-size: 22px;
  font-weight: bold;
}

.police-title {
  font-size: 22px;
  color: #f0c040;
  letter-spacing: 3px;
  margin-bottom: 4px;
  font-weight: normal;
}

.police-subtitle {
  font-size: 10px;
  color: #6a8aba;
  letter-spacing: 1px;
  margin-bottom: 28px;
  font-family: Arial, sans-serif;
}

.police-login-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.police-input-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.police-input-row label {
  width: 60px;
  font-size: 13px;
  color: #a0b4d0;
  text-align: right;
  flex-shrink: 0;
}

.police-input-row input {
  flex: 1;
  padding: 8px 12px;
  background: rgba(255,255,255,0.08);
  border: 1px solid #2a4a7a;
  color: #fff;
  border-radius: 3px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
}

.police-input-row input:focus {
  border-color: #f0c040;
}

.police-login-err {
  color: #ff6b6b;
  font-size: 12px;
  min-height: 18px;
  text-align: left;
  padding-left: 70px;
}

.police-login-btn {
  padding: 10px;
  background: linear-gradient(180deg, #1a5a9a 0%, #0a3a7a 100%);
  color: #f0c040;
  border: 1px solid #2a6aaa;
  border-radius: 3px;
  font-size: 15px;
  cursor: pointer;
  letter-spacing: 8px;
  font-family: inherit;
  margin-top: 6px;
}

.police-login-btn:hover {
  background: linear-gradient(180deg, #2a6aaa 0%, #1a4a8a 100%);
}

.police-login-links {
  display: flex;
  justify-content: center;
  gap: 10px;
  font-size: 12px;
  color: #6a8aba;
}

.police-login-links a {
  color: #6a8aba;
  text-decoration: none;
  cursor: pointer;
}

.police-login-links a:hover {
  color: #f0c040;
}

.police-password-hint {
  font-size: 11px;
  color: #4a5a7a;
  text-align: left;
  padding-left: 4px;
  font-family: "SimSun", serif;
}

.police-login-footer {
  margin-top: 24px;
  font-size: 11px;
  color: #3a4a6a;
}

/* 顶部导航 */
.police-header {
  background: linear-gradient(180deg, #0a2a5a 0%, #051a3a 100%);
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  border-bottom: 2px solid #f0c040;
  height: 56px;
  flex-shrink: 0;
}

.police-header-badge {
  width: 36px;
  height: 36px;
  background: radial-gradient(circle, #f0c040 0%, #c89020 70%, #a07010 100%);
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
}

.police-header-badge::after {
  content: '警';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  color: #2a0a0a;
  font-size: 14px;
  font-weight: bold;
}

.police-header-title {
  font-size: 18px;
  color: #f0c040;
  letter-spacing: 2px;
  flex: 1;
}

.police-header-user {
  font-size: 13px;
  color: #a0b4d0;
}

.police-body {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.police-sidebar {
  width: 180px;
  background: #0a1a3a;
  border-right: 1px solid #1a3a6a;
  display: flex;
  flex-direction: column;
  padding: 16px 0;
  flex-shrink: 0;
}

.police-side-item {
  padding: 12px 20px;
  font-size: 14px;
  color: #a0b4d0;
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: all 0.2s;
  font-family: "SimSun", serif;
}

.police-side-item:hover {
  background: rgba(240, 192, 64, 0.1);
  color: #f0c040;
}

.police-side-item.active {
  background: rgba(240, 192, 64, 0.15);
  color: #f0c040;
  border-left-color: #f0c040;
}

.police-side-item.disabled {
  color: #4a5a7a;
  cursor: not-allowed;
}

.police-side-item.back-btn {
  margin-top: auto;
  border-top: 1px solid #1a3a6a;
  padding-top: 16px;
}

.police-content {
  flex: 1;
  padding: 24px 28px;
  overflow-y: auto;
  background: #f5f0e8;
  color: #333;
}

.police-page-title {
  font-size: 20px;
  color: #1a2a5a;
  margin-bottom: 20px;
  border-bottom: 2px solid #1a3a6a;
  padding-bottom: 10px;
  font-weight: normal;
  font-family: "SimSun", "FangSong", serif;
}

.police-search-bar {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  max-width: 500px;
}

.police-search-bar input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #aaa;
  border-radius: 3px;
  font-size: 14px;
  font-family: inherit;
  background: #fff;
  outline: none;
}

.police-search-bar button {
  padding: 8px 20px;
  background: #1a3a6a;
  color: #f0c040;
  border: 1px solid #2a4a7a;
  border-radius: 3px;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
}

.police-search-bar button:hover {
  background: #2a4a7a;
}

.police-case-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.case-list-item {
  background: #fff;
  border: 1px solid #d0c8b8;
  padding: 14px 18px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-left: 4px solid #1a3a6a;
}

.case-list-item:hover {
  background: #fffaf0;
  border-color: #f0c040;
}

.case-list-title {
  font-size: 15px;
  color: #333;
  font-weight: bold;
  margin-bottom: 4px;
}

.case-list-sub {
  font-size: 12px;
  color: #888;
}

.case-list-status {
  font-size: 12px;
  color: #666;
  padding: 4px 10px;
  border-radius: 3px;
  background: #f0f0f0;
}

.case-list-status.suicide {
  background: #fde8e8;
  color: #c0392b;
}

/* 人员查询结果 */
.police-staff-result {
  background: #fff;
  border: 1px solid #d0c8b8;
  padding: 20px 24px;
  display: none;
}

.police-staff-result.show {
  display: block;
}

.staff-info-row {
  display: flex;
  padding: 8px 0;
  border-bottom: 1px dashed #ddd;
  font-size: 14px;
}

.staff-info-row:last-child { border-bottom: none; }

.staff-info-label {
  width: 100px;
  color: #666;
  flex-shrink: 0;
}

.staff-info-value {
  flex: 1;
  color: #333;
  font-weight: bold;
}

/* 卷宗详情 */
.case-tabs {
  display: flex;
  gap: 2px;
  margin-bottom: 20px;
  border-bottom: 2px solid #1a3a6a;
}

.case-tab {
  padding: 10px 20px;
  background: #e8e0d0;
  color: #666;
  cursor: pointer;
  border-radius: 4px 4px 0 0;
  font-size: 14px;
  font-family: "SimSun", serif;
}

.case-tab.active {
  background: #1a3a6a;
  color: #f0c040;
}

.case-tab-locked {
  color: #999;
}

.case-tab-content {
  background: #fff;
  border: 1px solid #d0c8b8;
  padding: 24px 28px;
  min-height: 400px;
}

.case-tab-content.hidden {
  display: none;
}

.case-info-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.case-info-table th {
  width: 140px;
  text-align: left;
  padding: 10px 12px;
  background: #f8f4ec;
  border: 1px solid #e0d8c8;
  font-weight: normal;
  color: #666;
}

.case-info-table td {
  padding: 10px 12px;
  border: 1px solid #e0d8c8;
  color: #333;
}

.case-section {
  margin-bottom: 24px;
}

.case-section h3 {
  font-size: 16px;
  color: #1a3a6a;
  margin-bottom: 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid #d0c8b8;
  font-weight: normal;
}

.case-text {
  font-size: 14px;
  line-height: 2;
  color: #333;
  font-family: "SimSun", serif;
}

.case-photos {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.case-photo {
  width: 150px;
  height: 150px;
  background: #ddd;
  border: 2px solid #bbb;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s;
}

.case-photo:hover {
  transform: scale(1.02);
}

.photo-label {
  position: absolute;
  bottom: 0; left: 0;
  width: 100%;
  padding: 4px 8px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  font-size: 12px;
  font-family: "SimSun", serif;
}

/* 现场照片 */
.photo-scene-1 {
  background: linear-gradient(180deg, #4a4a5a 0%, #2a2a3a 100%);
  position: relative;
}
.photo-scene-1::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 60%;
  background: linear-gradient(180deg, transparent 0%, #1a1a2a 100%);
}

.photo-scene-2 {
  background: linear-gradient(180deg, #6a6a7a 0%, #4a4a5a 100%);
  position: relative;
}
.photo-scene-2::after {
  content: '';
  position: absolute;
  top: 30%; left: 30%;
  width: 40%; height: 3px;
  background: #222;
  box-shadow: 0 4px 0 #222, 0 8px 0 #222;
  transform: rotate(-5deg);
}

.photo-scene-3 {
  background: #2a2a3a;
  position: relative;
  overflow: hidden;
}
.photo-scene-3::before {
  content: '妈：晚晚，别查了';
  position: absolute;
  top: 35%;
  left: 20%;
  right: 20%;
  color: #fff;
  font-size: 10px;
  line-height: 1.6;
  text-shadow: 0 0 2px rgba(255,255,255,0.3);
}
.photo-scene-3::after {
  content: '你外婆就是从那个村子出来的';
  position: absolute;
  top: 55%;
  left: 20%;
  right: 20%;
  color: #ff9999;
  font-size: 9px;
}

/* 档案照片 */
.photo-archive-1 {
  background: linear-gradient(180deg, #4a4a3a 0%, #2a2a1a 100%);
  position: relative;
  filter: sepia(0.6);
}
.photo-archive-1::after {
  content: '';
  position: absolute;
  top: 20%; left: 50%;
  width: 6px; height: 60%;
  background: #4a3a2a;
  transform: translateX(-50%);
}
.photo-archive-1::before {
  content: '';
  position: absolute;
  top: 25%;
  left: 20%;
  right: 20%;
  height: 10px;
  background: repeating-linear-gradient(90deg, #8b0000 0, #8b0000 6px, transparent 6px, transparent 12px);
  z-index: 2;
}

.photo-archive-2 {
  background: #3a2a1a;
  position: relative;
  filter: sepia(0.7);
}
.photo-archive-2::before {
  content: '';
  position: absolute;
  top: 30%;
  left: 25%;
  width: 50%;
  height: 40%;
  background: #2a1a0a;
  border: 2px solid #5a4a3a;
}
.photo-archive-2::after {
  content: '晚';
  position: absolute;
  top: 48%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #8b0000;
  font-size: 16px;
  font-family: "KaiTi", serif;
}

.photo-archive-3 {
  background: #f5f0e0;
  position: relative;
  filter: sepia(0.5);
}
.photo-archive-3::after {
  content: '精神鉴定报告';
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translateX(-50%);
  color: #333;
  font-size: 11px;
  font-family: "SimSun", serif;
  white-space: nowrap;
}

/* 物证清单 */
.evidence-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.evidence-item {
  display: flex;
  gap: 16px;
  padding: 14px;
  background: #faf6ec;
  border: 1px solid #e0d8c8;
  border-left: 4px solid #1a3a6a;
}

.evidence-num {
  font-size: 14px;
  color: #1a3a6a;
  font-weight: bold;
  flex-shrink: 0;
  min-width: 50px;
}

.evidence-name {
  font-size: 15px;
  font-weight: bold;
  color: #333;
  margin-bottom: 4px;
}

.evidence-desc {
  font-size: 13px;
  color: #666;
  line-height: 1.6;
}

/* 证人笔录 */
.witness-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.witness-item {
  padding: 16px;
  background: #faf6ec;
  border: 1px solid #e0d8c8;
}

.witness-header {
  font-size: 14px;
  font-weight: bold;
  color: #1a3a6a;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px dashed #d0c8b8;
}

.witness-text {
  font-size: 14px;
  color: #333;
  line-height: 2;
  font-family: "KaiTi", "SimSun", serif;
  font-style: italic;
}

/* 涉密文件 */
.secret-locked {
  text-align: center;
  padding: 60px 20px;
}

.secret-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.secret-locked h3 {
  font-size: 18px;
  color: #c0392b;
  margin-bottom: 8px;
  font-weight: normal;
}

.secret-locked p {
  font-size: 13px;
  color: #888;
  margin-bottom: 24px;
}

.secret-password-box {
  display: flex;
  gap: 10px;
  max-width: 300px;
  margin: 0 auto 12px;
}

.secret-password-box input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 3px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
}

.secret-password-box button {
  padding: 8px 18px;
  background: #c0392b;
  color: #fff;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
}

.secret-error {
  color: #c0392b;
  font-size: 12px;
  min-height: 18px;
  margin-bottom: 8px;
}

.secret-hint {
  font-size: 12px;
  color: #999;
}

.secret-content {
  position: relative;
}

.secret-stamp {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 32px;
  color: #c0392b;
  border: 3px solid #c0392b;
  padding: 6px 12px;
  transform: rotate(-15deg);
  letter-spacing: 4px;
  opacity: 0.4;
  font-weight: bold;
  pointer-events: none;
  font-family: "SimSun", serif;
}

.handwritten-section {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 2px dashed #c0a080;
}

.handwritten-note {
  background: #f5edd5;
  padding: 30px 36px;
  font-family: "KaiTi", "STKaiti", cursive;
  font-size: 18px;
  color: #4a3828;
  line-height: 2.2;
  border: 1px solid #d0c098;
  box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
  position: relative;
}

.handwritten-note::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 32px,
    rgba(200, 170, 120, 0.3) 32px,
    rgba(200, 170, 120, 0.3) 33px
  );
  pointer-events: none;
}

.handwritten-note p {
  position: relative;
  z-index: 1;
}

.police-empty-tip {
  color: #999;
  font-size: 14px;
  text-align: center;
  padding: 60px 0;
}

/* IP 警告 */
.ip-warning {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.95);
  z-index: 4000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: ipFlash 0.3s ease;
}

@keyframes ipFlash {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.ip-warning-box {
  width: 500px;
  max-width: 90%;
  background: #0a0a0a;
  border: 2px solid #c0392b;
  padding: 36px 32px;
  text-align: center;
  color: #fff;
  font-family: "SimHei", sans-serif;
  box-shadow: 0 0 60px rgba(192, 57, 43, 0.5);
  animation: borderPulse 2s infinite;
}

@keyframes borderPulse {
  0%, 100% { box-shadow: 0 0 40px rgba(192, 57, 43, 0.4); }
  50% { box-shadow: 0 0 80px rgba(192, 57, 43, 0.7); }
}

.ip-warning-icon {
  font-size: 48px;
  margin-bottom: 12px;
  animation: iconShake 0.5s infinite;
}

@keyframes iconShake {
  0%, 100% { transform: rotate(-5deg); }
  50% { transform: rotate(5deg); }
}

.ip-warning h2 {
  font-size: 24px;
  color: #ff4444;
  margin-bottom: 12px;
  letter-spacing: 4px;
}

.ip-warning-sub {
  font-size: 15px;
  color: #ff6666;
  margin-bottom: 24px;
}

.ip-locating {
  font-size: 14px;
  color: #00ff00;
  margin-bottom: 20px;
  animation: blink 1s infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.ip-info {
  text-align: left;
  background: rgba(255, 68, 68, 0.1);
  border: 1px solid rgba(255, 68, 68, 0.3);
  padding: 16px 20px;
  margin-top: 20px;
}

.ip-info.hidden {
  display: none;
}

.ip-info-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 13px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.ip-info-row span:first-child {
  color: #888;
}

.ip-info-row span:last-child {
  color: #fff;
  text-align: right;
}

.ip-info-red {
  margin-top: 16px;
  text-align: center;
  font-size: 22px;
  color: #ff2222;
  font-weight: bold;
  letter-spacing: 4px;
  animation: redShake 0.2s infinite, textGlow 1s infinite;
}

@keyframes redShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-2px); }
  75% { transform: translateX(2px); }
}

@keyframes textGlow {
  0%, 100% { text-shadow: 0 0 10px rgba(255,34,34,0.8); }
  50% { text-shadow: 0 0 20px rgba(255,34,34,1), 0 0 30px rgba(255,34,34,0.8); }
}

/* 无脸警察jump scare */
.jump-scare {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: #000;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.jump-scare::before {
  content: '';
  width: 200px;
  height: 300px;
  background: linear-gradient(180deg, #1a2a5a 0%, #0a1a3a 100%);
  position: relative;
  border: 2px solid #333;
}

.jump-scare::after {
  content: '';
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 80px;
  background: #f0d0a0;
  border-radius: 50%;
  /* 无脸 - 没有眼睛鼻子嘴 */
}

/* 蓝屏 */
.bsod-screen {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: #0000aa;
  color: #fff;
  z-index: 5000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Courier New", monospace;
}

.bsod-content {
  padding: 40px;
  max-width: 600px;
  font-size: 14px;
  line-height: 1.8;
}

.bsod-title {
  background: #cccccc;
  color: #0000aa;
  display: inline-block;
  padding: 2px 8px;
  margin-bottom: 20px;
  font-weight: bold;
  font-size: 13px;
}

@media (max-width: 900px) {
  .weibo-sidebar { width: 120px; }
  .police-sidebar { width: 140px; }
}


/* ================= 医院系统风格 ================= */
.hospital-page {
  display: none;
  min-height: 100%;
  background: #f0f5fa;
  color: #333;
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  flex-direction: column;
  position: relative;
}

.hospital-page.active {
  display: flex;
}

.hospital-topbar {
  background: #e8f0f8;
  border-bottom: 1px solid #d0e0f0;
  font-size: 12px;
  color: #6688aa;
}

.hospital-topbar-inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 6px 20px;
}

.hospital-header {
  background: #fff;
  padding: 18px 20px;
  border-bottom: 1px solid #e0e8f0;
}

.hospital-logo {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
  justify-content: space-between;
}

.hospital-logo-icon {
  width: 48px;
  height: 48px;
  background: #1a6eb8;
  color: #fff;
  font-size: 32px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  flex-shrink: 0;
}

.hospital-logo-text h1 {
  font-size: 22px;
  color: #1a4a8a;
  margin: 0 0 2px 0;
  font-weight: bold;
  letter-spacing: 1px;
}

.hospital-logo-text p {
  font-size: 10px;
  color: #88aacc;
  margin: 0;
  letter-spacing: 1px;
}

.hospital-search {
  display: flex;
  gap: 0;
}

.hospital-search input {
  padding: 7px 12px;
  border: 1px solid #bcd;
  border-right: none;
  border-radius: 4px 0 0 4px;
  font-size: 13px;
  width: 200px;
  outline: none;
}

.hospital-search button {
  padding: 7px 14px;
  background: #1a6eb8;
  color: #fff;
  border: 1px solid #1a6eb8;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
}

.hospital-nav {
  background: #1a6eb8;
  border-bottom: 3px solid #1a5a98;
}

.hospital-nav-inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
}

.hospital-nav-item {
  padding: 12px 20px;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s;
}

.hospital-nav-item:hover,
.hospital-nav-item.active {
  background: #1a5a98;
}

.hospital-body {
  flex: 1;
  max-width: 1000px;
  margin: 0 auto;
  width: 100%;
  padding: 24px 20px;
  overflow-y: auto;
}

.hospital-banner-placeholder {
  height: 200px;
  background: linear-gradient(135deg, #a0d0f0 0%, #70b0e0 50%, #5090d0 100%);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
}

.hospital-banner-placeholder::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background:
    radial-gradient(circle at 20% 50%, rgba(255,255,255,0.1) 0%, transparent 30%),
    radial-gradient(circle at 80% 30%, rgba(255,255,255,0.15) 0%, transparent 25%);
}

.banner-text {
  color: #fff;
  font-size: 28px;
  letter-spacing: 8px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.2);
  font-weight: lighter;
}

.hospital-news {
  background: #fff;
  border: 1px solid #e0e8f0;
  border-radius: 6px;
  padding: 20px 24px;
}

.hospital-section-title {
  font-size: 16px;
  color: #1a4a8a;
  margin: 0 0 14px 0;
  padding-bottom: 8px;
  border-bottom: 2px solid #e0e8f0;
  font-weight: normal;
}

.news-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.news-item {
  display: flex;
  gap: 16px;
  font-size: 13px;
  color: #555;
  padding: 6px 0;
  border-bottom: 1px dashed #eef2f6;
  cursor: pointer;
}

.news-item:last-child { border-bottom: none; }

.news-item span:first-child {
  color: #999;
  flex-shrink: 0;
  font-size: 12px;
}

.hospital-page-title {
  font-size: 20px;
  color: #1a4a8a;
  margin: 0 0 8px 0;
  font-weight: normal;
}

.hospital-page-sub {
  font-size: 13px;
  color: #888;
  margin: 0 0 20px 0;
}

/* 查询卡片 */
.query-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-top: 20px;
}

.query-card {
  background: #fff;
  border: 1px solid #d0e0f0;
  border-radius: 6px;
  padding: 24px 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
}

.query-card:hover {
  border-color: #1a6eb8;
  box-shadow: 0 4px 16px rgba(26, 110, 184, 0.15);
  transform: translateY(-2px);
}

.query-card.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.query-card.disabled:hover {
  transform: none;
  box-shadow: none;
  border-color: #d0e0f0;
}

.query-card-icon {
  font-size: 36px;
  margin-bottom: 12px;
}

.query-card h3 {
  font-size: 15px;
  color: #1a4a8a;
  margin: 0 0 6px 0;
  font-weight: normal;
}

.query-card p {
  font-size: 12px;
  color: #888;
  margin: 0;
}

/* 查询表单 */
.query-form-box {
  background: #fff;
  border: 1px solid #d0e0f0;
  border-radius: 6px;
  padding: 28px 32px;
  max-width: 460px;
  margin: 0 auto;
}

.query-form-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.query-form-row label {
  width: 80px;
  font-size: 13px;
  color: #555;
  text-align: right;
  flex-shrink: 0;
}

.query-form-row input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #ccd;
  border-radius: 4px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  background: #fafdff;
}

.query-form-row input:focus {
  border-color: #1a6eb8;
  background: #fff;
}

.query-submit-btn {
  width: 100%;
  padding: 10px;
  background: #1a6eb8;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 15px;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: 4px;
  margin-top: 8px;
}

.query-submit-btn:hover {
  background: #1a5a98;
}

.birth-query-err, .dna-err, .urn-query-err {
  color: #c0392b;
  font-size: 12px;
  min-height: 18px;
  text-align: center;
}

/* 出生证明 */
.birth-certificate {
  background: #fff;
  border: 4px solid #c9a040;
  padding: 28px 36px;
  max-width: 680px;
  margin: 0 auto;
  position: relative;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}

.birth-cert-title {
  text-align: center;
  font-size: 28px;
  color: #c9a040;
  font-weight: bold;
  letter-spacing: 8px;
  margin-bottom: 4px;
  font-family: "SimSun", serif;
}

.birth-cert-sub {
  text-align: center;
  font-size: 10px;
  color: #999;
  letter-spacing: 2px;
  margin-bottom: 16px;
  font-family: Arial, sans-serif;
}

.birth-cert-no {
  text-align: right;
  font-size: 12px;
  color: #999;
  margin-bottom: 14px;
  font-family: "SimSun", serif;
}

.birth-cert-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.birth-cert-table th {
  width: 110px;
  text-align: right;
  padding: 10px 12px;
  background: #f5f9fc;
  border: 1px solid #e0e8f0;
  font-weight: normal;
  color: #666;
}

.birth-cert-table td {
  padding: 10px 12px;
  border: 1px solid #e0e8f0;
  color: #333;
  min-height: 20px;
}

.birth-doctor-link {
  color: #1a6eb8;
  cursor: pointer;
  text-decoration: underline;
}

.birth-doctor-link:hover {
  color: #c0392b;
}

.birth-cert-remark {
  margin-top: 16px;
  padding: 12px 16px;
  background: #fdf8f0;
  border: 1px dashed #e8d0a0;
  font-size: 13px;
  color: #8b6b3a;
  font-family: "KaiTi", "SimSun", serif;
  line-height: 1.6;
}

.birth-cert-seal {
  position: absolute;
  bottom: 20px;
  right: 24px;
}

.seal-circle {
  width: 80px;
  height: 80px;
  border: 3px solid rgba(200, 40, 40, 0.4);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: rgba(200, 40, 40, 0.5);
  letter-spacing: 1px;
  transform: rotate(-15deg);
  font-family: "SimSun", serif;
}

.birth-cert-tip {
  max-width: 680px;
  margin: 18px auto 0;
  padding: 12px 16px;
  background: #fff8f0;
  border: 1px solid #f0d8b0;
  border-radius: 4px;
  font-size: 12px;
  color: #8b6b3a;
}

.birth-cert-tip p {
  margin: 0 0 6px 0;
}

.birth-more-service {
  color: #1a6eb8;
  cursor: pointer;
  margin: 6px 0 0 0 !important;
  font-size: 12px;
}

.birth-more-menu {
  margin-top: 6px;
  padding: 6px 0;
  background: #fff;
  border: 1px solid #e0e8f0;
  border-radius: 4px;
}

.birth-more-menu a {
  display: block;
  padding: 6px 12px;
  font-size: 12px;
  color: #333;
  cursor: pointer;
}

.birth-more-menu a:hover {
  background: #f0f5fa;
  color: #1a6eb8;
}

/* 医生信息页 */
.doctor-info-card {
  background: #fff;
  border: 1px solid #d0e0f0;
  border-radius: 6px;
  padding: 24px;
  display: flex;
  gap: 20px;
  max-width: 600px;
  margin: 0 auto;
}

.doctor-avatar {
  width: 90px;
  height: 110px;
  background: linear-gradient(180deg, #ddd 0%, #bbb 100%);
  border: 2px solid #ccc;
  flex-shrink: 0;
  position: relative;
}

.doctor-avatar::after {
  content: '照';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  color: #888;
  font-size: 14px;
}

.doctor-info {
  flex: 1;
}

.doctor-info h3 {
  font-size: 20px;
  color: #1a4a8a;
  margin: 0 0 4px 0;
  font-weight: normal;
}

.doctor-dept {
  font-size: 13px;
  color: #888;
  margin: 0 0 14px 0;
}

.doctor-info-row {
  display: flex;
  padding: 5px 0;
  font-size: 13px;
  color: #555;
  border-bottom: 1px dashed #eef2f6;
}

.doctor-info-row:last-of-type { border-bottom: none; }

.doctor-info-row span:first-child {
  width: 80px;
  color: #999;
}

.doctor-remark {
  margin-top: 14px;
  padding: 10px 12px;
  background: #fdf5f5;
  border: 1px solid #f0d0d0;
  font-size: 12px;
  color: #8b3a3a;
  line-height: 1.6;
  border-radius: 4px;
}

.hospital-back-btn {
  display: block;
  margin: 20px auto 0;
  padding: 8px 24px;
  background: transparent;
  border: 1px solid #1a6eb8;
  color: #1a6eb8;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
}

.hospital-back-btn:hover {
  background: #f0f5fa;
}

/* DNA比对 */
.dna-form {
  max-width: 600px;
  margin: 0 auto;
}

.dna-person {
  background: #fff;
  border: 1px solid #d0e0f0;
  border-radius: 6px;
  padding: 16px 20px;
}

.dna-person h4 {
  margin: 0 0 12px 0;
  font-size: 14px;
  color: #1a4a8a;
  font-weight: normal;
  padding-bottom: 6px;
  border-bottom: 2px solid #e0e8f0;
}

.dna-vs {
  text-align: center;
  padding: 12px 0;
  color: #888;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 2px;
}

.dna-loading {
  text-align: center;
  padding: 40px 20px;
}

.dna-helix {
  width: 60px;
  height: 80px;
  margin: 0 auto 20px;
  position: relative;
}

.helix-strand {
  position: absolute;
  width: 100%;
  height: 100%;
  animation: helixSpin 2s linear infinite;
}

.helix-rung {
  position: absolute;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #1a6eb8, #4aa0e0, #1a6eb8);
  border-radius: 2px;
  left: 0;
}

.helix-rung:nth-child(1) { top: 0; transform: scaleX(0.3); animation: rungPulse 2s ease-in-out infinite; animation-delay: 0s; }
.helix-rung:nth-child(2) { top: 20px; transform: scaleX(0.7); animation: rungPulse 2s ease-in-out infinite; animation-delay: -0.4s; }
.helix-rung:nth-child(3) { top: 40px; transform: scaleX(1); animation: rungPulse 2s ease-in-out infinite; animation-delay: -0.8s; }
.helix-rung:nth-child(4) { top: 60px; transform: scaleX(0.7); animation: rungPulse 2s ease-in-out infinite; animation-delay: -1.2s; }
.helix-rung:nth-child(5) { top: 76px; transform: scaleX(0.3); animation: rungPulse 2s ease-in-out infinite; animation-delay: -1.6s; }

@keyframes helixSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes rungPulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

.dna-loading p {
  color: #666;
  font-size: 14px;
  margin: 0 0 16px 0;
}

.dna-progress-bar {
  width: 300px;
  height: 6px;
  background: #e0e8f0;
  border-radius: 3px;
  margin: 0 auto;
  overflow: hidden;
}

.dna-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #1a6eb8, #4aa0e0);
  width: 0%;
  transition: width 0.3s ease;
}

.dna-result {
  max-width: 680px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid #d0e0f0;
  border-radius: 6px;
  padding: 24px 28px;
}

.dna-result-header {
  text-align: center;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 2px solid #e0e8f0;
}

.dna-result-badge {
  display: inline-block;
  padding: 4px 16px;
  background: #e8f5e9;
  color: #2e7d32;
  border-radius: 20px;
  font-size: 12px;
  margin-bottom: 10px;
}

.dna-result h3 {
  margin: 0;
  font-size: 18px;
  color: #1a4a8a;
  font-weight: normal;
}

.dna-note {
  margin-top: 20px;
  padding: 14px 16px;
  background: #f5f9fc;
  border: 1px solid #d0e0f0;
  border-radius: 4px;
  font-size: 12px;
  color: #555;
  line-height: 1.6;
}

.dna-note p {
  margin: 0 0 6px 0;
}

.dna-note-small {
  color: #c0392b !important;
  font-size: 11px !important;
  margin-top: 8px !important;
}

/* ================= 殡仪馆风格 ================= */
.funeral-page {
  display: none;
  min-height: 100%;
  background: #e8e8e8;
  color: #333;
  font-family: "SimSun", serif;
  flex-direction: column;
  position: relative;
}

.funeral-page.active {
  display: flex;
}

.funeral-header {
  background: #2a2a2a;
  padding: 0;
  border-bottom: 3px solid #8b0000;
}

.funeral-logo {
  max-width: 1000px;
  margin: 0 auto;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.funeral-logo-icon {
  width: 48px;
  height: 48px;
  background: #4a4a4a;
  color: #ccc;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  flex-shrink: 0;
}

.funeral-logo-text h1 {
  font-size: 20px;
  color: #ccc;
  margin: 0 0 2px 0;
  font-weight: normal;
  letter-spacing: 3px;
}

.funeral-logo-text p {
  font-size: 9px;
  color: #666;
  margin: 0;
  letter-spacing: 2px;
  font-family: Arial, sans-serif;
}

.funeral-nav {
  background: #1a1a1a;
  border-top: 1px solid #333;
}

.funeral-nav-item {
  display: inline-block;
  padding: 10px 20px;
  color: #999;
  font-size: 13px;
  cursor: pointer;
  border-left: 1px solid #222;
}

.funeral-nav-item:last-child {
  border-right: 1px solid #222;
}

.funeral-nav-item:hover,
.funeral-nav-item.active {
  background: #222;
  color: #ccc;
}

.funeral-body {
  flex: 1;
  max-width: 1000px;
  margin: 0 auto;
  width: 100%;
  padding: 24px 20px;
  overflow-y: auto;
}

.funeral-page-title {
  font-size: 20px;
  color: #333;
  margin: 0 0 20px 0;
  font-weight: normal;
  padding-bottom: 8px;
  border-bottom: 2px solid #999;
  font-family: "SimSun", serif;
}

.funeral-section-title {
  font-size: 16px;
  color: #333;
  margin: 20px 0 12px 0;
  font-weight: normal;
  padding-bottom: 6px;
  border-bottom: 1px solid #ccc;
}

.funeral-query-box {
  background: #f5f5f5;
  border: 1px solid #ccc;
}

.funeral-submit-btn {
  background: #555;
  color: #eee;
}

.funeral-submit-btn:hover {
  background: #333;
}

/* 骨灰寄存信息 */
.urn-info-card {
  background: #fff;
  border: 1px solid #ccc;
  padding: 24px 28px;
  max-width: 680px;
  margin: 0 auto;
  position: relative;
}

.urn-status {
  display: inline-block;
  padding: 4px 14px;
  background: #e8f5e9;
  color: #2e7d32;
  border-radius: 4px;
  font-size: 12px;
  margin-bottom: 14px;
}

.urn-status.expired {
  background: #fff3e0;
  color: #e65100;
}

.urn-status.claimed {
  background: #fce4ec;
  color: #c2185b;
}

.urn-detail-card {
  background: #f5f5f5;
  border: 1px solid #ccc;
  padding: 20px 24px;
  margin-top: 10px;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

.detail-row {
  display: flex;
  padding: 8px 0;
  font-size: 13px;
  color: #444;
  border-bottom: 1px dashed #ddd;
  line-height: 1.6;
}

.detail-row:last-child { border-bottom: none; }

.detail-row span:first-child {
  width: 120px;
  color: #888;
  flex-shrink: 0;
}

/* 到期弹窗 */
.urn-expire-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  border: 2px solid #c0392b;
  padding: 24px 32px;
  text-align: center;
  z-index: 300;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  border-radius: 4px;
}

.expire-icon {
  font-size: 36px;
  margin-bottom: 10px;
}

.urn-expire-popup p {
  font-size: 14px;
  color: #333;
  margin: 0 0 16px 0;
  line-height: 1.6;
}

.urn-expire-popup button {
  padding: 6px 24px;
  background: #555;
  color: #fff;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  border-radius: 3px;
}

/* 领取提示 */
.urn-claimed-notice {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.7);
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
}

.claimed-text {
  font-size: 32px;
  color: #c0392b;
  letter-spacing: 8px;
  font-family: "SimHei", sans-serif;
  text-shadow: 0 0 20px rgba(192,57,43,0.5);
  animation: claimedFade 0.8s ease;
}

@keyframes claimedFade {
  0% { opacity: 0; transform: scale(0.8); }
  100% { opacity: 1; transform: scale(1); }
}

/* 族谱图 */
.family-tree {
  max-width: 500px;
  margin: 40px auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.tree-level {
  display: flex;
  gap: 60px;
  align-items: center;
  justify-content: center;
}

.tree-siblings {
  gap: 80px;
}

.tree-line {
  width: 2px;
  height: 30px;
  background: #999;
  position: relative;
}

.tree-line::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 2px;
  background: #999;
}

.tree-node {
  text-align: center;
  position: relative;
}

.tree-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin: 0 auto 6px;
  border: 2px solid #888;
  background: #ddd;
  position: relative;
}

.tree-avatar::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  color: #999;
  font-size: 14px;
}

.grandmother {
  background: linear-gradient(135deg, #8b7355 0%, #6b5335 100%);
}
.grandmother::after { content: '槐'; color: #fff; }

.mother {
  background: linear-gradient(135deg, #7a9a7a 0%, #5a7a5a 100%);
}
.mother::after { content: '林'; color: #fff; }

.player-avatar {
  border-color: #c0392b;
  background: linear-gradient(135deg, #c9a040 0%, #a07a20 100%);
}
.player-avatar::after { content: '?'; color: #fff; font-size:20px; }

.sister-avatar {
  background: linear-gradient(135deg, #999 0%, #777 100%);
  opacity: 0.6;
}
.sister-avatar::after { content: '林'; color: #fff; }

.tree-name {
  font-size: 15px;
  color: #333;
  font-weight: bold;
  margin-bottom: 2px;
}

.tree-name-red {
  color: #c0392b;
}

.tree-name-gray {
  color: #999;
  text-decoration: line-through;
}

.tree-relation {
  font-size: 12px;
  color: #888;
}

.family-tree-footer {
  text-align: center;
  margin-top: 30px;
  color: #999;
  font-size: 13px;
  font-style: italic;
}

@media (max-width: 900px) {
  .birth-certificate { padding: 20px 24px; }
  .doctor-info-card { flex-direction: column; align-items: center; }
}


/* ================= 地图网站 ================= */
.map-page {
  display: none;
  min-height: 100%;
  background: #f5f8fa;
  flex-direction: column;
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
}
.map-page.active {
  display: flex;
}

.map-topbar {
  height: 50px;
  background: #fff;
  border-bottom: 1px solid #e0e6ed;
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 20px;
  flex-shrink: 0;
}
.map-logo {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: bold;
  color: #1976d2;
  font-size: 16px;
  flex-shrink: 0;
}
.map-logo-icon { font-size: 20px; }
.map-search-bar {
  flex: 1;
  max-width: 500px;
  display: flex;
  height: 34px;
  border: 1px solid #cfd8dc;
  border-radius: 4px;
  overflow: hidden;
}
.map-search-bar input {
  flex: 1;
  border: none;
  outline: none;
  padding: 0 12px;
  font-size: 13px;
  font-family: inherit;
}
.map-search-bar button {
  width: 60px;
  background: #1976d2;
  color: #fff;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
}
.map-topbar-right {
  display: flex;
  gap: 16px;
  font-size: 13px;
  color: #546e7a;
}
.map-topbar-right span {
  cursor: pointer;
  padding: 4px 8px;
}
.map-topbar-right span:hover { color: #1976d2; }

.map-main {
  flex: 1;
  display: flex;
  overflow: hidden;
}
.map-sidebar {
  width: 200px;
  background: #fff;
  border-right: 1px solid #e0e6ed;
  padding: 12px;
  flex-shrink: 0;
}
.map-layer-switch {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.layer-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  color: #546e7a;
}
.layer-item:hover { background: #f0f4f8; }
.layer-item.active {
  background: #e3f2fd;
  color: #1976d2;
}
.layer-icon { font-size: 18px; }
.map-search-suggest {
  margin-top: 16px;
  font-size: 12px;
  color: #90a4ae;
  line-height: 1.8;
}
.map-search-suggest .suggest-item {
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 3px;
}
.map-search-suggest .suggest-item:hover {
  background: #f0f4f8;
  color: #1976d2;
}
.map-canvas-wrapper {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: #e8eef2;
}
.map-canvas {
  width: 100%; height: 100%;
  position: relative;
  background:
    linear-gradient(135deg, #f0f6fa 0%, #e0eaf0 100%);
}
.map-placeholder-text {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #90a4ae;
  font-size: 18px;
}
.map-grid-overlay {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(180,200,220,0.15) 1px, transparent 1px),
    linear-gradient(90deg, rgba(180,200,220,0.15) 1px, transparent 1px);
  background-size: 40px 40px;
}
.map-zoom-controls {
  position: absolute;
  right: 16px;
  top: 16px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: #fff;
  border: 1px solid #cfd8dc;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.zoom-btn {
  width: 32px; height: 32px;
  background: #fff;
  border: none;
  cursor: pointer;
  font-size: 18px;
  color: #546e7a;
}
.zoom-btn:hover { background: #f0f4f8; color: #1976d2; }
.map-scale {
  position: absolute;
  left: 16px; bottom: 16px;
  font-size: 11px;
  color: #789;
}
.map-coords-display {
  position: absolute;
  right: 16px; bottom: 16px;
  font-size: 11px;
  color: #789;
  background: rgba(255,255,255,0.8);
  padding: 3px 8px;
  border-radius: 3px;
}

/* 卫星图 */
.sat-wrapper { background: #1a2a1a; }
.sat-map {
  width: 100%; height: 100%;
  position: relative;
  background:
    radial-gradient(ellipse at 30% 40%, #3d5a3a 0%, #2a4028 40%, #1a2a1a 100%);
  overflow: hidden;
  cursor: grab;
}
.sat-map:active { cursor: grabbing; }

.sat-terrain {
  position: absolute;
  inset: 0;
}
.sat-mountain {
  position: absolute;
  border-radius: 50%;
  filter: blur(20px);
  opacity: 0.6;
}
.sat-mountain-1 {
  width: 300px; height: 200px;
  top: 10%; left: 15%;
  background: radial-gradient(ellipse, #5a7a4a 0%, #3a5a30 60%, transparent 100%);
}
.sat-mountain-2 {
  width: 400px; height: 250px;
  bottom: 15%; right: 10%;
  background: radial-gradient(ellipse, #4a6a40 0%, #2a4020 60%, transparent 100%);
}
.sat-river {
  position: absolute;
  top: 20%; left: 60%;
  width: 30px; height: 70%;
  background: linear-gradient(180deg, #3a6a8a 0%, #2a5a7a 50%, #1a4a6a 100%);
  border-radius: 40%;
  filter: blur(3px);
  transform: rotate(10deg);
  opacity: 0.7;
}
.sat-forest {
  position: absolute;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, #2a5a2a 0%, #1a3a1a 60%, transparent 100%),
    radial-gradient(circle at 70% 70%, #3a6a3a 0%, #2a4a2a 50%, transparent 100%);
  filter: blur(2px);
}
.sat-forest-1 {
  width: 200px; height: 150px;
  top: 55%; left: 20%;
}
.sat-forest-2 {
  width: 180px; height: 120px;
  top: 25%; right: 25%;
}
.sat-road {
  position: absolute;
  bottom: 30%; left: 5%;
  width: 60%;
  height: 4px;
  background: linear-gradient(90deg, #8a7a5a 0%, #9a8a6a 50%, #8a7a5a 100%);
  filter: blur(1px);
  transform: rotate(-3deg);
}

/* 模糊区域 */
.sat-blur-area {
  position: absolute;
  top: 35%; left: 30%;
  width: 38%;
  height: 35%;
  cursor: not-allowed;
  z-index: 10;
  border: 1px solid rgba(255,255,255,0.2);
  overflow: hidden;
}
.blur-mosaic {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(80, 100, 80, 0.6) 0px,
      rgba(80, 100, 80, 0.6) 8px,
      rgba(60, 80, 60, 0.6) 8px,
      rgba(60, 80, 60, 0.6) 16px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(80, 100, 80, 0.6) 0px,
      rgba(80, 100, 80, 0.6) 8px,
      rgba(60, 80, 60, 0.6) 8px,
      rgba(60, 80, 60, 0.6) 16px
    );
  animation: mosaicFlow 3s ease-in-out infinite;
}
@keyframes mosaicFlow {
  0%, 100% { filter: hue-rotate(0deg) brightness(1); }
  50% { filter: hue-rotate(5deg) brightness(1.1); }
}
.blur-text {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  color: rgba(255,255,255,0.4);
  font-size: 14px;
  letter-spacing: 2px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
  z-index: 2;
}
.street-view-entry {
  position: absolute;
  bottom: 28%; left: 25%;
  background: #ffd600;
  color: #333;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 11px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  z-index: 15;
  display: flex;
  align-items: center;
  gap: 6px;
}
.street-entry-dot {
  width: 8px; height: 8px;
  background: #d32f2f;
  border-radius: 50%;
  animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.3); }
}

/* 0.5秒清晰闪光 */
.clear-window-flash {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 70%),
    radial-gradient(ellipse at 50% 50%,
      /* 村庄清晰轮廓 */
      #2a4a2a 0%,
      #3a5a3a 30%,
      #4a6a4a 60%,
      #3a5a3a 100%
    );
  z-index: 20;
  pointer-events: none;
}

/* 坐标弹窗 */
.coords-popup {
  position: absolute;
  top: 70px;
  right: 16px;
  width: 300px;
  background: #fff;
  border: 1px solid #cfd8dc;
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  z-index: 100;
}
.coords-popup-header {
  padding: 10px 14px;
  background: #f5f8fa;
  border-bottom: 1px solid #e0e6ed;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: #37474f;
  font-weight: bold;
  border-radius: 6px 6px  0 0;
}
.coords-close {
  background: none;
  border: none;
  font-size: 20px;
  color: #78909c;
  cursor: pointer;
  line-height: 1;
}
.coords-popup-body {
  padding: 14px;
}
.coords-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.coords-row label {
  width: 40px;
  font-size: 13px;
  color: #546e7a;
  flex-shrink: 0;
}
.coords-row input {
  flex: 1;
  padding: 7px 10px;
  border: 1px solid #cfd8dc;
  border-radius: 4px;
  font-size: 13px;
  font-family: monospace;
  outline: none;
}
.coords-row input:focus { border-color: #1976d2; }
.coords-hint {
  font-size: 11px;
  color: #90a4ae;
  margin: 8px 0;
}
.coords-go-btn {
  width: 100%;
  padding: 8px;
  background: #1976d2;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
}
.coords-go-btn:hover { background: #1565c0; }

.sat-scale { color: #cdd; }
.sat-scale .scale-bar {
  width: 80px; height: 3px;
  background: linear-gradient(90deg, #fff 0%, #fff 20%, transparent 20%, transparent 40%, #fff 40%, #fff 60%, transparent 60%, transparent 80%, #fff 80%, #fff 100%);
  margin-top: 2px;
}


/* ================= 街景 ================= */
.street-view-page {
  display: none;
  flex-direction: column;
  min-height: 100%;
  background: #000;
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  position: relative;
}
.street-view-page.active { display: flex; }

.street-topbar {
  height: 44px;
  background: rgba(0,0,0,0.7);
  color: #fff;
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 20px;
  flex-shrink: 0;
  z-index: 100;
  font-size: 13px;
}
.street-exit-btn {
  background: none;
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  padding: 5px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  font-family: inherit;
}
.street-exit-btn:hover { background: rgba(255,255,255,0.1); }
.street-info {
  flex: 1;
  text-align: center;
  color: #ccc;
}
.street-divider {
  margin: 0 12px;
  color: #555;
}
.street-compass {
  font-size: 12px;
  color: #aaa;
  padding: 4px 10px;
  border: 1px solid #444;
  border-radius: 4px;
}

.street-scene {
  flex: 1;
  position: relative;
  overflow: hidden;
  perspective: 800px;
  perspective-origin: 50% 50%;
}

.road-sky {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 40%;
  background: linear-gradient(180deg, #8ab6d6 0%, #b8d4e8 70%, #d0e4f0 100%);
  transition: filter 2s ease, background 2s ease;
}
.road-mountains {
  position: absolute;
  top: 30%;
  left: 0; right: 0;
  height: 20%;
  background:
    linear-gradient(180deg,
      transparent 0%,
      rgba(60, 80, 60, 0.3) 30%,
      rgba(80, 100, 80, 0.5) 100%);
  clip-path: polygon(0% 100%, 5% 60%, 12% 40%, 20% 55%, 30% 30%, 40% 45%, 50% 20%, 60% 40%, 70% 25%, 80% 50%, 90% 35%, 95% 55%, 100% 45%, 100% 100%);
  filter: blur(2px);
  transition: filter 2s ease;
}

.road-trees {
  position: absolute;
  top: 0;
  bottom: 30%;
  width: 30%;
  pointer-events: none;
}
.road-trees-left { left: 0; }
.road-trees-right { right: 0; }

.tree {
  position: absolute;
  bottom: 0;
  width: 40px;
  height: 120px;
}
.tree-trunk {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 50%;
  background: #4a3520;
  border-radius: 2px;
}
.tree-leaves {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 60%;
  background: radial-gradient(ellipse at center, #2a5a2a 0%, #1a3a1a 70%, transparent 100%);
  border-radius: 50%;
}
.tree-red-ribbon {
  position: absolute;
  top: 20%;
  left: 40%;
  width: 4px;
  height: 25px;
  background: #c62828;
  transform: rotate(10deg);
  animation: ribbonSway 3s ease-in-out infinite;
  transform-origin: top center;
}
@keyframes ribbonSway {
  0%, 100% { transform: rotate(5deg); }
  50% { transform: rotate(-5deg); }
}

.road-surface {
  position: absolute;
  bottom: 0;
  left: 0; right: 0;
  height: 60%;
  background: linear-gradient(180deg, #5a5a5a 0%, #3a3a3a 30%, #2a2a2a 100%);
  transform: perspective(400px) rotateX(40deg);
  transform-origin: top center;
}
.road-center-line {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 100%;
  background: repeating-linear-gradient(
    180deg,
    #e0e0e0 0px,
    #e0e0e0 30px,
    transparent 30px,
    transparent 60px
  );
}

.road-vanish {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 2px;
  background: rgba(255,255,255,0.1);
}

/* 远处人影 */
.distant-figure {
  position: absolute;
  top: 42%;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 30px;
  background: rgba(0,0,0,0.4);
  border-radius: 40% 40% 0 0;
  filter: blur(1px);
  z-index: 5;
  animation: figureFlicker 4s ease-in-out infinite;
}
@keyframes figureFlicker {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 0.3; }
}

/* 后视镜 */
.rearview-mirror {
  position: absolute;
  bottom: 20px;
  right: 20px;
  z-index: 50;
}
.rearview-frame {
  width: 180px;
  height: 130px;
  border: 3px solid #333;
  border-radius: 8px;
  background: #1a1a1a;
  overflow: hidden;
  position: relative;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}
.rearview-label {
  position: absolute;
  top: 4px; left: 8px;
  font-size: 10px;
  color: #666;
  z-index: 10;
}
.rearview-scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.rear-road {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 60%;
  background: #2a2a2a;
  clip-path: polygon(40% 0%, 60% 0%, 100% 100%, 0% 100%);
}
.figure-group {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.rear-figure {
  position: absolute;
  bottom: 10px;
  width: 6px;
  height: 22px;
  background: rgba(0,0,0,0.7);
  border-radius: 40% 40% 0 0;
}
.rear-figure.shroud {
  width: 10px;
  height: 28px;
  background: linear-gradient(180deg, #e0e0e0 0%, #b0b0b0 100%);
  bottom: 5px;
}

/* 方向箭头 */
.street-arrow {
  position: absolute;
  z-index: 40;
  background: rgba(255,255,255,0.85);
  color: #333;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  transition: all 0.2s;
  flex-direction: column;
  width: 48px;
  height: 48px;
}
.street-arrow:hover {
  background: #fff;
  transform: scale(1.1);
}
.street-arrow span {
  font-size: 10px;
  color: #666;
}
.street-arrow-forward {
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  top: 55%;
}
.street-arrow-backward {
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
}
.street-arrow-left {
  left: 30px;
  top: 50%;
  transform: translateY(-50%);
}
.street-arrow-right {
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
}
.arrow-icon { font-size: 20px; line-height: 1; }

/* 村口 */
.village-entrance {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 10%;
  background:
    linear-gradient(180deg, #6a7a7a 0%, #5a6a6a 40%, #3a4a4a 70%, #2a3a3a 100%);
  filter: grayscale(100%);
}
.village-sign {
  background: #555;
  color: #ddd;
  padding: 8px 20px;
  border: 2px solid #333;
  margin-bottom: 20px;
  text-align: center;
  font-size: 18px;
  letter-spacing: 4px;
  font-family: "SimHei", sans-serif;
}
.village-pop {
  display: block;
  font-size: 12px;
  color: #aaa;
  margin-top: 4px;
  letter-spacing: 2px;
}
.village-pop span {
  color: #c62828;
  font-size: 16px;
  font-weight: bold;
}
.village-gate {
  width: 200px;
  height: 80px;
  border-top: 4px solid #333;
  border-left: 4px solid #333;
  border-right: 4px solid #333;
  margin-bottom: 20px;
  position: relative;
}
.village-big-tree {
  position: absolute;
  right: 15%;
  bottom: 25%;
  width: 120px;
  height: 180px;
}
.village-big-tree::before {
  content: '';
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 16px; height: 50%;
  background: #333;
}
.village-big-tree::after {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 120px; height: 65%;
  background: radial-gradient(ellipse, #444 0%, #333 60%, transparent 100%);
  border-radius: 50%;
}
.village-houses {
  display: flex;
  gap: 30px;
  margin-bottom: 20px;
}
.village-house {
  width: 60px;
  height: 50px;
  background: #4a4a4a;
  position: relative;
}
.village-house::before {
  content: '';
  position: absolute;
  top: -15px; left: 0;
  width: 0; height: 0;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-bottom: 15px solid #333;
}
.village-house::after {
  content: '';
  position: absolute;
  top: 15px; right: 5px;
  width: 20px; height: 25px;
  background: #2a2a2a;
  border: 1px solid #555;
}
.steam-effect {
  position: absolute;
  left: 35%;
  bottom: 45%;
  width: 30px;
  height: 40px;
  background: radial-gradient(ellipse, rgba(200,200,200,0.4) 0%, transparent 70%);
  animation: steam 2s ease-in-out infinite;
  filter: blur(4px);
}
@keyframes steam {
  0%, 100% { opacity: 0.3; transform: translateY(0); }
  50% { opacity: 0.7; transform: translateY(-10px); }
}

/* 雪花噪点 */
.snow-noise {
  position: absolute;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.1) 1px, transparent 1px),
    radial-gradient(circle at 70% 60%, rgba(255,255,255,0.08) 1px, transparent 1px),
    radial-gradient(circle at 40% 80%, rgba(0,0,0,0.1) 1px, transparent 1px);
  background-size: 4px 4px, 6px 6px, 5px 5px;
  animation: snowStatic 0.2s steps(2) infinite;
}
@keyframes snowStatic {
  0% { background-position: 0 0, 0 0, 0 0; }
  100% { background-position: 4px 4px, -6px 6px, 5px -5px; }
}

.street-bottom-bar {
  height: 36px;
  background: rgba(0,0,0,0.7);
  color: #888;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
}

/* 街景黑白化 */
.street-scene.bw .road-sky { filter: grayscale(100%); background: linear-gradient(180deg, #666 0%, #888 70%, #aaa 100%); }
.street-scene.bw .road-mountains { filter: grayscale(100%) blur(2px); }
.street-scene.bw .road-surface { filter: grayscale(100%); }



/* ================= 摄像头场景 ================= */
.camera-scene-page {
  position: absolute;
  inset: 0;
  background: #000;
  z-index: 200;
}
.camera-frame {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.camera-frame video,
.camera-frame canvas {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.1) brightness(0.95);
}
.camera-frame canvas {
  position: absolute;
  top: 0; left: 0;
}
.camera-scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    rgba(0,0,0,0.1) 0px,
    rgba(0,0,0,0.1) 2px,
    transparent 2px,
    transparent 4px
  );
  z-index: 5;
}
.camera-timestamp {
  position: absolute;
  top: 20px;
  right: 20px;
  color: #ff2020;
  font-family: "Courier New", monospace;
  font-size: 14px;
  letter-spacing: 2px;
  z-index: 10;
  text-shadow: 0 0 4px rgba(255,0,0,0.5);
}
.camera-timestamp::before {
  content: '●';
  color: #ff2020;
  margin-right: 6px;
  animation: recBlink 1s ease-in-out infinite;
}
@keyframes recBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
.camera-label {
  position: absolute;
  bottom: 20px;
  left: 20px;
  color: rgba(255,255,255,0.6);
  font-family: "Courier New", monospace;
  font-size: 12px;
  letter-spacing: 1px;
  z-index: 10;
}

.camera-glitch-overlay {
  position: absolute;
  inset: 0;
  z-index: 15;
  pointer-events: none;
}
.camera-glitch-overlay.active {
  animation: glitch 0.5s steps(4);
}
@keyframes glitch {
  0% { transform: translate(0); filter: hue-rotate(0); }
  25% { transform: translate(-5px, 2px); filter: hue-rotate(10deg); }
  50% { transform: translate(4px, -3px); filter: hue-rotate(-10deg); }
  75% { transform: translate(-2px, 3px); filter: hue-rotate(5deg); }
  100% { transform: translate(0); filter: hue-rotate(0); }
}

.camera-no-permission {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #000;
  color: #555;
}
.no-perm-silhouette {
  width: 150px;
  height: 200px;
  background:
    radial-gradient(circle at 50% 25%, #1a1a1a 0%, #1a1a1a 20%, transparent 25%),
    linear-gradient(180deg, transparent 40%, #1a1a1a 40%, #1a1a1a 100%);
  border-radius: 40% 40% 0 0;
  margin-bottom: 20px;
  filter: blur(1px);
}
.no-perm-text {
  font-size: 14px;
  color: #666;
  text-align: center;
  line-height: 1.8;
}

/* ================= 浏览器崩溃页 ================= */
.browser-crash-page {
  position: absolute;
  inset: 0;
  background: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  z-index: 250;
}
.crash-container {
  text-align: center;
  max-width: 400px;
  padding: 20px;
}
.crash-icon {
  font-size: 80px;
  color: #999;
  margin-bottom: 16px;
}
.crash-container h2 {
  font-size: 20px;
  color: #333;
  margin: 0 0 12px 0;
  font-weight: normal;
}
.crash-container p {
  font-size: 13px;
  color: #666;
  margin: 0 0 8px 0;
  line-height: 1.6;
}
.crash-code {
  font-family: monospace;
  font-size: 11px;
  color: #999;
  margin: 16px 0 !important;
}
.crash-reload-btn {
  padding: 8px 28px;
  background: #1a73e8;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
  margin-top: 12px;
}
.crash-reload-btn:hover { background: #1557b0; }

/* ================= 被篡改的主页 ================= */
.hacked-homepage {
  position: absolute;
  inset: 0;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "SimSun", serif;
  z-index: 250;
  overflow: hidden;
}
.hacked-content {
  text-align: center;
  z-index: 10;
}
.hacked-welcome {
  font-size: 42px;
  color: #fff;
  letter-spacing: 8px;
  margin-bottom: 40px;
  text-shadow: 0 0 20px rgba(255,255,255,0.3);
  animation: welcomeFade 2s ease;
}
@keyframes welcomeFade {
  0% { opacity: 0; letter-spacing: 0; }
  100% { opacity: 1; letter-spacing: 8px; }
}
.hacked-input-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.hacked-input-wrap input {
  width: 280px;
  padding: 12px 16px;
  background: transparent;
  border: none;
  border-bottom: 2px solid #444;
  color: #fff;
  font-size: 16px;
  text-align: center;
  font-family: inherit;
  outline: none;
  letter-spacing: 2px;
}
.hacked-input-wrap input:focus { border-bottom-color: #888; }
.hacked-input-wrap button {
  padding: 8px 32px;
  background: transparent;
  border: 1px solid #666;
  color: #ccc;
  cursor: pointer;
  font-size: 14px;
  font-family: inherit;
  letter-spacing: 4px;
}
.hacked-input-wrap button:hover {
  border-color: #888;
  color: #fff;
}
.hacked-input-wrap input.shake {
  animation: shake 0.4s;
  border-bottom-color: #c62828;
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-8px); }
  75% { transform: translateX(8px); }
}
.hacked-result {
  margin-top: 30px;
  font-size: 16px;
  color: #ccc;
  letter-spacing: 2px;
  line-height: 2;
}
.hacked-veins {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 40%, rgba(192, 30, 30, 0.15) 0%, transparent 30%),
    radial-gradient(circle at 70% 60%, rgba(192, 30, 30, 0.1) 0%, transparent 25%);
  animation: veinsPulse 3s ease-in-out infinite;
  z-index: 1;
}
@keyframes veinsPulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.8; }
}

/* ================= 村民名单 ================= */
.villager-list-page {
  position: absolute;
  inset: 0;
  background: #1a1a1a;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 260;
  padding: 30px;
}
.villager-paper {
  background: #f0e8d0;
  color: #333;
  padding: 30px 40px;
  max-width: 420px;
  width: 100%;
  font-family: "SimSun", serif;
  box-shadow:
    0 4px 20px rgba(0,0,0,0.5),
    inset 0 0 60px rgba(139, 115, 85, 0.2);
  position: relative;
  background-image:
    linear-gradient(180deg, rgba(139,115,85,0.05) 50%, transparent 50%);
  background-size: 100% 4px;
}
.villager-header {
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  letter-spacing: 6px;
  margin-bottom: 6px;
  color: #5a4020;
}
.villager-sub {
  text-align: center;
  font-size: 12px;
  color: #8a7050;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px double #bba980;
  letter-spacing: 2px;
}
.villager-names {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px 12px;
  font-size: 13px;
  color: #4a3820;
  line-height: 2;
  margin-bottom: 20px;
  min-height: 300px;
}
.villager-names .villager-name {
  border-bottom: 1px dotted #c0b090;
  padding: 0 4px;
}
.villager-names .villager-name.player-name {
  color: #c62828;
  font-weight: bold;
}
.villager-footer {
  text-align: right;
  font-size: 14px;
  color: #5a4020;
  padding-top: 12px;
  border-top: 2px double #bba980;
  letter-spacing: 2px;
}
.villager-stamp {
  position: absolute;
  bottom: 40px;
  right: 40px;
  width: 80px;
  height: 80px;
  border: 2px solid rgba(192, 40, 40, 0.4);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(192, 40, 40, 0.5);
  font-size: 12px;
  transform: rotate(-12deg);
  letter-spacing: 1px;
}

/* 桌面图标变灰 */
.desktop-icons.grayed .desktop-icon .icon-img {
  filter: grayscale(100%) brightness(0.7);
  opacity: 0.6;
}
.desktop-icons.grayed .icon-label {
  color: #999;
}


/* 离线页模拟调整按钮 */
.offline-time-hint {
  font-size: 12px;
  color: #666;
  line-height: 1.8;
  margin: 20px 0 12px;
  text-align: center;
}
.simulate-time-btn {
  display: block;
  margin: 10px auto 0;
  padding: 10px 28px;
  background: #ff2442;
  color: #fff;
  border: none;
  border-radius: 24px;
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 2px 8px rgba(255, 36, 66, 0.3);
  transition: all 0.2s;
}
.simulate-time-btn:hover {
  background: #e01030;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 36, 66, 0.4);
}
.time-quick-btns {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.time-quick-btn {
  flex: 1;
  padding: 6px 8px;
  background: #fff;
  border: 1px solid #ffcccc;
  color: #c00;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
}
.time-quick-btn:hover {
  background: #fff0f0;
}

/* 街景入口默认隐藏 */
.street-view-entry {
  display: none;
}