/* 字体定义 */
@font-face {
    font-family: 'HUPO';
    src: url('/wp-content/fonts/custom/HUPO.TTF') format('truetype'); /* [!code ++] */
    font-display: swap;
  }

.emoji-flag {
  height: 1em;
  width: 1em;
  vertical-align: middle;
}
/* 模板 */
/* 隐藏不需要的元素 */
.posted-on, 
.entry-footer, 
.cat-links, 
.tags-links, 
.byline, 
.entry-meta {
    display: none !important;
}

/* 表格容器 */
.sxpm-container {
  border: 1px solid #ddd;
  border-radius: 2px;
  overflow: hidden;
  background: #fff;
  margin: 5px auto;
  width: fit-content;
}

.sxpm-container2 {
  border-radius: 2px;
  overflow: hidden;
  margin: 2px auto;
  text-align: center;
}
.sxpm-title {
  font-size: 25px;
  margin-top: 2px;
  margin: 30px 0px 0px 0px;
}
/* 网格系统 */
.sxpm-header,
.sxpm-row,
.sxpm-footer {
  display: grid;
  grid-template-columns: repeat(12, 60px); /* 严格固定列宽 */
  width: 720px; /* 12列x60px */
  margin: 2px auto;
}

/* 单元格统一样式 */
.sxpm-zodiac-cell,
.sxpm-cell {
  width: 60px !important;
  height: 60px;
  padding: 4px;
  box-sizing: border-box;
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.sxpm-footer-cell {
  width: 60px !important;
  height: 30px;
  padding: 4px;
  box-sizing: border-box;
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #df0d0d;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* 移除最后一列右边框 */
.sxpm-zodiac-cell:last-child,
.sxpm-cell:last-child,
.sxpm-footer-cell:last-child {
  border-right: none;
}

/* 图片样式 */
.sxpm-number-img {
  width: 40px !important;
  height: 40px !important;
  object-fit: contain;
  flex-shrink: 0;
}

/* 文字样式 */
.sxpm-zodiac-number {
  font-size: 16px;
  line-height: 1.2;
}

.sxpm-zodiac-name {
  font-size: 25px;
  margin-top: 2px;
  color: #078786;
  font-family: 'HUPO' !important; /* 关键代码 */
  letter-spacing: 1px; /* 可选：增加字间距提升可读性 */
}

.sxpm-nayin {
  font-size: 10px;
  line-height: 1.2;
  text-align: center;
  word-break: keep-all;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 后台管理样式 */
.wrap .card {
  background: #fff;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  margin-top: 20px;
  max-width: 600px;
}

.wrap .card h2 {
  color: #23282d;
  font-size: 20px;
  margin: 0 0 15px;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
}

.wrap .card ol {
  line-height: 1.6;
  padding-left: 20px;
}

.wrap .card code {
  background: #f3f4f5;
  padding: 2px 5px;
  border-radius: 3px;
  font-family: Consolas, monospace;
}

.wrap .card a {
  color: #0073aa;
  text-decoration: underline;
}

.submitted-notice {
  text-decoration: underline;
}
/* 开奖记录页面样式 */
.sxpm-lottery-frontend {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.nav-tab-wrapper {
  margin-bottom: 20px;
}

.nav-tab {
  padding: 10px 15px;
  text-decoration: none;
  border: 1px solid #ccc;
  background: #f1f1f1;
  margin-right: 5px;
}

.nav-tab-active {
  background: #fff;
  border-bottom: 1px solid #fff;
}

/* 开奖记录页面样式 */
.sxpm-lottery-frontend {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.nav-tab-wrapper {
  margin-bottom: 20px;
}

.nav-tab {
  padding: 10px 15px;
  text-decoration: none;
  border: 1px solid #ccc;
  background: #f1f1f1;
  margin-right: 5px;
}

.nav-tab-active {
  background: #fff;
  border-bottom: 1px solid #fff;
}

/* 年份和排序按钮容器 */
.sxpm-year-sort-container {
  position: relative;
  margin-top: 30px;
  border: 1px solid #f5f5f5;
  border-radius: 5px;
  overflow: hidden;
}

.sxpm-sort-buttons {
  margin-left: auto;
}

.sxpm-sort-buttons .button {
  padding: 8px 16px;
  font-size: 14px;
  border-radius: 4px;
  background-color: #078786;
  color: #fff;
  text-decoration: none;
  border: none;
  cursor: pointer;
}

.sxpm-sort-buttons .button:hover {
  background-color: #0a9f9e;
}


.lottery-item {
  display: grid;
  grid-template-columns: 120px 120px 1fr 100px;
  gap: 10px;
  align-items: center;
  padding: 12px 15px;
  border-bottom: 1px solid #eee;
  background: #fff;
}

.lottery-time i {
  margin-right: 5px;
  color: #999;
}
/* 年份导航 */
.sxpm-year-sort-container {
  position: relative;
  margin-top: 30px;
  border: 1px solid #f5f5f5;
  border-radius: 5px;
  overflow: hidden;
}
/* 年份显示 */
.nav-tab-wrapper {
  display: flex;
  border-bottom: 1px solid #ddd;
  background: #f5f5f5;
}
.nav-tab {
  padding: 10px 20px;
  background: #f5f5f5;
  border: none;
  cursor: pointer;
  font-size: medium;
  font-weight: 600;
  color: #666;
  position: relative;
  transition: all 0.3s;
}

.sxpm-sort-buttons .button {
  padding: 5px 12px;
  font-size: 13px;
  height: auto;
  background: #0073aa;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.sxpm-number {
  text-align: center;
  display: inline-block;
}

.sxpm-number img {
  width: 32px;
  height: 32px;
}

.sxpm-number-info {
  font-size: 12px;
  margin-top: 5px;
}

.sxpm-separator {
  font-size: 20px;
  font-weight: bold;
  margin: 0 10px;
}

.issue-serial {
  color: #078786;
  font-size: 1.2em;
  letter-spacing: 1px;
}
.sxpm-guess-container .panel {
  border: 1px solid #ddd;
  margin: 15px 0;
  padding: 10px;
}

/* 计数器样式 */
.counter {
  float: left;
  font-size: medium;
  color: #999;
}
.label {
  margin-right: 5px;
  font-size: medium;
}

/* 竞猜主容器 */
.sxpm-guess-wrapper {
  margin: 0;
  padding: 0;
  width: 100%;
}

/* 生肖网格布局 */
.zodiac-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(40px, 1fr));
  gap: 4px;
  padding: 10px;
  background: #f5f5f5;
  box-sizing: border-box;
}

.number-btn img {
  width: 100%;
  height: auto;
}

/* 选中状态 */
.total-counter {
  font-weight: normal;
  font-size: medium;
  color: #666;
  padding-left: 10px;
}
.total-count {
  font-weight: normal;
  font-size: medium;
  color: #666;
  padding-left: 10px;
}
.flex-spacer-pick {
  flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}
.action-bar-pick {
  display: flex;
  align-items: center;
  padding: 10px 10px;
  background: #f5f5f5;
  border-radius: 8px;
}
.error-message {
  color: #333;
  font-size:medium;
  font-weight: bold;
  padding: 5pxpx;
  background:#f5f5f5;
  border-radius: 4px;
}
/* 网格布局调整 */
.zodiac-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(40px, 1fr));
  gap: 1px;
  align-items: stretch;
}

/* 生肖列容器 */

.guess-zodiac-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2px;
  background: #f5f5f5;
  border-radius: 4px;
  min-height: 0;
  height: 100%; /* 确保所有列高度一致 */
}
/* 按钮容器新增包裹层 */
.number-btn-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 2px;
  margin-top: auto;
  justify-content: space-evenly;
  flex-grow: 1;
  min-height: 0;
}

.zodiac-name {
  font-family: 'HUPO', sans-serif;
  font-size: 20px;
  color: #666;
  width: 100%;
  text-align: center;
  padding: 4px 0;
  margin: 0;
  font-weight: 100;
}
.confirm-zodiac-name {
  font-size: 15px;
  color: #666;
  margin: 0 1px 0 3px;
  margin-left: 0.5em !important; /* 缩小生肖名称间距 */
  flex-shrink: 0;
  text-align: left;
  font-size:medium;
  font-weight: 400;
}
.confirm-number-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 20px;
  font-size:medium;
  border-radius: 4px;
  margin: 0 1px 0 3px;
}
.red-wave {
  color: #fc6668;
}

.blue-wave {
  color: #00bfff;
}

.green-wave {
  color: #228b22;
}
/* 特码高亮样式 */
.confirm-number-btn.special-highlight {
  color: #ffffff !important;
}

.confirm-number-btn.special-highlight.red-wave {
  background: #fc6668 !important;
}

.confirm-number-btn.special-highlight.blue-wave {
  background: #00bfff !important;
}

.confirm-number-btn.special-highlight.green-wave {
  background: #228b22 !important;
}

.confirm-number-btn .number-inner {
  position: relative;
  display: inline-block;
  padding: 0 1px 0 1px;
}
.confirm-number-btn .number-inner::before,
.confirm-number-btn .number-inner::after {
  position: absolute;
  color: inherit;
  opacity: 0.8;
}

.confirm-number-btn .number-inner::before {
  content: '[';
  left: -4px;
}

.confirm-number-btn .number-inner::after {
  content: ']';
  right: -4px;
}

/* 统一所数字按钮样式 */
.number-btn {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size:small;
  font-weight: normal;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
  border: 0;
  background: #f5f5f5;
  padding: 0 3px;
  margin: 0;
}
/* 数字内部样式 */
.number-btn .number-inner {
  position: relative;
  display: inline-block;
  padding: 0 3px; /* 数字左右间距 */
  letter-spacing: 0.5px; /* 数字间微调 */
}

/* 统一所有面板中number-btn的样式 */
.selected-panel .number-btn,
.challenge-panel .number-btn,
.normal-panel .number-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 20px;
  font-size: medium;
  font-weight:normal; 
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  border: 0;
  background: #f5f5f5;
  position: relative;
  padding: 0;
  margin: 0 auto; /* 修改为：水平居中 */
  /* border: 1px solid #eee;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05); */
}
/* 统一选中状态的样式 */
.selected-panel .number-btn.selected,
.challenge-panel .number-btn.selected,
.normal-panel .number-btn.selected {
  color: #ffffff !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
/* 统一波色样式 */
.selected-panel .number-btn.红-wave,
.challenge-panel .number-btn.红-wave,
.normal-panel .number-btn.红-wave {
  color: #f08a8c;
}

.selected-panel .number-btn.蓝-wave,
.challenge-panel .number-btn.蓝-wave,
.normal-panel .number-btn.蓝-wave {
  color: #00a5db;
}

.selected-panel .number-btn.绿-wave,
.challenge-panel .number-btn.绿-wave,
.normal-panel .number-btn.绿-wave {
  color: #3a9c3a;
}
.selected-panel .number-btn.红-wave.selected,
.challenge-panel .number-btn.红-wave.selected,
.normal-panel .number-btn.红-wave.selected {
  background: #f08a8c !important;
}

.selected-panel .number-btn.蓝-wave.selected,
.challenge-panel .number-btn.蓝-wave.selected,
.normal-panel .number-btn.蓝-wave.selected {
  background: #00a5db !important;
}

.selected-panel .number-btn.绿-wave.selected,
.challenge-panel .number-btn.绿-wave.selected,
.normal-panel .number-btn.绿-wave.selected {
  background: #3a9c3a !important;
}
/* 统一数字内部样式 */
.selected-panel .number-btn .number-inner,
.challenge-panel .number-btn .number-inner,
.normal-panel .number-btn .number-inner {
  position: relative;
  display: inline-block;
  padding: 0 1px;
}


/* 方括号样式 */
.number-btn .number-inner::before,
.number-btn .number-inner::after {
  content: '';
  position: absolute;
  color: inherit;
  opacity: 0.8;
  top: 0;
}
.number-btn .number-inner::before {
  content: '[';
  left: -5px; /* 方括号向左移动 */
  transform: translateX(-50%); /* 精确定位 */
}
.number-btn .number-inner::after {
  content: ']';
  right: -5px; /* 方括号向右移动 */
  transform: translateX(50%); /* 精确定位 */
}
.number-btn .number-inner::before { left: -3px; }
.number-btn .number-inner::after { right: -3px; }

.group-separator {
  color: #666;
  margin: 0 0 0 1px;
  font-weight: normal;
}
.confirm-actions {
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #eee;
}
.confirm-zodiac-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 2px;
  margin: 0 10px 0 0;
  max-width: 100%;
  overflow: hidden;
  min-height: 40px; /* 设置最小高度 */
  align-content: flex-start; /* 顶部对齐 */
}

.红-wave {
  color: #f08a8c;
}
.蓝-wave {
  color: #00a5db;
}
.绿-wave {
  color: #3a9c3a;
}

.number-btn.selected {
  color: #ffffff !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.number-btn.红-wave.selected {
  background: #f08a8c !important;
}

.number-btn.蓝-wave.selected {
  background: #00a5db !important;
}

.number-btn.绿-wave.selected {
  background: #3a9c3a !important;
}

.selected-panel {
  display: block !important;
  /* padding: 20px 10px 20px 0;*/
}
.selected-numbers {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
  gap: 6px; /* 稍微增大间隙 */
  padding: 10px; /* 统一内边距 */
  background: #f5f5f5;
  border-radius: 6px; /* 匹配外部圆角 */
  margin: 8px 0; /* 上下外边距 */
  min-height: inherit; /* 继承父级最小高度 */
  align-content: start; /* 内容顶部对齐 */
  box-sizing: border-box; /* 包含padding */
}
/* 动态高度调整类 */
.selected-numbers.has-items {
  min-height: 80px; /* 有内容时最小高度 */
}
/* 确认页面样式 */
.sxpm-confirm-wrapper {
  max-width: 800px;
  margin: 20px auto;
  padding: 30px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.selection-group {
  display: flex;
  margin: 15px 0;
  padding: 15px;
  border: 1px solid #eee;
  border-radius: 6px;
}

.selection-label {
  flex: 0 0 100px;
  font-weight: bold;
  color: #666;
  font-size: 16px;
}

.selection-numbers {
  flex: 1;
  color: #333;
}
.zodiac-group {
  display: inline-flex;
  align-items: center;
  margin-right: 0px;
  line-height: 1.2;
  white-space: nowrap;
}
.zodiac-group34 {
  display: inline-block; /* 改为inline-block才能控制内部行高 */
  margin-right: 12px;
  vertical-align: top; /* 顶部对齐 */
  line-height: 1.8; /* 基础行高（单行时生效） */
}

/* 生肖名称样式 */
.confirm-zodiac-name34 {
  display: inline-block;
  margin-right: 8px;
  font-weight: bold;
  vertical-align: middle;
  margin-bottom: 6px; /* 增加与数字行的间距 */
}
.zodiac-group34 {
  &::after {
    content: "";
    display: block;
    height: 6px; /* 行间间隔 */
    width: 100%;
  }
}
/* 数字按钮样式 */
.confirm-number-btn34 {
  display: inline-block;
  margin: 0 8px 8px 0; /* 增加数字间距：右8px 下8px */
  padding: 2px 6px;
  background: rgba(255,255,255,0.2);
  border-radius: 4px;
  vertical-align: middle;
}
.panel-header {
  display: inline-flex;
  align-items: center;
  line-height: 1.2;
  white-space: nowrap;
  padding: 0;
  margin: 0;
}
.panel-header-detail {
  display: flex;
  align-items: center; /* 确保所有子项垂直居中 */
  justify-content: space-between; /* 左右分布 */
  margin-bottom: 0;
  padding: 0 10px;
  margin: 0;
  width: 100%;
  gap: 2px; /* 子项间距 */
  background-color: #eee;
  height: 30px;
  border-radius: 4%;
}
.user-list-inline {
  padding: 0 20px;
  gap: 20px;
}
.user-list-inline a {
  text-decoration: none;
  color: #666;
  font-size: medium;
  cursor: pointer;
}
.user-list-inline a:hover{
  color: #078786;
}
.user-link {
  gap: 10px;
}
.panel-header .label {
  color: #666;
  padding-bottom: 5px;
  margin-bottom: 10px;
  font-weight: 500;
  font-size: 16px;
  padding-left: 5px;
}

/* 标签样式 */
.panel-header-detail .label{
  /* 移除float和margin-right */
  display: inline;
  font-size: 14px;
  color: #666;
}
.panel-header .bi3{
  /* 移除float和margin-right */
  padding-bottom: 5px;
  margin-bottom: 10px;
  font-weight: 500;
  font-size: 16px;
  color: #fc6668;
}
.panel-header .bi2{
  /* 移除float和margin-right */
  padding-bottom: 5px;
  margin-bottom: 10px;
  font-weight: 500;
  font-size: 16px;
  color: #00a5db;
}
.panel-header .bi1{
  /* 移除float和margin-right */
  padding-bottom: 5px;
  margin-bottom: 10px;
  font-weight: 500;
  font-size: 16px;
  color: #078786;
}
.panel-header .counter {
  /* 移除float */
  display: inline;
  color: #999;
  padding-bottom: 5px;
  margin-bottom: 10px;
  font-weight: 400;
  font-size: 14px;
}

/* 计数器样式 */
.panel-header-detail .counter {
  /* 移除float */
  display: inline;
  margin-left: 5px; /* 添加左边距 */
  font-size:small;
  font-weight:normal;
  color: #999;
}
.panel-header-detail i {
  color: #666;
}
/* 中奖状态指示器 */
.panel-header34 .goal_status {
  display: inline-flex;
  justify-content: flex-end;
  width: 30px;
  height: 30px;
  margin-left: auto; /* 确保靠右 */
  font-size:small;
  align-items: center;
}

.panel-header34 .goal_status img {
  width: 20px;
  height: 20px;
  vertical-align: middle;
}

.zodiac-group.normal {
  border-left: 3px solid #078786;
}
.zodiac-group.selected {
  border-left: 3px solid #ffc107;
}
.zodiac-group.challenge {
  border-left: 3px solid #f44336;
}

.separator {
  color: #666;
  font-weight: 500;
  margin: 0 5px;
}

.action-stats {
  display: flex;
  gap: 25px;
}

.stat-item em {
  color: #078786;
  font-style: normal;
  font-weight: bold;
}

.action-buttons {
  display: flex;
  gap: 15px;
}

.button {
  padding: 8px 25px;
  border-radius: 20px;
  cursor: pointer;
}

.button.primary {
  background: #666;
  color: white;
  border: none;
}
.full-issue {
  color:#078786;
}
.sxpm-guess-post {
  width: 100%;
  margin: 0 auto;
  padding: 20px;
  background: #f9f9f9;
}

.guess-section {
  margin: 20px 0;
  padding: 15px;
  border: 1px solid #eee;
  border-radius: 5px;
  background: white;
}

.guess-section h3 {
  color: #078786;
  border-bottom: 1px solid #ddd;
  padding-bottom: 10px;
  margin-bottom: 15px;
}
.numbers-display34 {
  display: block; /* 改为块级容器 */
  align-items: flex-start;
  gap: 4px;              /* 元素间距 */
  padding: 10px 20px;     /* 仅保留必要内边距 */
  border-radius: 6px;
  width: 100%;
  box-sizing: border-box;
  line-height: 1.5;    /* 消除文本行高影响 */
  min-height: 0;         /* 关键：允许容器收缩 */
}
.numbers-display34 > * {
  margin: 0;
  align-self: flex-start;
  flex-shrink: 0;        /* 禁止内容项收缩 */
}
  
.numbers-display {
  display: inline-flex; /* 改为行内弹性盒 */
  flex-wrap: wrap;        /* 允许内容换行 */
  align-items: flex-start;
  gap: 4px;              /* 元素间距 */
  padding: 4px 10px;     /* 仅保留必要内边距 */
  background: #f5f5f5;
  border-radius: 6px;
  width: 100%;
  box-sizing: border-box;
  line-height: 1;        /* 消除文本行高影响 */
  min-height: 0;         /* 关键：允许容器收缩 */
}
.numbers-display > * {
  margin: 0;
  align-self: flex-start;
  flex-shrink: 0;        /* 禁止内容项收缩 */
}
/* 为不同面板设置统一高度策略 */
.normal-panel .numbers-display,
.selected-panel .numbers-display,
.challenge-panel .numbers-display {
  min-height: 60px; /* 设置统一最小高度 */
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}
/* 新增样式 assets/sxpm-style.css */
.sxpm-post {
  max-width: 800px;
  margin: 20px auto;
  padding: 25px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.meta-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  margin-bottom: 25px;
  background: #f8f9fa;
  border-left: 4px solid #078786;
}

.total-pick {
  color: #666;
  font-size: 15px;
}

.section {
  margin: 20px 0;
  padding: 15px;
  border: 1px solid #eee;
}

.guess-panel {
  padding: 10px;
  border-bottom: 1px solid #eee;
}

.section h3 {
  color: #078786;
  font-size: 16px;
  margin: 0 0 10px 0;
  padding-bottom: 8px;
}

/* 
.section.normal {
  border-left: 2px solid #666;
}
.guess-panel.normal-panel {
  border-left: 2px solid #666;
}
.section.selected {
  border-left: 2px solid #078786;
}
.guess-panel.selected-panel {
  border-left: 2px solid #078786;
}
.section.challenge {
  border-left: 3px solid #fc6668;
}
.guess-panel.challenge-panel {
  border-left: 3px solid #fc6668;
}
*/
/* 重复号码高亮 */
.has-duplicate {
  border-color: #dc3232 !important;
  background: #ffebe8 !important;
}

.action-bar{
  padding: 15px;
  margin-bottom: 25px;
  background: #f8f9fa;
  border-left: 4px solid #078786;
}
/* 编辑模式提示 */
.notice-edit-mode {
  border-left-color: #00a0d2;
}
.panel-content {
  min-height: 40px; /* 适当减小最小高度 */
  transition: height 0.3s ease; /* 添加平滑过渡效果 */
}
.period-panel .panel-header.period-header {
  display: flex;
  align-items: center;
  justify-content: center; /* 水平居中 */
  gap: 8px;
  padding: 8px 0;
  font-size: 16px;
  font-weight: 400;
}
.period-header {
  display: flex;
  align-items: center;
  gap: 10px;
}
/* 其他面板保持原有左对齐 */
.guess-panel:not(.period-panel) .panel-header {
  justify-content: space-between;
  padding-left: 15px;
}

/* 图标垂直居中 */
.type_icon {
  display: flex;
  align-items: center;
}

.guess-result {
  display: flex;
  align-items: center;
  gap: 8px;
}

.result-text {
  color: #e74c3c;
  font-weight: 500;
  padding: 4px 8px;
  border-radius: 4px;
  background: #fce4e3;
}

.status-text {
  color: #3498db;
  font-weight: 500;
  padding: 4px 8px;
  border-radius: 4px;
  background: #e3f2fd;
}

.sxpm-guess-display {
  width: 100%;
  background: #f5f5f5;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.guess-stats {
  margin: 0;
  border-bottom: 1px solid #ccc;
  border-radius: 8px;
  padding: 10px;
  font-size: small;
}

.guess-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1px;
  padding: 20px 10px 0 0;
}

.issue-info {
  flex: 1;
  min-width: 0; /* 防止内容溢出 */
}

.issue-title {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0;
}
.type-icon {
  flex-shrink: 0;
}

.issue-number {
  font-size: 28px;
  font-weight: 800;
  color: #333;
  white-space: nowrap;
}

.status-info {
  margin: 0;
  display: flex;
  justify-content: flex-end; /* 内容右对齐 */
  gap: 5px; /* 元素间距 */
}


.lottery-result {
  margin: 15px 0;
  padding: 10px;
  background: #fff8e1;
  border-radius: 4px;
}
.submit-time {
  width: auto !important; /* 取消固定宽度 */
  white-space: nowrap; /* 禁止换行 */
  font-size:x-small; 
  color: #666;
  display: inline-flex;
  align-items: center;
  
  &::before {
    margin-right: 4px;
    font-size: 12px;
  }
}
/* 列表容器 */
.guess-list-container {
  display: block !important;
  opacity: 1 !important;
  margin: 0;
  padding: 0;
}
.no-guesses {
  padding: 20px;
}
/* 处理空数据状态 */
.guess-list-container:empty::after {
  content: "暂无竞猜记录";
  display: block;
  padding: 20px;
  text-align: center;
  color: #666;
}

/* 核心容器 - 确保所有项目在同一行且垂直居中 */
.guess-item {
  height: 40px;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr 60px; 
  align-items: center; /* 垂直居中所有单元格内容 */
  border-top: 1px solid #eee;
  gap: 8px;
  min-height: 35px; /* 为垂直居中提供足够高度 */
}

/* 所有直接子元素继承垂直居中 */
.guess-item > * {
  display: flex;
  align-items: center; /* 内部元素垂直居中 */
  height: 100%; /* 继承父级高度 */
  min-width: 0; /* 允许内容收缩 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 用户信息区域优化 */
.user-info {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 100%;
  margin-bottom: 10px;
}
.user-info .avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0; /* 防止头像被压缩 */
}
.user-info .display-name {
  flex: 1;
  min-width: 0; /* 允许文本截断 */
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-info .display-name a {
  text-decoration: none;
  flex: 1;
  min-width: 0; /* 允许文本截断 */
  overflow: hidden;
  text-overflow: ellipsis;
  color: #666;
}
.user-info .display-name a:hover {
  color: #333;
}
/* 状态操作区域 - 关键调整 */
.status-action {
  display: flex;
  align-items: center;
  justify-content: space-between; /* 关键：平均分配空间 */
  gap: 15px; /* 增加间距 */
  width: 100%;
  padding: 0 5px; /* 添加内边距 */
}
.status-area {
  flex: 1;
  display: flex;
  justify-content: center;
}
.more-action {
  flex-shrink: 0; /* 防止被压缩 */
  margin-left: auto; /* 推到右侧 */
}

.submit-time,
.like-count,
.reward-count,
.view-count {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 100%;
  font-size: 13px;
  color: #666;
}
.submit-time i.fas, 
.like-count i.fas, 
.reward-count i.fas, 
.view-count i.fas {
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  vertical-align: middle;
  position: relative;
  top: -0.05em;
}
.submit-time span, 
.like-count span, 
.reward-count span, 
.view-count span {
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
}
.submit-time {
  min-width: 100px;
}
/* 排序工具栏样式 */
.guess-sort-toolbar-list {
  display: block; /* 关键：强制独占一行 */
  width: 100%;
  padding: 10px;
  background: #f5f5f5;
  margin-bottom: 10px; /* 与下方列表项的垂直间距 */
}
.sort-options-list {
  display: flex;
  justify-content: flex-end; /* 按钮靠右 */
  gap: 10px;
  margin: 0;
  padding: 0;
}

.sort-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #666;
  text-decoration: none;
  font-size:small;
  padding: 5px 5px;
  border-radius: 4px;
  transition: all 0.3s;
  height: 20px;
}

.sort-btn:hover {
  background: #eee;
}

.sort-btn.active {
  color: #ddd;
  background: #666;
}

.sort-btn i {
  font-size: 12px;
}
.more-details {
  padding: 4px 6px; /* 增加点击区域 */
  border-radius: 4px; /* 添加圆角 */
  transition: background-color 0.2s;
}
.more-details:hover {
  background-color: rgba(7, 135, 134, 0.1); /* 悬停背景 */
}

/* 禁用按钮样式 */
.sort-btn.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.status-icon {
  width: 24px;
  height: 24px;
  vertical-align: middle;
}

.like-count, .reward-count, .view-count {
  color: #666;
  font-size: 0.9em;
  font-weight: 500;
}
.stats span {
  margin-left: 10px;
  font-size: 0.9em;
}

/* 竞猜列表的开奖显示 */
.number-item {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 50px;
}
.number-item img {
  width: 60% !important; /* 强制图片宽度为父容器50% */
  height: auto !important; /* 保持原始比例 */
  max-width: 48px; /* 最大尺寸限制 */
  object-fit: contain;
  margin: 0 auto; /* 居中 */
}
.lottery-number-icon {
  width: 48px;
  height: 48px;
  margin: 0;
}
.number-info {
  color: #666;
  margin-top: 2px;
  white-space: nowrap;
  font-size: 10px !important; /* 缩小文字 */
  line-height: 1.2;
  margin-top: 0;
}

/* 统计行基础样式9999 */
.stat-row {
  padding: 5px 0 0 10px;
  display: flex;
  font-size: medium;
  justify-content: space-between;
  align-items: center;

}

/* 横向排列中奖统计 */
/* 修正中奖统计横向排列 */
.stat-item.winner-stats {
  display: flex;
  align-items: center;
  gap: 5px; /* 标签与图标之间的间距 */
  color: #666;
}

.winner-stat {
  font-size: small;
  display: inline-flex;
  align-items: center;  /* 垂直居中 */
  vertical-align: middle; /* 确保行内元素对齐 */
  line-height: 1; /* 重置行高 */
  text-align: left;
}
.winner-stat img {
  width:16px; 
  height: 16px;
  margin-right: 3px; /* 图标和数字间距 */
  vertical-align: middle;
  position: relative;
  top: -1px; /* 微调像素级对齐 */
  text-align: left;
}
.winner-type {
  display: inline-flex;
  align-items: center;
  gap: 3px; /* 图标与数字的间距 */
}

.winner-type img {
  width: 16px;
  height: 16px;
  vertical-align: middle;
}

/* 移除可能的干扰样式 */
.winner-stats br {
  display: none; /* 隐藏可能存在的换行符 */
}

.stat-item {
  font-size: medium;
  color: #666;
}
.stat-item .label {
  font-size: medium;
  color: #666;
  text-align: left;
}
.stat-item .label2 {
  font-size: medium;
  color: #666;
  text-align: left;
}

.stat-item2 {
  font-size: medium;
  color: #666;
  text-align: right;
  text-decoration: underline;
  padding: 0 10px 0 0;
}
.stat-item2 a {
  color: #666;
  text-align: right;
  text-decoration: underline;
  padding: 0 10px 0 0;
}
.stat-item2 a:hover {
  color: #078786;
}

/* 中奖统计图标对齐 */
.winner-type {
  display: flex;
  align-items: center;
  margin-right: 10px;
}

.winner-type img {
  width: 16px;
  height: 16px;
  margin-right: 4px;
}

/* 统计容器 */
.sxpm-guess-data {
  max-width: 1200px;
  padding: 10px;
  background: #f5f5f5;
  margin: 10px 0;
  
}

/* 标题区 */
.data-guess-header {
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
  vertical-align: bottom;
  gap: 1px;
  padding: 50px 0px 0px 0px;
}
.data-issue-info {
  flex: 1;
  min-width: 0; /* 防止内容溢出 */
}
.status-info {
  margin: 10px 0;
  color: #078786;
  text-align: left;
  font-weight: 600;
  font-size: 16px;
}

/* 统计区块 */
.stats-section {
  margin: 20px 0;
}

.stats-section h3 {
  color: #333;
  padding-left: 10px;
  margin-bottom: 20px;
}


/* 统计标题、头部 */
.data-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0px;
  width: 100%;
  font-size: small;
  color: #666;
  height: auto;
  min-height: 25px;
}

.stats-container a {
  font-size: 12px;
  color: #666;
  text-decoration: none;
}

.stats-container a:hover {
  font-size: 12px;
  color: #078786;
}

/* 修改第一行 stats-container - 解决手机端换行问题 */
.stats-container {
  display: flex;
  gap: 5px;
  align-items: center;
  vertical-align: middle;
  font-size: 12px;
  color: #666;
  background-color: #e5e5e5;
  width: 100%;
  justify-content: flex-start; /* 改为左对齐 */
  font-weight: 400;
  height: auto;
  min-height: 25px;
  flex-wrap: nowrap; /* 禁止换行 */
  white-space: nowrap; /* 禁止文字换行 */
  padding: 0px 10px;
}

.stats-container2 {
  display: flex;
  align-items: center;
  vertical-align: middle;
  font-size: 12px;
  color: #666;
  background-color: #e5e5e5;
  width: 100%;
  font-weight: 400;
  height: auto;
  min-height: 25px;
  flex-wrap: wrap; /* 允许换行 */
  padding: 0px 10px;
}

/* 标签统一样式 */
.stats-container .label,
.stats-container .value {
  color: #666;
  text-align: left;
  font-size: 12px;
  flex-shrink: 0; /* 禁止缩小 */
    padding: 0px 10px;
}

.stats-container .is_guess {
  margin-left: auto;
  font-size: 12px;
  flex-shrink: 0;
}

.stats-container .is_guess a {
  font-size: medium;
  color: #078786;
  text-decoration: none;
  white-space: nowrap;
}

.stats-container .is_guess a:hover {
  font-size: medium;
  text-decoration: underline;
  white-space: nowrap;
}

.stats-container .label img {
  justify-content: center;
}
.data-zodiac-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 5px;
  padding: 10px 10px 20px 10px;
  margin-right: auto;
}

.zodiac-item {
  height: 45px; /* 固定高度 */
  padding: 1px 4px; /* 去掉上下padding */
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  display: flex; /* 启用flex布局 */
  flex-direction: column; /* 垂直排列 */
  justify-content: center; /* 垂直居中 */
}

.zodiac-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* 三列等分 */
  align-items: center;
  /*margin-bottom: 2px; /* 减少间距 */
  padding: 0 4px;
}
.special-zodiac {
  color: #078786;
}
/* 生肖名称（靠左） */
.data-zodiac-name {
  font-family: "HUPO";
  font-size: medium;
  font-weight: 300;
  text-align: left; /* 靠左 */
  justify-self: start; /* 网格内靠左 */

  margin: 0;
  padding: 0;
}
/* 数量（居中） */
.zodiac-count {
  font-size: small;
  color: #666;
  font-weight: 400;
  text-align: center; /* 居中 */
  justify-self: center; /* 网格内居中 */

}
/* 百分比（靠右） */
.zodiac-percent {
  font-size: small;
  color: #666;
  font-weight: 400;
  text-align: right; /* 靠右 */
  justify-self: end; /* 网格内靠右 */
}
/* 进度条容器（调整高度） */
.zodiac-bar-container {
  height: 5px; /* 调小高度 */
  background: #ccc;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 2px;
}
.zodiac-bar {
  height: 100%;
  transition: width 0.3s ease;
}
/* 号码统计 */
.number-stats .stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}
.number-list {
  margin-top: 10px;
  padding: 10px;
}

.data-number-item {
  display: flex;
  align-items: center;
  padding: 5px;
  border-bottom: 1px solid #ddd;
}

.number {
  font-size:small;
  font-weight:400;
  width: 60px;
  flex-shrink: 0;
}
.progress-container {
  flex: 1;
  height: 8px;
  background: #ddd;
  border-radius: 4px;
  margin: 0 10px;
  overflow: hidden;
}
.progress-bar {
  height: 100%;
  background: #666;
  transition: width 0.3s ease;
}

.count-info {
  display: flex;
  width: 100px;
  justify-content: space-between;
  font-size:small;
  color: #666;
  font-weight: 500;
}
.number-list .special-number .progress-bar {
  background: #078786 !important; 
  box-shadow: 0 0 8px #065656;
}
.number-list .special-number .count {
  color: #078786 !important; 
  box-shadow: 0 0 8px #065656;
}
.number-list .special-number .percent {
  color: #078786 !important; 
  box-shadow: 0 0 8px #065656;
}

/* 打赏点赞互动按钮样式 */
.interaction-buttons {
  display: flex;
    gap: 10px;
    margin: 0; /* 移除上下边距 */
    justify-content: flex-end; /* 靠右对齐 */
    flex-shrink: 0; /* 防止缩小 */
}

.sxpm-btn {
  width: 60px;
  height: 20px;
  padding: 0 5px;
  border-radius: 4px;
  text-decoration: none;
  font-size:small;
  display: flex;
  align-items: center;
  justify-content: center; 
  gap: 5px;
  transition: all 0.3s;
  /* 新增 */
  flex-shrink: 0; /* 防止按钮被压缩 */
}

.sxpm-btn:hover {
  background: #999;
}

.btn-icon, .flower-icon {
  width: 28px;
  height: 28px;
  margin: 0 5px;
}

.count {
  font-weight: bold;
  margin: 0 3px;
}
.btn-group {
  display: flex;
  align-items: center;
  gap: 5px;
  width: 30%;
}

.btn-stats {
  display: flex;
  align-items: right;
  gap: 3px;
  font-size: 14px;
  color: #666;
}

/* 打赏点赞互动按钮样式 */

/* 成功标记 */
.checkmark {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 10px;
  vertical-align: middle;
}

.checkmark:after {
  content: '';
  display: block;
  width: 8px;
  height: 14px;
  border: solid white;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}


/* 文件：assets/sxpm-style.css */
.sxpm-guess-detail34 {
  width: 750px;
  max-width: 800px;
  margin: 15px 20px 30px 15px;
  padding: 0 10px;
  background: #f5f5f5;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.post-type {
  display: flex;
  align-items: center;
  justify-content: center; /* 左右分布 */
  margin: 10px 0;
  background: #f5f5f5;
  padding: 0;
}
.post-type h2 {
  font-size: 20px;
  color: #333;
  border-bottom: 2px solid #f08a8c;
  margin-bottom: 10px;
}
.user-info-card34 {
  display: flex;
  align-items: center;
  background: #f5f5f5;
  border-radius: 8px;
  padding: 0;
  padding: 10px 0 15px 10px;
}

.guess-panel-post34 {
  margin-bottom: 10px;
  padding: 0 10px;
  border-radius: 4px;
}
.user-avatar34 {
  margin-top: 10px;
  margin-right: 10px;
}

.user-avatar34 img {
  border-radius: 50%;
  width: 48px;
  height: 48px;
}

.user-details34 {
  flex: 1;
  margin-left: 10px;
}

.user-name34 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 18px;
  font-weight: bold;
  margin: 0px 5px 0px 0px;
  vertical-align: bottom;
  color: #666;
  margin-bottom: 0;
}

.user-name34 a {
  text-decoration: none;
  font-size: 18px;
  font-weight: bold;
  margin: 2px 15px 0px 0px;
  vertical-align: bottom;
  color: #666;
  flex: 1; /* 让链接占据剩余空间 */
}

.user-name34 a:hover {
  text-decoration: none;
  font-size: 18px;
  font-weight: bold;
  margin: 2px 15px 0px 0px;
  vertical-align: bottom;
  color: #333;
}
/* 点赞打赏按钮容器 - 保持原有样式，自动靠右 */
.water-interaction-panel {
  width: 80px;
  display: flex;
  gap: 15px;
  align-items: center;
  margin-bottom: 0;
  padding-bottom: 0px;
}
.sxpm-btn-post.water-like-btn:not(.disabled):hover,
.sxpm-btn-post.water-reward-btn:not(.disabled):hover {
    transform: translateY(-2px) scale(1.05);
    background: #f5f5f5;
}

.sxpm-btn-post.water-like-btn.disabled,
.sxpm-btn-post.water-reward-btn.disabled {
    cursor: not-allowed;
    opacity: 0.7;
    transform: none !important;
}

/* 保持原有的按钮样式不变 */
.sxpm-btn-post.water-like-btn,
.sxpm-btn-post.water-reward-btn {
    background: none;
    border: none;
    padding-left: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 25px;
    height: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}

.user-stats34 {
  font-size: 12px;
  color: #999;
  margin: 2px 10px 0px 0px;
  vertical-align: top;
  background-color: #eee;
}

.post-type h2 {
  color: #333;
  border-bottom: 2px solid #FC6668;
  margin-bottom: 10px;
}

.user-stats34 .trend-icons {
  display: inline-flex;
  vertical-align: middle;
  gap: 2px;
}

.user-stats34 .trend-icons img {
  width: 14px;
  height: 14px;
  object-fit: contain;
}

.user-stats34 .no-trend {
  color: #999;
  font-size: 12px;
  margin-left: 2px;
}
.user-items34 {
  font-size: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  vertical-align: top;
}

.panel-header34 {
  display: flex;
  align-items: center; /* 确保所有子项垂直居中 */
  justify-content: space-between; /* 左右分布 */
  margin-bottom: 0;
  padding: 10px;
  margin: 0;
  width: 100%;
  gap: 2px; /* 子项间距 */
  background-color: #eee;
  height: 30px;
  color: #666;
}
.panel-header34 > span:first-child {
  display: flex;
  align-items: center;
}
/* 标签样式 */
.panel-header34 .label {
  font-weight: 500;
  font-size: medium;
  white-space: nowrap; /* 防止换行 */
  padding-left: 10px;
}
.panel-header34 .bi3{
  color: #fc6668;
}
.panel-header34 .bi2{
  color: #00a5db;
}
.panel-header34 .bi1{
  color: #078786;
}
/* 计数器样式 */
.panel-header34 .counter {
  /* 移除float */
  font-size: small;
  font-weight: normal;
  margin: 0;
  color: #999;
  
}

.stat-line34 {
  font-size:small;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 2px 10px 2px 0px;
}

.user-items34 img {
  height: 12px;
  width: 48px;
  gap: 5px;
  margin: 2px 10px 2px 0px;
}

.flower-balance {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  gap: 5px;
}

.guess-numbers {
  margin-bottom: 25px;
}

.number-section {
  margin-bottom: 20px;
}

.number-section h4 {
  margin-bottom: 10px;
  font-size: 16px;
  color: #333;
  border-bottom: 1px solid #eee;
  padding-bottom: 5px;
}

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

.number-box {
  display: inline-block;
  padding: 5px 10px;
  background: #f0f0f0;
  border-radius: 4px;
  font-weight: bold;
  font-size: 14px;
}

.interaction-panel {
  display: flex;
  justify-content: space-between;
  width: 700px;
  gap: 20px;
  margin: 20px;
}
.interaction-left,
.interaction-right {
  width: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  background: #f5f5f5;
  border: 1px solid #e4e4e4;
  border-radius: 8px;
  padding: 15px;

}
.like-users, .reward-users {
  margin: 10px;
  padding: 10px 10px 20px 10px;
  border-radius: 4px;

}

.sxpm-loading {
  text-align: center;
  padding: 40px;
  background: #f8f9fa;
  border-radius: 8px;
  margin: 20px auto; /* Changed from 20px 0 to auto for horizontal centering */
  width: 80%; /* Set a width */
  max-width: 600px; /* Optional: set a maximum width */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Add spinner styling if not already present */
.sxpm-loading .spinner {
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  border-top: 4px solid #3498db;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
  margin-bottom: 20px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid rgba(255,255,255,0.3);
  border-radius: 50%;
  border-top-color: #fff;
  animation: spin 1s ease-in-out infinite;
}

.icon-spinner {
  display: inline-block;
  margin-right: 5px;
}
.animate-spin {
  animation: spin 1s linear infinite;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.sxpm-btn[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

/* 期号信息容器 */

.period-info {
  height: 60px;
  display: flex;
  align-items: center;
  padding: 10px;
  background: #f5f5f5;
  border-radius: 5px;
  width: 100%;
  vertical-align: bottom;
  font-weight: 500;
  border-bottom: 1px solid var(--border-color);
  color: #666;
}

/* 号码显示区域 */
.lottery-numbers-display {
  display: flex;
  justify-content: flex-end; /* 确保整体靠右 */
  align-items: center;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
  gap: 2px; /* 所有子元素间距统一控制 */
}
.normal-numbers {
  display: flex;
  padding: 0;
  margin: 0;
  gap: 1px; /* 号码间最小间距 */
}

.special-numbers {
  display: flex;
  align-items: center;
  padding: 0;
  margin: 0; 
  gap: 1px;
  margin-left: 3px; /* +号与特别号码的间距 */
}

.no-selection {
  color: #999;
  font-size: 12px;

}
/* top号码显示区域 */
.lottery-numbers-display-top {
  display: flex;
  justify-content: left; /* 确保整体靠右 */
  align-items: left;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
  gap: 2px; /* 所有子元素间距统一控制 */
}
.normal-numbers-top {
  display: flex;
  align-items: left;
  padding: 0;
  margin: 0;
  gap: 1px;
  margin-left: 3px; /* +号与特别号码的间距 */
}

.special-numbers-top {
  display: flex;
  align-items: left;
  padding: 0;
  margin: 0;
  gap: 1px;
  margin-left: 2px; /* +号与特别号码的间距 */
}
.number-item-top {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lottery-number-icon-top {
  width: 28px !important;
  height: 28px !important;
  margin-bottom: 1px; /* 负值减少间距 */
}

.number-info-top {/* 顶部纳音 */
  font-size: 10px;
  color: #888;
  font-weight: 400;
  margin-top: 0px; /* 负值进一步减少间距 */
}

.period-top-row {
  display: flex;
  justify-content: space-between; /* 左右两端对齐 */
  align-items: center; /* 垂直居中 */
  width: 100%;
}
.period-info-line-top2 {
  display: flex;
  justify-content: space-between; /* 内容分散对齐 */
  align-items: center; /* 垂直居中 */
  width: 100%; /* 占据全部可用宽度 */
  margin-bottom: 0;
  font-size: small;
  padding-left: 5px;
  color: #888;
}
.period-info-line-top {
  margin-bottom: 0;
  font-size:small;
  text-align: left;
}
.period-info-line-top2 a {
  color: #888;
  font-size:small;
  cursor: pointer;
  text-decoration: none;
}
.period-info-line-top2 a:hover {
  color: #078786;
  font-size:small;
  cursor: pointer;
}
.period-info-line-top .more {
  margin-bottom: 0;
  font-size:small;
  text-align: center;
  padding: 0 10px 0 0;
}
.period-info-top {
  display: flex;
    align-items: center;
    padding: 10px;
    background: #f5f5f5;
    border-radius: 5px;
    width: 100%; /* 确保宽度充满容器 */
    vertical-align: bottom;
    font-weight: 500;
    border-bottom: 1px solid var(--border-color);
}

.plus-sign {
  margin: 0 1px; /* 减少间距 */
  font-size: 12px; /* 适当缩小 */
}

.period-left {
  display: flex;
  align-items: center;
  margin-right: 0;
  font-weight: 500;
  color: #078786;
  font-size: medium;
  max-width: 40%;
}
.period-serial2 {
  padding: 0 0 0 10px;

}
.period-serial {
  padding: 0 5px 0 0;
}
.period-spacer {
  display: flex;
    align-items: center;
    gap: 5px;
    margin-left: auto; /* 关键：自动左外边距推动元素靠右 */
    justify-content:center; /* 内容右对齐 */
    flex-shrink: 0; /* 防止缩小 */
}
.period-middle {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  width: fit-content;
  max-width: 40%;
  overflow: hidden;
}
.period-right {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  width: fit-content;
  max-width: 20%;
  overflow: hidden;
}
.period-right2 {
  display: flex;
  justify-content: center; /* 内容水平居中 */
  align-items: center;     /* 内容垂直居中 */
  gap: 5px;
  margin-left: auto;       /* 容器靠右 */
  width: fit-content;      /* 关键：让宽度适应内容 */
  max-width: 40%;         /* 防止溢出 */
  overflow: hidden; /* 防止内容溢出 */
}
.lottery-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.lottery-type {
  font-weight: bold;
  color: #333;
  font-weight: 300;
}

.open-date {
  color: #666;
  font-size: x-small;
  white-space: nowrap; 
}


.number-item {
  margin: 0;
  padding: 0;
  min-width: 24px; /* 缩小最小宽度 */
}

.lottery-number-icon {
  width: 24px !important; /* 强制缩小图标 */
  height: 24px !important;
  margin: 0;
}

.number-info {
  font-size: 12px !important; /* 缩小文字 */
  line-height: 1.2;
  margin-top: 0;
}

.separator {
  font-weight: bold;
  color: #333;
  margin: 0 3px;
}
/* 期号信息容器 */
/* 分页容器 */
.guess-pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 25px 0;
  padding: 10px 0;
  background: #f5f5f5;
  border-radius: 4px;
}

/* 分页按钮 - 匹配sort-btn样式 */
.page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: #666;
  text-decoration: none;
  font-size: small;
  padding: 5px 10px;
  height: 20px;
  border-radius: 4px;
  transition: all 0.3s;
  background: transparent;
  border: none;
  cursor: pointer;
}

/* 悬停效果 - 比sort-btn稍深 */
.page-link:hover {
  background: #e0e0e0;
  color: #333;
}

/* 当前页样式 - 与active状态匹配 */
.page-link.active {
  color: #fff;
  background: #666;
}

/* 禁用状态 */
.page-link.disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* 图标样式统一 */
.page-link i {
  font-size: 12px;
}

/* 上下页按钮特殊样式 */
.page-link.prev,
.page-link.next {
  min-width: 80px;
}
.sxpm-btn-post34 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 5px;
  background-color: #666;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: small;
  cursor: pointer;
  transition: all 0.3s;
  height: 25px;
  width: 80px;
  margin-left: 0; /* 移除原有左边距 */
  flex-shrink: 0; /* 防止按钮缩小 */
  white-space: nowrap; /* 禁止按钮文字换行 */
}
.sxpm-btn-post {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 5px;
  background-color: #666;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: small;
  cursor: pointer;
  transition: all 0.3s;
  height: 25px;
  width: 80px;
  margin-left: 0; /* 移除原有左边距 */
}
/* 悬停效果优化 */
.sxpm-btn-post:hover {
  background-color: #555;
  transform: translateY(-1px);
}
/* 禁用状态样式 */
.sxpm-btn-post.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.sxpm-btn-post34:hover:not(.disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.sxpm-btn-post34.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.interaction-count {
  display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 13px;
    color: #555;
    margin-top: 8px;
}
.count-item {
  display: flex;
  align-items: center;
  gap: 1px;
}
.count-separator {
  color: #ccc;
  padding: 0 2px;
}
.interaction-count strong {
  font-size: 14px;
  color: #078786;
  font-weight: bold;
}

.interaction-count img {
  width: 12px;
  height: 12px;
  object-fit: contain;
}
.like-btn,
.reward-btn {
   background-color: #078786;
   width: 120px;
   height: 30px;
   color: #f5f5f5;
}

.fa-1,
.fa-2,
.fa-3 {
  font-size:medium;
  margin: 0 5px;
  color: #666;
}

/* 在样式文件中添加 */
.no-participation-notice {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 20px;
    margin: 20px 0;
    display: flex;
    align-items: center;
}

.no-participation-notice .notice-icon {
    font-size: 32px;
    color: #6c757d;
    margin-right: 20px;
}

.no-participation-notice .notice-content h3 {
    color: #343a40;
    margin: 0 0 10px 0;
    font-size: 18px;
}

.no-participation-notice .notice-content p {
    color: #6c757d;
    margin: 0;
    font-size: 14px;
}

.no-record{
  padding: 10px;
  font-size: medium;
  color: #666;
}

.period-info-header{
  font-size: 18px;
  color: #666;
  padding: 10px;
}
.period-info-header .period-title {
  padding: 0;
  font-weight: 500;
  color: #078786;
  font-size: 16px;
}
.period-info-header .period-date {
  font-size: 12px;
  color: #999;
  padding: 0;
}

/* <开始修改> 资料申请表单样式 */
.material-application-form {
  max-width: 600px;
  margin: 20px auto;
  padding: 20px;
  background: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.material-application-form .form-group {
  margin-bottom: 15px;
}

.material-application-form label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.material-application-form input[type="text"],
.material-application-form input[type="checkbox"] {
  margin-right: 10px;
}

.material-application-form .btn-primary {
  background: #0073aa;
  color: white;
  border: none;
  padding: 8px 15px;
  border-radius: 3px;
  cursor: pointer;
}

.material-application-form .btn-primary:hover {
  background: #005d8c;
}

.alert {
  padding: 10px;
  margin: 10px 0;
  border-radius: 3px;
}

.alert-success {
  background: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.alert-warning {
  background: #fff3cd;
  color: #856404;
  border: 1px solid #ffeeba;
}
.material-add-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.material-application-wrapper {
  padding: 20px;
}

.section-title {
  color: #333;
  border-bottom: 2px solid #eee;
  padding-bottom: 10px;
  margin-bottom: 20px;
}

.form-notice {
  background: #f8f9fa;
  padding: 10px;
  margin-bottom: 20px;
  border-left: 4px solid #0073aa;
}

.alert {
  padding: 15px;
  margin-bottom: 20px;
  border-radius: 4px;
}

.alert-warning {
  background: #fff3cd;
  border-left: 4px solid #ffc107;
}

.alert-info {
  background: #e7f4ff;
  border-left: 4px solid #17a2b8;
}
.water-content-header2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 10px;
  padding-right: 10px;
}

.guess-info-link a, .guess-info-link .no-guess {
  font-size: 14px;
  padding: 6px 12px;
  border-radius: 4px;
  transition: all 0.3s;
}

.guess-info-link a {
  background: #3498db;
  color: white;
  text-decoration: none;
}

.guess-info-link a:hover {
  background: #2980b9;
  transform: translateY(-2px);
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.no-guess {
  background: #f8f9fa;
  color: #95a5a6;
  border: 1px solid #e0e0e0;
}

.guess-info-link i {
  margin-right: 5px;
}

/* <开始修改> - 竞猜贴帖子类型设置和图标样式 */
.post-type-setting-row {
  display: flex;
  align-items: center;
  margin: 10px 0;
  padding: 10px 15px;
  background: #f8f9fa;
  border-radius: 5px;
  border-left: 4px solid #078786;
}

.post-type-label {
  font-weight: bold;
  margin-right: 10px;
  color: #333;
  min-width: 80px;
}

.post-type-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.post-type-select {
  padding: 6px 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: white;
}

.save-post-type-btn {
  padding: 6px 12px;
  background: #078786;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.save-post-type-btn:hover {
  background: #066;
}

.save-post-type-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
}

/* 强制统一号码按钮样式 - 最高优先级 */
.period-top-info .period-info-line-bottom {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 4px !important;
  width: 100% !important;
  flex-wrap: nowrap !important;
}

.period-top-info .period-info-line-bottom .number-btn {
  margin: 0 2px !important;
  min-width: 28px !important;
  width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}

.period-top-info .period-info-line-bottom .number-btn .number-inner {
  display: block !important;
  line-height: 1 !important;
  font-size: 12px !important;
}

/* 资料贴图片垂直居中修复 */
.post-item.single-line {
    display: flex;
    align-items: center;
    min-height: 70px; /* 确保有足够的高度容纳图片 */
}

.post-item.single-line .post-title {
    display: flex;
    align-items: center;
    flex: 1;
    margin: 0;
    padding: 8px 0;
}

.material-icon-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-right: 12px;
    flex-shrink: 0; /* 防止图片容器被压缩 */
}

.material-thumbnail {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid #e0e0e0;
}

.material-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 12px;
    color: #999;
}

.post-item.single-line .post-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin: 0;
}

/* 确保整个列表项布局协调 */
.post-list-container .post-item.single-line {
    border-bottom: 1px solid #eee;
    padding: 8px 0;
}

.post-list-container .post-item.single-line:last-child {
    border-bottom: none;
}

/* 手机端适配 */
@media (max-width: 768px) {
  /* 第一行 stats-container 手机端适配 */
  .stats-container {
    gap: 8px;
    font-size: 11px;
    padding: 4px 8px;
  }
  
  .stats-container .label,
  .stats-container .label2,
  .stats-container .label3 {
    font-size: 11px;
  }
  
  /* 生肖统计改为3行，每行4个 */
  .data-zodiac-grid {
    grid-template-columns: repeat(4, 1fr); /* 手机端：4列 */
    gap: 6px;
    padding: 8px;
  }
  
  .zodiac-item {
    padding: 6px;
  }
  
  .data-zodiac-name {
    font-size: 13px;
  }
  
  .zodiac-count, .zodiac-percent {
    font-size: 11px;
  }
  
  /* 保持原有字体大小，只调整布局 */
  .number-btn {
    width: 50px !important;
    height: 50px !important;
  }
  
  .zodiac-name {
    font-size: 18px !important;
  }
  
  .guess-zodiac-column {
    padding: 2px;
  }
  
  /* 调整选中数字显示区域 */
  .selected-numbers {
    grid-template-columns: repeat(6, minmax(50px, 1fr));
    gap: 4px;
    padding: 8px;
  }
  
  .selected-panel .number-btn,
  .challenge-panel .number-btn,
  .normal-panel .number-btn {
    width: 45px !important;
    height: 22px !important;
  }
  
  /* 调整确认页面的网格布局 */
  .confirm-zodiac-grid {
    grid-template-columns: repeat(6, minmax(50px, 1fr));
    gap: 3px;
  }
  
  /* 确保整个容器在手机端居中显示 */
  .sxpm-guess-wrapper {
    max-width: 100%;
    margin: 0 auto;
  }
  
  /* 调整操作栏在手机端的显示 */
  .action-bar-pick {
    flex-wrap: wrap;
    gap: 10px;
  }
  
  .total-counter {
    order: 1;
  }
  
  .flex-spacer-pick {
    order: 2;
    flex-basis: 100%;
    height: 0;
  }
  
  .next-step {
    order: 3;
    margin-left: auto;
  }
  
  /* stats-container2 手机端适配 */
  .stats-container2 {
    font-size: 11px;
    padding: 4px 8px;
  }
  
  .stats-container2 .stats-label {
    font-size: 11px;
    margin-right: 8px;
  }
  
  .stats-container2 .stats-content {
    font-size: 11px;
  }
}

/* 更小屏幕的微调 */
@media (max-width: 480px) {
  .data-zodiac-grid {
    grid-template-columns: repeat(4, 1fr); /* 保持4列 */
    gap: 4px;
    padding: 6px;
  }
  
  .zodiac-item {
    padding: 4px;
  }
  
  .data-zodiac-name {
    font-size: 12px;
  }
  
  .zodiac-count, .zodiac-percent {
    font-size: 10px;
  }
  
  .number-btn {
    width: 45px !important;
    height: 45px !important;
  }
  
  .zodiac-name {
    font-size: 16px !important;
  }
  
  .selected-numbers {
    grid-template-columns: repeat(6, minmax(45px, 1fr));
    gap: 3px;
    padding: 6px;
  }
  
  .selected-panel .number-btn,
  .challenge-panel .number-btn,
  .normal-panel .number-btn {
    width: 40px !important;
    height: 20px !important;
  }
  
  /* 第一行进一步缩小 */
  .stats-container {
    font-size: 10px;
    gap: 6px;
  }
  
  .stats-container .label,
  .stats-container .label2,
  .stats-container .label3 {
    font-size: 10px;
  }
}

/* stats-container2 相关样式 */
.stats-container2 .winner-stats-wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.stats-container2 .winner-stats-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.stats-container2 .winner-stat {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    white-space: nowrap;
    padding-left:6px;
}

@media (max-width: 768px) {
    .stats-container2 .winner-stats-wrapper {
        gap: 6px;
    }
    
    .stats-container2 .winner-stats-grid {
        gap: 8px;
        justify-content: flex-start;
    }
    
    .stats-container2 .winner-stat {
        flex: 0 0 auto;
    }
    
    /* 确保在超小屏幕上也能正常显示 */
    .stats-container2 {
        padding: 8px;
    }
}

@media (max-width: 480px) {
    .stats-container2 .winner-stats-grid {
        gap: 6px;
    }
    
    .stats-container2 .winner-stat {
        font-size: 12px;
    }
    
    .stats-container2 strong {
        font-size: 13px;
    }
}

/* 手机端样式 */
@media (max-width: 768px) {
  .period-info {
    flex-direction: column; /* 改为垂直排列 */
    height: auto; /* 高度自适应 */
    padding: 15px 10px; /* 增加内边距 */
    gap: 12px; /* 行间距 */
    align-items: stretch; /* 拉伸子元素宽度 */
  }

  .period-left {
    max-width: 100%; /* 取消宽度限制 */
    width: 100%;
    justify-content: flex-start; /* 左对齐 */
    margin-right: 0;
    order: 1; /* 第一行 */
    padding: 5px 0;
    font-size: 16px; /* 稍微调大字体 */
  }

  .period-middle {
    max-width: 100%; /* 取消宽度限制 */
    width: 100%;
    justify-content: center; /* 居中对齐 */
    margin-left: 0;
    order: 2; /* 第二行 */
    padding: 8px 0;
    border-top: 1px solid #ddd; /* 添加分隔线 */
    border-bottom: 1px solid #ddd;
  }

  .period-right {
    max-width: 100%; /* 取消宽度限制 */
    width: 100%;
    justify-content: center; /* 居中对齐 */
    margin-left: 0;
    order: 3; /* 第三行 */
    padding: 5px 0;
  }

  /* 调整手机端期号选择器的样式 */
  .sort-options-period {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .sort-btn-period {
    width: 80%; /* 让选择器更宽 */
    max-width: 280px;
    font-size: 14px;
    padding: 8px 12px;
  }

  /* 调整开奖日期显示 */
  .open-date {
    font-size: 14px;
    margin-left: 10px;
  }

  /* 调整期号显示 */
  .period-serial2,
  .period-serial {
    font-size: 16px;
  }
}

/* 更小屏幕的进一步优化 */
@media (max-width: 480px) {
  .period-info {
    padding: 12px 8px;
    gap: 10px;
  }

  .period-left {
    font-size: 15px;
    flex-wrap: wrap; /* 允许换行 */
    gap: 5px;
  }

  .period-middle {
    padding: 6px 0;
  }

  .period-right {
    padding: 4px 0;
  }

  .sort-btn-period {
    width: 90%;
    font-size: 13px;
    padding: 6px 10px;
  }

  .open-date {
    font-size: 13px;
  }

  .period-serial2,
  .period-serial {
    font-size: 15px;
  }
}

/* 确保开奖号码在手机端也能正常显示 */
@media (max-width: 768px) {
  .period-middle .lottery-numbers {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }
  
  .period-middle .number-ball {
    width: 32px;
    height: 32px;
    line-height: 32px;
    font-size: 14px;
  }
}

/* 手机端样式调整 */
@media (max-width: 768px) {
    /* 生肖网格改为2行6列 */
    .zodiac-grid {
        grid-template-columns: repeat(6, 1fr);
        gap: 10px;
    }
    
    /* 调整生肖列样式 */
    .guess-zodiac-column {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    /* 生肖名称样式调整 */
    .zodiac-name {
        font-size: 14px;
        font-weight: bold;
        margin-bottom: 5px;
        text-align: center;
        white-space: nowrap;
    }
    
    /* 数字按钮容器调整 */
    .number-btn-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px;
        width: 100%;
    }
    
    /* 数字按钮调整 */
    .number-btn {
        width: 32px;
        height: 32px;
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 1px;
    }
    
    /* 面板内边距调整 */
    .panel-content {
        padding: 8px;
    }
    
    /* 操作栏在手机端的调整 */
    .action-bar-pick {
        flex-direction: column;
        gap: 10px;
        padding: 10px;
    }
    
    .flex-spacer-pick {
        order: 3;
        width: 100%;
    }
    
    .total-counter {
        order: 1;
        text-align: center;
    }
    
    .next-step {
        order: 2;
        width: 100%;
    }
}

/* 超小屏幕手机优化 */
@media (max-width: 480px) {
    .zodiac-grid {
        grid-template-columns: repeat(6, 1fr);
        gap: 8px;
    }
    
    .number-btn {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }
    
    .zodiac-name {
        font-size: 12px;
    }
    
    .panel-header {
        font-size: 14px;
        padding: 8px 10px;
    }
    
    .bi1, .bi2, .bi3 {
        margin-right: 4px;
    }
}

/* 手机端交易列表响应式样式 */
@media (max-width: 768px) {
    .trades-list {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .trade-table {
        min-width: 800px; /* 确保表格有足够宽度显示所有列 */
    }
    
    .trade-table2 {
        min-width: 700px; /* 小红花记录表格的最小宽度 */
    }
    
    /* 确保表格容器在手机端正常显示 */
    .trades-list table {
        width: 100%;
        table-layout: auto;
    }
    
    /* 手机端表格字体适当缩小 */
    .trade-table th,
    .trade-table td {
        padding: 8px 6px;
        font-size: 14px;
        white-space: nowrap;
    }
    
    .trade-table2 th,
    .trade-table2 td {
        padding: 8px 4px;
        font-size: 13px;
        white-space: nowrap;
    }
}