@font-face { font-family: Inter; src: url('assets/packages/crewlogix_ui/assets/google_fonts/Inter.ttf') format('truetype'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: Sora; src: url('assets/packages/crewlogix_ui/assets/google_fonts/Sora%255Bwght%255D.ttf') format('truetype'); font-weight: 100 800; font-display: swap; }
@font-face { font-family: 'Noto Sans Arabic'; src: url('assets/packages/crewlogix_ui/assets/google_fonts/NotoSansArabic%255Bwdth,wght%255D.ttf') format('truetype'); font-weight: 100 900; font-display: swap; }
html, body { height: 100%; margin: 0; background: var(--clx-color-canvas); color: var(--clx-color-text); }
body { font: var(--clx-font-size-body)/var(--clx-font-line-height-body) Inter, 'Noto Sans Arabic', sans-serif; }
/* Flutter positions its semantics in physical coordinates and applies its own
   locale direction. Inheriting document RTL shifts those hit targets. */
flutter-view { direction: ltr; }
#field-loading { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; padding: var(--clx-space-6); background: var(--clx-color-canvas); }
.field-loading-card { box-sizing: border-box; width: min(100%, 28rem); text-align: center; padding: var(--clx-space-8); border: 1px solid var(--clx-color-border); border-radius: var(--clx-radius-card); background: var(--clx-color-surface); }
.field-brand-icon { display: block; margin-inline: auto; object-fit: contain; }
.field-brand { font-family: Sora, 'Noto Sans Arabic', sans-serif; font-size: var(--clx-font-size-heading-small); font-weight: var(--clx-font-weight-bold); }
.field-spinner { display: inline-block; width: var(--clx-space-6); height: var(--clx-space-6); border: 3px solid var(--clx-color-border); border-top-color: var(--clx-color-action); border-radius: 50%; animation: field-spin 1s linear infinite; }
#field-loading[data-state="error"] { color: var(--clx-color-error); }
#field-loading[data-state="error"] .field-spinner { display: none; }
#field-retry { min-height: 48px; padding: var(--clx-space-3) var(--clx-space-6); border: 1px solid var(--clx-color-action); border-radius: var(--clx-radius-control); background: var(--clx-color-action); color: var(--clx-color-on-action); font: inherit; cursor: pointer; }
#field-retry:hover { background: var(--clx-color-action-hover); }
#field-retry:focus-visible { outline: var(--clx-focus-width) solid var(--clx-color-focus); outline-offset: var(--clx-focus-offset); }
@keyframes field-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .field-spinner { animation: none; } }
@media (forced-colors: active) { .field-loading-card, #field-retry, .field-spinner { border-color: CanvasText; } }