/* =====================================================================
   QWorks — layar memuat bersama (qworks-loading.css)
   Dimuat sendiri di <head> SETIAP halaman modul, sebelum gaya lain,
   agar layar memuat tampil benar walau qworks-ui.css belum/tidak dimuat
   atau masih tersimpan versi lama di cache. Nilai warna ditulis literal
   dengan fallback var() supaya tidak bergantung token halaman.
   ===================================================================== */
/* ---------------------------------------------------------------
   Layar memuat (sama di semua modul)
   Markup: <div id="screen-loading" class="qw-loading" role="status"
   data-module="Base Lab"> … </div>. Latar navy logo, pita hazard di
   tepi atas, logo varian reverse dengan busur amber yang mengorbit,
   wordmark, garis progres 2 px, teks "Memuat …".
   --------------------------------------------------------------- */
.qw-loading {
  position: fixed; inset: 0; z-index: 60;
  display: flex; flex-direction: column; justify-content: space-between;
  background: var(--qw-brand, #0D192B); color: #FFFFFF;
  font-family: "Barlow", ui-sans-serif, system-ui, sans-serif;
  overflow: hidden;
}
.qw-loading[hidden], .qw-loading.hidden { display: none !important; }
.qw-loading::before {
  content: ""; display: block; height: 6px; flex: none;
  background: repeating-linear-gradient(45deg, var(--qw-logo-amber, #FDB503) 0 14px, var(--qw-brand, #0D192B) 14px 28px);
}
.qw-loading::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: min(120vw, 1100px); aspect-ratio: 1;
  transform: translate(-50%, -50%); border-radius: 50%; border: 1px solid rgba(255,255,255,.05); pointer-events: none;
}
.qw-loading-body {
  position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 28px;
  padding: 24px; text-align: center;
}
.qw-loading-mark { position: relative; width: 176px; height: 176px; display: grid; place-items: center; }
.qw-loading-mark img { width: 108px; height: 108px; display: block; }
.qw-loading-mark::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(255,255,255,.10);
}
.qw-loading-orbit {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(253,181,3,0) 0deg 250deg, var(--qw-logo-amber, #FDB503) 360deg);
  -webkit-mask: radial-gradient(circle, transparent 0, transparent 84px, #000 85px, #000 88px, transparent 89px);
  mask: radial-gradient(circle, transparent 0, transparent 84px, #000 85px, #000 88px, transparent 89px);
  animation: qw-orbit 2.4s cubic-bezier(.65,.05,.36,1) infinite;
}
.qw-loading-word { width: 184px; height: auto; display: block; }
.qw-loading-bar { width: min(320px, 70vw); height: 2px; background: rgba(255,255,255,.14); overflow: hidden; }
.qw-loading-bar span { display: block; height: 100%; width: 40%; background: var(--qw-logo-amber, #FDB503); animation: qw-slide 1.6s cubic-bezier(.4,0,.2,1) infinite; }
.qw-loading-text { margin: -10px 0 0; font-size: 14px; font-weight: 500; color: #AEB8CC; }
.qw-loading-foot {
  position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 0 24px 20px; font-size: 12px; color: #AEB8CC;
}
@keyframes qw-orbit { to { transform: rotate(360deg); } }
@keyframes qw-slide { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
@media (prefers-reduced-motion: reduce) {
  .qw-loading-orbit { animation: none; background: conic-gradient(from 0deg, rgba(253,181,3,0) 0deg 250deg, var(--qw-logo-amber, #FDB503) 360deg); }
  .qw-loading-bar span { animation: none; width: 60%; }
}
@media print { .qw-loading { display: none !important; } }