/* 地址发布页样式 —— 黄果短剧
 *
 * ── 为什么是「黑底 + 白卡片」而不是全暗色 ──
 *
 * 参照的是线上版（huangguoai.pages.dev）的实际样式：body 是黑底，
 * 每个信息块是一张白卡片（#fff、圆角 10px、宽 500px）。
 *
 * 这个配色不是审美选择，而是**功能性**的：发布页是「域名被墙时的最后入口」，
 * 用户往往是慌着找地址进来的。白卡片 + 深灰字（#343A40/#6C757D）在
 * 任何环境下的对比度都最高，截图收藏后也最清楚。
 *
 * 之前这里做过一版全暗色（#0d0d0f 底 + #17171b 卡片），看着更「现代」，
 * 但与线上不一致，而且暗色下正文只有 #c9c9cf，截图压缩后容易糊。
 */
* {
  padding: 0;
  margin: 0;
  background-color: #000000;
}

body {
  background-color: #f8f9fa;
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC",
    "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC",
    "WenQuanYi Micro Hei", sans-serif;
}

/* 卡片内部所有文字元素回到白底 —— 上面的 `*` 把背景刷成了黑色，
   不覆盖的话白卡片里的每一行都会是黑块。
   这是线上 CSS 的原始写法，保留是为了「与线上像素级一致」；
   改这里要先确认卡片内没有别的需要黑底的元素。 */
ul, li, a, h4, span, font, b {
  background-color: #ffffff;
}

#main {
  margin: 30px auto;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.field {
  width: 500px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: #6c757d;
  font-size: 16px;
  padding: 15px;
  margin: 5px auto;
  border-radius: 10px;
}

.field .title {
  margin-bottom: 15px;
  font-weight: bold;
  color: #343a40;
  text-align: center;
  line-height: 1.6;
}

/* 注意事项这类长文本块左对齐：居中排版时长句每行起点都不同，
   读起来要不停重新找行首。 */
.field.desc ul > li {
  text-align: left;
}

ul > li {
  margin-bottom: 10px;
  list-style-type: none;
  text-align: center;
  word-break: break-all;
}

/* 说明性质的小字（如「请使用 https:// 协议访问」）压暗一档 */
ul > li.text {
  font-size: 14px;
}

a, a:active, a:hover, a:focus, a:visited {
  color: inherit;
  text-decoration: none;
}

.brand {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  color: #000;
  font-size: 30px;
  font-weight: 200;
  cursor: pointer;
  margin-bottom: 10px;
}

.brand span {
  color: #ed2333;
  font-weight: 200;
}

.brand span.flag {
  color: #fff;
  background: #ed2333;
  border-radius: 0.25rem;
  font-size: 16px;
  font-weight: bold;
  display: inline-block;
  padding: 0 5px;
  margin-left: 5px;
  line-height: 30px;
}

/* 窄屏：卡片撑满并去掉横向内距，让长 URL 有更多横向空间 */
@media (max-width: 500px) {
  #main {
    padding: 0 5px;
  }
  .field {
    width: 100%;
    padding: 15px 0;
  }
  .field.desc ul {
    margin: 0 15px;
  }
  .field.desc ul > li {
    text-align: left;
  }
}