/* 基础与背景 */
body, html {
  background: rgba(0,0,0,0.05);
  padding: 0;
  margin: 0;
}

/* 容器 */
.reader_box {
  max-width: 1000px;
  margin: 0 auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(255,255,255,0.5);
  padding: 0 0 0 0;
  border-radius: 25px;
  border: 3px solid #7700f9;
  font-family: microsoft yahei, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  box-shadow: 0 0 20px rgba(0,0,0,0.5);
}

.title { text-align: center; }

.title_txtbox {
  font-size: 50px;
  font-weight: 700;
  line-height: 85px;
  padding-bottom: 20px;
  background: #7700f9;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  color: #f1f1f1;
}

/* 正文区 */
.rft_1 { text-align: left; font-size: 22px; }
.rft_1 p { padding-left: 50px; padding-right: 50px; }
.rft_1 span { color: #30C; font-weight: 700; display: inline; }

/* 底部区 */
.com-recbtm { text-align: center; }
.com-recbtm .font { font-size: 14px; }

.reader_line { height: 0; margin: 8px 0; }

/* 动效按钮：去除白色外发光，固定纯白字体，优化渲染 */
@-webkit-keyframes bluess {
  from {
    background-color: #2f7df6;
    color: #fff;
    box-shadow: 0 0 0 rgba(0,0,0,0);
  }
  50% {
    background-color: #2f7df6;
    color: #fff;
    box-shadow: 0 0 8px rgba(0,0,0,0.25);
  }
  to {
    background-color: #2f7df6;
    color: #fff;
    box-shadow: 0 0 0 rgba(0,0,0,0);
  }
}
@-webkit-keyframes greenPulse {
  from { background-color: #ff0000; color: #fff; box-shadow: 0 0 0 rgba(0,0,0,0); }
  50%  { background-color: #f53f00; color: #fff; box-shadow: 0 0 8px rgba(0,0,0,0.25); }
  to   { background-color: #ff0000; color: #fff; box-shadow: 0 0 0 rgba(0,0,0,0); }
}

a.button {
  -webkit-animation-iteration-count: infinite;
  text-decoration: none;
  padding-left: 12px;
  padding-right: 0;
  color: #fff !important;
}
.green, .blue {
  display: inline-block;
  -webkit-animation-duration: 1.0s;
  padding: 8px 10px;
  border-radius: 40px !important;
  font-size: 25px;
  font-weight: 800; /* 降低极粗导致的字形内“发白” */
  max-width: none;
  margin: 10px auto;
  font-family: microsoft yahei, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
.green { -webkit-animation-name: greenPulse; }
.blue { -webkit-animation-name: bluess; }

/* 自适应 */
@media screen and (max-width: 1000px) {
  .reader_box {
    max-width: 90%;
    margin: 0 auto;
    position: absolute;
    left: 0;
    right: 0;
    background: rgba(255,255,255,0.5);
    padding: 20px 0 20px 0;
    border-radius: 25px;
    border: 0 solid #7700f9;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
  }
  .title_txtbox {
    font-size: 25px;
    font-weight: 700;
    line-height: 70px;
    padding-bottom: 10px;
    background: #7700f9;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    color: #f1f1f1;
  }
  .rft_1 { padding: 15px; font-size: 16px !important; text-align: left; font-weight: 1000; }
  .rft_1 span { display: block; text-align: left; font-size: 20px; font-weight: 1000; margin-bottom: 10px; }
  .rft_1 p { padding-left: 10px; padding-right: 10px; }
  a.button { -webkit-animation-iteration-count: infinite; text-decoration: none; padding-left: 25px; padding-right: 25px; margin: 0 auto; }
}

a.button{white-space:nowrap;}


/* 针对 Telegram 按钮单独加长蓝底，覆盖各断点 */
a.button.telegram { padding-right: 48px !important; padding-left: 18px !important; }


/* 合理右侧内边距：随字号自适应，避免过长或过短 */
a.button.telegram { padding-right: calc(1em + 6px) !important; padding-left: 16px !important; }


/* 按钮组：水平居中并排，合理间距 */
.actions { display: flex; justify-content: center; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 0 16px; }
.actions .button { white-space: nowrap; }
@media (max-width: 420px) { .actions { gap: 8px; } }

/* 按钮右侧长度微调：TG 略短、QQ 略长 */
a.button.telegram { padding-right: 20px !important; }
a.button.qq { padding-right: 32px !important; }


/* 手机端优化（≤480px）：取消绝对定位，按钮不溢出 */
@media (max-width: 480px) {
  .reader_box { position: relative; top: auto; margin: 12px auto 16px; }
  .actions { gap: 10px; padding: 8px 12px 16px; }
  .actions .button { font-size: 20px; padding: 10px 14px; border-radius: 36px !important; max-width: calc(100vw - 48px); }
  a.button.telegram { padding-right: calc(1em + 4px) !important; }
  a.button.qq { padding-right: calc(1em + 6px) !important; }
  .rft_1 p { padding-left: 14px; padding-right: 14px; word-break: break-word; }
}