.fl-comments, .fl-comments * { box-sizing: border-box; }
.fl-comments { --fc-ink:#403b36; --fc-muted:#746b63; --fc-line:#e6ded4; --fc-accent:#87604e; --fc-paper:#fffdfa; width:calc(100% - 40px); max-width:792px; margin:64px auto 80px; padding:36px; border:1px solid var(--fc-line); border-radius:20px; background:var(--fc-paper); color:var(--fc-ink); font-family:-apple-system,BlinkMacSystemFont,'PingFang TC','Microsoft JhengHei',sans-serif; font-size:17px; line-height:1.8; overflow-wrap:anywhere; }
.fl-comments [hidden] { display:none !important; }
.fl-comments-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.fl-comments .fl-comments-eyebrow { font-size:11px; letter-spacing:.17em; color:var(--fc-accent); }
.fl-comments h2 { margin:8px 0 0; color:var(--fc-ink); font-size:27px; font-weight:600; line-height:1.5; }
.fl-comments h3 { margin:0; color:var(--fc-ink); font-size:17px; line-height:1.8; }
.fl-comments .fl-comments-flower { color:#cb9a86; font-size:46px; line-height:1; }
.fl-comments p { margin:0 0 18px; font-size:inherit; color:inherit; }
.fl-comments .fl-comments-intro { margin:16px 0 26px; color:var(--fc-muted); }
.fl-comments button, .fl-comments textarea { font:inherit; }
.fl-comments button { cursor:pointer; }
.fl-comments button:disabled { opacity:.55; cursor:wait; }
.fl-comments button:focus-visible, .fl-comments a:focus-visible, .fl-comments textarea:focus-visible { outline:2px solid var(--fc-accent); outline-offset:4px; }
.fl-comments .fl-comment-primary, .fl-comments .fl-comment-secondary { display:inline-flex; align-items:center; justify-content:center; min-height:44px; max-width:100%; padding:10px 20px; border:1px solid var(--fc-accent); border-radius:9px; font-size:16px; font-weight:500; line-height:1.5; text-decoration:none; }
.fl-comments .fl-comment-primary { background:var(--fc-accent); color:#fff; }
.fl-comments .fl-comment-primary:hover { background:#704b3b; }
.fl-comments .fl-comment-secondary { background:transparent; color:var(--fc-accent); }
.fl-comments .fl-comment-text-button { min-height:44px; padding:5px 2px; border:0; background:none; color:var(--fc-accent); font-size:14px; text-decoration:underline; text-underline-offset:4px; }
.fl-comments .fl-comment-item { padding:24px 0; border-top:1px solid var(--fc-line); }
.fl-comments .fl-comment-item-header { display:flex; align-items:center; flex-wrap:wrap; gap:8px 14px; margin-bottom:10px; font-size:14px; }
.fl-comments .fl-comment-author { font-weight:600; color:var(--fc-ink); }
.fl-comments time { color:var(--fc-muted); }
.fl-comments .fl-comment-body { white-space:pre-wrap; margin:0; }
.fl-comments .fl-comment-posted-sticker { display:block; width:112px; height:112px; margin-top:12px; }
.fl-comments .fl-comment-empty { padding:18px 0; color:var(--fc-muted); font-size:16px; }
.fl-comments .fl-comment-compose { margin-top:26px; padding-top:26px; border-top:1px solid var(--fc-line); }
.fl-comments .fl-comment-mine-heading { display:flex; flex-wrap:wrap; gap:8px 16px; align-items:center; justify-content:space-between; margin-bottom:12px; }
.fl-comments [data-comment-mine]:not(:empty) { margin-bottom:26px; padding:0 18px; background:#f7f2ec; border-radius:12px; }
.fl-comments [data-comment-mine] .fl-comment-item:first-child { border-top:0; }
.fl-comments .fl-comment-owner-actions { display:flex; flex-wrap:wrap; gap:16px; margin-top:8px; }
.fl-comments .fl-comment-state { display:inline-block; margin-top:10px; padding:2px 8px; border-radius:5px; background:#eee5d8; color:#665744; font-size:13px; }
.fl-comments label { display:block; margin:0 0 10px; font-weight:500; }
.fl-comments label span { color:var(--fc-muted); font-size:14px; font-weight:400; }
.fl-comments textarea { display:block; width:100%; min-height:130px; resize:vertical; padding:15px; border:1px solid #d9ccbd; border-radius:10px; background:#fff; color:var(--fc-ink); font-size:18px; line-height:1.8; }
.fl-comments textarea::placeholder { color:#93867a; }
.fl-comments .fl-comment-input-meta { text-align:right; color:var(--fc-muted); font-size:13px; margin:6px 0 20px; }
.fl-comments .fl-comment-stickers { margin:0 0 12px; padding:0; border:0; min-width:0; }
.fl-comments legend { margin-bottom:12px; padding:0; font-size:16px; }
.fl-comments [data-comment-stickers] { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; }
.fl-comments .fl-comment-sticker-option { display:flex; flex-direction:column; align-items:center; min-width:0; padding:5px 2px 8px; border:1px solid var(--fc-line); border-radius:12px; background:#fff; color:var(--fc-ink); font-size:11px; line-height:1.6; }
.fl-comments .fl-comment-sticker-option img { display:block; width:100%; max-width:82px; height:auto; aspect-ratio:1; }
.fl-comments .fl-comment-sticker-option[aria-pressed=true] { background:#f8e7df; border-color:var(--fc-accent); box-shadow:0 0 0 1px var(--fc-accent); }
.fl-comments .fl-comment-selection { display:flex; align-items:center; gap:16px; color:var(--fc-accent); font-size:14px; }
.fl-comments .fl-comment-help { margin-top:16px; color:var(--fc-muted); font-size:13px; line-height:1.85; }
.fl-comments .fl-comment-form-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:20px; }
.fl-comments [data-comment-form-message], .fl-comments [data-comment-status] { color:var(--fc-muted); font-size:15px; }
.fl-comments [data-comment-form-message]:not(:empty) { margin-top:16px; }
@media(max-width:600px) {
  .fl-comments { padding:25px 20px; margin-top:44px; width:calc(100% - 32px); border-radius:15px; font-size:16px; }
  .fl-comments h2 { font-size:24px; }
  .fl-comments [data-comment-stickers] { grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
  .fl-comments .fl-comment-sticker-option { font-size:12px; }
  .fl-comments [data-comment-mine]:not(:empty) { padding:0 13px; }
}
@media(prefers-reduced-motion:reduce) { .fl-comments img { animation:none; } }