.feedback-trigger { position:fixed; top:max(16px,env(safe-area-inset-top)); right:max(24px,env(safe-area-inset-right)); z-index:56; display:flex; align-items:center; justify-content:center; gap:9px; min-width:44px; min-height:44px; padding:10px 16px; border:1px solid var(--color-primary); border-radius:10px; background:#fdfcfb; color:var(--color-primary); font:inherit; font-size:13px; font-weight:600; cursor:pointer; box-shadow:0 2px 8px #2318350a; }
.feedback-trigger:hover { background:var(--color-primary-soft); }
.feedback-trigger:focus-visible,.feedback-dialog :focus-visible { outline:2px solid var(--color-primary); outline-offset:3px; }
body:has(.concept-game-page) .feedback-trigger { display:none; }
.feedback-dialog { box-sizing:border-box; inset:80px 24px auto auto; width:min(480px,calc(100vw - 32px)); max-height:calc(100dvh - 104px); margin:0; padding:28px; overflow-y:auto; overscroll-behavior:contain; border:1px solid var(--color-border); border-radius:16px; background:#fff; color:var(--color-text); box-shadow:0 16px 56px #23183524; }
.feedback-dialog::backdrop { background:#201b2d33; }
body:has(.feedback-dialog[open]) { overflow:hidden; }
.feedback-dialog h2 { margin:0 36px 12px 0; font-family:inherit; font-size:26px; line-height:1.2; }
.feedback-dialog > p { margin:0 0 24px; color:var(--color-text-muted); }
.feedback-close { position:absolute; top:13px; right:13px; display:grid; place-items:center; width:44px; height:44px; padding:0; border:0; border-radius:8px; background:transparent; color:var(--color-text-muted); font:inherit; cursor:pointer; }
.feedback-close:hover { background:var(--color-primary-soft); }
.feedback-dialog form { display:grid; gap:10px; }
.feedback-dialog [hidden] { display:none!important; }
.feedback-dialog label { font-weight:600; font-size:14px; }
.feedback-dialog label > span { font-weight:400; }
.feedback-dialog textarea,.feedback-dialog input[type=email] { box-sizing:border-box; width:100%; min-width:0; padding:12px; border:1px solid var(--color-border-strong,#c8bdd7); border-radius:9px; background:#fff; color:var(--color-text); font:inherit; font-size:16px; line-height:1.5; }
.feedback-dialog textarea { min-height:130px; resize:vertical; margin-bottom:12px; }
.feedback-categories { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; min-width:0; margin:0 0 16px; padding:0; border:0; }
.feedback-categories label { position:relative; cursor:pointer; }
.feedback-categories span { display:flex; align-items:center; justify-content:center; gap:7px; min-height:48px; padding:8px; border:1px solid var(--color-border-strong,#c8bdd7); border-radius:9px; font-size:13px; }
.feedback-categories svg { width:20px; height:20px; flex-shrink:0; }
.feedback-trigger svg { width:22px; height:22px; flex-shrink:0; }
.feedback-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.feedback-categories input { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; }
.feedback-categories input:checked + span { background:var(--color-primary-soft); border-color:var(--color-primary); color:var(--color-primary); }
.feedback-categories input:focus-visible + span { outline:2px solid var(--color-primary); outline-offset:3px; }
.feedback-send { display:flex; align-items:center; justify-content:center; gap:9px; min-height:48px; margin-top:16px; border:0; border-radius:9px; background:var(--color-primary); color:#fff; font:inherit; font-weight:600; cursor:pointer; }
.feedback-send:hover { background:var(--color-primary-strong); }
.feedback-send:disabled { opacity:.65; cursor:wait; }
.feedback-error { margin:8px 0 0; color:var(--color-danger,#a92335); font-size:14px; }
.feedback-dialog .feedback-success { margin:24px 0 0; line-height:1.6; }
@media (max-width:760px) {
  .feedback-trigger { right:max(12px,env(safe-area-inset-right)); width:44px; padding:10px; }
  .feedback-trigger > span { display:none; }
  body:has(.feedback-trigger) .app-shell > .app-topbar.user-bar { padding-right:68px; }
  body:has(.feedback-trigger) .app-topbar .user-bar-actions { gap:5px; }
  body:has(.feedback-trigger) .app-location > .app-brand img { width:110px; }
  .feedback-dialog { inset:auto 0 0; width:100%; max-width:100%; max-height:calc(100dvh - 84px - env(safe-area-inset-top)); margin:0; padding:28px 20px max(24px,env(safe-area-inset-bottom)); border-radius:20px 20px 0 0; }
  .feedback-dialog h2 { font-size:24px; }
}
@media (max-width:370px) {
  .feedback-categories span { gap:4px; padding:6px; font-size:12px; }
  .feedback-categories svg { width:18px; height:18px; }
  body:has(.feedback-trigger) .app-location > .app-brand img { width:62px; }
}

/* The input covers the whole category label; its sibling carries visual feedback. */
.feedback-categories span { transition:background-color .12s,border-color .12s,box-shadow .12s; }
.feedback-categories label:hover span { background:var(--color-primary-soft); border-color:var(--color-primary); }
.feedback-categories label:active span { translate:0 1px; box-shadow:inset 0 2px 4px #23183524; background:var(--color-primary-soft); border-color:var(--color-primary); }

.feedback-screenshot { display:flex; align-items:center; gap:8px; margin-top:8px; color:var(--color-text-muted); }

.feedback-categories input { z-index:1; }
.feedback-categories span { pointer-events:none; }

/* Use the same motion as the mobile practice menu. */
.feedback-dialog { opacity:0; transform:translateY(32px); transition:opacity 240ms ease,transform 280ms cubic-bezier(.22,1,.36,1),display 280ms allow-discrete,overlay 280ms allow-discrete; }
.feedback-dialog[open] { opacity:1; transform:translateY(0); }
.feedback-dialog::backdrop { opacity:0; transition:opacity 280ms ease,display 280ms allow-discrete,overlay 280ms allow-discrete; }
.feedback-dialog[open]::backdrop { opacity:1; }
@starting-style {
  .feedback-dialog[open] { opacity:0; transform:translateY(32px); }
  .feedback-dialog[open]::backdrop { opacity:0; }
}
@media (prefers-reduced-motion:reduce) { .feedback-dialog,.feedback-dialog::backdrop { transition:none; } }