@layer components {
  .cx-toast-region {
    position: fixed;
    inset-block-start: 1rem;
    inset-inline-end: 1rem;
    display: grid;
    gap: .75rem;
    z-index: 1200;
    width: min(380px, calc(100vw - 2rem));
  }

  .cx-toast {
    padding: 1rem;
    border: 1px solid var(--cx-border);
    border-radius: var(--cx-radius-lg);
    background: var(--cx-surface);
    box-shadow: var(--cx-shadow-card);
  }
}

@layer components {
  .cx-audit-timeline { display:grid; gap:1rem; padding:0; margin:0; list-style:none; }
  .cx-audit-timeline li { position:relative; padding:1rem; border:1px solid var(--cx-border); border-radius:var(--cx-radius-lg); background:var(--cx-surface); }
  .cx-audit-time { display:block; color:var(--cx-muted); font-size:.82rem; margin-block-end:.35rem; }
}

@layer components {
  .cx-toast { display:grid; gap:.35rem; border-inline-start:5px solid var(--cx-brand-strong); }
  .cx-toast-title { font-weight:950; color:var(--cx-text); }
  .cx-toast-message { color:var(--cx-muted); font-size:.92rem; }
  .cx-toast[data-state="success"] { border-inline-start-color:var(--cx-sem-profit); background:linear-gradient(135deg,var(--cx-sem-profit-soft),var(--cx-surface)); }
  .cx-toast[data-state="error"], .cx-toast[data-state="danger"] { border-inline-start-color:var(--cx-sem-loss); background:linear-gradient(135deg,var(--cx-sem-loss-soft),var(--cx-surface)); }
  .cx-toast[data-state="warning"] { border-inline-start-color:var(--cx-sem-pending); background:linear-gradient(135deg,var(--cx-sem-pending-soft),var(--cx-surface)); }
  .cx-toast[data-state="info"] { border-inline-start-color:var(--cx-sem-revenue); background:linear-gradient(135deg,var(--cx-sem-revenue-soft),var(--cx-surface)); }
  .cx-skeleton { position:relative; overflow:hidden; background:linear-gradient(90deg,rgba(16,42,45,.055),rgba(16,42,45,.11),rgba(16,42,45,.055)); background-size:220% 100%; animation:cx-skeleton 1.2s ease-in-out infinite; border-radius:var(--cx-radius-md); color:transparent !important; }
  .cx-skeleton-card { min-height:120px; border-radius:var(--cx-radius-lg); }
  .cx-skeleton-line { min-height:.9rem; width:100%; }
  .cx-skeleton-line.sm { width:46%; }
  .cx-skeleton-line.md { width:68%; }
  .cx-skeleton-table-row { min-height:46px; border-block-end:1px solid var(--cx-border); }
  @keyframes cx-skeleton { 0%{background-position:120% 0;} 100%{background-position:-120% 0;} }
}