/* =========================================================
   星光论坛 · MineBBS 风格浅色主题
   页面底色浅灰 + 白色圆角面板 + 蓝色（#2174F5）主色调
   ========================================================= */

/* 图标字体：Material Symbols Outlined（Google，Apache License 2.0）
   已把只用到的那批图标打包成 15KB 的子集，自托管在 static/fonts/ 下，
   不依赖 Google 的服务器（国内也能正常显示）。
   用法：<span class="ms">visibility</span>，图标名写进文字里即可。 */
@font-face {
  font-family: "XG Icons";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/material-symbols-outlined.woff2") format("woff2");
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  /* 全站壁纸：换壁纸只改这一行（图片放 static/wallpapers/ 下） */
  --wallpaper: url("wallpapers/wallpaper-main.jpg");

  /* 磁贴标题区的「高亮条」颜色 */
  --tile-hl: rgba(255, 255, 255, 0.92);
  --tile-hl-border: rgba(255, 255, 255, 0.95);
  --tile-hl-shadow: 0 6px 16px rgba(15, 23, 42, 0.07);
  --tile-gap: 14px;        /* 卡片之间的统一间距 */

  --primary: #2174f5;          /* 主色：参考 MineBBS 的 logo 蓝 */
  --primary-dark: #1a5fd0;
  --primary-soft: #e9f1fe;
  --bg: #eef1f5;               /* 页面背景：浅灰 */
  --panel: #ffffff;            /* 面板：白色 */
  --line: #e2e8f0;             /* 分隔线 */
  --text: #1f2937;             /* 正文 */
  --text-2: #6b7280;           /* 次要文字 */
  --text-3: #98a2b3;           /* 弱化文字 */
  --radius: 10px;
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 1px 3px rgba(16, 24, 40, 0.06);
}

body {
  font-family: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  /* 网页背景：用 :root 里的 --wallpaper */
  background-color: #0b1220;
  background-image: var(--wallpaper);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  color: var(--text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-size: 14px;
}

.container {
  max-width: 1060px;
  margin: 0 auto;
  padding: 0 16px;
  width: 100%;
}

.main {
  flex: 1 0 auto;
}

a {
  color: var(--primary);
  text-decoration: none;
}

a:hover {
  color: var(--primary-dark);
}

/* ============ 顶部：白色 logo 区 + 导航 + 登录按钮 ============ */
.site-header {
  background: #fff;
  border-bottom: 1px solid var(--line);
}

.header-row {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 10px 16px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-right: 6px;
}

.brand-name {
  font-size: 21px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 1px;
}

.brand-name small {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-3);
  letter-spacing: 0;
}

.main-nav {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
}

.nav-link {
  padding: 7px 13px;
  border-radius: 7px;
  color: #4b5563;
  font-size: 14px;
  transition: all 0.15s ease;
}

.nav-link:hover {
  background: var(--primary-soft);
  color: var(--primary);
}

.nav-link.active {
  color: var(--primary);
  font-weight: 600;
}

.header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-publish-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(33, 116, 245, 0.25);
  transition: background 0.15s ease, transform 0.15s ease;
}

.header-publish-btn .ms {
  font-size: 17px;
}

.header-publish-btn:hover {
  background: var(--primary-dark);
  color: #fff;
  transform: translateY(-1px);
}

.user-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
}

.points-chip {
  background: #fff7e0;
  border: 1px solid #f0d48a;
  color: #9a6b00;
  font-size: 12px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 999px;
}

/* ============ 等级系统 ============ */
.level-chip {
  background: linear-gradient(135deg, #7c5cff, #4f7cff);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 999px;
  white-space: nowrap;
}

a.level-chip {
  text-decoration: none;
}

.comment-level {
  display: inline-block;
  margin-left: 5px;
  padding: 0 5px;
  border-radius: 4px;
  background: rgba(33, 116, 245, 0.1);
  color: var(--primary);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 16px;
  vertical-align: 1px;
}

.price-original {
  margin-left: 4px;
  color: var(--text-3);
  font-size: 11px;
}

.level-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #7c5cff, #4f7cff);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 999px;
  flex: none;
  box-shadow: 0 2px 6px rgba(79, 124, 255, 0.3);
}

.profile-level {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  max-width: 420px;
}

.level-wrap {
  flex: 1;
  min-width: 160px;
}

.level-text {
  font-size: 12.5px;
  color: var(--text-2);
  margin-bottom: 5px;
}

.level-bar {
  height: 8px;
  background: #eef1f5;
  border-radius: 999px;
  overflow: hidden;
}

.level-bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #7c5cff, #4f7cff);
  border-radius: 999px;
  transition: width 0.3s ease;
}

/* OREO 积分图标（用 static/oreo.png） */
.oreo-icon {
  width: 15px;
  height: 15px;
  vertical-align: -3px;
  object-fit: contain;
}

.oreo-icon-lg {
  width: 26px;
  height: 26px;
  vertical-align: -5px;
  margin-right: 2px;
}

/* 界面图标（用 static/icons 里的图片代替 emoji） */
.ui-icon {
  width: 16px;
  height: 16px;
  vertical-align: -3px;
  margin-right: 4px;
  object-fit: contain;
}

.ui-icon-lg {
  width: 20px;
  height: 20px;
  vertical-align: -4px;
  margin-right: 5px;
  object-fit: contain;
}

.ui-icon-sm {
  width: 14px;
  height: 14px;
  vertical-align: -2px;
  margin-right: 3px;
  object-fit: contain;
}

.panel-icon .ui-icon {
  margin-right: 0;
}

/* 图标字体（Material Symbols）——用来替代以前的 emoji。
   大小默认跟随周围文字（1em），所以换图标不会改变原来的排版。 */
.ms {
  font-family: "XG Icons";
  font-weight: normal;
  font-style: normal;
  font-size: 1em;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  vertical-align: -0.16em;
  font-feature-settings: "liga";
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 实心版本（点赞/收藏选中时用），字体里带 FILL 轴 */
.ms-fill {
  font-variation-settings: "FILL" 1;
}

.ms-sm {
  font-size: 0.85em;
}

.ms-lg {
  font-size: 1.25em;
}

.ms-2x {
  font-size: 2em;
}

/* OREO 图标：以前用 static/oreo.png 图片，现在用图标字体的 cookie 字形。
   想改颜色就改下面这一行（例如改成 var(--primary) 就是蓝色饼干）。 */
.oreo-ms {
  color: #8b5e34;
}


/* 付费附件 */
.paid-attachment {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 240px;
  padding: 16px;
  background: #fffdf5;
  border: 1px dashed #e8cf87;
  border-radius: 10px;
  text-align: center;
}

.paid-name {
  font-size: 13px;
  color: var(--text-2);
  word-break: break-all;
}

.price-tag {
  font-size: 17px;
  font-weight: 700;
  color: #9a6b00;
}

.price-tag .oreo-icon-lg {
  vertical-align: -6px;
}

.price-note {
  align-self: center;
  font-size: 12px;
  color: var(--text-3);
}

.paid-attachment .file-hint {
  margin-top: 0;
}

/* 后台修改 OREO 的小表单 */
.points-form {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.points-form input {
  width: 74px;
  padding: 5px 8px;
  border: 1px solid #d3dce8;
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  color: var(--text);
  background: #fbfcfe;
  outline: none;
}

.points-form input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(33, 116, 245, 0.14);
  background: #fff;
}

/* 操作日志 */
.log-badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary-dark);
  font-size: 12px;
  white-space: nowrap;
}

.log-badge.log-admin {
  background: #fff7e0;
  color: #9a6b00;
}

.pagination {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}

.hall-add-form select {
  padding: 8px 12px;
  border: 1px solid #d3dce8;
  border-radius: 8px;
  font-size: 13.5px;
  font-family: inherit;
  background: #fbfcfe;
  color: var(--text);
  outline: none;
}

/* ============ 头像（字母圆片，颜色按用户名稳定分配） ============ */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  flex: none;
  user-select: none;
}

.avatar-sm {
  width: 28px;
  height: 28px;
  font-size: 13px;
}

.avatar-lg {
  width: 76px;
  height: 76px;
  font-size: 30px;
}

.avatar-img {
  object-fit: cover;
  background: #eef1f5;
}

/* 头像设置 */
.avatar-body {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.avatar-preview {
  flex: none;
}

.avatar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.avatar-form {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.avatar-form input[type="file"] {
  font-size: 13px;
  color: var(--text-2);
}

.user-cell {
  white-space: nowrap;
}

.user-cell .avatar {
  margin-right: 4px;
}

/* 个人主页 */
.avatar-xl {
  width: 104px;
  height: 104px;
  font-size: 40px;
}

.profile-card {
  margin-top: 18px;
}

.profile-top {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 22px 20px;
  flex-wrap: wrap;
}

.profile-info {
  flex: 1;
  min-width: 220px;
}

.profile-info h1 {
  font-size: 22px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.profile-bio {
  margin: 8px 0 12px;
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.75;
  white-space: pre-wrap;
  word-break: break-word;
}

.role-badge {
  font-size: 12px;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary-dark);
}

.role-badge.role-badge-off {
  background: #fdeaea;
  color: #b02a37;
}

.profile-stats {
  padding: 0 20px 20px;
}

.stat-card .stat-text {
  font-size: 19px;
  padding-top: 6px;
}

.bio-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d3dce8;
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  background: #fbfcfe;
  color: var(--text);
  outline: none;
  resize: vertical;
}

.bio-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(33, 116, 245, 0.14);
  background: #fff;
}

.settings-body form .btn {
  margin-top: 12px;
}

.row-meta a {
  color: var(--text-2);
}

.row-meta a:hover {
  color: var(--primary);
}

.av-1 { background: #2174f5; }
.av-2 { background: #f97316; }
.av-3 { background: #8b5cf6; }
.av-4 { background: #10b981; }
.av-5 { background: #e11d48; }
.av-6 { background: #0ea5e9; }
.av-7 { background: #d97706; }
.av-8 { background: #6366f1; }

/* ============ 按钮 ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 9px 18px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.15s ease;
  line-height: 1.4;
}

.btn-primary {
  background: var(--primary);
  color: #fff;
}

.btn-primary:hover {
  background: var(--primary-dark);
  color: #fff;
}

.btn-outline {
  background: #fff;
  border-color: #cdd8e5;
  color: #44546a;
}

.btn-outline:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-soft);
}

.btn-light {
  background: rgba(255, 255, 255, 0.92);
  color: var(--primary);
}

.btn-light:hover {
  background: #fff;
  color: var(--primary-dark);
}

.btn-danger {
  background: #fff;
  border-color: #f3c1c1;
  color: #d64545;
}

.btn-danger:hover {
  background: #fdecec;
  color: #b83232;
}

.btn-sm {
  padding: 6px 13px;
  font-size: 13px;
  border-radius: 7px;
}

.inline-form {
  display: inline;
}

/* ============ 提示消息 ============ */
.flash-area {
  margin-top: 14px;
}

.flash {
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 8px;
  font-size: 13px;
  border: 1px solid;
  transition: opacity 0.4s ease;
}

.flash-success { background: #e8f7ef; border-color: #b9e6cd; color: #18794e; }
.flash-warning { background: #fff7e0; border-color: #f4e2a2; color: #8a6d1d; }
.flash-danger  { background: #fdeaea; border-color: #f5c6c6; color: #b02a37; }
.flash-info    { background: var(--primary-soft); border-color: #bcd4f5; color: #17539c; }

/* ============ MOTD 查询 ============ */
.motd-form-wrap {
  padding: 18px;
}

.motd-form {
  display: flex;
  gap: 10px;
}

.motd-form input {
  flex: 1;
  min-width: 0;
  padding: 9px 12px;
  border: 1px solid #d3dce8;
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  background: #fbfcfe;
  color: var(--text);
  outline: none;
}

.motd-form input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(33, 116, 245, 0.14);
  background: #fff;
}

.motd-result {
  margin-bottom: 18px;
}

.motd-top {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}

.motd-top strong {
  font-size: 15px;
}

.motd-status-text {
  font-size: 13px;
  color: var(--text-2);
}

.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  flex: none;
}

.dot-ok {
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
}

.dot-bad {
  background: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18);
}

.motd-body {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  flex-wrap: wrap;
}

.motd-favicon {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  border: 1px solid var(--line);
  flex: none;
  image-rendering: pixelated;
}

.motd-box {
  flex: 1;
  min-width: 220px;
  background: #151a21;
  border: 1px solid #2c3642;
  border-radius: 8px;
  padding: 14px 16px;
  font-size: 13.5px;
  line-height: 1.7;
  word-break: break-word;
}

.motd-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 0 18px 4px;
}

.motd-meta span {
  background: #f1f5f9;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 12.5px;
  color: #44546a;
}

.player-list {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 10px 18px 16px;
}

.player-chip {
  background: var(--primary-soft);
  color: var(--primary-dark);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 12px;
}

/* ============ 账号设置 / 两步验证 ============ */
.settings-body {
  padding: 16px 18px;
}

/* 设置页表单的通用样式 */
.settings-body label {
  display: block;
  margin: 12px 0 6px;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
}

.settings-body label:first-child {
  margin-top: 0;
}

.settings-body input,
.settings-body textarea,
.settings-body select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d3dce8;
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  background: #fbfcfe;
  color: var(--text);
  outline: none;
}

.settings-body input:focus,
.settings-body textarea:focus,
.settings-body select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(33, 116, 245, 0.14);
  background: #fff;
}

.info-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 0;
  border-bottom: 1px dashed #eef1f5;
  font-size: 13.5px;
}

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

.info-label {
  color: var(--text-2);
}

.info-value {
  color: var(--text);
  font-weight: 600;
  word-break: break-all;
  text-align: right;
}

.twofa-badge {
  flex: none;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.badge-on {
  background: #e8f7ef;
  color: #18794e;
}

.badge-off {
  background: #eef1f5;
  color: var(--text-2);
}

.settings-tip {
  font-size: 13.5px;
  color: var(--text-2);
  line-height: 1.7;
  margin-bottom: 12px;
}

.step-list {
  margin: 0 0 16px 18px;
  font-size: 13.5px;
  color: var(--text-2);
  line-height: 1.9;
}

.setup-grid {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  padding: 14px;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-bottom: 16px;
}

.qr-img {
  width: 170px;
  height: 170px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #fff;
}

.setup-secret-label {
  font-size: 12.5px;
  color: var(--text-3);
  margin-bottom: 6px;
}

.secret-box {
  font-family: Consolas, "Courier New", monospace;
  font-size: 15px;
  letter-spacing: 2px;
  background: #fff;
  border: 1px dashed var(--line);
  border-radius: 8px;
  padding: 9px 12px;
  color: var(--primary-dark);
  user-select: all;
}

.twofa-form {
  max-width: 360px;
}

.twofa-form label {
  display: block;
  margin: 12px 0 6px;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
}

.twofa-form input {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid #d3dce8;
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  background: #fbfcfe;
  color: var(--text);
  outline: none;
}

.twofa-form input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(33, 116, 245, 0.14);
  background: #fff;
}

/* ============ 名人堂 ============ */
.hall-stats {
  margin-top: 16px;
}

.sponsor-list {
  list-style: none;
}

.sponsor-row {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 18px;
  border-bottom: 1px solid #eef1f5;
}

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

.sponsor-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

.hall-amount {
  flex: none;
  background: #fff7e0;
  border: 1px solid #f0d48a;
  color: #9a6b00;
  padding: 5px 14px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
}

.hall-add-form {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.hall-add-form input {
  flex: 1 1 150px;
  min-width: 0;
  padding: 8px 12px;
  border: 1px solid #d3dce8;
  border-radius: 8px;
  font-size: 13.5px;
  font-family: inherit;
  background: #fbfcfe;
  color: var(--text);
  outline: none;
}

.hall-add-form input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(33, 116, 245, 0.14);
  background: #fff;
}

/* ============ 帖子操作 / 点赞 / 评论 ============ */
.post-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
  flex-wrap: wrap;
}

.like-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 16px;
  border: 1px solid #f0b9b9;
  border-radius: 999px;
  background: #fff;
  color: #d64545;
  font-size: 13.5px;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s ease;
}

.like-btn:hover {
  border-color: #e38b8b;
  background: #fdecec;
  color: #d64545;
}

.like-btn.liked {
  background: #d64545;
  border-color: #d64545;
  color: #fff;
}

/* 收藏按钮 */
.bookmark-btn {
  border-color: #f0d48a;
  color: #9a6b00;
}

.bookmark-btn:hover {
  border-color: #e0b34a;
  background: #fff7e0;
  color: #9a6b00;
}

.bookmark-btn.bookmarked {
  background: #f5c542;
  border-color: #f5c542;
  color: #4a3a0d;
}

/* 投币按钮 */
.coin-btn {
  border-color: #bcd4f5;
  color: var(--primary-dark);
}

.coin-btn:hover {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary-dark);
}

.coin-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.comments {
  margin-top: 24px;
}

.comments h2 {
  font-size: 15px;
  color: var(--text);
  margin-bottom: 12px;
}

.comment-form textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d3dce8;
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  background: #fbfcfe;
  color: var(--text);
  outline: none;
  resize: vertical;
}

.comment-form textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(33, 116, 245, 0.14);
  background: #fff;
}

.comment-form .btn {
  margin-top: 8px;
}

.comment-list {
  list-style: none;
  margin-top: 6px;
}

.comment-row {
  display: flex;
  gap: 11px;
  padding: 13px 0;
  border-bottom: 1px dashed #eef1f5;
}

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

.comment-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.comment-head strong {
  font-size: 13.5px;
}

.comment-content {
  margin-top: 4px;
  font-size: 13.5px;
  color: #374151;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
}

.comment-del {
  border: none;
  background: none;
  color: var(--text-3);
  font-size: 12px;
  cursor: pointer;
  padding: 0;
}

.comment-del:hover {
  color: #d64545;
}

.comment-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
}

.reply-to {
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(33, 116, 245, 0.09);
  color: var(--primary);
  font-size: 11px;
}

.comment-children {
  list-style: none;
  margin: 8px 0 0 8px;
  padding-left: 12px;
  border-left: 2px solid var(--line);
}

.comment-children .comment-row {
  padding: 10px 0;
}

.reply-box {
  display: inline-block;
}

.reply-box summary {
  color: var(--text-3);
  font-size: 12px;
  cursor: pointer;
  user-select: none;
}

.reply-box summary:hover {
  color: var(--primary);
}

.reply-form {
  margin-top: 8px;
  max-width: 620px;
}

.reply-form textarea {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-solid);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  line-height: 1.6;
  outline: none;
  resize: vertical;
}

.reply-form textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(33, 116, 245, 0.12);
}

.reply-form .btn {
  margin-top: 6px;
}

/* ============ 首页两栏布局（仿 KLPBBS：左版块 + 右边栏） ============ */
.home-layout {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-top: 4px;
}

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

.sidebar {
  flex: 0 0 300px;
  max-width: 300px;
}

/* 版块分组列表 */
.board-list {
  list-style: none;
}

.board-row {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 12px 18px;
  border-bottom: 1px solid #eef1f5;
  transition: background 0.12s ease;
}

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

.board-row:hover {
  background: #f7fafd;
}

.board-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: var(--primary-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
  flex: none;
}

/* 板块图标用图片显示时的尺寸（emoji 仍按字号显示） */
.cat-icon {
  width: 22px;
  height: 22px;
  object-fit: contain;
  display: block;
}

.panel-icon .cat-icon {
  width: 20px;
  height: 20px;
}

/* 板块图标用图标字体显示时：字号跟随外面容器（面板标题/板块行里是 21px） */
.cat-icon-ms {
  display: block;
  font-size: 1.05em;
}

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

.board-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

.board-name:hover {
  color: var(--primary);
}

.board-desc {
  margin-top: 3px;
  font-size: 12.5px;
  color: var(--text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.board-stats {
  flex: 0 0 240px;
  text-align: right;
  font-size: 12px;
  color: var(--text-3);
}

.board-count b {
  color: var(--primary);
}

.board-last {
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.board-last a {
  color: var(--text-2);
}

.board-last a:hover {
  color: var(--primary);
}

.board-last-meta {
  color: var(--text-3);
}

/* 侧边栏卡片 */
.side-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 14px;
  box-shadow: var(--shadow);
}

.side-title {
  font-size: 15px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.side-tip {
  font-size: 12.5px;
  color: var(--text-3);
  line-height: 1.7;
  margin-top: 10px;
}

.side-card .btn {
  width: 100%;
  margin-top: 4px;
}

.checkin-points {
  font-size: 26px;
  font-weight: 700;
  color: #b07d00;
  text-align: center;
  padding: 6px 0 10px;
}

.checkin-points span {
  font-size: 13px;
  color: var(--text-3);
  font-weight: 400;
}

.checkin-stats {
  display: flex;
  justify-content: space-around;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 13px;
  color: var(--text-2);
}

.checkin-stats b {
  color: var(--primary);
}

.checkin-cdk-link {
  display: inline-block;
  margin-top: 8px;
  color: var(--primary);
}

.rank-list {
  list-style: none;
}

.rank-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px dashed #eef1f5;
  font-size: 13.5px;
}

.rank-list li:last-child {
  border-bottom: none;
}

.rank-no {
  width: 18px;
  text-align: center;
  color: var(--text-3);
  font-size: 12px;
  flex: none;
}

.rank-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rank-points {
  color: #b07d00;
}

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

.rank-title {
  display: block;
  color: var(--text);
  font-size: 13.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rank-title:hover {
  color: var(--primary);
}

.rank-meta {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--text-3);
}

.rank-no.rank-top {
  background: #f5c542;
  color: #4a3a0d;
  border-radius: 4px;
  font-weight: 700;
}

.side-stats {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text-2);
}

.side-stats b {
  color: var(--primary);
}

/* ============ 广告区域 ============ */
.ad-banner {
  position: relative;
  margin-top: 16px;
  padding: 14px 18px;
  background: #fffdf5;
  border: 1px dashed #e8cf87;
  border-radius: 12px;
  text-align: center;
  font-size: 13.5px;
  color: #8a6d1d;
}

.ad-banner a {
  color: #8a6d1d;
}

.ad-banner a:hover {
  color: var(--primary);
}

.ad-card {
  text-align: center;
  padding-top: 22px;
}

.ad-card a {
  display: block;
  padding: 18px 12px;
  border: 1px dashed #e8cf87;
  border-radius: 10px;
  background: #fffdf5;
  color: #8a6d1d;
  font-size: 13.5px;
  line-height: 1.8;
}

.ad-card a:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.ad-label {
  position: absolute;
  top: -9px;
  left: 14px;
  background: #f5c542;
  color: #4a3a0d;
  font-size: 11px;
  padding: 1px 8px;
  border-radius: 999px;
}

@media (max-width: 520px) {
  .motd-form {
    flex-direction: column;
  }
}

@media (max-width: 900px) {
  .home-layout {
    flex-direction: column;
  }

  .sidebar {
    flex: auto;
    max-width: none;
    width: 100%;
  }

  .board-stats {
    flex: 0 0 150px;
  }
}

/* =========================================================
   手机端竖屏优化
   ========================================================= */

/* 防止长标题/长单词把页面撑出横向滚动条 */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

.post-title,
.board-name,
.board-desc,
.profile-bio,
.attach-name,
.comment-content,
.rank-title {
  overflow-wrap: anywhere;
}

/* 平板 / 手机：首页两栏改为上下排列，签到与热门帖子排到版块前面 */
@media (max-width: 900px) {
  .home-layout {
    flex-direction: column;
    align-items: stretch;
  }

  .home-main {
    order: 2;
    width: 100%;
    max-width: 100%;
  }

  .sidebar {
    order: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: none;
    flex: none;
  }

  .side-card {
    margin-bottom: 12px;
  }

  /* 侧边广告在手机上排到最后，避免挡住签到 */
  .sidebar .ad-card {
    order: 5;
  }

  /* 版块行改为两段式：上面是图标+名称，下面是统计与最后发表 */
  .board-row {
    flex-wrap: wrap;
    min-width: 0;
  }

  .board-stats {
    flex: 1 1 100%;
    min-width: 0;
    text-align: left;
    padding-left: 55px;
  }

  .board-desc {
    display: -webkit-box;
    overflow: hidden;
    white-space: normal;
    line-height: 1.55;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .board-last {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

/* 手机竖屏 */
@media (max-width: 760px) {
  .container {
    padding: 0 12px;
  }

  .header-row {
    padding: 8px 12px;
    gap: 8px;
  }

  .brand-name {
    font-size: 18px;
  }

  .brand-name small {
    display: none;
  }

  /* 导航改成横向滑动的一行，不再换行占好几行高度 */
  .main-nav {
    order: 2;
    flex: 0 0 100%;
    width: 100%;
    min-width: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 2px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .main-nav::-webkit-scrollbar {
    display: none;
  }

  .nav-link {
    white-space: nowrap;
    padding: 9px 12px;
  }

  .header-actions {
    order: 1;
    flex: none;
    gap: 4px;
    margin-left: auto;
  }

  /* 站标和用户头像排同一行，右边不再空一大块 */
  .brand {
    order: 1;
    flex: 0 1 auto;
    width: auto;
    min-width: 0;
  }

  /* 手机上等级标签藏进菜单，顶栏只留头像 + 名字 + OREO + 箭头 */
  .user-chip {
    padding: 3px 6px 3px 3px;
  }

  .user-chip .level-chip {
    display: none;
  }

  /* iOS 上输入框字号小于 16px 会自动放大页面，这里统一到 16px */
  .header-search input {
    font-size: 16px;
    padding: 8px 12px;
  }

  /* 内容区留白收紧，信息密度更高 */
  .forum-banner {
    margin-top: 12px;
    padding: 16px 16px;
  }

  .forum-banner h1 {
    font-size: 18px;
  }

  .forum-banner .btn {
    width: 100%;
    justify-content: center;
  }

  .panel-head {
    padding: 12px 14px;
  }

  .panel-title h2 {
    font-size: 15px;
  }

  .board-row,
  .post-row,
  .sponsor-row {
    padding: 12px 14px;
  }

  .settings-body,
  .motd-form-wrap,
  .comment-row {
    padding: 12px 14px;
  }

  .post-detail,
  .form-card {
    padding: 16px;
  }

  .profile-top {
    padding: 16px 14px;
    gap: 14px;
  }

  .avatar-xl {
    width: 84px;
    height: 84px;
    font-size: 32px;
  }

  .admin-main {
    padding: 14px;
  }

  /* 触控目标不小于 34px，手指点得更准 */
  .btn-sm,
  .ed-btn,
  .ed-color,
  .ed-size {
    min-height: 34px;
  }

  .ed-color {
    min-width: 24px;
    height: 24px;
  }

  /* 后台宽表格改为可横向滑动，不再挤压变形 */
  .table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .table-scroll .admin-table {
    min-width: 560px;
  }

  .hall-add-form input,
  .hall-add-form select {
    flex: 1 1 100%;
  }
}

/* 小屏手机 */
@media (max-width: 520px) {
  /* 顶部只保留头像和 OREO，省空间 */
  .user-name {
    display: none;
  }

  .points-chip {
    padding: 2px 7px;
  }

  .post-cat {
    font-size: 11px;
    padding: 2px 8px;
  }

  .stat-card {
    padding: 12px 8px;
  }

  .stat-card strong {
    font-size: 22px;
  }

  .profile-stats .stat-card {
    min-width: 45%;
  }

  .comment-form textarea,
  .twofa-form input,
  .motd-form input {
    font-size: 16px;
  }

  /* iOS 上输入框字号小于 16px 会自动放大页面，这里统一避免页面跳动 */
  input,
  select,
  textarea {
    font-size: 16px;
  }

  .editor-toolbar {
    gap: 5px;
  }

  .ed-btn {
    width: 34px;
    height: 34px;
    font-size: 15px;
  }

  .ed-size {
    font-size: 14px;
  }

  .attach-image {
    max-width: 100%;
  }
}

/* ============ 首页顶部横幅 ============ */
.forum-banner {
  margin-top: 18px;
  padding: 24px 26px;
  border-radius: 12px;
  background: linear-gradient(110deg, var(--primary) 0%, #5d9eff 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  box-shadow: 0 6px 18px rgba(33, 116, 245, 0.22);
}

.forum-banner h1 {
  font-size: 22px;
  font-weight: 700;
}

.forum-banner p {
  margin-top: 5px;
  font-size: 13px;
  opacity: 0.9;
}

/* ============ 板块面板（类似 MineBBS 首页的版块列表） ============ */
.forums {
  margin-top: 6px;
}

.forum-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  margin-top: 16px;
  overflow: hidden;
  box-shadow: var(--shadow);
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}

.panel-title {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

.panel-icon {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: var(--primary-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  flex: none;
}

.panel-title h2 {
  font-size: 16px;
  color: var(--text);
}

.panel-title h2 a {
  color: var(--text);
}

.panel-title h2 a:hover {
  color: var(--primary);
}

.panel-desc {
  margin-top: 2px;
  font-size: 12px;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 480px;
}

.panel-stat {
  font-size: 12px;
  color: var(--text-3);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex: none;
}

.panel-stat b {
  color: var(--text-2);
  font-weight: 600;
}

.panel-more {
  font-size: 12px;
}

/* ============ 帖子行 ============ */
.post-rows {
  list-style: none;
}

.post-row {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 12px 18px;
  border-bottom: 1px solid #eef1f5;
  transition: background 0.12s ease;
}

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

.post-row:hover {
  background: #f7fafd;
}

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

.post-title {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.post-title:hover {
  color: var(--primary);
}

.row-meta {
  margin-top: 3px;
  font-size: 12px;
  color: var(--text-3);
}

.post-cat {
  flex: none;
  background: var(--primary-soft);
  color: var(--primary-dark);
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 999px;
}

.empty {
  padding: 26px;
  text-align: center;
  color: var(--text-3);
  font-size: 13px;
}

/* ============ 帖子详情 ============ */
.post-detail {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  margin-top: 18px;
  padding: 24px;
  box-shadow: var(--shadow);
}

.post-user-line {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--line);
}

.post-user-line strong {
  font-size: 14px;
  color: var(--text);
}

.post-user-line span {
  display: block;
  font-size: 12px;
  color: var(--text-3);
  margin-top: 1px;
}

.post-detail h1 {
  margin-top: 15px;
  font-size: 22px;
  color: var(--text);
  line-height: 1.45;
}

.post-detail-content {
  margin-top: 14px;
  line-height: 1.85;
  font-size: 14.5px;
  color: #374151;
  white-space: pre-wrap;
}

.post-detail-content a.post-link,
.editor-preview a.post-link,
.comment-content a.post-link {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
}

.post-detail-content a.post-link:hover,
.editor-preview a.post-link:hover,
.comment-content a.post-link:hover {
  color: var(--primary-dark);
}

/* 帖子附件 */
.post-attachments {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.post-attachments h2 {
  font-size: 14px;
  color: var(--text-2);
  margin-bottom: 10px;
}

.attach-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-start;
}

.attach-image {
  display: block;
  max-width: 240px;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: #fafbfd;
  transition: border-color 0.15s ease;
}

.attach-image:hover {
  border-color: var(--primary);
}

.attach-image img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 190px;
  object-fit: cover;
}

.attach-file {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f8fafc;
  color: var(--text);
  transition: all 0.15s ease;
  max-width: 280px;
}

.attach-file:hover {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--text);
}

.attach-name {
  font-size: 13px;
  word-break: break-all;
}

.attach-meta {
  font-size: 12px;
  color: var(--text-3);
}

.back-link {
  margin-top: 18px;
  padding-top: 13px;
  border-top: 1px solid var(--line);
  font-size: 13px;
}

/* ============ 表单卡片（登录/注册/发帖） ============ */
.form-card {
  max-width: 470px;
  margin: 28px auto;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 26px;
  box-shadow: var(--shadow);
}

@media (min-width: 900px) {
  /* 发帖 / 编辑帖子：桌面端加宽，手机端保持原样 */
  .form-card.post-editor-card {
    max-width: 980px;
    width: 100%;
    padding: 30px 34px;
  }

  .post-editor-card #title {
    height: 44px;
    font-size: 15px;
  }

  .post-editor-card .editor-wrap textarea {
    min-height: 420px;
    font-size: 15px;
    line-height: 1.75;
  }

  .post-editor-card .rich-editor {
    min-height: 420px;
    font-size: 15px;
    line-height: 1.75;
  }

  .post-editor-card .editor-panes {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .post-editor-card .editor-preview-pane {
    min-height: 420px;
    max-height: 72vh;
  }

  .post-editor-card .editor-toolbar {
    padding: 10px 12px;
    gap: 7px;
  }

  /* 表单的 select 默认是 100%，会把这个小下拉拉满整行 */
  .post-editor-card .ed-size {
    width: auto;
    min-width: 120px;
  }
}

.form-card h1 {
  font-size: 20px;
  margin-bottom: 6px;
}

.form-card .form-sub {
  font-size: 13px;
  color: var(--text-3);
  margin-bottom: 10px;
}

.form-card label {
  display: block;
  margin: 14px 0 6px;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
}

.form-card input,
.form-card select,
.form-card textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid #d3dce8;
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  background: #fbfcfe;
  color: var(--text);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.file-hint {
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.6;
}

.file-hint.size-over {
  color: #d9534f;
  font-weight: 600;
}

/* 帖子编辑器工具栏 */
.editor-wrap {
  border: 1px solid #d3dce8;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

.editor-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 7px 10px;
  background: #f8fafc;
  border-bottom: 1px solid #e5ebf3;
}

.editor-panes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  padding: 12px;
}

.editor-wrap textarea {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 12px 14px;
  min-height: 170px;
  resize: vertical;
}

.editor-wrap textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(33, 116, 245, 0.14);
}

.rich-editor {
  min-height: 170px;
  margin: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  font-size: 14px;
  line-height: 1.75;
  outline: none;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.rich-editor:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(33, 116, 245, 0.14);
}

.rich-editor:empty::before {
  content: attr(data-placeholder);
  color: var(--text-3);
  pointer-events: none;
}

.rich-editor a {
  color: var(--primary);
  text-decoration: underline;
}

.rich-editor ul,
.rich-editor ol {
  margin: 6px 0 6px 22px;
  padding-left: 6px;
}

.rich-editor li {
  margin: 3px 0;
}

.rich-editor img {
  max-width: 100%;
  height: auto;
}

.ed-btn {
  width: 30px;
  height: 28px;
  border: 1px solid #d3dce8;
  border-radius: 6px;
  background: #fff;
  color: #374151;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
}

.ed-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.ed-btn.ed-italic {
  font-style: italic;
  font-weight: 600;
}

.ed-btn.ed-underline {
  text-decoration: underline;
  font-weight: 600;
}

.ed-list-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.ed-icon {
  width: 16px;
  height: 16px;
  display: block;
}

.ed-image-btn .ms {
  font-size: 18px;
}

.ed-upload-status {
  align-self: center;
  color: var(--text-3);
  font-size: 11.5px;
  white-space: nowrap;
}

.ed-sep {
  width: 1px;
  height: 18px;
  background: #dfe6ef;
  margin: 0 2px;
}

.ed-label {
  font-size: 12px;
  color: var(--text-3);
}

.ed-color {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.12);
  cursor: pointer;
  padding: 0;
}

.ed-color:hover {
  transform: scale(1.12);
}

/* 编辑器右上角的“预览”按钮 */
.ed-preview-btn {
  width: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 10px;
  margin-left: auto;
  white-space: nowrap;
}

.ed-preview-btn .ms {
  font-size: 17px;
}

.ed-preview-btn[aria-pressed="true"] {
  border-color: var(--primary);
  color: var(--primary);
  background: rgba(33, 116, 245, 0.1);
}

/* 实时效果面板：排版尽量贴近帖子正文 */
.editor-preview-pane {
  display: flex;
  flex-direction: column;
  min-height: 170px;
  max-height: 60vh;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.editor-preview-head {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 10px;
  border-bottom: 1px solid var(--line);
  background: #f8fafc;
  color: var(--text-3);
  font-size: 12px;
  font-weight: 600;
}

.editor-preview-head .ms {
  font-size: 15px;
}

.editor-preview {
  flex: 1;
  min-height: 0;
  padding: 12px 14px;
  overflow-y: auto;
  background: transparent;
  color: #1f2937;
  font-size: 15px;
  line-height: 1.75;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.editor-preview > div {
  margin: 2px 0;
}

.post-detail-content ul,
.post-detail-content ol,
.editor-preview ul,
.editor-preview ol {
  margin: 8px 0 8px 22px;
  padding-left: 6px;
}

.post-detail-content li,
.editor-preview li {
  margin: 4px 0;
  line-height: 1.7;
}

.post-inline-img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 12px auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.35);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
}

.editor-preview-empty {
  margin: 0;
  color: var(--text-3);
}

.editor-wrap textarea[hidden] {
  display: none;
}

.ed-size {
  height: 28px;
  padding: 0 6px;
  border: 1px solid #d3dce8;
  border-radius: 6px;
  background: #fff;
  color: #374151;
  font-size: 12.5px;
  font-family: inherit;
  cursor: pointer;
}

.ed-size:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.ed-btn.ed-text {
  width: 32px;
  font-size: 12.5px;
  font-weight: 600;
}

.form-card input:focus,
.form-card select:focus,
.form-card textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(33, 116, 245, 0.14);
  background: #fff;
}

.form-card .btn {
  width: 100%;
  margin-top: 18px;
}

.form-tip {
  margin-top: 15px;
  text-align: center;
  font-size: 13px;
  color: var(--text-3);
}

.form-tip a {
  color: var(--primary);
}

/* 第三方登录（微软） */
.oauth-box {
  margin-top: 18px;
}

.oauth-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-3);
  font-size: 12px;
  margin-bottom: 14px;
}

.oauth-divider::before,
.oauth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.oauth-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid #cdd8e5;
  color: #374151;
  font-size: 14px;
  border-radius: 8px;
}

.oauth-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: #fff;
}

.ms-logo {
  flex: none;
}

/* 注册页：邮箱 + 发送验证码按钮一行排列 */
.code-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.code-row input {
  flex: 1;
  min-width: 0;
}

.code-row .btn {
  flex: none;
  width: auto;
  margin-top: 0;
  white-space: nowrap;
}

/* ============ 管理员后台 ============ */
.admin-layout {
  margin-top: 18px;
  display: flex;
  gap: 18px;
  align-items: flex-start;
}

.admin-sidebar {
  flex: 0 0 190px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  box-shadow: var(--shadow);
}

.admin-sidebar h2 {
  font-size: 14px;
  color: var(--text-3);
  font-weight: 600;
  padding: 4px 10px 10px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 6px;
}

.admin-sidebar a {
  display: block;
  padding: 8px 10px;
  color: #4b5563;
  border-radius: 7px;
  font-size: 13.5px;
  margin-bottom: 2px;
}

.admin-sidebar a:hover {
  background: var(--primary-soft);
  color: var(--primary);
}

.admin-main {
  flex: 1;
  min-width: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px;
  box-shadow: var(--shadow);
}

.admin-main h1 {
  font-size: 18px;
  margin-bottom: 16px;
}

.stat-cards {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.stat-card {
  flex: 1;
  min-width: 130px;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 18px;
  text-align: center;
}

.stat-card strong {
  display: block;
  font-size: 26px;
  color: var(--primary);
}

.stat-card span {
  font-size: 12px;
  color: var(--text-2);
}

/* 后台表格太宽时在卡片内部横向滚动，不把整页撑破 */
.table-scroll {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

.admin-table th,
.admin-table td {
  padding: 10px 8px;
  border-bottom: 1px solid #eef1f5;
  text-align: left;
  vertical-align: middle;
}

.admin-table th {
  color: var(--text-3);
  font-weight: 600;
  font-size: 12.5px;
}

.admin-table tr:hover td {
  background: #f8fafc;
}

/* 注意：这里必须排除按钮（.btn），否则 <a class="btn btn-primary"> 的白色文字
   会被这条规则覆盖成蓝色，导致蓝底蓝字“看不见”（鼠标悬停时又正常） */
.admin-table a:not(.btn) {
  color: var(--primary);
}

.muted {
  color: var(--text-3);
  font-size: 12.5px;
}

/* ============ 后台：CDK 管理 ============ */
.cdk-generate {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.cdk-generate label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  font-size: 12.5px;
  color: var(--text-2);
}

.cdk-generate input {
  width: 130px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-solid);
  color: var(--text);
  font-family: inherit;
  font-size: 13.5px;
}

.cdk-generate .cdk-note-field input {
  width: 260px;
  max-width: 100%;
}

.cdk-generate .btn {
  margin: 0;
}

.cdk-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.cdk-filter select,
.cdk-filter input {
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-solid);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
}

.cdk-filter input {
  width: 180px;
}

.cdk-filter .btn {
  margin: 0;
}

.cdk-code {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 13px;
  letter-spacing: 0.5px;
  user-select: all;
}

.cdk-code-cell {
  white-space: nowrap;
}

.cdk-table {
  min-width: 820px;
}

.cdk-table th,
.cdk-table td {
  white-space: nowrap;
}

.cdk-copy {
  margin-left: 6px;
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: transparent;
  color: var(--text-2);
  font-family: inherit;
  font-size: 12px;
  vertical-align: middle;
  cursor: pointer;
}

.cdk-copy:hover {
  background: rgba(33, 116, 245, 0.1);
  border-color: var(--primary);
  color: var(--primary);
}

.cdk-copy:active {
  transform: scale(0.97);
}

/* ============ 页脚 ============ */
.site-footer {
  margin-top: 28px;
  padding: 30px 0 26px;
  border-top: 1px solid var(--line);
  background: #f8fafc;
  text-align: center;
  color: var(--text-3);
  font-size: 13.5px;
}

/* 星光论坛 logo（网页里统一使用那张圆角图片） */
.brand-logo {
  width: 34px;
  height: 34px;
  border-radius: 9px;          /* 圆角图片 */
  object-fit: cover;
  box-shadow: 0 2px 5px rgba(33, 116, 245, 0.25);
}

.footer-logo {
  width: 20px;
  height: 20px;
  border-radius: 4px;          /* 圆角图片 */
  object-fit: cover;
  vertical-align: -2px;
  margin-right: 3px;
}

.footer-disclaimer {
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--text-3);
}

.footer-feedback {
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--text-3);
}

.footer-feedback a {
  color: var(--text-3);
  text-decoration: underline;
}

.footer-feedback a:hover {
  color: var(--primary);
}

.footer-main {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  color: var(--text-3);
  font-size: 14px;
}

/* 页脚：站点信息与相关链接（Wiki / MCMod / MineBBS）同一行 */
.footer-link {
  display: inline-flex;
  align-items: center;
  opacity: 0.85;
  transition: opacity 0.15s ease;
}

.footer-link:hover {
  opacity: 1;
}

.footer-link img {
  height: 24px;
  width: auto;
  display: block;
  border-radius: 4px;
}

.footer-divider {
  width: 1px;
  height: 18px;
  background: #cdd8e5;
  display: inline-block;
}

/* 页脚那行里的小文字链接（名人堂 / QQ频道） */
.footer-text-link {
  color: var(--text-2);
  text-decoration: none;
  transition: color 0.15s ease;
}

.footer-text-link:hover {
  color: var(--primary);
  text-decoration: underline;
}

/* ============ 小屏幕适配 ============ */
@media (max-width: 760px) {
  .header-row {
    gap: 10px;
  }

  .main-nav {
    order: 3;
    width: 100%;
    padding-top: 6px;
    border-top: 1px solid var(--line);
  }

  .header-actions {
    margin-left: auto;
  }

  .panel-desc {
    max-width: 220px;
  }

  .admin-layout {
    flex-direction: column;
    align-items: stretch;
  }

  .admin-sidebar {
    flex: auto;
    width: 100%;
  }

  .admin-sidebar a {
    display: inline-block;
  }
}

/* ============ 星光周报 ============ */
.weekly-side-title {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}

.weekly-side-title:hover {
  color: var(--primary);
}

.weekly-item {
  padding: 16px 18px;
}

.weekly-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.weekly-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}

.weekly-title:hover {
  color: var(--primary);
}

.weekly-excerpt {
  margin: 8px 0 12px;
  font-size: 13.5px;
  color: var(--text-2);
  line-height: 1.75;
}

.weekly-detail h1 {
  margin-top: 4px;
}

.weekly-form {
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 20px;
}

.weekly-form label {
  display: block;
  margin: 12px 0 6px;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
}

.weekly-form label:first-child {
  margin-top: 0;
}

.weekly-form input[type="text"] {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid #d3dce8;
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  background: #fff;
  color: var(--text);
  outline: none;
}

.weekly-form input[type="text"]:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(33, 116, 245, 0.14);
}

.weekly-form .btn {
  margin-top: 12px;
}

.weekly-subtitle {
  font-size: 16px;
  margin-bottom: 12px;
}

/* ============ 帖子检索 ============ */
/* ============ MC 版本库 ============ */
/* 版本库顶部切换标签 */
.dl-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.dl-tab {
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--text-2);
  font-size: 13.5px;
}

.dl-tab:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.dl-tab.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  font-weight: 600;
}

.dl-badge-beta {
  background: #fdf3cd;
  color: #8a6d1d;
}

.dl-badge-preview {
  background: #ede9fe;
  color: #5b21b6;
}

.mc-table td {
  vertical-align: middle;
}

/* 网盘下载列表 */
.dl-list {
  list-style: none;
  margin: 12px 0;
}

.dl-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-bottom: 8px;
  background: #fff;
}

.dl-item-name {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.dl-latest {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding: 18px 22px;
  border-radius: 12px;
  background: linear-gradient(110deg, var(--primary) 0%, #5d9eff 100%);
  color: #fff;
  box-shadow: 0 6px 18px rgba(33, 116, 245, 0.22);
}

.dl-latest h2 {
  font-size: 26px;
  margin: 6px 0 8px;
}

.dl-tag-new {
  display: inline-block;
  background: #f5c542;
  color: #4a3a0d;
  font-size: 11.5px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 999px;
}

.dl-latest .dl-meta span {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.dl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
  padding: 16px 18px;
}

.dl-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px;
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.dl-card:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow);
}

.dl-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.dl-card-head h3 {
  font-size: 18px;
}

.dl-badge {
  flex: none;
  background: var(--primary-soft);
  color: var(--primary-dark);
  font-size: 12px;
  padding: 2px 9px;
  border-radius: 999px;
}

.dl-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 9px 0;
}

.dl-meta span {
  background: #f1f5f9;
  color: var(--text-2);
  font-size: 12px;
  padding: 2px 9px;
  border-radius: 999px;
}

.dl-changelog {
  font-size: 12.5px;
  color: var(--text-2);
  line-height: 1.7;
  margin-bottom: 10px;
}

.dl-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.dl-actions .btn {
  width: auto;
  margin-top: 0;
}

@media (max-width: 760px) {
  .dl-grid {
    grid-template-columns: 1fr;
    padding: 14px;
  }

  .dl-latest {
    padding: 16px;
  }

  .dl-latest h2 {
    font-size: 22px;
  }

  .dl-latest .dl-actions {
    width: 100%;
  }

  .dl-latest .dl-actions .btn {
    flex: 1 1 45%;
  }
}

/* 广告管理相关 */
.ad-thumb {
  max-width: 120px;
  max-height: 46px;
  border-radius: 6px;
  border: 1px solid var(--line);
  vertical-align: middle;
  margin-right: 6px;
}

.ad-link-cell {
  max-width: 200px;
  overflow-wrap: anywhere;
  font-size: 12px;
  color: var(--text-3);
}

.check-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 12px 0 0;
  font-weight: 400;
}

.check-row input {
  width: auto;
}

.ad-img-banner {
  max-width: 100%;
  max-height: 110px;
  border-radius: 8px;
  display: block;
  margin: 0 auto;
}

.ad-img-side {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
}

/* 首页角落的 MC 风格小提示 */
.mc-tip {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 50;
  width: 250px;
  padding: 12px 30px 12px 14px;
  background: #1f2a24;
  color: #e6f2e6;
  border: 2px solid #4b7d3f;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  font-size: 12.5px;
  line-height: 1.7;
}

.mc-tip-title {
  font-weight: 700;
  color: #8ede72;
  margin-bottom: 4px;
  letter-spacing: 0.5px;
}

.mc-tip-text {
  margin: 0;
}

.mc-tip-close {
  position: absolute;
  top: 4px;
  right: 6px;
  border: none;
  background: none;
  color: #9db79d;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 4px;
}

.mc-tip-close:hover {
  color: #fff;
}

/* 手机上不显示固定角落提示，避免遮挡内容 */
@media (max-width: 760px) {
  .mc-tip {
    display: none;
  }
}

/* 顶部导航里的搜索框 */
.header-search {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 180px;
  max-width: 260px;
}

.header-search input {
  flex: 1;
  min-width: 0;
  padding: 7px 11px;
  border: 1px solid #d3dce8;
  border-radius: 8px;
  font-size: 13.5px;
  font-family: inherit;
  background: #fbfcfe;
  color: var(--text);
  outline: none;
}

.header-search input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(33, 116, 245, 0.14);
  background: #fff;
}

.header-search .btn {
  flex: none;
  width: auto;
  margin-top: 0;
}


.search-body {
  padding: 16px 18px;
}

.search-form {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.search-form .search-input {
  flex: 1 1 240px;
  min-width: 0;
  padding: 9px 12px;
  border: 1px solid #d3dce8;
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  background: #fff;
  color: var(--text);
  outline: none;
}

.search-form .search-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(33, 116, 245, 0.14);
}

.search-form select {
  padding: 9px 10px;
  border: 1px solid #d3dce8;
  border-radius: 8px;
  font-size: 13.5px;
  font-family: inherit;
  background: #fff;
  color: var(--text);
  outline: none;
}

.search-form select:focus {
  border-color: var(--primary);
}

.search-form .btn {
  flex: none;
  width: auto;
  margin-top: 0;
}

.search-snippet {
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--text-2);
  line-height: 1.7;
}

.search-score {
  color: var(--primary);
  font-size: 11px;
}

.search-source {
  display: inline-block;
  margin-right: 6px;
  padding: 0 5px;
  border-radius: 4px;
  background: rgba(33, 116, 245, 0.09);
  color: var(--primary);
  font-size: 10.5px;
}

mark {
  background: #fff3bf;
  color: #7a5b00;
  padding: 0 2px;
  border-radius: 3px;
}

/* 手机上搜索表单纵向排列，按钮占整行 */
@media (max-width: 760px) {
  .search-form .search-input,
  .search-form select,
  .search-form .btn {
    flex: 1 1 100%;
    width: 100%;
  }

    /* 手机上搜索框单独一行，排在导航下面 */
  .header-search {
      order: 3;
    flex: 1 1 100%;
    max-width: none;
    width: 100%;
  }
}

/* =========================================================
   图标字体兜底规则（放在文件最后，优先级最高）
   页面里有些规则会把 span 设成 display: block（例如 .post-user-line span），
   那样 <span class="ms"> 会撑满一整行，图标就跑到单独一行去了。
   ========================================================= */
.ms {
  display: inline-block !important;
}


/* =========================================================
   私信
   ========================================================= */

/* 导航/按钮上的未读小红点 */
.nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  margin-left: 4px;
  border-radius: 8px;
  background: #e8443a;
  color: #fff;
  font-size: 10.5px;
  line-height: 16px;
  vertical-align: 1px;
}

/* 私信列表 */
.thread-list { list-style: none; }

.thread-row { border-top: 1px solid var(--line); }
.thread-row:first-child { border-top: 0; }
.thread-row:hover { background: #f7faff; }

.thread-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  color: inherit;
  text-decoration: none;
}

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

.thread-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.thread-name { font-size: 14px; font-weight: 600; }
.thread-row.has-unread .thread-name { color: var(--primary); }
.thread-time { font-size: 12px; color: var(--text-3); flex: none; }

.thread-preview {
  margin-top: 3px;
  font-size: 13px;
  color: var(--text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.thread-me { color: var(--text-3); }

.thread-badge {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: #e8443a;
  color: #fff;
  font-size: 11px;
}

/* 对话窗口 */
.msg-panel { overflow: hidden; }

.msg-head-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.msg-stream {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 60vh;
  padding: 16px;
  overflow-y: auto;
  background: #f7f9fc;
}

.msg-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.msg-row.mine { justify-content: flex-end; }

.msg-bubble {
  max-width: 76%;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}

.msg-row.mine .msg-bubble {
  border-color: #cfe0fb;
  background: var(--primary-soft);
}

.msg-text {
  font-size: 14px;
  line-height: 1.7;
  white-space: pre-wrap;      /* 保留换行 */
  word-break: break-word;
}

.msg-img {
  display: block;
  max-width: 100%;
  max-height: 280px;
  margin-top: 6px;
  border-radius: 8px;
}

.msg-time {
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-3);
  text-align: right;
}

.msg-form {
  padding: 14px 16px;
  border-top: 1px solid var(--line);
  background: #fff;
}

.msg-form textarea {
  width: 100%;
  min-height: 70px;
  padding: 10px 12px;
  border: 1px solid #d3dce8;
  border-radius: 10px;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.6;
  resize: vertical;
}

.msg-form textarea:focus {
  border-color: var(--primary);
  outline: none;
  box-shadow: 0 0 0 3px rgba(33, 116, 245, 0.14);
}

.msg-form-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

.msg-file-btn { margin-top: 0; cursor: pointer; }

.msg-file-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12.5px;
  color: var(--text-2);
}

.msg-form-row .btn-primary { margin: 0 0 0 auto; }

.msg-hint {
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--text-3);
}

@media (max-width: 640px) {
  .msg-stream { max-height: 52vh; padding: 12px; }
  .msg-bubble { max-width: 86%; }
  .thread-link { padding: 11px 12px; }
}

/* ===== 后台：封禁 / 私信管理 ===== */
.ban-badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  background: #fde8e6;
  color: #c62828;
  font-size: 11.5px;
  font-weight: 600;
}

.ban-reason {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11.5px;
}

.ban-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  max-width: 270px;
}

.ban-form select,
.ban-form input {
  padding: 4px 6px;
  border: 1px solid #d3dce8;
  border-radius: 6px;
  font-family: inherit;
  font-size: 12px;
}

.ban-form select { width: 68px; }
.ban-form input[type="datetime-local"] { width: 152px; }
.ban-form input[type="text"] { width: 96px; }
.ban-form .btn { margin-top: 0; }

.admin-section { margin-top: 22px; }
.admin-subtitle { font-size: 15px; margin-bottom: 6px; }

.word-add-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0;
}

.word-add-form input {
  min-width: 200px;
  padding: 6px 10px;
  border: 1px solid #d3dce8;
  border-radius: 7px;
  font-family: inherit;
  font-size: 13px;
}

.word-add-form .btn { margin-top: 0; }

.word-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.word-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px 3px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #f7f9fc;
  font-size: 12.5px;
}

.word-chip button {
  padding: 2px 4px;
  border: 0;
  background: transparent;
  color: #c62828;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

.msg-cell { max-width: 320px; font-size: 12.5px; }

.msg-preview {
  display: inline-block;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

.msg-actions { white-space: nowrap; }
.msg-actions .btn { margin-top: 0; }

.admin-msg-stream {
  max-height: 65vh;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.admin-msg-head {
  margin-bottom: 4px;
  font-size: 11.5px;
  color: var(--text-3);
}

.admin-msg-del {
  margin: 0 0 0 6px;
  padding: 4px 8px;
}


/* =========================================================
   动画效果
   —— 只动 transform / opacity，不改宽高，所以不会把排版挤乱
   —— 全部集中在文件末尾，想调快慢改这里的秒数；想全部关掉就删掉这一整段
   —— 系统里开了「减少动态效果」的用户会自动不播放（见最后一段）
   ========================================================= */

/* ---------- 关键帧 ---------- */
@keyframes xg-fade-up {         /* 淡入 + 轻轻上移 */
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

@keyframes xg-drop-in {         /* 顶部提示条落下 */
  from { opacity: 0; transform: translateY(-12px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

@keyframes xg-pop {             /* 点赞 / 收藏：弹一下 */
  0%   { transform: scale(1); }
  40%  { transform: scale(1.35); }
  70%  { transform: scale(0.92); }
  100% { transform: scale(1); }
}

@keyframes xg-bar-grow {        /* 等级经验条从左边长出来 */
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@keyframes xg-float-in {        /* 角落小提示：弹上来 */
  0%   { opacity: 0; transform: translateY(18px) scale(0.96); }
  60%  { opacity: 1; transform: translateY(-3px) scale(1.01); }
  100% { opacity: 1; transform: none; }
}

@keyframes xg-wiggle {          /* 图标左右晃头 */
  0%, 100% { transform: rotate(0); }
  25%      { transform: rotate(-11deg); }
  75%      { transform: rotate(11deg); }
}

@keyframes xg-pulse {           /* 签到按钮：扩散光环 */
  0%   { box-shadow: 0 0 0 0 rgba(33, 116, 245, 0.45); }
  70%  { box-shadow: 0 0 0 12px rgba(33, 116, 245, 0); }
  100% { box-shadow: 0 0 0 0 rgba(33, 116, 245, 0); }
}

@keyframes xg-sheen {           /* 高亮从左扫到右 */
  from { background-position: -140% 0; }
  to   { background-position: 240% 0; }
}

/* ---------- 1. 打开页面：内容依次淡入 ---------- */
/* 先由 JS 给 <html> 加上 .anim-on；JS 没跑起来时元素不会被隐藏，最安全 */
html.anim-on .reveal { opacity: 0; }

html.anim-on .reveal.is-in {
  animation: xg-fade-up 0.55s cubic-bezier(0.22, 0.8, 0.3, 1) both;
  animation-delay: var(--reveal-delay, 0ms);
}

/* 顶部横幅和页面主体：一进页面就播 */
.forum-banner { animation: xg-fade-up 0.6s cubic-bezier(0.22, 0.8, 0.3, 1) both; }

/* ---------- 2. 提示条：从上面滑下来 ---------- */
.flash { animation: xg-drop-in 0.32s ease-out both; }

/* ---------- 3. 等级经验条：从 0 长出来 ---------- */
.level-bar span {
  transform-origin: left center;
  animation: xg-bar-grow 0.9s cubic-bezier(0.22, 0.8, 0.3, 1) both;
}

/* ---------- 4. 角落小提示：弹上来，镐子图标晃几下 ---------- */
.mc-tip:not([hidden]) { animation: xg-float-in 0.5s cubic-bezier(0.22, 0.8, 0.3, 1) both; }
.mc-tip-title .ms { animation: xg-wiggle 3.2s ease-in-out 4; }

/* ---------- 5. 签到按钮：脉冲光环（播 3 次就停，不吵人） ---------- */
form[action$="/checkin"] button { animation: xg-pulse 2.6s ease-out 3; }

/* ---------- 6. 图标的过渡（悬停放大、点击回弹都用它） ---------- */
.ms,
.board-icon,
.cat-icon,
.panel-icon,
.avatar,
.brand-logo,
.rank-no {
  transition: transform 0.2s ease, box-shadow 0.25s ease, background 0.2s ease;
}

/* 点赞 / 收藏的回弹动画（JS 在提交时加上 is-popping） */
.like-btn.is-popping .ms { animation: xg-pop 0.45s ease; }

/* ---------- 7. 鼠标悬停效果（触屏设备不触发，避免留下“粘住的”高亮） ---------- */
@media (hover: hover) {
  /* 板块 / 帖子列表：整行轻轻右移，图标放大一点 */
  .board-row:hover,
  .post-row:hover {
    transform: translateX(3px);
    box-shadow: inset 3px 0 0 var(--primary);
  }

  .board-row,
  .post-row { transition: background 0.15s ease, transform 0.18s ease, box-shadow 0.18s ease; }

  .board-row:hover .board-icon,
  .board-row:hover .cat-icon-ms,
  .post-row:hover .avatar {
    transform: scale(1.08);
  }

  /* 卡片：阴影加深 + 轻微抬起 */
  .side-card:hover,
  .stat-card:hover,
  .form-card:hover,
  .dl-card:hover,
  .profile-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(16, 24, 40, 0.12);
    border-color: #d6e4fb;
  }

  .side-card,
  .stat-card,
  .form-card,
  .dl-card,
  .profile-card { transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease; }

  .forum-panel:hover { box-shadow: 0 4px 14px rgba(16, 24, 40, 0.1); }
  .forum-panel { transition: box-shadow 0.25s ease; }

  /* 按钮：抬起 + 图标放大 */
  .btn:hover { transform: translateY(-1px); }
  .btn:hover .ms { transform: scale(1.14); }

  .like-btn:hover .ms { transform: scale(1.15); }

  /* 排行榜：整行右移，名次数字放大 */
  .rank-list li:hover { transform: translateX(3px); background: #f7faff; }
  .rank-list li { transition: transform 0.18s ease, background 0.18s ease; }
  .rank-list li:hover .rank-no { transform: scale(1.14) rotate(-5deg); }

  /* 标题链接：悬停变色 */
  .post-title,
  .board-name,
  .rank-title { transition: color 0.16s ease; }

  /* 站标：歪头一下 */
  .brand:hover .brand-logo { transform: rotate(-7deg) scale(1.06); }

  /* OREO 饼干：晃一下 */
  .points-chip:hover .oreo-ms,
  .checkin-points:hover .oreo-ms { animation: xg-wiggle 0.7s ease; }

  /* 后台表格：整行高亮 */
  .admin-table tbody tr { transition: background 0.15s ease; }
  .admin-table tbody tr:hover { background: #f6faff; }
}

/* 按下时的回弹（触屏也需要，所以不放在 hover 里） */
.btn:active { transform: scale(0.97); }
.like-btn { transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; }
.like-btn:active { transform: scale(0.96); }

/* ---------- 8. 导航栏：悬停时下划线从左划出 ---------- */
.nav-link { position: relative; }

.nav-link::after {
  content: "";
  position: absolute;
  left: 13px;
  right: 13px;
  bottom: 3px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.22s ease;
}

.nav-link:hover::after,
.nav-link.active::after { transform: scaleX(1); }

/* 点点看：锚点跳转也带平滑滚动 */
html { scroll-behavior: smooth; }

/* ---------- 9. 尊重系统的「减少动态效果」设置 ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  html.anim-on .reveal { opacity: 1 !important; }
  .board-row:hover,
  .post-row:hover,
  .side-card:hover,
  .stat-card:hover,
  .form-card:hover,
  .dl-card:hover,
  .profile-card:hover,
  .rank-list li:hover { transform: none; }
}


/* =========================================================
   用户菜单（点头像展开，仿 KLPBBS）
   ========================================================= */
.user-menu-wrap { position: relative; }

.user-chip {
  padding: 4px 8px 4px 4px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease;
}

.user-chip:hover,
.user-chip[aria-expanded="true"] {
  border-color: var(--line);
  background: #fff;
}

.user-chip-caret {
  font-size: 20px;
  color: var(--text-3);
  transition: transform 0.2s ease;
}

/* 有未读私信时，头像旁边的小红点 */
.user-chip-dot {
  width: 8px;
  height: 8px;
  margin-left: -5px;
  border-radius: 50%;
  background: #e8443a;
  box-shadow: 0 0 0 2px #fff;
  flex: none;
}

.user-chip[aria-expanded="true"] .user-chip-caret { transform: rotate(180deg); }

.user-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 60;
  width: 300px;
  max-width: 86vw;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 18px 44px rgba(16, 24, 40, 0.18);
  animation: um-in 0.16s ease-out both;
}

@keyframes um-in {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

.um-head {
  margin-bottom: 6px;
  padding: 10px 12px 12px;
  border-bottom: 1px solid var(--line);
}

.um-name {
  font-size: 15px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.um-uid {
  margin-top: 3px;
  font-size: 12px;
  color: var(--text-3);
  letter-spacing: 0.4px;
}

.um-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 9px;
  color: var(--text);
  font-size: 14px;
  text-decoration: none;
  transition: background 0.14s ease;
}

.um-item:hover { background: #f5f8fd; }

.um-item .ms {
  font-size: 20px;
  color: #4b5563;
}

.um-label { flex: 1; min-width: 0; }

.um-value {
  font-size: 13px;
  color: var(--text-3);
  white-space: nowrap;
}

.um-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: #e8443a;
  color: #fff;
  font-size: 11px;
}

.um-static { cursor: default; }
.um-static:hover { background: transparent; }

.um-divider {
  height: 1px;
  margin: 6px 8px;
  background: var(--line);
}

.um-item.um-danger { color: #d64545; }
.um-item.um-danger .ms { color: #d64545; }
.um-item.um-danger:hover { background: #fdf1f0; }

@media (max-width: 640px) {
  .user-name { max-width: 84px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .user-menu { width: 280px; }
}


/* =========================================================
   个人主页：可点击的统计卡片 / 头像大图 / 等级·积分·点赞页
   ========================================================= */
.stat-link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.stat-link:hover { border-color: #cfe0fb; }

.avatar-btn {
  padding: 0;
  border: 0;
  background: none;
  border-radius: 50%;
  line-height: 0;
  cursor: zoom-in;
}

.avatar-btn .avatar { transition: transform 0.18s ease; }
.avatar-btn:hover .avatar { transform: scale(1.04); }

.level-link {
  margin-left: -6px;
  padding: 4px 6px;
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
  transition: background 0.16s ease;
}

.level-link:hover { background: #f2f7ff; }

/* 头像大图 */
.avatar-lightbox {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar-lightbox[hidden] { display: none; }

.avatar-lightbox-bg {
  position: absolute;
  inset: 0;
  background: rgba(10, 16, 28, 0.72);
  backdrop-filter: blur(3px);
}

.avatar-lightbox-box {
  position: relative;
  animation: lb-in 0.18s ease-out both;
}

.avatar-lightbox-img {
  display: block;
  width: min(78vw, 420px);
  height: min(78vw, 420px);
  object-fit: cover;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}

.avatar-xxl {
  width: min(70vw, 300px);
  height: min(70vw, 300px);
  border-radius: 18px;
  font-size: min(26vw, 110px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}

.avatar-lightbox-close {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: #333;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

@keyframes lb-in {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: none; }
}

body.lb-open { overflow: hidden; }

/* 小标题 / 说明块 */
.sub-title { margin: 22px 16px 10px; font-size: 15px; }

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  padding: 0 16px;
}

.info-box {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f8fafc;
}

.info-box h3 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  font-size: 14px;
}

.info-box h3 .ms { font-size: 18px; color: var(--primary); }
.info-box p { font-size: 13px; line-height: 1.75; color: var(--text-2); }

.plain-list {
  display: grid;
  gap: 8px;
  padding: 0 16px;
  list-style: none;
}

.plain-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: var(--text-2);
}

.plain-list .ms { font-size: 18px; color: var(--primary); }

/* 等级页 */
.level-now {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 16px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f8fafc;
}

.level-now-badge {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c5cff, #4f7cff);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
}

.level-now-main { flex: 1; min-width: 0; }
.level-now-title { margin-bottom: 8px; font-size: 15px; font-weight: 700; }
.level-now-meta { margin-top: 8px; font-size: 12.5px; color: var(--text-2); }

.level-table td, .level-table th { font-size: 13px; }
.level-current td { background: #eef4ff; font-weight: 600; }
.level-note { margin: 10px 16px 18px; font-size: 12.5px; }

/* 积分页 */
.points-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: 16px;
  padding: 18px;
  border: 1px solid #f0d48a;
  border-radius: 12px;
  background: linear-gradient(110deg, #fff7e0, #fffdf5);
}

.points-balance { display: flex; align-items: center; gap: 10px; }
.points-hero-icon { font-size: 34px; }
.points-balance strong { display: block; font-size: 28px; line-height: 1.1; color: #9a6b00; }
.points-balance span { font-size: 12px; color: #9a6b00; }
.points-checkin { text-align: right; }
.points-checkin .btn { margin-top: 0; }
.points-checkin .side-tip { margin-top: 6px; }

/* CDK 兑换（前台 OREO 页） */
.cdk-redeem-box {
  margin: 0 16px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-solid);
}

.cdk-redeem-form {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.cdk-redeem-form input {
  flex: 1 1 220px;
  min-width: 0;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-solid);
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 14px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.cdk-redeem-form input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(33, 116, 245, 0.15);
}

.cdk-redeem-form .btn { margin-top: 0; }

.cdk-history {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  gap: 6px;
  font-size: 13px;
}

.cdk-history li {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cdk-history .ms {
  font-size: 16px;
  color: #2e7d32;
}

/* 点赞记录 */
.like-rows { list-style: none; }

.like-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 16px;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
}

.like-row:first-child { border-top: 0; }

.like-user {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
}

.like-verb { color: var(--text-2); }
.like-post { color: var(--primary); text-decoration: none; }
.like-post:hover { text-decoration: underline; }
.like-time { margin-left: auto; font-size: 12px; color: var(--text-3); }

@media (max-width: 640px) {
  .points-hero { flex-direction: column; align-items: stretch; }
  .points-checkin { text-align: left; }
  .level-now { align-items: flex-start; }
  .level-now-badge { width: 52px; height: 52px; font-size: 13px; }
  .like-time { width: 100%; margin-left: 0; }
}


/* ===== 后台：用户详情 / 编辑页 ===== */
.ud-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 14px;
}

.ud-card {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--shadow);
}

.ud-card .admin-subtitle { margin-top: 0; }

.ud-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}

.ud-name {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 16px;
  font-weight: 700;
}

.ud-level {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ud-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ud-form label {
  font-size: 12.5px;
  color: var(--text-2);
}

.ud-form input,
.ud-form select {
  padding: 7px 10px;
  border: 1px solid #d3dce8;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
}

.ud-form input:focus,
.ud-form select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(33, 116, 245, 0.14);
}

.ud-form .muted { font-size: 12px; line-height: 1.6; }

.ud-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ud-btns .btn { margin-top: 0; }
.ud-btns form .btn { margin-top: 0; }


/* =========================================================
   Liquid Glass（液态玻璃）
   思路：半透明 + 背景模糊 + 边缘高光 + 内阴影 + 浮动投影；
   小构件额外用 SVG feDisplacementMap 做边缘折射（Chrome / Safari 支持，
   不支持的浏览器自动退回普通的毛玻璃）。
   ========================================================= */
:root {
  --glass-fill: rgba(255, 255, 255, 0.62);
  --glass-fill-strong: rgba(255, 255, 255, 0.78);
  --glass-stroke: rgba(255, 255, 255, 0.7);
  --glass-blur: 18px;
  --glass-shadow: 0 18px 44px rgba(15, 23, 42, 0.16);
}

.glass-filter {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

/* ---------- 大块面板：磨砂玻璃 ---------- */
.forum-panel,
.side-card,
.form-card,
.profile-card,
.dl-card,
.msg-panel,
.post-detail {
  background-image: var(--glass-grad);
  background-color: var(--glass-fill);
  border: 1px solid var(--glass-stroke);
  box-shadow: var(--glass-shadow), var(--glass-inner);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  backdrop-filter: blur(var(--glass-blur)) saturate(180%);
}

/* ---------- 页头：悬浮玻璃条 ---------- */
.site-header {
  /* 玻璃效果会让页头变成独立的层叠上下文，这里必须抬高整块页头，
     否则里面的下拉菜单会被下面的横幅 / 卡片盖住 */
  position: relative;
  z-index: 100;
  background: var(--glass-fill);
  border-bottom: 1px solid var(--glass-stroke);
  box-shadow: 0 8px 26px rgba(15, 23, 42, 0.08);
  -webkit-backdrop-filter: blur(22px) saturate(190%);
  backdrop-filter: blur(22px) saturate(190%);
}

/* ---------- 小组件：带边缘折射的“液态”玻璃 ---------- */
.btn,
.user-chip,
.like-btn,
.level-chip,
.points-chip {
  -webkit-backdrop-filter: blur(12px) saturate(190%);
  backdrop-filter: blur(12px) saturate(190%);
  box-shadow:
    0 6px 18px rgba(15, 23, 42, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    inset 0 -1px 0 rgba(255, 255, 255, 0.35);
}

/* 支持 SVG 滤镜的浏览器：再加上一层边缘折射 + 高光 */
@supports (backdrop-filter: url(#glass-distort)) {
  .btn,
  .user-chip,
  .like-btn {
    -webkit-backdrop-filter: url(#glass-distort) blur(12px) saturate(190%);
    backdrop-filter: url(#glass-distort) blur(12px) saturate(190%);
  }
}

/* 下拉菜单要看得清：白得更实，只保留模糊（不做折射，避免后面的字透上来） */
.user-menu {
  background: var(--surface-solid);
  border: 1px solid var(--glass-stroke);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  box-shadow:
    0 22px 50px rgba(15, 23, 42, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* 主按钮：玻璃质感 + 顶部反光 */
.btn-primary {
  background-image: linear-gradient(160deg, #5aa2ff 0%, #2174f5 45%, #1a5fd0 100%);
  box-shadow:
    0 10px 24px rgba(33, 116, 245, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -2px 6px rgba(9, 47, 120, 0.25);
}

/* 横幅：一层缓慢流动的高光，像玻璃在动 */
.forum-banner {
  position: relative;
  overflow: hidden;
  box-shadow:
    0 20px 44px rgba(21, 78, 170, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.forum-banner::after {
  content: "";
  position: absolute;
  inset: -60% -40%;
  background: linear-gradient(115deg,
    transparent 38%,
    rgba(255, 255, 255, 0.28) 48%,
    rgba(255, 255, 255, 0.06) 54%,
    transparent 62%);
  transform: translateX(-55%) rotate(2deg);
  animation: glass-sheen 11s ease-in-out infinite;
  pointer-events: none;
}

@keyframes glass-sheen {
  0%, 55%  { transform: translateX(-55%) rotate(2deg); }
  100%     { transform: translateX(55%) rotate(2deg); }
}

/* 悬停时玻璃更“透亮”一点 */
.forum-panel:hover,
.side-card:hover {
  border-color: rgba(255, 255, 255, 0.85);
}

/* 不支持 backdrop-filter 的浏览器：退回接近纯白的卡片，保证可读 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .forum-panel,
  .side-card,
  .form-card,
  .profile-card,
  .dl-card,
  .msg-panel,
  .post-detail,
  .site-header {
    background: #ffffff;
  }
}

/* 手机：模糊半径小一点，省电也更清楚 */
@media (max-width: 760px) {
  :root {
    --glass-blur: 12px;
    --glass-fill: rgba(255, 255, 255, 0.72);
    --glass-shadow: 0 12px 28px rgba(15, 23, 42, 0.14);
  }

  /* 手机上去掉 SVG 折射（大面积滤镜比较费性能） */
  @supports (backdrop-filter: url(#glass-distort)) {
    .btn,
    .user-chip,
    .like-btn,
    .user-menu {
      -webkit-backdrop-filter: blur(10px) saturate(180%);
      backdrop-filter: blur(10px) saturate(180%);
    }
  }
}


/* =========================================================
   平板 / 小笔记本：页头压紧一点，让头像和导航排在同一行
   ========================================================= */
@media (max-width: 1100px) and (min-width: 761px) {
  .header-row {
    gap: 10px;
    padding: 8px 12px;
  }

  .brand-name { font-size: 17px; }
  .brand-name small { display: none; }

  .nav-link {
    padding: 7px 9px;
    font-size: 13.5px;
  }

  .header-search { max-width: 200px; }

  .user-chip { gap: 5px; }
  .user-chip .level-chip { display: none; }
}


/* =========================================================
   iOS 风格主题（Liquid Glass）+ 深色模式 + 降级
   只改视觉（圆角 / 颜色 / 阴影 / 字体），不动任何布局尺寸
   ========================================================= */

/* ---------- 1. 主题变量 ---------- */
:root {
  color-scheme: light;

  /* iOS 常用圆角 */
  --ios-card: 22px;
  --ios-control: 14px;
  --ios-pill: 999px;

  /* 玻璃：渐变 + 填充 + 描边 + 阴影 + 内高光 */
  --glass-grad: linear-gradient(150deg,
    rgba(255, 255, 255, 0.72) 0%,
    rgba(255, 255, 255, 0.46) 45%,
    rgba(255, 255, 255, 0.62) 100%);
  --glass-inner:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(255, 255, 255, 0.45);

  /* 实体表面（输入框 / 菜单 / 兜底） */
  --surface-solid: #ffffff;
  --surface-muted: #f6f8fb;
  --surface-input: rgba(255, 255, 255, 0.72);
  --hairline: rgba(15, 23, 42, 0.08);
  --row-hover: rgba(33, 116, 245, 0.06);
}

html[data-theme="dark"] {
  color-scheme: dark;

  --tile-hl: rgba(255, 255, 255, 0.1);
  --tile-hl-border: rgba(255, 255, 255, 0.14);
  --tile-hl-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);

  --glass-fill: rgba(26, 30, 39, 0.74);
  --glass-grad: linear-gradient(150deg,
    rgba(42, 48, 60, 0.9) 0%,
    rgba(22, 26, 33, 0.78) 45%,
    rgba(33, 38, 48, 0.86) 100%);
  --glass-stroke: rgba(255, 255, 255, 0.14);
  --glass-shadow: 0 20px 48px rgba(0, 0, 0, 0.55);
  --glass-inner:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4);

  --surface-solid: #171c24;
  --surface-muted: #1c222c;
  --surface-input: rgba(255, 255, 255, 0.07);
  --hairline: rgba(255, 255, 255, 0.1);
  --row-hover: rgba(255, 255, 255, 0.06);

  /* 覆盖站点原有变量 */
  --panel: #171c24;
  --line: rgba(255, 255, 255, 0.12);
  --text: #e9eef6;
  --text-2: #a9b4c4;
  --text-3: #7d8899;
  --bg: #090c12;
  --primary-soft: rgba(33, 116, 245, 0.18);
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* 深色模式背景：壁纸保留一点，但模糊 + 压暗 + 降低不透明度，
   看起来是一层柔和的底纹，而不是一张清晰的紫花海照片 */
html[data-theme="dark"] {
  background-color: #070a10;
}

html[data-theme="dark"] body {
  background: transparent;
}

html[data-theme="dark"] body::before {
  content: "";
  position: fixed;
  inset: -70px;
  z-index: -1;
  background-image: var(--wallpaper);
  background-size: cover;
  background-position: center;
  opacity: 0.55;
  filter: blur(22px) saturate(0.8) brightness(0.62);
  pointer-events: none;
}

/* 再压一层很淡的颜色氛围，避免壁纸颜色太"生" */
html[data-theme="dark"] body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(1100px 620px at 82% -12%, rgba(33, 116, 245, 0.16), transparent 62%),
    radial-gradient(900px 520px at 4% 108%, rgba(124, 92, 255, 0.12), transparent 60%);
  pointer-events: none;
}

/* 深色下横幅用更沉的蓝，别那么扎眼 */
html[data-theme="dark"] .forum-banner {
  background: linear-gradient(110deg, #14346e 0%, #1f4e9e 55%, #2b62b8 100%);
  box-shadow:
    0 20px 44px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

html[data-theme="dark"] .btn-primary {
  background-image: linear-gradient(160deg, #3a7fe0 0%, #2563c9 50%, #1b4b9b 100%);
}

/* ---------- 2. iOS 观感：字体 / 圆角 ---------- */
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro SC",
    "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
}

.forum-panel,
.side-card,
.form-card,
.profile-card,
.dl-card,
.msg-panel,
.post-detail,
.stat-card,
.user-menu,
.info-box,
.ud-card,
.level-now {
  border-radius: var(--ios-card);
}

.btn { border-radius: var(--ios-pill); }
.nav-link { border-radius: var(--ios-pill); }
.header-search input { border-radius: var(--ios-pill); }

input,
textarea,
select { border-radius: var(--ios-control); }

.admin-sidebar a { border-radius: 12px; }

/* 分页 / 小按钮也圆一点 */
.pagination .btn,
.code-row .btn { border-radius: var(--ios-pill); }

/* ---------- 3. 深色模式：组件级适配 ---------- */
html[data-theme="dark"] .nav-link { color: var(--text-2); }
html[data-theme="dark"] .nav-link:hover,
html[data-theme="dark"] .nav-link.active {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
}

html[data-theme="dark"] .site-footer {
  background: rgba(9, 12, 18, 0.72);
  border-top-color: var(--line);
}

html[data-theme="dark"] .footer-feedback a,
html[data-theme="dark"] .footer-text-link { color: var(--text-2); }

/* 输入框 */
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
  background: var(--surface-input);
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--text);
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: var(--text-3); }

/* 描边按钮 */
html[data-theme="dark"] .btn-outline,
html[data-theme="dark"] .btn-light {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.16);
  color: var(--text);
}

html[data-theme="dark"] .btn-outline:hover,
html[data-theme="dark"] .btn-light:hover { background: rgba(255, 255, 255, 0.14); }

/* 列表悬停 */
html[data-theme="dark"] .post-row:hover,
html[data-theme="dark"] .board-row:hover,
html[data-theme="dark"] .thread-row:hover,
html[data-theme="dark"] .rank-list li:hover,
html[data-theme="dark"] .admin-table tbody tr:hover { background: var(--row-hover); }

/* 表格 */
html[data-theme="dark"] .admin-table th,
html[data-theme="dark"] .admin-table td {
  border-bottom-color: rgba(255, 255, 255, 0.1);
  color: var(--text);
}

/* 浅色小卡片 */
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .info-box,
html[data-theme="dark"] .ud-card,
html[data-theme="dark"] .level-now {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}

html[data-theme="dark"] .level-bar { background: rgba(255, 255, 255, 0.14); }

html[data-theme="dark"] .points-hero {
  background: linear-gradient(110deg, rgba(255, 214, 102, 0.14), rgba(255, 255, 255, 0.04));
  border-color: rgba(255, 214, 102, 0.32);
}

html[data-theme="dark"] .points-balance strong,
html[data-theme="dark"] .points-balance span { color: #f0c86a; }

html[data-theme="dark"] .points-chip {
  background: rgba(255, 214, 102, 0.14);
  border-color: rgba(255, 214, 102, 0.32);
  color: #f3d27f;
}

html[data-theme="dark"] .ad-banner {
  background: rgba(255, 214, 102, 0.08);
  border-color: rgba(255, 214, 102, 0.32);
  color: #e2c584;
}

/* 广告位 / 付费附件 / 名人堂金额这些米黄色块，深色下换成淡淡的琥珀色 */
html[data-theme="dark"] .ad-banner,
html[data-theme="dark"] .ad-card a,
html[data-theme="dark"] .paid-attachment {
  background: rgba(255, 214, 102, 0.1);
  border-color: rgba(255, 214, 102, 0.35);
  color: #e2c584;
}

html[data-theme="dark"] .hall-amount,
html[data-theme="dark"] .log-badge.log-admin,
html[data-theme="dark"] .bookmark-btn.bookmarked {
  background: rgba(255, 214, 102, 0.16);
  border-color: rgba(255, 214, 102, 0.32);
  color: #f0cf82;
}

/* 提示条 */
html[data-theme="dark"] .flash { background: rgba(255, 255, 255, 0.06); color: var(--text); border-color: rgba(255, 255, 255, 0.14); }
html[data-theme="dark"] .flash-success { background: rgba(16, 185, 129, 0.16); border-color: rgba(16, 185, 129, 0.35); color: #7ee2b8; }
html[data-theme="dark"] .flash-warning { background: rgba(245, 197, 66, 0.16); border-color: rgba(245, 197, 66, 0.35); color: #f0cf82; }
html[data-theme="dark"] .flash-danger { background: rgba(232, 68, 58, 0.18); border-color: rgba(232, 68, 58, 0.4); color: #ff9b95; }
html[data-theme="dark"] .flash-info { background: rgba(33, 116, 245, 0.18); border-color: rgba(33, 116, 245, 0.4); color: #9dc4ff; }

/* 私信 */
html[data-theme="dark"] .msg-stream { background: rgba(255, 255, 255, 0.03); }
html[data-theme="dark"] .msg-bubble { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.12); }
html[data-theme="dark"] .msg-row.mine .msg-bubble { background: rgba(33, 116, 245, 0.26); border-color: rgba(90, 162, 255, 0.4); }
html[data-theme="dark"] .msg-form { background: transparent; border-top-color: var(--line); }

/* 后台侧边栏 */
html[data-theme="dark"] .admin-sidebar a { color: var(--text-2); }
html[data-theme="dark"] .admin-sidebar a:hover { background: rgba(255, 255, 255, 0.07); color: var(--text); }

/* 正文 / 评论：原来是深灰色，深色模式下要提亮 */
html[data-theme="dark"] .post-detail-content,
html[data-theme="dark"] .comment-content { color: #dce4ef; }

html[data-theme="dark"] .post-detail-content a.post-link,
html[data-theme="dark"] .editor-preview a.post-link,
html[data-theme="dark"] .comment-content a.post-link {
  color: #6cb0ff;
}

/* 表单标签 / 编辑器按钮 */
html[data-theme="dark"] .settings-body label,
html[data-theme="dark"] .twofa-form label,
html[data-theme="dark"] .form-card label,
html[data-theme="dark"] .weekly-form label,
html[data-theme="dark"] .ed-btn,
html[data-theme="dark"] .ed-size,
html[data-theme="dark"] .oauth-btn { color: var(--text-2); }

html[data-theme="dark"] .um-item .ms { color: #9aa7b8; }

/* 点赞 / 收藏 / 投币按钮：白底改成深色玻璃 */
html[data-theme="dark"] .like-btn {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 155, 149, 0.35);
  color: #ff9b95;
}

html[data-theme="dark"] .like-btn.bookmark-btn {
  border-color: rgba(255, 212, 121, 0.35);
  color: #f0cf82;
}

html[data-theme="dark"] .like-btn.coin-btn { color: #f0cf82; }

/* ---------- 深色模式：帖子编辑器（工具栏 + 输入区） ---------- */
html[data-theme="dark"] .editor-wrap {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.14);
}

html[data-theme="dark"] .editor-toolbar {
  background: rgba(255, 255, 255, 0.06);
  border-bottom-color: rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"] .editor-wrap textarea {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--text);
}

html[data-theme="dark"] .rich-editor {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--text);
}

html[data-theme="dark"] .rich-editor a {
  color: #6cb0ff;
}

html[data-theme="dark"] .editor-preview-pane {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.14);
}

html[data-theme="dark"] .editor-preview-head {
  background: rgba(255, 255, 255, 0.06);
  border-bottom-color: rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"] .ed-btn,
html[data-theme="dark"] .ed-size {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.16);
  color: var(--text);
}

html[data-theme="dark"] .ed-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}

/* 深色模式下所有输入框获得焦点时保持深色，不能被浅色主题的 :focus 刷白 */
html[data-theme="dark"] input:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] select:focus {
  background: rgba(255, 255, 255, 0.07);
  color: var(--text);
}

html[data-theme="dark"] .form-card input:focus,
html[data-theme="dark"] .form-card select:focus,
html[data-theme="dark"] .form-card textarea:focus {
  background: rgba(255, 255, 255, 0.07);
  color: var(--text);
}

/* 预览按钮在深色下也保持玻璃深色 */
html[data-theme="dark"] .ed-preview-btn {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.16);
  color: var(--text);
}

html[data-theme="dark"] .ed-preview-btn[aria-pressed="true"] {
  background: rgba(90, 162, 255, 0.18);
  border-color: var(--primary);
  color: var(--primary);
}

html[data-theme="dark"] .ed-sep {
  background: rgba(255, 255, 255, 0.16);
}

html[data-theme="dark"] .editor-toolbar select option,
html[data-theme="dark"] .editor-wrap select option {
  background: #1b212b;
  color: var(--text);
}

html[data-theme="dark"] .editor-preview {
  background: transparent;
  color: var(--text);
}

/* 页脚切换按钮 */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border: 1px solid var(--line);
  border-radius: var(--ios-pill);
  background: transparent;
  color: var(--text-2);
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease;
}

.theme-toggle:hover { background: var(--row-hover); color: var(--text); }
.theme-toggle .ms { font-size: 15px; }

/* ---------- 4. 降级策略 ---------- */

/* 4.1 不支持 backdrop-filter：直接给不透明表面，保证可读 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .forum-panel,
  .side-card,
  .form-card,
  .profile-card,
  .dl-card,
  .msg-panel,
  .post-detail {
    background-image: none;
    background-color: var(--surface-solid);
  }

  .site-header { background: var(--surface-solid); }
  .forum-banner::after { display: none; }
}

/* 4.2 系统开了「降低透明度」：改成实色 */
@media (prefers-reduced-transparency: reduce) {
  .forum-panel,
  .side-card,
  .form-card,
  .profile-card,
  .dl-card,
  .msg-panel,
  .post-detail,
  .user-menu,
  .site-header {
    background-image: none;
    background-color: var(--surface-solid);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .btn,
  .user-chip,
  .like-btn { -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* 4.3 系统要求更高对比度：描边加深 */
@media (prefers-contrast: more) {
  .forum-panel,
  .side-card,
  .user-menu,
  .site-header { border-color: currentColor; }

  .btn-outline { border-color: currentColor; }
}

/* 4.4 低性能模式
   - 页脚按钮手动开启，或 perf.js 检测到设备吃力时自动开启
   - 关掉所有背景磨砂 / 模糊壁纸 / 流光 / 进场动画，面板换成实色 */
html.perf-lite {
  --glass-blur: 0px;
  --glass-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
}

html.perf-lite .forum-panel,
html.perf-lite .side-card,
html.perf-lite .form-card,
html.perf-lite .profile-card,
html.perf-lite .dl-card,
html.perf-lite .msg-panel,
html.perf-lite .post-detail,
html.perf-lite .site-header,
html.perf-lite .user-menu,
html.perf-lite .btn,
html.perf-lite .user-chip,
html.perf-lite .like-btn,
html.perf-lite .level-chip,
html.perf-lite .points-chip {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* 关掉模糊后，面板用实色，保证文字依旧清楚 */
html.perf-lite .forum-panel,
html.perf-lite .side-card,
html.perf-lite .form-card,
html.perf-lite .profile-card,
html.perf-lite .dl-card,
html.perf-lite .msg-panel,
html.perf-lite .post-detail {
  background-image: none;
  background-color: var(--surface-solid);
}

/* 深色模式那层模糊壁纸也关掉（大面积 filter 很吃性能） */
html.perf-lite body::before { display: none; }

/* 流光、进场动画、悬停位移全部停掉 */
html.perf-lite .forum-banner::after { display: none; }
html.perf-lite .reveal { opacity: 1 !important; animation: none !important; }
html.perf-lite .board-row,
html.perf-lite .post-row,
html.perf-lite .side-card,
html.perf-lite .stat-card { transition: none; }


/* =========================================================
   工具导航（旧版首页链接区块样式）
   ========================================================= */
.friend-links {
  margin-top: 18px;
  padding: 14px 16px 16px;
  border: 1px solid var(--glass-stroke);
  border-radius: var(--ios-card);
  background-image: var(--glass-grad);
  background-color: var(--glass-fill);
  box-shadow: var(--glass-shadow), var(--glass-inner);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  backdrop-filter: blur(var(--glass-blur)) saturate(180%);
}

.friend-links-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
}

.friend-links-head .ms { font-size: 17px; color: var(--primary); }

.friend-links-more {
  margin-left: auto;
  color: var(--primary);
  font-size: 12px;
  font-weight: 500;
}

.friend-links-more:hover {
  text-decoration: underline;
}

.friend-links-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.friend-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  padding: 12px 16px;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.55);
  color: var(--text-2);
  text-decoration: none;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.friend-card:hover {
  transform: translateY(-2px);
  border-color: rgba(33, 116, 245, 0.4);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
  color: var(--text);
}

.friend-logo {
  display: block;
  height: 26px;
  width: auto;
  max-width: 150px;
  object-fit: contain;
  border-radius: 5px;
}

.friend-name {
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
}

/* 深色适配 */
html[data-theme="dark"] .friend-card {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
}

html[data-theme="dark"] .friend-card:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(90, 162, 255, 0.45);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4);
}

/* 低性能 / 降低透明度时退化成实色 */
html.perf-lite .friend-links {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background-image: none;
  background-color: var(--surface-solid);
}

@media (prefers-reduced-transparency: reduce) {
  .friend-links {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background-image: none;
    background-color: var(--surface-solid);
  }
}

@media (max-width: 640px) {
  .friend-card {
    flex: 1 1 calc(50% - 5px);
    min-width: 0;
  }
}


/* =========================================================
   磁贴高亮：把每张卡片的标题区做成内嵌的「高亮条」
   （白色药丸条 + 轻阴影，像 iOS 玻璃卡片里的标题区）
   ========================================================= */
/* 卡片之间的纵向间距统一成 14px，左右两栏节奏一致 */
.forum-panel { margin-top: var(--tile-gap); }
.side-card { margin-bottom: var(--tile-gap); }

/* 右栏第一张卡（每日签到）跟左栏第一块（社区广场）顶部对齐 */
.sidebar { margin-top: var(--tile-gap); }

/* 面板底部留出与顶部一样的 8px，整个卡片上下左右对称 */
.forum-panel { padding-bottom: 8px; }

/* 标题（大字）直接写在「中玻璃」上：不铺底色，靠字重和字号撑起层级 */
.panel-head {
  margin: 0;
  padding: 16px 10px 8px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.panel-title h2 {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: 0.2px;
}

.side-card .side-title {
  margin: 0 0 12px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  font-size: 17px;
  font-weight: 800;
}

/* 正文条目（板块行 / 排行榜）放进「内容色块」：白色圆角块，块与块之间等距 */
.board-row,
.board-row:last-child {
  margin: 0 10px 8px;
  padding: 12px 14px;
  border: 1px solid var(--tile-hl-border);
  border-radius: 14px;
  background: var(--tile-hl);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
}

.board-row:last-child { margin-bottom: 10px; }

.rank-list li,
.rank-list li:last-child {
  margin: 0 0 8px;
  padding: 9px 12px;
  border: 1px solid var(--tile-hl-border);
  border-radius: 12px;
  background: var(--tile-hl);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
}

.rank-list li:last-child { margin-bottom: 0; }

html[data-theme="dark"] .board-row,
html[data-theme="dark"] .rank-list li {
  box-shadow: none;
}


/* =========================================================
   液态玻璃 v2：卡片也走 SVG 折射（参考 shuding/liquid-glass）
   backdrop-filter: url(#glass-distort) 会让背后画面在玻璃边缘轻微弯曲，
   再叠一层低强度模糊，做出「透过厚玻璃看世界」的感觉。
   只在支持的浏览器生效；Firefox 等会自动留在普通磨砂。
   ========================================================= */
@supports (backdrop-filter: url(#glass-distort)) {
  .forum-panel,
  .side-card,
  .form-card,
  .profile-card,
  .dl-card,
  .msg-panel,
  .post-detail,
  .friend-links {
    -webkit-backdrop-filter: url(#glass-distort) blur(9px) saturate(175%) brightness(1.04);
    backdrop-filter: url(#glass-distort) blur(9px) saturate(175%) brightness(1.04);
  }

  /* 玻璃边缘再叠一层高光：上沿亮、下沿暗，像有厚度的玻璃 */
  .forum-panel,
  .side-card,
  .friend-links {
    box-shadow:
      var(--glass-shadow),
      inset 0 1px 0 rgba(255, 255, 255, 0.95),
      inset 0 -1px 0 rgba(15, 23, 42, 0.08),
      inset 0 0 0 1px rgba(255, 255, 255, 0.35);
  }
}

/* 手机：折射太费性能，退回普通模糊（iPhone/Android 上依旧比纯色好看） */
@media (max-width: 760px) {
  @supports (backdrop-filter: url(#glass-distort)) {
    .forum-panel,
    .side-card,
    .form-card,
    .profile-card,
    .dl-card,
    .msg-panel,
    .post-detail,
    .friend-links {
      -webkit-backdrop-filter: blur(10px) saturate(175%);
      backdrop-filter: blur(10px) saturate(175%);
    }
  }
}


/* =========================================================
   帖子详情页：大字标题 + 白色正文块（参考图结构）
   ========================================================= */
.article-page { position: relative; }

.article-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 0 0 18px;
}

.post-detail h1.article-title {
  margin-top: 0;
  font-size: clamp(28px, 4.2vw, 46px);
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: var(--text);
  word-break: break-word;
}

.article-head-meta {
  flex: none;
  padding-top: 6px;
  text-align: right;
}

.ah-date {
  font-size: 14px;
  color: var(--text-2);
}

.ah-author {
  margin-top: 2px;
  font-size: clamp(18px, 2.2vw, 26px);
  color: var(--text-2);
}

.ah-author a { color: inherit; text-decoration: none; }
.ah-author a:hover { color: var(--primary); }

.article-body {
  padding: 24px 26px 26px;
  border: 1px solid var(--tile-hl-border);
  border-radius: 18px;
  background: var(--surface-solid);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.1);
}

.article-byline {
  margin-bottom: 16px;
  font-size: 14.5px;
  color: var(--text-3);
}

.article-body .post-detail-content { margin-top: 0; }

/* 左侧悬浮：返回按钮 */
.article-back {
  position: fixed;
  left: 22px;
  top: 92px;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 1px solid var(--tile-hl-border);
  background: var(--tile-hl);
  box-shadow: var(--tile-hl-shadow);
  color: var(--text-2);
  font-size: 11px;
  text-decoration: none;
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  backdrop-filter: blur(10px) saturate(160%);
  transition: transform 0.16s ease, color 0.16s ease;
}

.article-back .ms { font-size: 20px; }
.article-back:hover { transform: translateX(-2px); color: var(--primary); }
.ab-label { line-height: 1; }

/* 左侧悬浮：上下滚动 */
.article-scroller {
  position: fixed;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 52px;
  padding: 12px 0;
  border: 1px solid var(--tile-hl-border);
  border-radius: 999px;
  background: var(--tile-hl);
  box-shadow: var(--tile-hl-shadow);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  backdrop-filter: blur(10px) saturate(160%);
}

.as-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-2);
  font-family: inherit;
  cursor: pointer;
}

.as-btn:hover { background: var(--row-hover); color: var(--text); }
.as-btn .ms { font-size: 22px; }
.as-flip { transform: rotate(180deg); }

.as-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--text-3);
  opacity: 0.45;
}

/* 窗口不够宽时藏起两侧悬浮控件，别压住正文 */
@media (max-width: 1180px) {
  .article-back,
  .article-scroller { display: none; }
}

@media (max-width: 640px) {
  .article-head {
    flex-direction: column;
    gap: 8px;
    padding: 0 0 14px;
  }

  .article-head-meta {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding-top: 0;
    text-align: left;
  }

  .ah-author { font-size: 16px; }

  .article-body {
    padding: 18px 16px 20px;
    border-radius: 16px;
  }
}

/* 低性能 / 降低透明度时去掉高亮条的模糊感 */
html.perf-lite .panel-head,
html.perf-lite .side-card .side-title {
  box-shadow: none;
}

/* 开关处于开启状态时高亮 */
.theme-toggle[aria-pressed="true"] {
  background: rgba(33, 116, 245, 0.12);
  border-color: rgba(33, 116, 245, 0.4);
  color: var(--primary);
}

/* 滚到页脚时，右下角的小提示自动让位，避免挡住页脚按钮 */
.mc-tip.tip-behind {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* 4.5 性能监控小面板（?perf=1 才显示） */
.perf-badge {
  position: fixed;
  left: 10px;
  bottom: 10px;
  z-index: 200;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(10, 14, 20, 0.82);
  color: #d7e3f7;
  font-size: 11.5px;
  line-height: 1.6;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  white-space: pre;
}

/* ============ SVIP 会员 ============ */
.svip-name {
  color: #c98a00 !important;
  font-weight: 700;
}

.svip-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: 4px;
  color: #e0a800;
  vertical-align: -2px;
  white-space: nowrap;
}

.svip-crown {
  width: 13px;
  height: 13px;
  flex: none;
}

.svip-title {
  padding: 1px 6px;
  border: 1px solid rgba(245, 179, 1, 0.35);
  border-radius: 999px;
  background: rgba(245, 179, 1, 0.14);
  font-size: 11.5px;
  font-weight: 700;
}

.svip-chip {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ffd76a, #f0a800);
  color: #5a3c00;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  vertical-align: 1px;
}

.svip-status {
  margin-top: 2px;
  font-size: 12.5px;
  color: #a97a00;
}

/* 头像框（用多层描边，图片头像和字母头像都能用） */
.avatar.frame-gold {
  box-shadow: 0 0 0 2px #f5b301, 0 0 14px rgba(245, 179, 1, 0.55);
}

.avatar.frame-rainbow {
  box-shadow: 0 0 0 2px #ff5f6d, 0 0 0 4px #ffc371,
              0 0 0 6px #47cf73, 0 0 0 8px #4facfe;
}

.avatar.frame-neon {
  box-shadow: 0 0 0 2px #00e5ff, 0 0 14px rgba(0, 229, 255, 0.65);
}

.avatar.frame-flame {
  box-shadow: 0 0 0 2px #ff7043, 0 0 16px rgba(255, 87, 34, 0.65);
}

/* 个人名片背景（叠在卡片底色上，保持文字可读） */
.profile-card.profile-bg-aurora {
  background-image: linear-gradient(120deg, rgba(122, 200, 255, 0.32), rgba(186, 140, 255, 0.30));
}

.profile-card.profile-bg-starlight {
  background-image:
    radial-gradient(circle at 15% 20%, rgba(90, 162, 255, 0.35), transparent 45%),
    radial-gradient(circle at 85% 10%, rgba(155, 123, 255, 0.28), transparent 40%),
    linear-gradient(135deg, rgba(20, 30, 60, 0.05), rgba(90, 162, 255, 0.10));
}

.profile-card.profile-bg-sunset {
  background-image: linear-gradient(135deg, rgba(255, 183, 94, 0.34), rgba(255, 99, 132, 0.28));
}

.profile-card.profile-bg-grass {
  background-image: linear-gradient(135deg, rgba(84, 180, 90, 0.26), rgba(160, 210, 120, 0.22));
}

/* 设置页：SVIP 装扮表单 */
.svip-form {
  display: grid;
  gap: 6px;
  max-width: 420px;
}

.svip-form label {
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--text-2);
}

.svip-form input,
.svip-form select {
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-solid);
  color: var(--text);
  font-family: inherit;
  font-size: 13.5px;
}

.svip-form .btn {
  margin-top: 12px;
  justify-self: start;
}

.svip-protect {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px dashed var(--line);
}

.svip-protect h3 {
  font-size: 14px;
  margin-bottom: 4px;
}

.protect-form {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.protect-form select {
  flex: 0 1 160px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-solid);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
}

.protect-form .btn {
  white-space: nowrap;
}

.user-chip .svip-title {
  max-width: 84px;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 520px) {
  .user-chip .svip-title {
    display: none;
  }
}

html[data-theme="dark"] .svip-name {
  color: #ffd76a !important;
}

html[data-theme="dark"] .comment-level {
  background: rgba(90, 162, 255, 0.16);
}

html[data-theme="dark"] .post-inline-img {
  background: rgba(255, 255, 255, 0.04);
}

html[data-theme="dark"] .file-hint.size-over {
  color: #ff8a80;
}

html[data-theme="dark"] .svip-status {
  color: #f0cf82;
}

html[data-theme="dark"] .profile-card.profile-bg-aurora {
  background-image: linear-gradient(120deg, rgba(90, 162, 255, 0.20), rgba(155, 123, 255, 0.18));
}

html[data-theme="dark"] .profile-card.profile-bg-starlight {
  background-image:
    radial-gradient(circle at 15% 20%, rgba(90, 162, 255, 0.22), transparent 45%),
    radial-gradient(circle at 85% 10%, rgba(155, 123, 255, 0.18), transparent 40%);
}

html[data-theme="dark"] .profile-card.profile-bg-sunset {
  background-image: linear-gradient(135deg, rgba(255, 150, 70, 0.18), rgba(255, 80, 110, 0.16));
}

html[data-theme="dark"] .profile-card.profile-bg-grass {
  background-image: linear-gradient(135deg, rgba(84, 180, 90, 0.16), rgba(160, 210, 120, 0.12));
}

/* ============ 工具导航独立页 ============ */
.links-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-solid);
  box-shadow: var(--shadow);
}

.links-hero h1 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 24px;
}

.links-hero h1 .ms {
  color: var(--primary);
  font-size: 27px;
}

.links-hero p {
  margin-top: 6px;
  color: var(--text-2);
  font-size: 13.5px;
}

.links-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 16px 0;
}

.links-toolbar input {
  flex: 1 1 300px;
  max-width: 460px;
  padding: 10px 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-solid);
  color: var(--text);
  font-family: inherit;
  font-size: 13.5px;
}

.links-toolbar input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(33, 116, 245, 0.12);
}

#linkCount {
  color: var(--text-3);
  font-size: 12.5px;
}

.link-group {
  margin-top: 18px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-solid);
  box-shadow: var(--shadow);
}

.link-group-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}

.link-group-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 10px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 13px;
  font-weight: 800;
}

.link-group-head h2 {
  font-size: 16px;
}

.link-group-head p {
  margin-top: 2px;
  color: var(--text-3);
  font-size: 12.5px;
}

.link-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.link-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 118px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.55);
  color: var(--text);
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

a.link-card:hover {
  transform: translateY(-2px);
  border-color: var(--primary);
  box-shadow: 0 8px 20px rgba(33, 116, 245, 0.12);
}

.link-card-top {
  display: flex;
  align-items: center;
  gap: 9px;
}

.link-logo {
  width: 32px;
  height: 32px;
  flex: none;
  padding: 3px;
  border-radius: 8px;
  background: #fff;
  object-fit: contain;
}

.link-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 9px;
  color: #fff;
  font-size: 15px;
  font-weight: 800;
}

.link-tint-1 { background: linear-gradient(135deg, #4f7cff, #7c5cff); }
.link-tint-2 { background: linear-gradient(135deg, #ff7a59, #ff4d6d); }
.link-tint-3 { background: linear-gradient(135deg, #16a34a, #4ade80); }
.link-tint-4 { background: linear-gradient(135deg, #0891b2, #22d3ee); }
.link-tint-5 { background: linear-gradient(135deg, #d97706, #fbbf24); }
.link-tint-6 { background: linear-gradient(135deg, #7e22ce, #c084fc); }
.link-tint-7 { background: linear-gradient(135deg, #be123c, #fb7185); }
.link-tint-8 { background: linear-gradient(135deg, #475569, #94a3b8); }

.link-title {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.link-title strong,
.link-title span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.link-title strong {
  font-size: 13.5px;
}

.link-title span {
  color: var(--text-3);
  font-size: 11px;
}

.link-status {
  margin-left: auto;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  white-space: nowrap;
}

.status-warn {
  background: #fff3cd;
  color: #8a6d1d;
}

.status-dead {
  background: #f8d7da;
  color: #842029;
}

.status-info {
  background: #e7f1ff;
  color: #1a5fd0;
}

.link-card p {
  margin: 0;
  color: var(--text-2);
  font-size: 12.3px;
  line-height: 1.6;
}

.link-card.is-disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.link-card[hidden],
.link-group[hidden] {
  display: none;
}

.links-note {
  margin-top: 18px;
  color: var(--text-3);
  font-size: 12px;
  text-align: center;
}

.links-empty {
  padding: 24px;
  color: var(--text-3);
  text-align: center;
}

@media (max-width: 900px) {
  .link-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .links-hero {
    padding: 18px;
  }

  .links-toolbar input {
    flex-basis: 100%;
    max-width: none;
  }

  #linkCount {
    width: 100%;
    text-align: right;
  }

  .link-grid {
    grid-template-columns: 1fr;
  }
}

html[data-theme="dark"] .link-card {
  background: rgba(255, 255, 255, 0.04);
}

html[data-theme="dark"] .status-warn {
  background: rgba(255, 203, 92, 0.18);
  color: #f0cf82;
}

html[data-theme="dark"] .status-dead {
  background: rgba(255, 107, 107, 0.16);
  color: #ff9b95;
}

html[data-theme="dark"] .status-info {
  background: rgba(90, 162, 255, 0.16);
  color: #8fc0ff;
}

/* ============ 服务器宣传 ============ */
.servers-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-solid);
  box-shadow: var(--shadow);
}

.servers-hero h1 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 24px;
}

.servers-hero h1 .ms {
  color: var(--primary);
  font-size: 27px;
}

.servers-hero p {
  margin-top: 6px;
  color: var(--text-2);
  font-size: 13.5px;
}

.server-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.server-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-solid);
  box-shadow: var(--shadow);
}

.server-cover {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 8;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  overflow: hidden;
}

.server-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.server-initial {
  color: #fff;
  font-size: 54px;
  font-weight: 800;
  opacity: 0.9;
}

.server-edition {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.7);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  backdrop-filter: blur(6px);
}

.server-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
}

.server-body h2 {
  font-size: 16px;
}

.server-address {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 7px 10px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: transparent;
  color: var(--text-2);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 12px;
  cursor: pointer;
}

.server-address:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.copy-hint {
  font-family: inherit;
  font-size: 11px;
  color: var(--text-3);
}

.server-desc {
  display: -webkit-box;
  overflow: hidden;
  color: var(--text-2);
  font-size: 12.5px;
  line-height: 1.65;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.server-motd-block {
  margin-top: 2px;
  padding: 9px 10px;
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.06);
}

.server-motd {
  min-height: 20px;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 12px;
  line-height: 1.6;
  white-space: pre-wrap;
}

.server-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
  color: var(--text-3);
  font-size: 11px;
}

.server-offline {
  color: var(--text-3);
  font-size: 12px;
}

.server-empty {
  margin-top: 18px;
  padding: 28px;
  text-align: center;
}

.server-empty p {
  margin-bottom: 12px;
  color: var(--text-2);
}

.server-form-card {
  max-width: 760px;
}

.server-submissions {
  margin-top: 18px;
}

.server-status {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.status-approved {
  background: #e7f7ed;
  color: #18794e;
}

.status-rejected {
  background: #fdeaea;
  color: #b42318;
}

.status-pending {
  background: #fff4d6;
  color: #8a6d1d;
}

.server-review-thumb {
  width: 72px;
  height: 46px;
  border-radius: 7px;
  object-fit: cover;
}

.server-review-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 9px;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  color: #fff;
  font-size: 20px;
  font-weight: 800;
}

.server-review-desc {
  max-width: 260px;
  white-space: normal;
}

.server-review-actions {
  min-width: 250px;
}

.server-reject-form {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  margin: 3px 0;
}

.server-reject-form input {
  width: 120px;
  padding: 5px 7px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-solid);
  color: var(--text);
  font-size: 12px;
}

.motd-edition {
  display: inline-flex;
  gap: 4px;
  margin-bottom: 10px;
  padding: 3px;
  border-radius: 9px;
  background: rgba(15, 23, 42, 0.06);
}

.motd-edition label {
  padding: 5px 12px;
  border-radius: 7px;
  color: var(--text-2);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}

.motd-edition label.active {
  background: var(--surface-solid);
  color: var(--primary);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
}

.motd-edition input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.edition-badge {
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 11px;
  font-weight: 600;
}

@media (max-width: 1000px) {
  .server-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .servers-hero {
    padding: 18px;
  }

  .server-grid {
    grid-template-columns: 1fr;
  }
}

html[data-theme="dark"] .server-motd-block {
  background: rgba(255, 255, 255, 0.05);
}

html[data-theme="dark"] .motd-edition {
  background: rgba(255, 255, 255, 0.06);
}

html[data-theme="dark"] .motd-edition label.active {
  background: rgba(255, 255, 255, 0.1);
}

html[data-theme="dark"] .status-approved {
  background: rgba(52, 211, 153, 0.15);
  color: #6ee7b7;
}

html[data-theme="dark"] .status-rejected {
  background: rgba(248, 113, 113, 0.15);
  color: #fca5a5;
}

html[data-theme="dark"] .status-pending {
  background: rgba(251, 191, 36, 0.16);
  color: #f0cf82;
}

@media (max-width: 360px) {
  .header-publish-btn {
    padding: 6px 9px;
  }

  .header-publish-label {
    display: none;
  }
}