:root {
  color-scheme: light;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #40251d;
  background: #f4e5c4;
  font-synthesis: none;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: linear-gradient(155deg, #fff5dd, #f2dca8 62%, #ead09a); }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
.comments-page { width: min(100% - 1.25rem, 680px); margin: 0 auto; padding: max(1rem, env(safe-area-inset-top)) 0 max(1rem, env(safe-area-inset-bottom)); }
.comments-header { position: relative; margin-bottom: 1rem; padding: 1rem 1.15rem 1.15rem; color: #fff8e7; background: linear-gradient(145deg, #8f3025, #54251c); border: 3px solid #d9a43c; border-radius: 18px; box-shadow: 0 6px 18px #4d2a1c2e; }
.comments-back-link { display: inline-flex; min-height: 40px; align-items: center; margin: -.3rem 0 .6rem; color: #fff1c9; font-weight: 800; text-decoration: none; }
.comments-kicker { margin: 0; color: #f3d18a; font-size: .74rem; font-weight: 900; letter-spacing: .12em; }
.comments-header h1 { margin: .15rem 0 .4rem; font-size: clamp(1.7rem, 8vw, 2.3rem); line-height: 1.1; }
.comments-lead { max-width: 46rem; margin: 0; color: #fff5df; font-size: .9rem; line-height: 1.65; }
.comment-compose-card, .comments-section { margin-top: .9rem; padding: 1rem; background: #fffaf0ed; border: 2px solid #cf9b44; border-radius: 16px; box-shadow: 0 5px 14px #57301d1a; }
.comment-compose-card h2, .comments-section h2 { margin: 0; color: #7d2922; font-size: 1.15rem; }
#comment-form { display: grid; gap: .45rem; margin-top: .75rem; }
#comment-form label { margin-top: .25rem; color: #5c392b; font-size: .83rem; font-weight: 850; }
#comment-form input, #comment-form textarea { width: 100%; min-height: 46px; padding: .72rem .8rem; color: #36241d; background: #fff; border: 1px solid #b98b54; border-radius: 10px; outline-color: #9b362b; }
#comment-form #comment-nickname { width: 6.5rem; max-width: 100%; }
#comment-form textarea { min-height: 112px; resize: vertical; line-height: 1.6; }
.compose-meta, .comments-section-heading { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.compose-meta { color: #775c4a; font-size: .78rem; font-variant-numeric: tabular-nums; }
.submit-button, .load-more-button { width: 100%; min-height: 48px; padding: .7rem 1rem; color: #fff9e9; font-weight: 900; background: linear-gradient(#a73c2e, #79271f); border: 2px solid #d8a746; border-radius: 12px; box-shadow: 0 3px 0 #542219; }
.submit-button:disabled { cursor: wait; opacity: .65; }
.text-button { min-height: 40px; padding: .4rem .7rem; color: #812b23; font-weight: 850; background: transparent; border: 1px solid #b88347; border-radius: 9px; }
.replying-to { margin: .6rem 0 0; padding: .55rem .7rem; color: #592f25; font-size: .84rem; font-weight: 800; background: #f8e4b8; border-radius: 9px; }
.comment-guidelines { margin: .8rem 0 0; color: #765d4c; font-size: .76rem; line-height: 1.55; }
.comment-status { min-height: 1.35em; margin: .45rem 0; color: #684b3d; font-size: .82rem; line-height: 1.5; overflow-wrap: anywhere; }
.guideline-error { margin: .15rem 0; padding: .65rem .75rem; color: #7c1f19; font-size: .83rem; font-weight: 800; line-height: 1.55; background: #ffe8e2; border: 1px solid #d99182; border-radius: 9px; }
.comments-section-heading { align-items: center; margin-bottom: .4rem; }
.comments-list, .comment-replies { display: grid; gap: .65rem; margin: 0; padding: 0; list-style: none; }
.comment-card { min-width: 0; padding: .8rem; background: #fff; border: 1px solid #e0c99e; border-radius: 12px; box-shadow: 0 2px 5px #5537200c; }
.comment-card.is-reply { margin-left: .7rem; border-left: 4px solid #d8a746; }
.comment-meta { display: flex; align-items: center; gap: .45rem; min-height: 1.55rem; }
.comment-name { color: #76271f; font-weight: 950; }
.official-badge { padding: .13rem .42rem; color: #fff; font-size: .68rem; font-weight: 900; background: #176a9b; border-radius: 999px; }
.comment-date { margin-left: auto; color: #806e5b; font-size: .68rem; white-space: nowrap; }
.comment-body { margin: .5rem 0 .6rem; color: #3d3028; font-size: .92rem; line-height: 1.7; overflow-wrap: anywhere; white-space: pre-wrap; }
.comment-card.is-hidden .comment-body { color: #6f6156; font-size: .83rem; }
.comment-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.comment-actions button, .report-controls button { min-height: 38px; padding: .35rem .6rem; color: #6e2b23; font-size: .77rem; font-weight: 800; background: #fff8e9; border: 1px solid #ceab73; border-radius: 8px; }
.report-details { margin-left: auto; }
.report-controls { display: flex; align-items: center; gap: .35rem; padding-top: .45rem; }
.report-controls select { min-width: 0; min-height: 38px; flex: 1; padding: .35rem; color: #463329; background: white; border: 1px solid #b98b54; border-radius: 8px; }
.comment-replies { margin-top: .55rem; }
.comment-replies[hidden], [hidden] { display: none !important; }
.load-more-button { margin-top: .8rem; color: #7a2b22; background: #ffedc5; border-color: #c8963c; box-shadow: 0 3px 0 #9e7430; }
.comments-footer { display: flex; justify-content: space-between; gap: .75rem; margin: 1rem .2rem .2rem; color: #80694f; font-size: .72rem; }
.comments-footer a { color: #7a2b22; font-weight: 800; }
.comments-page.is-embedded { width: min(100% - .75rem, 640px); padding-top: max(.45rem, env(safe-area-inset-top)); }
.is-embedded .comments-header { padding: .85rem 1rem; }
.is-embedded .comments-back-link { display: none; }

@media (max-width: 420px) {
  .comments-page { width: min(100% - .75rem, 680px); }
  .comment-compose-card, .comments-section { padding: .78rem; }
  .comment-card { padding: .68rem; }
  .comment-date { font-size: .62rem; }
  .comment-card.is-reply { margin-left: .35rem; }
}