/* generator-ux.css — shared styling for GeneratorNotice / FitHelper /
   MeasurementHint / HelpLink (11A). Namespaced with a vx- prefix so it
   never collides with a tool's own .note/.hint classes, and defines its
   own colors rather than relying on each tool CSS's custom properties
   (those are named inconsistently across tools — --ink2/--accent2 in
   qr.css vs. --ink-3/--accent-2 elsewhere) — values match the documented
   site palette (paper #0E1216, ink #E8EDF2, accent #F03A24/#C1121F). */

.vx-notice { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.vx-notice li {
  margin: 0; padding: 7px 9px; border-radius: 5px; font-size: 12px; line-height: 1.5;
  border-left: 2px solid #E8A33D; background: rgba(232, 163, 61, 0.10); color: #E9B565;
}
.vx-notice li.good { border-left-color: #59C37A; background: rgba(89, 195, 122, 0.10); color: #8FDDA8; }
.vx-notice li.bad { border-left-color: #EF665E; background: rgba(239, 102, 94, 0.12); color: #FF9A93; }

.vx-fit { margin: 8px 0 0; padding: 10px 12px; border-radius: 5px; background: rgba(255, 255, 255, 0.03); border: 1px solid #222B34; }
.vx-fit__row { margin: 0 0 4px; font-size: 12.5px; color: #A7B2BD; display: flex; justify-content: space-between; gap: 10px; }
.vx-fit__row:last-of-type { margin-bottom: 0; }
.vx-fit__row b { color: #E8EDF2; font-weight: 700; }

.vx-hint { margin: 8px 0 0; font-size: 11.5px; color: #6C7883; line-height: 1.5; }

.vx-help { display: inline-block; margin-top: 6px; font-size: 11.5px; color: #FF6A2B; text-decoration: none; }
.vx-help:hover { text-decoration: underline; }