[data-fui-comp="ui-layout"] {
  box-sizing: border-box;
}
[data-fui-comp="ui-layout"].ui-stack {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md, 8px);
}
[data-fui-comp="ui-layout"].ui-cluster {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--spacing-md, 8px);
  align-items: center;
}
[data-fui-comp="ui-layout"].ui-cluster--nowrap { flex-wrap: nowrap; }

[data-fui-comp="ui-layout"].ui-grid {
  display: grid;
  gap: var(--spacing-md, 8px);
  grid-template-columns: repeat(auto-fit, minmax(var(--ui-grid-min, 16rem), 1fr));
}

[data-fui-comp="ui-layout"].ui-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
[data-fui-comp="ui-layout"].ui-center--viewport { min-block-size: 100vh; }
[data-fui-comp="ui-layout"].ui-center--screen   { min-block-size: 100dvh; }

[data-fui-comp="ui-layout"].ui-spacer {
  flex: 1 1 auto;
  align-self: stretch;
}

[data-fui-comp="ui-layout"].ui-box { background: transparent; }
[data-fui-comp="ui-layout"].ui-box--surface {
  background: var(--color-surface, #FFFFFF);
  border-radius: var(--radii-md, 8px);
}
[data-fui-comp="ui-layout"].ui-box--outlined {
  border: 1px solid var(--color-border, #E4E4E7);
  border-radius: var(--radii-md, 8px);
}
[data-fui-comp="ui-layout"].ui-box--pad-sm { padding: var(--spacing-sm, 4px); }
[data-fui-comp="ui-layout"].ui-box--pad-md { padding: var(--spacing-md, 8px); }
[data-fui-comp="ui-layout"].ui-box--pad-lg { padding: var(--spacing-lg, 16px); }
[data-fui-comp="ui-layout"].ui-box--pad-xl { padding: var(--spacing-xl, 24px); }

/* gap modifiers — apply to ui-stack/ui-cluster/ui-grid. */
[data-fui-comp="ui-layout"].ui-layout--gap-none { gap: 0; }
[data-fui-comp="ui-layout"].ui-layout--gap-xs   { gap: var(--spacing-xs, 2px); }
[data-fui-comp="ui-layout"].ui-layout--gap-sm   { gap: var(--spacing-sm, 4px); }
[data-fui-comp="ui-layout"].ui-layout--gap-lg   { gap: var(--spacing-lg, 16px); }
[data-fui-comp="ui-layout"].ui-layout--gap-xl   { gap: var(--spacing-xl, 24px); }
[data-fui-comp="ui-layout"].ui-layout--gap-2xl  { gap: var(--spacing-2xl, 32px); }

/* alignment modifiers. */
[data-fui-comp="ui-layout"].ui-layout--align-start    { align-items: flex-start; }
[data-fui-comp="ui-layout"].ui-layout--align-center   { align-items: center; }
[data-fui-comp="ui-layout"].ui-layout--align-end      { align-items: flex-end; }
[data-fui-comp="ui-layout"].ui-layout--align-baseline { align-items: baseline; }
[data-fui-comp="ui-layout"].ui-layout--align-stretch  { align-items: stretch; }

[data-fui-comp="ui-layout"].ui-layout--justify-start   { justify-content: flex-start; }
[data-fui-comp="ui-layout"].ui-layout--justify-center  { justify-content: center; }
[data-fui-comp="ui-layout"].ui-layout--justify-end     { justify-content: flex-end; }
[data-fui-comp="ui-layout"].ui-layout--justify-between { justify-content: space-between; }
[data-fui-comp="ui-layout"].ui-layout--justify-around  { justify-content: space-around; }