/* Shared native control styles; used by React wrappers and the original preview.
   Scope every reset; keep images, SVG internals and canvas untouched. */
:where([data-universe-ui]) { font: var(--u-weight-regular) var(--u-text-body)/var(--u-leading-body) var(--u-font); letter-spacing: var(--u-tracking-text); word-spacing: normal; font-kerning: normal; color: var(--u-fg); }
:where([data-universe-ui], [data-universe-ui] *, [data-universe-ui] *::before, [data-universe-ui] *::after) { box-sizing: border-box; }
:where([data-universe-ui]) :where(a) { color: inherit; }
:where([data-universe-ui]) :where(button, input, textarea, select) { font: inherit; color: inherit; }
:where([data-universe-ui]) :where(button, a, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--u-focus); outline-offset: 3px;
}
:where([data-universe-ui]) [hidden] { display: none !important; }
:where([data-universe-ui]) .u-btn {
  display: inline-flex; justify-content: center; align-items: center; gap: var(--u-space-2);
  min-height: var(--u-control-height); padding: var(--u-control-padding-y) var(--u-space-4);
  font-size: var(--u-text-ui); line-height: var(--u-leading-ui); font-weight: var(--u-weight-medium);
  border: 1px solid var(--u-line); border-radius: var(--u-radius-pill);
  background: var(--u-surface); color: var(--u-fg); cursor: pointer; text-decoration: none;
  transition: background var(--u-duration), color var(--u-duration), box-shadow var(--u-duration) var(--u-ease), transform var(--u-duration) var(--u-ease); white-space: nowrap;
}
:where([data-universe-ui]) .u-btn:hover { background: var(--u-subtle); }
:where([data-universe-ui]) .u-btn:active { transform: translateY(1px); }
:where([data-universe-ui]) .u-btn--primary { background: var(--u-primary); color: var(--u-on-primary); border-color: transparent; box-shadow: var(--u-shadow-selected); }
:where([data-universe-ui]) .u-btn--primary:hover { background: var(--u-primary-hover); }
:where([data-universe-ui]) .u-btn--primary:active { background: var(--u-primary-active); }
:where([data-universe-ui]) .u-btn--ghost { border-color: transparent; background: transparent; }
:where([data-universe-ui]) .u-btn--icon { width: var(--u-control-height); padding: 0; flex-shrink: 0; }
:where([data-universe-ui]) .u-btn:disabled { background: var(--u-disabled-bg); color: var(--u-disabled-fg); border-color: transparent; cursor: not-allowed; transform: none; }
:where([data-universe-ui]) .u-input {
  display: block; width: 100%; min-height: var(--u-control-height); padding: var(--u-control-padding-y) var(--u-space-3);
  border: 1px solid var(--u-control-border); border-radius: var(--u-radius-control);
  background: var(--u-surface); font-size: var(--u-text-body); line-height: var(--u-leading-body);
}
:where([data-universe-ui]) .u-input::placeholder { color: var(--u-muted); opacity: 1; }
:where([data-universe-ui]) .u-input[aria-invalid="true"] { border: 2px solid var(--u-danger-fg); }
:where([data-universe-ui]) .u-label { display: block; font-size: var(--u-text-ui); font-weight: var(--u-weight-medium); margin-bottom: var(--u-space-2); }
:where([data-universe-ui]) .u-hint { color: var(--u-muted); font-size: var(--u-text-small); line-height: 1.5; }
:where([data-universe-ui]) .u-error { color: var(--u-danger-fg); font-size: var(--u-text-ui); font-weight: 600; }
:where([data-universe-ui]) .u-error::before { content: "!"; display: inline-grid; place-items: center; width: 18px; height: 18px; border: 1px solid currentColor; border-radius: 50%; margin-right: 8px; font-size: 12px; }
:where([data-universe-ui]) .u-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: var(--u-radius-pill); font-size: var(--u-text-small); line-height: 1.5; white-space: nowrap; background: var(--u-subtle); color: var(--u-muted); }
:where([data-universe-ui]) .u-badge .u-icon { width: 15px; height: 15px; }
:where([data-universe-ui]) .u-badge--success { background: var(--u-success-bg); color: var(--u-success-fg); }
:where([data-universe-ui]) .u-badge--danger { background: var(--u-danger-bg); color: var(--u-danger-fg); font-weight: 600; }
:where([data-universe-ui]) .u-badge--info { background: var(--u-info-bg); color: var(--u-info-fg); }
:where([data-universe-ui]) .u-panel { background: var(--u-surface); border: 1px solid var(--u-line); border-radius: var(--u-radius-panel); box-shadow: var(--u-shadow-panel); }
:where([data-universe-ui]) .u-collection-card { transition: box-shadow var(--u-duration) var(--u-ease), transform var(--u-duration) var(--u-ease); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  :where([data-universe-ui]) .u-collection-card:has(button:hover), :where([data-universe-ui]) .u-collection-card:focus-within { box-shadow: var(--u-shadow-hover); }
}
:where([data-universe-ui]) .u-icon { width: var(--u-space-4); height: var(--u-space-4); fill: currentColor; flex: 0 0 auto; vertical-align: middle; }
:where([data-universe-ui]) .u-dialog {
  width: min(560px, calc(100% - 32px)); max-height: calc(100dvh - 32px); margin: auto;
  padding: var(--u-space-6); overflow: auto; color: var(--u-fg); background: var(--u-surface);
  border: 1px solid var(--u-line); border-radius: var(--u-radius-dialog); box-shadow: var(--u-shadow-dialog);
}
:where([data-universe-ui]) .u-dialog::backdrop { background: var(--u-overlay); }
:where([data-universe-ui]) .u-dialog h2 { font-size: var(--u-text-section); font-weight: var(--u-weight-heading); margin: 0; }
:where([data-universe-ui]) .u-dialog p { margin: var(--u-space-3) 0; }
:where([data-universe-ui]) .u-dialog__head { display: flex; justify-content: space-between; align-items: center; gap: var(--u-space-4); }
:where([data-universe-ui]) .u-dialog__actions { display: flex; justify-content: flex-end; gap: var(--u-space-3); margin-top: var(--u-space-6); flex-wrap: wrap; }
:where([data-universe-ui]) .u-empty { padding: var(--u-space-8) var(--u-space-4); text-align: center; }
:where([data-universe-ui]) .u-empty h3 { font-size: var(--u-text-section); line-height: var(--u-leading-title); font-weight: var(--u-weight-heading); margin: 0 0 var(--u-space-2); text-wrap: balance; }
:where([data-universe-ui]) .u-empty p { color: var(--u-muted); margin: 0 0 var(--u-space-4); }
@media (max-width: 767px) { :where([data-universe-ui]) .u-dialog { padding: var(--u-space-6); } }
@media (prefers-reduced-motion: reduce) { :where([data-universe-ui]) .u-btn:active { transform: none; } }