.report-notice {
  position:fixed; right:1rem; bottom:max(1rem, env(safe-area-inset-bottom)); z-index:2000;
  box-sizing:border-box; width:min(32rem, calc(100vw - 2rem)); max-height:70vh; overflow:auto;
  padding:1.1rem 1.25rem; background:#fff; color:#243746;
  border:1px solid #e6b6b6; border-top:4px solid #b54747; border-radius:14px;
  box-shadow:0 8px 28px rgb(20 40 55 / 18%); animation:report-notice-in .2s ease-out;
}
.report-notice h2 { font-size:1.05rem; margin:0 0 .55rem; color:#943737; }
.report-notice p { margin:0 0 .85rem; line-height:1.7; white-space:pre-wrap; overflow-wrap:anywhere; }
.report-notice-actions { display:flex; flex-wrap:wrap; gap:.5rem; }
.report-notice button:focus-visible, .report-notice a:focus-visible { outline:2px solid var(--primary-color); outline-offset:3px; }
.report-sending::before { content:''; display:inline-block; width:.85em; height:.85em; margin-right:.5em; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:report-sending-spin .8s linear infinite; }
.report-celebration { position:fixed; z-index:2100; left:50%; top:max(1rem, env(safe-area-inset-top)); width:min(22rem, calc(100vw - 2rem)); box-sizing:border-box; padding:1rem 1.2rem; border:1px solid #a8cfb2; border-radius:16px; background:#f6fff7; color:#174d2b; box-shadow:0 8px 28px rgb(20 70 40 / 16%); text-align:center; transform:translateX(-50%); animation:report-celebration-in .28s ease-out; }
.report-celebration-message { margin:0; font-size:1.25rem; font-weight:800; }
.report-celebration-streak { margin:.35rem 0 .7rem; font-weight:700; }
.report-celebration-close { border:0; border-radius:999px; padding:.35rem .75rem; background:#d9f0df; color:#174d2b; font:inherit; cursor:pointer; }
.report-celebration-close:focus-visible { outline:2px solid var(--primary-color); outline-offset:3px; }
@keyframes report-notice-in { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
@keyframes report-sending-spin { to { transform:rotate(360deg); } }
@keyframes report-celebration-in { from { opacity:0; transform:translate(-50%, -10px); } to { opacity:1; transform:translate(-50%, 0); } }
@media (prefers-reduced-motion:reduce) { .report-notice, .report-sending::before, .report-celebration { animation:none; } }