/* /css-box-shadow-generator only: layer rows and the light/dark preview stage. Scoped under #shdApp. */
#shdApp .xr-layers { display: grid; gap: 10px; }
#shdApp .xr-layer { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 10px; border: 1px solid var(--bm-line); border-radius: 12px; background: var(--bm-surface); }
#shdApp .xr-layer .ic-field { gap: 4px; }
#shdApp .xr-layer .ic-field label { font-size: .76rem; }
#shdApp .xr-layer input[type="number"], #shdApp .xr-layer input[type="text"] { 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); }
#shdApp .xr-layer input:focus { border-color: var(--bm-accent); outline: 3px solid var(--bm-accent-ring); }
#shdApp .xr-layer input[type="color"] { width: 100%; height: 40px; padding: 2px; border: 1px solid var(--bm-line); border-radius: 10px; background: var(--bm-surface); }
#shdApp .xr-layer-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: space-between; }
#shdApp .xr-layer-title { font-weight: 800; font-size: .85rem; grid-column: 1 / -1; }
#shdApp .xr-stage { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 12px; }
#shdApp .xr-bg { display: grid; place-items: center; min-height: 220px; padding: 36px; border-radius: 14px; border: 1px solid var(--bm-line); }
#shdApp .xr-bg.is-light { background: #f3f4f6; }
#shdApp .xr-bg.is-dark { background: #111827; }
#shdApp .xr-box { width: min(160px, 100%); aspect-ratio: 4 / 3; display: grid; place-items: center; background: #fff; color: #374151; font-weight: 700; font-size: .85rem; }
#shdApp .xr-sub { margin: 4px 0 0; font-size: .95rem; }
#shdApp .xr-drop-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 12px; align-items: center; }
#shdApp .xr-drop-bg { min-height: 160px; }
#shdApp .xr-drop-bg svg { max-width: 100%; height: auto; }
@media (max-width: 480px) { #shdApp .xr-layer { grid-template-columns: repeat(2, minmax(0, 1fr)); } }