.news-article-news-link {
  display: inline-flex;
  margin-bottom: 4px;
  text-decoration: none;
  transition: color .2s ease
}

.news-article-news-link:hover {
  color: #a8bcff
}

.news-article-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 12px
}

.news-article-tags span {
  padding: 5px 10px;
  border: 1px solid rgba(111, 140, 255, .24);
  border-radius: 999px;
  background: rgba(111, 140, 255, .09);
  color: #b7c7ff;
  font-size: 12px;
  line-height: 1.3
}

.news-article-cover {
  width: min(100%, 1050px);
  max-height: 480px;
  margin: 0 auto 30px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #101b2e
}

.news-article-cover img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 480px;
  object-fit: cover;
  object-position: center
}

.comment-author {
  width: max-content;
  max-width: 100%;
  overflow: hidden;
  color: #e8eefb;
  font-size: 13px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap
}

.comment-author:hover {
  color: var(--cyan)
}

.comment-new {
  animation: comment-in .45s cubic-bezier(.22, 1, .36, 1) both
}

.comment-error {
  margin: 0 !important
}

.comment-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  min-width: 0
}

.comment-delete-form {
  display: flex;
  align-items: center;
  width: max-content;
  margin-top: 6px
}

.comment-delete-button {
  padding: 2px 6px;
  border: 1px solid #77465c;
  border-radius: 5px;
  background: transparent;
  color: #d993aa;
  font: 700 10px/1.2 Arial, "Helvetica Neue", sans-serif;
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease, color .2s ease
}

.comment-delete-button:hover {
  border-color: #e27496;
  background: #7e2f4b33;
  color: #ffb3c7
}

.comment-delete-button:disabled {
  cursor: wait;
  opacity: .55
}

.comment-delete-form .comment-error {
  margin-left: 4px !important;
  font-size: 10px
}

.news-list-page,
.news-article-page { --cyan: #61d3ff; --blue: #91a5ff; }
.news-list-page > .page-header {
  min-height: 0;
  margin: 0 0 16px;
  padding: 16px 20px;
  border-color: var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: none;
  animation: none;
}
.news-article-page > .news-article-header {
  width: min(100%, 1050px);
  margin: 18px auto 24px;
  padding: 18px 22px;
  border-color: var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: none;
  text-align: left;
}
.news-article-page .news-article-header h1 {
  max-width: 100%;
  margin: 8px 0 10px;
  color: var(--text);
  font-size: clamp(26px, 3.2vw, 38px);
  line-height: 1.14;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.news-list-page > .page-header h1 { margin: 0; }
.news-list-page > .page-header p { margin: 6px 0 0; }
.news-article-news-link:hover,
.comment-author:hover { color: var(--accent); }
.news-article-tags span {
  border-color: var(--line-strong);
  border-radius: var(--r-md);
  background: var(--surface-raised);
  color: var(--muted);
}
.news-article-cover { border-color: var(--line); border-radius: var(--r-lg); background: var(--surface); }
.comment-author { color: var(--text); }
.comment-delete-button { border-color: var(--line-strong); border-radius: var(--r-md); color: var(--muted); font-family: var(--font-ui); }
.comment-delete-button:hover { border-color: var(--offline); background: var(--surface-raised); color: var(--offline); }

@media (prefers-reduced-motion: reduce) {
  .news-article-news-link,
  .comment-delete-button { transition: none; }
  .comment-new { animation: none; }
}

@media (max-width: 700px) {
  .news-list-page > .page-header { padding: 14px 16px; }
  .news-article-page > .news-article-header { margin: 14px auto 18px; padding: 14px 16px; }
  .news-article-page .news-article-header h1 { font-size: clamp(24px, 7vw, 32px); }
}