.ux-toast-stack { position: fixed; z-index: 1200; top: 1rem; right: 1rem; width: min(24rem, calc(100vw - 2rem)); display: grid; gap: .5rem; }
.ux-toast { display: flex; align-items: flex-start; gap: .75rem; padding: .8rem 1rem; border: 1px solid var(--border); border-left: .3rem solid currentColor; border-radius: .6rem; background: var(--bg-elevated); color: var(--text); box-shadow: 0 8px 30px #0004; overflow-wrap: anywhere; }
.ux-toast[data-kind="success"] { border-left-color: #25aa72; }
.ux-toast[data-kind="warning"] { border-left-color: #e0aa34; }
.ux-toast[data-kind="error"] { border-left-color: #df6974; }
.ux-toast p { flex: 1; margin: 0; }
.ux-toast strong { flex: 0 0 auto; }
.ux-toast button { border: 0; background: transparent; color: inherit; cursor: pointer; font: inherit; min-width: 2rem; min-height: 2rem; }
.ux-dialog { width: min(30rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); overflow: auto; padding: 1.5rem; border: 1px solid var(--border); border-radius: .9rem; background: var(--bg-elevated); color: var(--text); box-shadow: 0 16px 60px #0007; }
.ux-dialog::backdrop { background: #0009; }
.ux-dialog h2 { margin: 0 0 .75rem; }
.ux-dialog p { margin: 0 0 1.5rem; overflow-wrap: anywhere; }
.ux-dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .6rem; }
.ux-state { padding: 1rem; border: 1px solid var(--border); border-radius: .6rem; margin-block: .75rem; overflow-wrap: anywhere; }
.ux-state[data-kind="partial"], .ux-state[data-kind="warning"] { border-left: .3rem solid #e0aa34; }
.ux-state[data-kind="error"] { border-left: .3rem solid #df6974; }
.ux-state[data-kind="loading"] { border-left: .3rem solid #7599e3; }
.ux-state h3, .ux-state p { margin: 0 0 .4rem; }
.ux-state p:last-child { margin-bottom: 0; }
.ux-skeleton { background: linear-gradient(90deg, transparent, #8883, transparent); background-size: 200% 100%; animation: ux-shimmer 1.4s linear infinite; border-radius: .35rem; min-height: 1rem; }
@keyframes ux-shimmer { to { background-position: -200% 0; } }
.ux-field-error { display: block; color: var(--danger); margin: .25rem 0 0; font-size: .9rem; }
.ux-inline-result { margin-top: .5rem; }
button[aria-busy="true"] { cursor: progress; }
@media (max-width: 600px) { .ux-toast-stack { top: .5rem; right: .5rem; width: calc(100vw - 1rem); max-height: 45dvh; overflow: auto; } .ux-dialog { padding: 1rem; } }
@media (max-width: 600px) {
  .data-table-cards, .data-table-cards tbody, .data-table-cards tr, .data-table-cards td { display: block; width: 100%; min-width: 0; }
  .data-table-cards thead { display: none; }
  .data-table-cards tbody tr { margin-bottom: .75rem; border: 1px solid var(--border); border-radius: .6rem; background: var(--bg-elevated); padding: .35rem; }
  .data-table-cards tbody td { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; text-align: right; overflow-wrap: anywhere; white-space: normal; border: 0; }
  .data-table-cards tbody td::before { content: attr(data-label); flex: 0 0 40%; color: var(--text-muted); text-align: left; font-weight: 600; }
  .data-table-cards tbody td.actions-col { align-items: center; }
  .data-table-cards tbody td .row-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .35rem; }
}
@media (prefers-reduced-motion: reduce) { .ux-skeleton { animation: none; } }