/* /css-gradient-generator only: the preview surfaces and the draggable stop bar. Scoped under #grdApp. */
#grdApp .xr-range { display: flex; gap: 10px; align-items: center; min-width: 0; }
#grdApp .xr-range input[type="range"] { flex: 1 1 auto; min-width: 0; accent-color: var(--bm-accent); }
#grdApp .xr-range input[type="number"] { flex: 0 0 90px; width: 90px; }
#grdApp .xr-stopbar { background-color: #fff; background-image: linear-gradient(45deg, #d9dde3 25%, transparent 25%, transparent 75%, #d9dde3 75%), linear-gradient(45deg, #d9dde3 25%, transparent 25%, transparent 75%, #d9dde3 75%); background-size: 16px 16px; background-position: 0 0, 8px 8px; }
#grdApp .xr-preview { height: 220px; border-radius: 14px; border: 1px solid var(--bm-line); }
#grdApp .xr-samples { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 12px 0; }
#grdApp .xr-sample-card { flex: 1 1 200px; min-width: 0; padding: 14px; border-radius: 12px; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .45); display: flex; flex-direction: column; gap: 4px; }
#grdApp .xr-sample-btn { display: inline-block; padding: 10px 18px; border-radius: 999px; color: #fff; font-weight: 700; text-shadow: 0 1px 2px rgba(0, 0, 0, .45); }
#grdApp .xr-sample-text { font-size: 1.9rem; font-weight: 800; -webkit-background-clip: text; background-clip: text; color: transparent; }
#grdApp .xr-stopbar { position: relative; height: 34px; margin: 6px 12px 14px; border-radius: 8px; border: 1px solid var(--bm-line); touch-action: none; }
#grdApp .xr-handle { position: absolute; top: 50%; width: 22px; height: 40px; margin-left: -11px; transform: translateY(-50%); border: 3px solid #fff; border-radius: 8px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .3); cursor: ew-resize; padding: 0; }
#grdApp .xr-handle:focus-visible, #grdApp .xr-handle.is-active { outline: 3px solid var(--bm-accent-ring); box-shadow: 0 0 0 2px var(--bm-accent), 0 2px 6px rgba(0, 0, 0, .3); }
#grdApp .xr-stops { display: grid; gap: 8px; }
#grdApp .xr-stop { display: grid; grid-template-columns: 44px minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: 8px; align-items: end; padding: 8px 10px; border: 1px solid var(--bm-line); border-radius: 12px; background: var(--bm-surface); }
#grdApp .xr-stop.is-active { border-color: var(--bm-accent); }
#grdApp .xr-stop .ic-field { gap: 4px; }
#grdApp .xr-stop .ic-field label { font-size: .76rem; }
#grdApp .xr-stop input[type="color"] { width: 44px; height: 40px; padding: 2px; border: 1px solid var(--bm-line); border-radius: 10px; background: var(--bm-surface); }
#grdApp .xr-stop input[type="text"], #grdApp .xr-stop input[type="number"] { width: 100%; min-width: 0; min-height: 40px; padding: 6px 8px; border: 1px solid var(--bm-line); border-radius: 10px; font: inherit; background: var(--bm-surface); color: var(--bm-ink); }
#grdApp .xr-stop input:focus { border-color: var(--bm-accent); outline: 3px solid var(--bm-accent-ring); }
#grdApp .xr-stop input[aria-invalid="true"] { border-color: var(--ic-bad, #c0392b); }
#grdApp .xr-stop .bm-btn { padding: 8px 10px; }
@media (max-width: 520px) {
    #grdApp .xr-stop { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
    #grdApp .xr-stop .xr-stop-color { grid-column: 2 / -1; }
}
@media (forced-colors: active) { #grdApp .xr-handle { forced-color-adjust: none; border-color: CanvasText; } }