.widget-settings-backdrop { position: fixed; inset: 0; z-index: 419; }
.widget-settings-panel {
  --widget-panel-fill: #eee;
  --app-slider-height: 24px; --app-slider-thumb-size: 24px; --app-progress-height: 16px;
  position: fixed; z-index: 420;
  top: calc(56px + env(safe-area-inset-top, 0px));
  right: calc(16px + env(safe-area-inset-right, 0px));
  width: min(430px, calc(100% - 32px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
  max-height: calc(100vh - 72px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  max-height: calc(100dvh - 72px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; box-sizing: border-box;
  color: var(--ui-text, #252525);
  background: linear-gradient(var(--widget-panel-fill), var(--widget-panel-fill)) padding-box,
    linear-gradient(var(--app-button-inner-top), var(--app-button-inner-bottom)) border-box;
  border: 1px solid transparent; border-radius: 8px;
  box-shadow: var(--app-button-hover-shadow);
  overflow: hidden; letter-spacing: 0;
}
:root.ui-dark .widget-settings-panel { --widget-panel-fill: #252525; }
.widget-settings-backdrop[hidden], .widget-settings-panel[hidden], .widget-settings-panel [hidden] { display: none !important; }
.widget-settings-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; flex: 0 0 auto; }
.widget-settings-head h2 { flex: 1; min-width: 0; margin: 0; font-size: 18px; line-height: 1.25; letter-spacing: 0; overflow-wrap: anywhere; }
.widget-settings-head .settings-close { position: static; flex: 0 0 28px; width: 28px; height: 28px; margin: 0; }
.widget-settings-head .settings-close img { width: 18px; height: 18px; }
.widget-settings-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 6px 18px 22px; scrollbar-gutter: stable; }
.widget-settings-body .settings-widget-group { padding: 0; margin: 0; }
.widget-settings-body .draw-style-row { min-width: 0; flex-wrap: wrap; }
.widget-settings-body .draw-style-label, .widget-settings-body .settings-widget-label { min-width: 0; white-space: normal; }
.widget-settings-body .settings-widget-label--wide { flex: 1 1 145px; }
.widget-settings-body select { min-width: 0; max-width: 100%; }
.widget-settings-body .flow-intro { margin: 0 0 12px; font-size: 16px; line-height: 1.25; }
.widget-settings-body .flow-intro strong { font-weight: 500; }
.widget-settings-body .flow-help { margin: 0 0 20px; border: 0; padding: 0; }
.widget-settings-body .flow-help summary { text-align: right; color: var(--ui-link, #008fce); font-size: 16px; font-weight: 400; }
.widget-settings-body .flow-help p { font-size: 14px; line-height: 1.4; }
.flow-palette { display: grid; gap: 14px; margin: 20px 0 28px; }
.flow-palette-row { display: flex; align-items: center; gap: 24px; min-height: 30px; }
.flow-palette-row label { margin: 0; font-size: 16px; font-weight: 400; line-height: 1.25; }
.flow-palette-row input[type="color"] {
  appearance: none; -webkit-appearance: none; flex: 0 0 54px; width: 54px; height: 26px;
  min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 8px; cursor: pointer; background: transparent;
}
.flow-palette-row input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.flow-palette-row input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 8px; box-shadow: inset 0 2px 3px rgba(0,0,0,.18); }
.flow-palette-row input[type="color"]::-moz-color-swatch { border: 0; border-radius: 8px; }
.flow-palette-row input[type="color"]:focus-visible { outline: 2px solid var(--ui-focus-ring, #00aacc); outline-offset: 3px; }
.flow-palette-row input[type="color"]:disabled { opacity: .5; cursor: default; }
.flow-sensitivity { margin: 26px 0 24px; }
.flow-sensitivity-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.flow-sensitivity-head label { margin: 0; font-size: 16px; font-weight: 400; }
.flow-sensitivity-head output { color: var(--ui-muted); font-size: 14px; white-space: nowrap; }
.flow-sensitivity input { width: 100%; margin: 0; }
.widget-settings-body .flow-v2-model-row { display: grid; gap: 8px; margin: 0 0 12px; }
.widget-settings-body .flow-v2-model-row label { font-size: 16px; font-weight: 400; }
.widget-settings-body #flowV2Model { width: 100%; max-width: 100%; margin: 0; }
.widget-settings-body #flowV2Status { font-size: 12px; color: var(--ui-muted); margin: 12px 0 0; }
.position-sizing-settings { display: grid; gap: 18px; }
.position-sizing-settings fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.position-sizing-settings legend { padding: 0; margin-bottom: 8px; font-weight: 400; }
.position-sizing-segmented { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.position-sizing-segmented label { position: relative; margin: 0; min-width: 0; cursor: pointer; font-weight: 400; }
.position-sizing-segmented input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.position-sizing-segmented span { display: grid; place-items: center; height: 40px; background: var(--ui-control-bg, #e0e0e0); border-radius: 6px; font-size: 14px; }
.position-sizing-segmented input:checked + span { background: #478457; color: white; }
.position-sizing-segmented input:focus-visible + span { outline: 2px solid var(--ui-focus-ring, #00aacc); outline-offset: 2px; }
.position-sizing-segmented input:disabled + span { opacity: .4; cursor: not-allowed; }
.position-sizing-field { display: grid; gap: 8px; min-width: 0; margin: 0; font-weight: 400; }
.position-sizing-field input { width: 100%; min-width: 0; box-sizing: border-box; height: 40px; }
.position-sizing-field .num-spin { width: 100%; min-width: 0; height: 40px; box-sizing: border-box; }
.position-sizing-field .num-spin input[type="number"] { flex: 1; min-width: 0; width: 0; text-align: left; padding: 0 12px; font-size: 16px; }
.position-sizing-amount { display: grid; grid-template-columns: minmax(0, 1fr) 24px; align-items: center; gap: 8px; }
@media (max-height: 420px) {
  .widget-settings-panel { top: calc(8px + env(safe-area-inset-top, 0px)); max-height: calc(100dvh - 16px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); }
}