/** * Blocking FOUC-safe chrome for the admin kiosk welcome toast. * Loaded from index.html so title/subtitle never glue if main CSS is late. */ .kiosk-welcome-toast { display: flex; align-items: center; gap: 0.75rem; width: 100%; max-width: 22rem; padding: 0.5rem 0.75rem; border-radius: 1rem; border: 1px solid rgba(251, 191, 36, 0.45); background: rgba(255, 255, 255, 0.92); color: #451a03; font-size: 0.875rem; font-weight: 600; box-shadow: 0 8px 24px rgba(69, 26, 3, 0.12); } .kiosk-welcome-toast__icon { flex-shrink: 0; width: 1rem; height: 1rem; } .kiosk-welcome-toast__action { flex: 1; min-width: 0; min-height: 2.75rem; margin: 0; padding: 0.25rem 0.5rem; border: 0; border-radius: 0.75rem; background: transparent; color: inherit; font: inherit; font-weight: 600; text-align: left; cursor: pointer; } .kiosk-welcome-toast__title, .kiosk-welcome-toast__sub { display: block; line-height: 1.35; } .kiosk-welcome-toast__sub { margin-top: 0.15rem; font-size: 0.7rem; font-weight: 500; opacity: 0.72; } .kiosk-welcome-toast__dismiss { flex-shrink: 0; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin: 0; padding: 0; border: 0; border-radius: 0.75rem; background: transparent; color: inherit; cursor: pointer; } /* Match app theme class (set early on ), not OS prefers-color-scheme. */ html.dark .kiosk-welcome-toast { border-color: rgba(251, 191, 36, 0.22); background: rgba(28, 25, 23, 0.92); color: #fffbeb; }