/* Settings → Graphics (client/gfx.js): the five-way quality picker. The rows and switches reuse the Settings styles. */
.gfx-seg { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; padding: 3px; margin: 8px 0 6px; border-radius: 12px; background: #0b110d; border: 1px solid var(--line); }
.gfx-seg button { min-height: 40px; padding: 6px 2px; border: 0; border-radius: 9px; background: none; font-size: 13px; font-weight: 800; color: var(--muted); }
.gfx-seg button.on { background: var(--pn-gold); color: #241a05; box-shadow: 0 1px 0 rgba(255,255,255,.35) inset; }
.gfx-hint { margin: 2px 2px 4px; font-size: 13px; line-height: 1.35; min-height: 2.7em; }
.gfx-status { display: block; margin: 0 2px 10px; font-size: 12px; color: var(--pn-gold); }