:root {
  --hf-bg: #f3ead2;
  --hf-paper: #fff8e8;
  --hf-red: #7f1616;
  --hf-red-dark: #5d0f0f;
  --hf-gold: #d8bd74;
  --hf-text: #2b2113;
  --hf-muted: #6f6046;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--hf-bg);
  color: var(--hf-text);
  font-family: Arial, "Microsoft YaHei", "PingFang SC", "Noto Sans SC", sans-serif;
  line-height: 1.5;
}

a {
  color: #7f1616;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.hf-wrap {
  width: min(980px, calc(100% - 16px));
  margin: 0 auto;
}

.hf-header {
  background: linear-gradient(#8b2020, #5d1111);
  border-bottom: 3px solid var(--hf-gold);
  color: #fff;
}

.hf-header-inner {
  min-height: 58px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.hf-logo {
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: .02em;
}

.hf-logo:hover {
  text-decoration: none;
}

.hf-subtitle {
  color: #ffe7a1;
  font-size: 14px;
}

.hf-cache-label {
  margin-left: auto;
  padding: 3px 8px;
  border: 1px solid rgba(255,255,255,.38);
  border-radius: 999px;
  color: #fff3bf;
  font-size: 12px;
}

.hf-section {
  margin: 10px 0;
  padding: 8px;
  background: var(--hf-paper);
  border: 1px solid var(--hf-gold);
  border-radius: 8px;
}

.hf-section h2 {
  margin: 0 0 8px;
  padding: 5px 8px;
  background: linear-gradient(#8b2020, #6a1212);
  color: #fff8dc;
  border-radius: 6px;
  font-size: 16px;
  line-height: 1.25;
  font-weight: 700;
}

.hf-banner-grid {
  display: grid;
  grid-template-columns: repeat(3, 250px) !important;
  gap: 6px;
  justify-content: center;
  align-items: start;
}

.hf-banner {
  display: block;
  width: 250px !important;
  height: 60px !important;
  overflow: hidden;
  border-radius: 6px;
  border: 1px solid #b9953c;
  background: #f7e5ad;
}

.hf-banner-large {
  height: 120px !important;
}

.hf-banner img {
  display: block;
  width: 250px !important;
  height: 60px !important;
  object-fit: cover;
  border-radius: 6px;
}

.hf-banner-large img {
  height: 120px !important;
}

.hf-thread-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.hf-thread-card {
  display: block;
  padding: 8px;
  background: #fffdf5;
  border: 1px solid #ead79b;
  border-radius: 6px;
  color: var(--hf-text);
}

.hf-thread-card strong {
  display: block;
  font-size: 14px;
  line-height: 1.35;
}

.hf-thread-card span {
  display: block;
  margin-top: 4px;
  color: var(--hf-muted);
  font-size: 12px;
}

.hf-footer {
  margin-top: 14px;
  padding: 14px 0;
  color: var(--hf-muted);
  font-size: 12px;
  text-align: center;
}

@media (max-width: 820px) {
  .hf-wrap {
    width: 100%;
    padding-left: 4px;
    padding-right: 4px;
  }

  .hf-section {
    margin: 8px 4px;
    padding: 6px;
  }

  .hf-header-inner {
    padding: 8px 4px;
  }

  .hf-cache-label {
    margin-left: 0;
  }

  .hf-banner-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 3px;
    justify-content: stretch;
  }

  .hf-banner {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 250 / 60;
    border-radius: 5px;
  }

  .hf-banner-large {
    aspect-ratio: 250 / 120;
  }

  .hf-banner img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    border-radius: 5px;
  }

  .hf-thread-list {
    grid-template-columns: 1fr;
  }

  .hf-logo {
    font-size: 20px;
  }

  .hf-subtitle {
    font-size: 12px;
  }
}

/* v3 cache notice */
.hf-cache-notice {
  margin: 10px 0;
  padding: 8px 10px;
  background: #fff4cf;
  border: 1px solid #d8bd74;
  border-radius: 8px;
  color: #5f4515;
  font-size: 14px;
}

/* v3 thread/content overflow protection */
main,
.hf-wrap,
.hf-section,
.hf-post,
.hf-post-body,
.hf-post-content,
.hf-thread-body,
.hf-content,
.hf-media-grid {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.hf-post img,
.hf-post-body img,
.hf-post-content img,
.hf-thread-body img,
.hf-content img,
.hf-media-grid img,
article img {
  max-width: 100% !important;
  height: auto !important;
  display: block;
  object-fit: contain;
}

.hf-post video,
.hf-post-body video,
.hf-post-content video,
.hf-thread-body video,
.hf-content video,
.hf-media-grid video,
article video {
  max-width: 100% !important;
  height: auto !important;
}

body {
  overflow-x: hidden;
}

@media (max-width: 820px) {
  .hf-cache-notice {
    margin: 8px 4px;
    font-size: 13px;
  }

  .hf-post img,
  .hf-post-body img,
  .hf-post-content img,
  .hf-thread-body img,
  .hf-content img,
  .hf-media-grid img,
  article img {
    width: auto !important;
    max-width: 100% !important;
  }
}