/* Shared help cards. QR artwork always keeps a white, unfiltered scanning surface. */
#root .info-settings-spoiler.fx-help-grid {
  --help-surface:var(--fx-surface,var(--bg-primary,#fff));
  --help-subtle:var(--fx-subtle,var(--bg-secondary,#f8f9fb));
  --help-text:var(--fx-text,var(--text-primary,#192e3b));
  --help-muted:var(--fx-muted,var(--text-secondary,#5f7080));
  --help-line:var(--fx-line,var(--border-primary,#dfe6ed));
  --help-accent:#ed750c;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));
  align-items:stretch;
  gap:20px;
  width:100%;
  max-width:920px;
  margin-inline:auto;
  padding-block:12px 0;
}
#root .fx-help-grid > .qr-container.fx-help-card {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0;
  width:100%;
  min-width:0;
  padding:26px 20px 22px;
  border:1px solid var(--help-line);
  border-top:3px solid var(--help-accent);
  border-radius:18px;
  background:var(--help-subtle);
  color:var(--help-text);
  box-sizing:border-box;
}
#root .fx-help-grid .fx-help-card > img.fx-help-qr {
  display:block;
  flex:none;
  width:224px;
  height:224px;
  min-width:0;
  max-width:100%;
  object-fit:contain;
  box-sizing:border-box;
  margin:0 auto 24px;
  padding:0;
  border:0;
  border-radius:0;
  background:#fff;
  filter:none !important;
  opacity:1;
}
#root .fx-help-grid .fx-help-card > a.fx-help-link {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  width:100%;
  min-height:52px;
  margin-block:auto 0;
  padding:12px 14px;
  border:1px solid var(--help-line);
  border-radius:10px;
  background:var(--help-surface);
  color:var(--help-text);
  font:650 16px/1.45 var(--font-family-base,"Segoe UI",sans-serif);
  text-align:center;
  text-decoration:none !important;
  overflow-wrap:anywhere;
  box-sizing:border-box;
  transition:border-color .15s ease,box-shadow .15s ease;
}
#root .fx-help-grid .fx-help-card > a.fx-help-link::after {
  content:'';
  flex:none;
  width:17px;
  height:17px;
  background:var(--help-accent);
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 3h7v7M21 3 10 14M11 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
#root .fx-help-grid .fx-help-card > a.fx-help-link:hover {
  border-color:var(--help-accent);
  box-shadow:0 0 0 2px #ed750c12;
}
#root .fx-help-grid .fx-help-card > a.fx-help-link:focus-visible {
  outline:3px solid var(--help-accent);
  outline-offset:4px;
}
#root .fx-help-grid .fx-help-card > .fx-help-destination {
  display:block;
  width:100%;
  margin:14px 0 0;
  padding:0;
  border:0;
  background:transparent;
  color:var(--help-muted);
  font:12px/1.65 ui-monospace,SFMono-Regular,Consolas,monospace;
  direction:ltr;
  unicode-bidi:isolate;
  text-align:center;
  overflow-wrap:anywhere;
  user-select:all;
}
.foxy-ui .fx-settings-surface #root .fx-help-section > .spoiler-header { display:none; }
.foxy-ui .fx-settings-surface #root .fx-help-section > .spoiler-content > .spoiler-inner-content { padding-top:0; }
.foxy-ui .fx-settings-surface #root .fx-help-section .fx-help-grid { padding-top:0; }
html[data-foxy-design=legacy] #root .fx-help-grid { padding-bottom:8px; }
html[lang=ar] #root .fx-help-grid .fx-help-link { direction:rtl; }
@media(max-width:600px) {
  #root .info-settings-spoiler.fx-help-grid { grid-template-columns:minmax(0,1fr); gap:16px; }
  #root .fx-help-grid > .qr-container.fx-help-card { padding:22px 16px 20px; }
}
@media(prefers-reduced-motion:reduce) {
  #root .fx-help-grid .fx-help-card > a.fx-help-link { transition:none; }
}