/* ========================================================
   POLISH: faster-feeling loading, skeletons, empty states,
   mobile effect reduction, readability, button loading
   ======================================================== */
@keyframes plBar{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
@keyframes plSkel{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes plSpin{to{transform:rotate(360deg)}}
@keyframes plFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* ---------- 1. Preloader -> slim top progress bar (page stays visible) ---------- */
#preloader{background:transparent!important;height:3px!important;width:100%!important;bottom:auto!important;align-items:stretch!important;justify-content:flex-start!important;overflow:hidden;pointer-events:none}
#preloader .ai-spinner-container,#preloader .ai-preloader-text{display:none!important}
#preloader::before{content:"";display:block;width:100%;height:3px;background:linear-gradient(90deg,transparent,#F2A900,#FFE9A8,#F2A900,transparent);box-shadow:0 0 12px rgba(242,169,0,.9);animation:plBar 1s ease-in-out infinite}

/* ---------- 2. Skeletons for ajax-filled containers ---------- */
.check-in-list:empty,#mobile-feed-container:empty,#inbox-sidebar:empty,.c-addressList:empty{min-height:210px;border-radius:18px;
  background:linear-gradient(100deg,rgba(255,255,255,.04) 30%,rgba(255,255,255,.14) 50%,rgba(255,255,255,.04) 70%);background-size:200% 100%;animation:plSkel 1.4s linear infinite;
  -webkit-mask:linear-gradient(#000 0 56px,transparent 56px 72px,#000 72px 128px,transparent 128px 144px,#000 144px 200px,transparent 200px);mask:linear-gradient(#000 0 56px,transparent 56px 72px,#000 72px 128px,transparent 128px 144px,#000 144px 200px,transparent 200px)}

/* ---------- 3. Empty states ---------- */
.empty-orb{width:84px;height:84px;margin:0 auto 18px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:34px;color:#F2A900;
  background:linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.22);box-shadow:0 0 28px rgba(242,169,0,.3),inset 0 1px 0 rgba(255,255,255,.3);animation:plFloat 3.2s ease-in-out infinite}
.empty-orb i{filter:drop-shadow(0 0 10px rgba(242,169,0,.8))}
.empty-sub{color:#b8c6dd!important;font-size:13px!important;margin:6px 0 18px!important;text-transform:none!important;letter-spacing:0!important;font-weight:500!important}
.empty-cta{display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 24px;border-radius:14px;background:linear-gradient(135deg,#FFD76A,#F2A900);color:#1a1200!important;font-weight:800;font-size:13px;letter-spacing:.5px;text-transform:uppercase;text-decoration:none!important;box-shadow:0 0 22px rgba(242,169,0,.5)}
.no-records-placeholder{padding:56px 20px!important}

/* ---------- 4. Readability ---------- */
:root{--text-muted:#b8c6dd!important}
.kpi-label,.mini-box-label,.mission-finance-lbl,.viz-kv-label,.wallet-date,.withdrawal-date,.chat-msg-meta,.inbox-item-date,.notif-card-date,.circle-hint{color:#b8c6dd!important}
.kpi-label,.mini-box-label,.mission-finance-lbl,.wallet-order-id,.withdrawal-order-id,.chat-msg-meta,.inbox-item-date,.notif-card-date{font-size:12px!important}
.sys-label,.telemetry-title-box .sys-label{font-size:11.5px!important}
.side-nav-section-title,.ref-stats small,.ref-user-code{font-size:13px!important}
/* comfortable touch targets */
.ref-burger,.ref-avatar{min-width:40px;min-height:40px}
.side-navbar-close{min-width:40px;min-height:40px}
.tab-link,.toolbar a{min-height:44px}

/* ---------- 5. Button loading state ---------- */
button.is-loading,.is-loading[type=submit]{position:relative;pointer-events:none;color:transparent!important}
button.is-loading::after{content:"";position:absolute;inset:0;margin:auto;width:20px;height:20px;border-radius:50%;border:3px solid rgba(26,18,0,.25);border-top-color:#1a1200;animation:plSpin .7s linear infinite}

/* ---------- 6. Lighter effects on phones / touch / low-power ---------- */
@media (max-width:768px),(pointer:coarse){
  :is(.page,.auth-page-wrapper,.wallet-container,.wallet-history-container,.page-my-mission,.livechat-page-root,.withdrawal-container,.withdrawal-history-container,.uaddress-container,.profile-page-root,.notification-page,.page-buy-order)::after{display:none!important}
  .page-content::before,.page-content::after{display:none!important}
  .auth-card::before,.chat-glass-room::before{display:none!important}
  [class*="card"],[class*="panel"],.kpi-chip,.stat-mini-box,.mission-card{backdrop-filter:blur(8px) saturate(140%)!important;-webkit-backdrop-filter:blur(8px) saturate(140%)!important}
  [class*="card"]::before,[class*="panel"]::before,.kpi-chip::before{animation-duration:10s!important}
}
@media (prefers-reduced-data:reduce){
  :is(.page,.page-buy-order,.notification-page)::before{animation:none!important}
}