<section class="ba-mat" aria-label="Material Design floating alert demo">
  <div class="label">// Material You alert cards</div>

  <div class="md-alert md-alert--error">
    <div class="md-alert-strip" aria-hidden="true"></div>
    <div class="md-alert-body">
      <div class="md-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg></div>
      <div class="md-text"><div class="md-supporting">Error · Authentication</div><div class="md-headline">Sign-in failed</div><div class="md-body-text">Your session has expired or the credentials provided are incorrect. Please sign in again to continue.</div></div>
    </div>
    <div class="md-divider" aria-hidden="true"></div>
    <div class="md-actions"><button class="md-btn md-btn--text" type="button">Dismiss</button><button class="md-btn md-btn--filled" type="button">Sign in</button></div>
  </div>

  <div class="md-alert md-alert--success">
    <div class="md-alert-strip" aria-hidden="true"></div>
    <div class="md-alert-body">
      <div class="md-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg></div>
      <div class="md-text"><div class="md-supporting">Confirmed · Payment</div><div class="md-headline">Order placed successfully</div><div class="md-body-text">Order #ORD-88214 has been confirmed. Your package will be dispatched within 1 business day.</div></div>
    </div>
    <div class="md-divider" aria-hidden="true"></div>
    <div class="md-actions"><button class="md-btn md-btn--text" type="button">Dismiss</button><button class="md-btn md-btn--filled" type="button">Track order</button></div>
  </div>

  <div class="md-alert md-alert--warning">
    <div class="md-alert-strip" aria-hidden="true"></div>
    <div class="md-alert-body">
      <div class="md-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/></svg></div>
      <div class="md-text"><div class="md-supporting">Warning · Storage</div><div class="md-headline">Storage limit almost reached</div><div class="md-body-text">You've used 4.7 GB of your 5 GB quota. Manage files or upgrade your plan to avoid disruption.</div></div>
    </div>
    <div class="md-divider" aria-hidden="true"></div>
    <div class="md-actions"><button class="md-btn md-btn--text" type="button">Manage files</button><button class="md-btn md-btn--filled" type="button">Upgrade</button></div>
  </div>

  <div class="md-alert md-alert--info">
    <div class="md-alert-strip" aria-hidden="true"></div>
    <div class="md-alert-body">
      <div class="md-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg></div>
      <div class="md-text"><div class="md-supporting">Info · Maintenance</div><div class="md-headline">Scheduled downtime this weekend</div><div class="md-body-text">We'll be performing infrastructure upgrades Saturday 23:00–01:00 UTC.</div></div>
    </div>
    <div class="md-divider" aria-hidden="true"></div>
    <div class="md-actions"><button class="md-btn md-btn--text" type="button">Remind me</button><button class="md-btn md-btn--filled" type="button">View details</button></div>
  </div>

  <div class="md-alert md-alert--primary">
    <div class="md-alert-strip" aria-hidden="true"></div>
    <div class="md-alert-body">
      <div class="md-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 1l2.7 7.6H22l-6.2 4.6 2.4 7.4L12 16.2 5.8 20.6l2.4-7.4L2 8.6h7.3z"/></svg></div>
      <div class="md-text"><div class="md-supporting">New · Feature update</div><div class="md-headline">AI writing assistant is live</div><div class="md-body-text">Smart autocomplete is now available in the editor. Start typing to see contextual suggestions powered by your writing style.</div></div>
    </div>
    <div class="md-divider" aria-hidden="true"></div>
    <div class="md-actions"><button class="md-btn md-btn--text" type="button">Later</button><button class="md-btn md-btn--filled" type="button">Try now</button></div>
  </div>

  <div class="label label-spaced">// Snackbar variant</div>
  <div class="md-snack" role="status">
    <span class="md-snack-text">Message sent · Archived to your sent folder.</span>
    <button class="md-snack-action" type="button">Undo</button>
  </div>
</section>

/* ─── 13 Material Design Floating Alert Card — Material You ─── */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;700&family=Roboto+Mono:wght@400;500&display=swap');

.ba-mat {
  --ba-mat-background: #fef7ff;
  --ba-mat-surface: #fff;
  --ba-mat-surface-variant: #e7e0ec;
  --ba-mat-on-surface: #1c1b1f;
  --ba-mat-on-surface-variant: #49454f;
  --ba-mat-outline: #79747e;
  --ba-mat-outline-variant: #cac4d0;
  --ba-mat-primary: #6750a4;
  --ba-mat-primary-container: #eaddff;
  --ba-mat-error: #b3261e;
  --ba-mat-error-container: #f9dedc;
  --ba-mat-c-success: #386a20; --ba-mat-c-success-bg: #c5ecca;
  --ba-mat-c-warning: #6e4a00; --ba-mat-c-warning-bg: #ffddb5;
  --ba-mat-c-info: #0061a4; --ba-mat-c-info-bg: #d1e4ff;
  --ba-mat-elev-1: 0 1px 2px rgba(0,0,0,0.3), 0 1px 3px 1px rgba(0,0,0,0.15);
  --ba-mat-elev-2: 0 1px 2px rgba(0,0,0,0.3), 0 2px 6px 2px rgba(0,0,0,0.15);
  --ba-mat-elev-3: 0 4px 8px 3px rgba(0,0,0,0.15), 0 1px 3px rgba(0,0,0,0.3);
  --ba-mat-elev-4: 0 6px 10px 4px rgba(0,0,0,0.15), 0 2px 3px rgba(0,0,0,0.3);
  --ba-mat-radius-sm: 12px;
  --ba-mat-radius-md: 16px;
  --ba-mat-radius-full: 1000px;

  position: relative;
  width: 100%;
  min-height: 1000px;
  background: var(--ba-mat-background);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px;
  padding: 60px 20px;
  font-family: 'Roboto', 'DM Sans', sans-serif;
  color: var(--ba-mat-on-surface);
  box-sizing: border-box;
}
.ba-mat *, .ba-mat *::before, .ba-mat *::after { box-sizing: border-box; margin: 0; padding: 0; }

.ba-mat .label { font-family: 'Roboto Mono', monospace; font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ba-mat-outline); opacity: 0.5; align-self: flex-start; max-width: 560px; width: 100%; }
.ba-mat .label-spaced { margin-top: 8px; }

.ba-mat .md-alert { width: 100%; max-width: 560px; background: var(--ba-mat-surface); border-radius: var(--ba-mat-radius-md); box-shadow: var(--ba-mat-elev-3); overflow: hidden; transition: box-shadow 0.25s, transform 0.25s; animation: ba-mat-in 0.35s cubic-bezier(0.05, 0.7, 0.1, 1.0) both; }
.ba-mat .md-alert:hover { box-shadow: var(--ba-mat-elev-4); transform: translateY(-2px); }
.ba-mat .md-alert:nth-child(2) { animation-delay: 0.0s; } .ba-mat .md-alert:nth-child(3) { animation-delay: 0.06s; } .ba-mat .md-alert:nth-child(4) { animation-delay: 0.12s; } .ba-mat .md-alert:nth-child(5) { animation-delay: 0.18s; } .ba-mat .md-alert:nth-child(6) { animation-delay: 0.24s; }
@keyframes ba-mat-in { from { opacity: 0; transform: scale(0.94) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } }
.ba-mat .md-alert-strip { height: 4px; width: 100%; }
.ba-mat .md-alert-body { padding: 16px 16px 12px; display: flex; gap: 16px; align-items: flex-start; }
.ba-mat .md-icon { flex-shrink: 0; width: 40px; height: 40px; border-radius: var(--ba-mat-radius-sm); display: flex; align-items: center; justify-content: center; }
.ba-mat .md-icon svg { width: 24px; height: 24px; }
.ba-mat .md-text { flex: 1; min-width: 0; }
.ba-mat .md-supporting { font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ba-mat-on-surface-variant); margin-bottom: 4px; }
.ba-mat .md-headline { font-family: 'DM Sans', sans-serif; font-size: 16px; font-weight: 500; color: var(--ba-mat-on-surface); line-height: 1.3; letter-spacing: 0.01em; margin-bottom: 6px; }
.ba-mat .md-body-text { font-size: 13.5px; color: var(--ba-mat-on-surface-variant); line-height: 1.6; }
.ba-mat .md-divider { height: 1px; background: var(--ba-mat-outline-variant); margin: 0 16px; }
.ba-mat .md-actions { display: flex; align-items: center; justify-content: flex-end; gap: 4px; padding: 8px; }
.ba-mat .md-btn { font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 500; letter-spacing: 0.06em; padding: 8px 16px; border: none; border-radius: var(--ba-mat-radius-full); cursor: pointer; position: relative; overflow: hidden; transition: all 0.2s; background: transparent; }
.ba-mat .md-btn::after { content: ''; position: absolute; inset: 0; background: currentColor; opacity: 0; transition: opacity 0.2s; border-radius: inherit; }
.ba-mat .md-btn:hover::after { opacity: 0.08; }
.ba-mat .md-btn:active::after { opacity: 0.16; }
.ba-mat .md-btn--text { color: var(--ba-mat-on-surface-variant); }
.ba-mat .md-btn--filled { padding: 8px 24px; color: white; box-shadow: var(--ba-mat-elev-1); }
.ba-mat .md-btn--filled:hover { box-shadow: var(--ba-mat-elev-2); }

.ba-mat .md-alert--error .md-alert-strip { background: var(--ba-mat-error); }
.ba-mat .md-alert--error .md-icon { background: var(--ba-mat-error-container); color: var(--ba-mat-error); }
.ba-mat .md-alert--error .md-btn--filled { background: var(--ba-mat-error); }
.ba-mat .md-alert--error .md-btn--text { color: var(--ba-mat-error); }

.ba-mat .md-alert--success .md-alert-strip { background: var(--ba-mat-c-success); }
.ba-mat .md-alert--success .md-icon { background: var(--ba-mat-c-success-bg); color: var(--ba-mat-c-success); }
.ba-mat .md-alert--success .md-btn--filled { background: var(--ba-mat-c-success); }
.ba-mat .md-alert--success .md-btn--text { color: var(--ba-mat-c-success); }

.ba-mat .md-alert--warning .md-alert-strip { background: var(--ba-mat-c-warning); }
.ba-mat .md-alert--warning .md-icon { background: var(--ba-mat-c-warning-bg); color: var(--ba-mat-c-warning); }
.ba-mat .md-alert--warning .md-btn--filled { background: var(--ba-mat-c-warning); }
.ba-mat .md-alert--warning .md-btn--text { color: var(--ba-mat-c-warning); }

.ba-mat .md-alert--info .md-alert-strip { background: var(--ba-mat-c-info); }
.ba-mat .md-alert--info .md-icon { background: var(--ba-mat-c-info-bg); color: var(--ba-mat-c-info); }
.ba-mat .md-alert--info .md-btn--filled { background: var(--ba-mat-c-info); }
.ba-mat .md-alert--info .md-btn--text { color: var(--ba-mat-c-info); }

.ba-mat .md-alert--primary .md-alert-strip { background: var(--ba-mat-primary); }
.ba-mat .md-alert--primary .md-icon { background: var(--ba-mat-primary-container); color: var(--ba-mat-primary); }
.ba-mat .md-alert--primary .md-btn--filled { background: var(--ba-mat-primary); }
.ba-mat .md-alert--primary .md-btn--text { color: var(--ba-mat-primary); }

.ba-mat .md-snack { width: 100%; max-width: 560px; background: #313033; border-radius: var(--ba-mat-radius-sm); box-shadow: var(--ba-mat-elev-3); padding: 12px 8px 12px 16px; display: flex; align-items: center; gap: 16px; animation: ba-mat-in 0.35s cubic-bezier(0.05, 0.7, 0.1, 1.0) 0.3s both; }
.ba-mat .md-snack-text { flex: 1; font-size: 14px; font-weight: 400; color: #e6e1e5; line-height: 1.4; }
.ba-mat .md-snack-action { font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 500; color: #d0bcff; letter-spacing: 0.06em; background: transparent; border: none; border-radius: var(--ba-mat-radius-full); padding: 8px 12px; cursor: pointer; white-space: nowrap; }

@media (prefers-reduced-motion: reduce) { .ba-mat .md-alert, .ba-mat .md-snack { animation: none; } }