/* Sublime LMS — Zoho CRM demo console (pages/zoho_crm_console): the note shown
   when a visitor opens a part of the console that the demo does not include. */
.zcd-console-note { position: fixed; z-index: 9999; left: 50%; bottom: 20px; transform: translate(-50%, 12px); max-width: calc(100% - 32px); padding: 10px 16px; border-radius: 12px; background: #15103b; color: #fff; font: 600 13.5px/1.4 Inter, system-ui, sans-serif; opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; }
.zcd-console-note.is-on { opacity: 1; transform: translate(-50%, 0); }

.zcd-console-loading { min-height: 100vh; display: grid; place-content: center; justify-items: center; gap: 10px; padding: 24px; background: #F6F4FB; font: 14px/1.4 Inter, system-ui, sans-serif; color: #15103b; text-align: center; }
.zcd-console-loading b { font-weight: 650; }
.zcd-console-loading small { color: #6B6590; font-size: 12.5px; }
.zcd-console-spinner { width: 38px; height: 38px; margin-bottom: 4px; border-radius: 50%; border: 3px solid #E4DDF7; border-top-color: #6D28D9; animation: zcd-spin .8s linear infinite; }
@keyframes zcd-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .zcd-console-spinner { animation-duration: 2.4s; } }

/* Once connected, the demo's Zoho app panel (Client ID, secret, redirect URI)
   leads the details grid with Connection beside it, ahead of Overview. */
.ig-detail-grid > [aria-labelledby="ig-app"] { order: -2; }
.ig-detail-grid > [aria-labelledby="ig-connection"] { order: -1; }