:root {
  --blog-bg-main: #0d1016;
  --blog-bg-soft: #151a23;
  --blog-line: rgba(212, 175, 55, 0.24);
  --blog-line-strong: rgba(212, 175, 55, 0.42);
  --blog-text: #f3f5f8;
  --blog-muted: #a4adba;
  --blog-gold-2: #efcc62;
}

body {
  background:
    radial-gradient(1100px 560px at 52% -8%, rgba(212, 175, 55, 0.2), rgba(212, 175, 55, 0) 66%),
    radial-gradient(760px 400px at 105% 110%, rgba(212, 175, 55, 0.1), rgba(212, 175, 55, 0) 64%),
    linear-gradient(180deg, #11151d 0%, var(--blog-bg-main) 48%, #090c11 100%);
  color: var(--blog-text);
}

.blog-wrap {
  width: min(1100px, 95vw);
  margin: 22px auto 34px;
  display: grid;
  gap: 16px;
}

.blog-hero,
.blog-list-panel,
.article-shell {
  border: 1px solid var(--blog-line);
  background: linear-gradient(155deg, rgba(15, 20, 29, 0.94), rgba(10, 13, 19, 0.9));
}

.blog-back {
  width: fit-content;
}

.blog-muted {
  color: var(--blog-muted);
}

.blog-list {
  display: grid;
  gap: 12px;
}

.sponsor-panel {
  border: 1px solid var(--blog-line-strong);
  background: linear-gradient(145deg, rgba(212, 175, 55, 0.12), rgba(12, 16, 23, 0.95));
}

.sponsor-kicker {
  color: #f0cd76;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}

.sponsor-cta {
  width: fit-content;
}

.blog-card {
  display: grid;
  grid-template-columns: 250px 1fr;
  border: 1px solid var(--blog-line);
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.015));
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.blog-card:hover {
  border-color: var(--blog-line-strong);
  transform: translateY(-2px);
}

.blog-card-image {
  width: 100%;
  height: 100%;
  min-height: 180px;
  object-fit: cover;
  display: block;
}

.blog-card-content {
  padding: 12px;
  display: grid;
  gap: 8px;
  background: rgba(10, 13, 19, 0.96);
}

.blog-card-content h3 {
  color: var(--blog-gold-2);
  line-height: 1.35;
  max-height: calc(1.35em * 2);
  overflow: hidden;
}

.blog-card-excerpt {
  color: #e4e9f0;
  line-height: 1.45;
  max-height: calc(1.45em * 2);
  overflow: hidden;
}

.blog-card-date,
.article-date {
  color: #f0cd76;
  font-size: 0.9rem;
}

.blog-card-author,
.article-author {
  color: #9ecaf8;
  font-size: 0.86rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.verified-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid rgba(56, 189, 248, 0.45);
  background: rgba(56, 189, 248, 0.16);
  color: #7dd3fc;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 7px;
  margin-left: 6px;
}

.admin-verified-icon {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #1d9bf0;
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 0 0 1px rgba(29, 155, 240, 0.45);
}

.article-head-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.article-content {
  display: grid;
  gap: 14px;
}

.article-utility {
  display: flex;
  justify-content: flex-end;
}

.share-btn {
  width: fit-content;
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

.article-cover-wrap {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--blog-line);
  background: #0b0f15;
}

.article-cover-wrap img {
  display: block;
  width: 100%;
  max-height: 420px;
  object-fit: cover;
}

.article-content h1 {
  color: var(--blog-gold-2);
}

.article-excerpt {
  color: #e4e9f0;
  line-height: 1.6;
  font-size: 1.05rem;
}

.article-body h2 {
  margin-bottom: 8px;
}

.article-body p {
  line-height: 1.65;
  color: #dbe1eb;
  white-space: pre-wrap;
}

.sponsor-channel-box {
  border: 1px solid var(--blog-line-strong);
  border-radius: 12px;
  padding: 12px;
  background: linear-gradient(145deg, rgba(56, 189, 248, 0.1), rgba(12, 16, 23, 0.95));
  display: grid;
  gap: 8px;
}

.comments-section {
  margin-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 14px;
  display: grid;
  gap: 12px;
}

.comment-form {
  display: grid;
  gap: 8px;
}

.comment-form input,
.comment-form textarea {
  width: 100%;
  background: var(--blog-bg-soft);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--blog-text);
  border-radius: 12px;
  padding: 12px;
  font-size: 0.95rem;
}

.comment-form textarea {
  resize: vertical;
}

.comment-form input:focus,
.comment-form textarea:focus {
  outline: none;
  border-color: var(--blog-line-strong);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.16);
}

.comments-list-wrap {
  display: grid;
  gap: 10px;
}

.comments-list {
  display: grid;
  gap: 8px;
}

.comment-item {
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: 10px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.03);
}

.comment-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.comment-item-head span {
  font-size: 0.82rem;
  color: var(--blog-muted);
}

.comment-item p {
  white-space: pre-wrap;
  line-height: 1.55;
}

.discover-section {
  margin-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 14px;
  display: grid;
  gap: 10px;
}

.discover-kicker {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: #f0cd76;
}

.faq-item {
  border: 1px solid rgba(212, 175, 55, 0.24);
  border-radius: 10px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.03);
}

.faq-item summary {
  cursor: pointer;
  font-weight: 600;
}

.faq-item p {
  margin-top: 8px;
  color: #dbe1eb;
  line-height: 1.55;
}

.discover-cta-box {
  border: 1px solid var(--blog-line-strong);
  border-radius: 12px;
  padding: 14px;
  background: linear-gradient(145deg, rgba(212, 175, 55, 0.12), rgba(12, 16, 23, 0.95));
  display: grid;
  gap: 10px;
}

.discover-line {
  line-height: 1.6;
}

@media (max-width: 860px) {
  .blog-card {
    grid-template-columns: 1fr;
  }

  .blog-card-image {
    min-height: 170px;
    max-height: 170px;
  }
}

@media (max-width: 520px) {
  .blog-wrap {
    width: min(1100px, 94vw);
    margin-top: 14px;
  }

  .blog-back {
    width: 100%;
    justify-content: center;
  }

  .sponsor-cta {
    width: 100%;
  }

  .blog-card-content {
    padding: 10px;
    gap: 6px;
  }

  .blog-card-excerpt {
    font-size: 0.93rem;
  }
}