.feedback-active body { cursor: crosshair; }
.feedback-active .feedback-ui,
.feedback-active .feedback-marker { cursor: default; font-family: "Avenir Next", Avenir, "Helvetica Neue", Arial, sans-serif; font-kerning: none; letter-spacing: 0; }
.feedback-toolbar { position: fixed; top: 0.8rem; right: 0.8rem; z-index: 1000; display: flex; align-items: center; gap: 1rem; max-width: min(32rem, calc(100vw - 1.6rem)); padding: 0.7rem 0.75rem 0.7rem 1rem; background: #151515; color: #fffefa; border: 1px solid rgba(255,255,255,0.18); border-radius: 999px; box-shadow: 0 1rem 3rem rgba(0,0,0,0.24); }
.feedback-toolbar div { display: grid; gap: 0.1rem; }
.feedback-toolbar strong { font-size: 0.8rem; }
.feedback-toolbar span { color: rgba(255,255,255,0.62); font-size: 0.68rem; }
.feedback-count { min-width: 2.2rem; height: 2.2rem; padding: 0 0.65rem; border: 0; border-radius: 999px; background: #ff5319; color: #151515; font-weight: 800; }
.feedback-panel { position: fixed; top: 0.8rem; right: 0.8rem; bottom: 0.8rem; z-index: 1100; display: flex; flex-direction: column; width: min(25rem, calc(100vw - 1.6rem)); overflow: hidden; background: #f4f3ef; color: #151515; border: 1px solid rgba(21,21,21,0.2); border-radius: 1rem; box-shadow: 0 1.5rem 5rem rgba(0,0,0,0.34); transform: translateX(calc(100% + 2rem)); transition: transform 220ms ease; }
.feedback-panel.is-open { transform: translateX(0); }
.feedback-panel > header { display: flex; justify-content: space-between; align-items: start; gap: 1rem; padding: 1.1rem; background: #151515; color: #fffefa; }
.feedback-panel > header div { display: grid; gap: 0.15rem; }
.feedback-panel > header strong { font-size: 1rem; }
.feedback-panel > header span { color: rgba(255,255,255,0.62); font-size: 0.72rem; }
.feedback-panel > header button { border: 0; background: transparent; color: #fffefa; font-size: 1.6rem; line-height: 1; }
.feedback-form { display: grid; gap: 0.9rem; padding: 1rem; border-bottom: 1px solid rgba(21,21,21,0.15); }
.feedback-selection { padding: 0.75rem; overflow: hidden; background: #deddd7; border-radius: 0.5rem; font-size: 0.78rem; text-overflow: ellipsis; white-space: nowrap; }
.feedback-form label { display: grid; gap: 0.35rem; font-size: 0.72rem; font-weight: 750; }
.feedback-form select,
.feedback-form textarea { width: 100%; padding: 0.75rem; border: 1px solid rgba(21,21,21,0.25); border-radius: 0.5rem; background: #fffefa; color: #151515; font: inherit; font-size: 0.9rem; resize: vertical; }
.feedback-form-actions { display: grid; grid-template-columns: 1fr auto; gap: 0.5rem; }
.feedback-form-actions button,
.feedback-panel > footer button { padding: 0.75rem; border: 1px solid #151515; border-radius: 0.5rem; background: #151515; color: #fffefa; font: inherit; font-size: 0.76rem; font-weight: 750; }
.feedback-form-actions button + button { background: transparent; color: #151515; }
.feedback-list { flex: 1; overflow: auto; padding: 0.75rem; }
.feedback-list article { display: grid; grid-template-columns: 1fr auto; gap: 0.35rem; margin-bottom: 0.55rem; padding: 0.35rem; background: #fffefa; border: 1px solid rgba(21,21,21,0.14); border-radius: 0.65rem; }
.feedback-list article > button:first-child { display: grid; grid-template-columns: auto 1fr; gap: 0.2rem 0.5rem; width: 100%; padding: 0.45rem; border: 0; background: transparent; color: #151515; text-align: left; }
.feedback-list article span { grid-row: span 2; display: grid; place-items: center; width: 1.65rem; height: 1.65rem; background: #ff5319; border-radius: 50%; font-size: 0.72rem; font-weight: 850; }
.feedback-list article strong { font-size: 0.76rem; }
.feedback-list article small { color: #6c6a65; font-size: 0.64rem; }
.feedback-list article p { grid-column: 1 / -1; margin: 0.35rem 0 0; color: #42413e; font-size: 0.78rem; line-height: 1.4; }
.feedback-list [data-feedback-delete] { align-self: start; width: 1.8rem; height: 1.8rem; border: 0; background: transparent; color: #6c6a65; font-size: 1rem; }
.feedback-empty { padding: 2rem 1rem; color: #6c6a65; text-align: center; font-size: 0.84rem; }
.feedback-panel > footer { display: grid; grid-template-columns: 1fr 1fr; gap: 0.45rem; padding: 0.75rem; border-top: 1px solid rgba(21,21,21,0.15); }
.feedback-panel > footer .feedback-danger { grid-column: 1 / -1; background: transparent; color: #a9251f; border-color: rgba(169,37,31,0.35); }
.feedback-marker { position: absolute; z-index: 900; display: grid; place-items: center; width: 1.7rem; height: 1.7rem; padding: 0; border: 2px solid #fffefa; border-radius: 50%; background: #ff5319; color: #151515; box-shadow: 0 0.4rem 1rem rgba(0,0,0,0.3); font-size: 0.72rem; font-weight: 900; }
.feedback-marked { outline: 2px dashed #ff5319 !important; outline-offset: 4px; }
.feedback-selected { outline: 4px solid #ff5319 !important; outline-offset: 5px; }
.feedback-toast { position: fixed; left: 50%; bottom: 1.2rem; z-index: 1200; padding: 0.7rem 1rem; background: #151515; color: #fffefa; border-radius: 999px; opacity: 0; transform: translate(-50%, 1rem); transition: 180ms ease; pointer-events: none; font-size: 0.78rem; }
.feedback-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 680px) {
  .feedback-toolbar { left: 0.5rem; right: 0.5rem; top: 0.5rem; max-width: none; }
  .feedback-toolbar span { display: none; }
  .feedback-panel { inset: 0.5rem; width: auto; }
}
@media (prefers-reduced-motion: reduce) { .feedback-panel, .feedback-toast { transition: none; } }