.cod-comments {
  --cod-comments-bg: #0b0b11;
  --cod-comments-panel: #14141e;
  --cod-comments-panel-2: #1b1a25;
  --cod-comments-text: #e8e1d2;
  --cod-comments-muted: #b8ad98;
  --cod-comments-accent: #d6b077;
  --cod-comments-line: rgba(214, 176, 119, 0.28);
  box-sizing: border-box;
  width: min(100% - 2rem, 920px);
  margin: 3.5rem auto 2rem;
  padding: clamp(1.1rem, 3vw, 2rem);
  color: var(--cod-comments-text);
  background: linear-gradient(145deg, var(--cod-comments-panel), var(--cod-comments-bg));
  border: 1px solid var(--cod-comments-line);
  border-radius: 0.85rem;
  box-shadow: 0 1.2rem 3rem rgba(0, 0, 0, 0.32);
  font-family: Georgia, 'Times New Roman', serif;
  line-height: 1.6;
}

.cod-comments *, .cod-comments *::before, .cod-comments *::after { box-sizing: border-box; }
.cod-comments__header { border-bottom: 1px solid var(--cod-comments-line); padding-bottom: 1rem; }
.cod-comments__eyebrow { margin: 0 0 0.3rem; color: var(--cod-comments-accent); font: 700 0.75rem/1.2 system-ui, sans-serif; letter-spacing: 0.14em; text-transform: uppercase; }
.cod-comments__title { margin: 0; color: var(--cod-comments-text); font-size: clamp(1.45rem, 4vw, 2rem); line-height: 1.25; }
.cod-comments__intro, .cod-comments__privacy { color: var(--cod-comments-muted); }
.cod-comments__intro { margin: 0.65rem 0 0; }
.cod-comments__list { display: grid; gap: 0.9rem; margin: 1.25rem 0 1.75rem; }
.cod-comments__empty { margin: 0; padding: 1rem; color: var(--cod-comments-muted); background: rgba(255, 255, 255, 0.025); border-left: 3px solid var(--cod-comments-line); }
.cod-comments__comment { padding: 1rem; background: var(--cod-comments-panel-2); border: 1px solid var(--cod-comments-line); border-radius: 0.55rem; }
.cod-comments__comment--reply { margin-left: clamp(1rem, 6vw, 3.5rem); border-left: 3px solid var(--cod-comments-accent); }
.cod-comments__comment-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.4rem 1rem; }
.cod-comments__author { color: var(--cod-comments-accent); }
.cod-comments__time { color: var(--cod-comments-muted); font: 0.78rem/1.5 system-ui, sans-serif; }
.cod-comments__body { margin: 0.65rem 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.cod-comments__form { display: grid; gap: 1rem; padding-top: 1.2rem; border-top: 1px solid var(--cod-comments-line); }
.cod-comments__form-title { margin: 0; color: var(--cod-comments-text); }
.cod-comments__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.cod-comments__field { display: grid; gap: 0.35rem; }
.cod-comments__field--wide { width: 100%; }
.cod-comments__label { color: var(--cod-comments-muted); font: 600 0.82rem/1.4 system-ui, sans-serif; }
.cod-comments input, .cod-comments textarea {
  width: 100%;
  color: var(--cod-comments-text);
  background: #09090e;
  border: 1px solid var(--cod-comments-line);
  border-radius: 0.35rem;
  padding: 0.75rem;
  font: inherit;
}
.cod-comments input:focus, .cod-comments textarea:focus, .cod-comments button:focus-visible { outline: 3px solid rgba(214, 176, 119, 0.42); outline-offset: 2px; }
.cod-comments__privacy { margin: 0; font-size: 0.88rem; }
.cod-comments__submit { justify-self: start; padding: 0.7rem 1.1rem; color: #0b0b11; background: var(--cod-comments-accent); border: 0; border-radius: 0.35rem; font: 700 0.88rem/1.3 system-ui, sans-serif; cursor: pointer; }
.cod-comments__submit:disabled { cursor: wait; opacity: 0.65; }
.cod-comments__text-button { padding: 0; color: var(--cod-comments-accent); background: none; border: 0; text-decoration: underline; font: 600 0.82rem/1.4 system-ui, sans-serif; cursor: pointer; }
.cod-comments__reply-banner { display: flex; justify-content: space-between; gap: 1rem; padding: 0.65rem 0.8rem; background: rgba(214, 176, 119, 0.09); border-left: 3px solid var(--cod-comments-accent); }
.cod-comments__notice { padding: 0.75rem; border-radius: 0.35rem; }
.cod-comments__notice--success { color: #d8f2dd; background: #15311c; border: 1px solid #376f44; }
.cod-comments__notice--error { color: #ffd9d9; background: #351717; border: 1px solid #7d3c3c; }
.cod-comments__trap { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.cod-comment-count { display: inline-block; margin-top: 0.7rem; color: #b8ad98; font: 600 0.78rem/1.4 system-ui, sans-serif; }

@media (max-width: 640px) {
  .cod-comments { width: min(100% - 1rem, 920px); }
  .cod-comments__fields { grid-template-columns: 1fr; }
  .cod-comments__comment-meta { display: grid; }
}

@media (prefers-reduced-motion: reduce) {
  .cod-comments *, .cod-comments *::before, .cod-comments *::after { scroll-behavior: auto !important; }
}