/* BETA FEEDBACK V1: "Retours & suggestions" dialog. Existing design tokens only (--panel, --border, --accent, --muted, --pill ...).
   Modal above everything (z 60 > account gate 40 > topbar menus 30); nothing applies until feedback.js creates the dialog. */
.mf-fb-backdrop { position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center; padding:16px; box-sizing:border-box;
  background:rgba(4,6,10,.72); }
.mf-fb-backdrop[hidden] { display:none; }
.mf-fb-dialog { position:relative; width:560px; max-width:100%; max-height:calc(100vh - 32px); overflow:auto; box-sizing:border-box;
  background:var(--panel); border:1px solid var(--border); border-radius:10px; box-shadow:0 18px 48px #000a; color:var(--text); font-size:12px; }
.mf-fb-head { position:sticky; top:0; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 18px;
  background:var(--panel); border-bottom:1px solid var(--border); }
.mf-fb-title { margin:0; font-size:14px; font-weight:600; letter-spacing:.2px; }
.mf-fb-close { width:28px; height:28px; padding:0; font-size:18px; line-height:1; color:var(--muted); background:transparent; border:1px solid transparent;
  border-radius:6px; cursor:pointer; }
.mf-fb-close:hover { color:var(--text); border-color:var(--pill-border); }
.mf-fb-form, .mf-fb-done { padding:14px 18px 18px; }
.mf-fb-form[hidden], .mf-fb-done[hidden] { display:none; }
.mf-fb-intro { margin:0 0 12px; color:var(--muted); line-height:1.5; font-size:11px; }
.mf-fb-label { display:block; margin:14px 0 6px; font-size:11px; font-weight:600; color:var(--text); }
.mf-fb-req { font-weight:400; color:var(--muted); }
.mf-fb-cats { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.mf-fb-cat { display:flex; flex-direction:column; align-items:flex-start; gap:4px; padding:10px 12px; text-align:left; color:var(--text); background:var(--pill);
  border:1px solid var(--pill-border); border-radius:8px; cursor:pointer; font:inherit; }
.mf-fb-cat:hover { border-color:#80652f; }
.mf-fb-cat.is-active { border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); }
.mf-fb-cat-title { font-size:12px; font-weight:600; }
.mf-fb-cat.is-active .mf-fb-cat-title { color:var(--accent); }
.mf-fb-cat-hint { font-size:10.5px; color:var(--muted); line-height:1.35; }
.mf-fb-desc, .mf-fb-select { width:100%; box-sizing:border-box; color:var(--text); background:var(--bg); border:1px solid var(--pill-border); border-radius:6px;
  font:inherit; font-size:12px; }
.mf-fb-desc { min-height:120px; padding:9px 10px; resize:vertical; line-height:1.45; }
.mf-fb-desc::placeholder { color:var(--muted-2); }
.mf-fb-select { height:30px; padding:0 8px; }
.mf-fb-desc:focus, .mf-fb-select:focus { outline:none; border-color:var(--accent); }
.mf-fb-counter { margin-top:4px; text-align:right; font-size:10px; color:var(--muted); font-variant-numeric:tabular-nums; }
.mf-fb-counter.is-bad { color:#e2726b; }
.mf-fb-drop { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px; border:1px dashed var(--pill-border); border-radius:8px;
  background:var(--bg); }
.mf-fb-drop.is-over { border-color:var(--accent); }
.mf-fb-drop-hint { color:var(--muted); font-size:11px; line-height:1.4; }
.mf-fb-file { display:none; }
.mf-fb-add { flex:0 0 auto; height:28px; padding:0 12px; font-size:11px; color:var(--accent); background:var(--pill); border:1px solid #80652f; border-radius:6px;
  cursor:pointer; }
.mf-fb-add:hover:not(:disabled) { border-color:var(--accent); }
.mf-fb-add:disabled { opacity:.45; cursor:not-allowed; }
.mf-fb-thumbs { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.mf-fb-thumbs:empty { display:none; }
.mf-fb-thumb { position:relative; margin:0; width:150px; padding:4px; box-sizing:border-box; background:var(--pill); border:1px solid var(--pill-border);
  border-radius:6px; }
.mf-fb-thumb img { display:block; width:100%; height:86px; object-fit:cover; border-radius:4px; background:#000; }
.mf-fb-thumb-meta { margin-top:4px; font-size:9.5px; color:var(--muted); text-align:center; font-variant-numeric:tabular-nums; }
.mf-fb-thumb.is-loading { display:flex; align-items:center; justify-content:center; height:112px; color:var(--muted); font-size:10.5px; }
.mf-fb-thumb-remove { position:absolute; top:6px; right:6px; width:22px; height:22px; padding:0; font-size:14px; line-height:1; color:var(--text);
  background:rgba(10,13,21,.85); border:1px solid var(--pill-border); border-radius:50%; cursor:pointer; }
.mf-fb-thumb-remove:hover { color:var(--accent); border-color:var(--accent); }
.mf-fb-note { margin:8px 0 0; font-size:10.5px; line-height:1.45; color:var(--muted-2); }
.mf-fb-error { margin:12px 0 0; padding:8px 10px; font-size:11px; line-height:1.45; color:#f0b3ae; background:#2a1414; border:1px solid #5a2723;
  border-radius:6px; }
.mf-fb-error[hidden] { display:none; }
.mf-fb-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:16px; }
.mf-fb-btn { height:30px; padding:0 16px; font-size:12px; border-radius:6px; cursor:pointer; font:inherit; }
.mf-fb-btn.quiet { color:var(--text); background:var(--pill); border:1px solid var(--pill-border); }
.mf-fb-btn.quiet:hover { border-color:var(--accent); color:var(--accent); }
.mf-fb-btn.primary { color:var(--accent-ink); background:var(--accent); border:1px solid var(--accent); font-weight:600; }
.mf-fb-btn.primary:disabled { opacity:.4; cursor:not-allowed; }
.mf-fb-btn:focus-visible, .mf-fb-cat:focus-visible, .mf-fb-add:focus-visible, .mf-fb-close:focus-visible, .mf-fb-thumb-remove:focus-visible {
  outline:2px solid var(--accent); outline-offset:2px; }
.mf-fb-done { display:flex; flex-direction:column; align-items:center; gap:8px; padding:28px 18px 24px; text-align:center; }
.mf-fb-done-mark { display:flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; font-size:22px; color:var(--accent);
  background:var(--pill); border:1px solid #80652f; }
.mf-fb-done-title { margin:6px 0 0; font-size:14px; font-weight:600; }
.mf-fb-done-text { margin:0 0 10px; color:var(--muted); font-size:11.5px; }
@media (max-width:560px) {
  .mf-fb-cats { grid-template-columns:1fr; }
  .mf-fb-drop { flex-direction:column; align-items:stretch; }
  .mf-fb-thumb { width:calc(50% - 4px); }
}