/* /css-border-radius-generator only: corner inputs and the shape stage. Scoped under #radApp. */
#radApp .xr-corners { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
#radApp .xr-corner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 10px; border: 1px solid var(--bm-line); border-radius: 12px; background: var(--bm-surface); }
#radApp .xr-corner-title { grid-column: 1 / -1; font-weight: 800; font-size: .85rem; }
#radApp .xr-corner .ic-field { gap: 4px; }
#radApp .xr-corner .ic-field label { font-size: .76rem; }
#radApp .xr-corner input { 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); }
#radApp .xr-corner input:focus { border-color: var(--bm-accent); outline: 3px solid var(--bm-accent-ring); }
#radApp .xr-corner input:disabled { opacity: .55; }
#radApp .xr-stage { display: grid; place-items: center; min-height: 280px; padding: 24px; border-radius: 14px; border: 1px solid var(--bm-line); background: var(--bm-bg); overflow: hidden; }
#radApp .xr-shape { max-width: 100%; background: linear-gradient(135deg, #6366f1, #22d3ee); box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .35); }
@media (max-width: 420px) { #radApp .xr-corners { grid-template-columns: minmax(0, 1fr); } }
@media (forced-colors: active) { #radApp .xr-shape { forced-color-adjust: none; border: 2px solid CanvasText; } }