/**
 * LIFTY OS — Shared UX utilities
 * Include in all pages: <link rel="stylesheet" href="/css/shared.css">
 */

/* Skeleton loading */
.skeleton{background:linear-gradient(90deg,rgba(255,255,255,.04) 25%,rgba(255,255,255,.08) 50%,rgba(255,255,255,.04) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:8px;height:16px}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* Toast notification */
.toast{position:fixed;bottom:100px;left:50%;transform:translateX(-50%);background:#0d1117;border:1px solid rgba(0,170,255,.3);color:#fff;padding:12px 24px;border-radius:12px;font-size:13px;font-weight:600;z-index:600;opacity:0;transition:opacity .3s;pointer-events:none;max-width:90%;text-align:center}
.toast.show{opacity:1}

/* Button loading state */
.btn.loading{opacity:.6;pointer-events:none}
.btn.loading::after{content:'';width:14px;height:14px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite;display:inline-block;margin-left:8px;vertical-align:middle}
@keyframes spin{to{transform:rotate(360deg)}}

/* Empty state */
.empty-state{text-align:center;padding:48px 20px;color:rgba(255,255,255,.3)}
.empty-state-icon{font-size:40px;margin-bottom:10px}
.empty-state-title{font-size:16px;font-weight:700;color:rgba(255,255,255,.5);margin-bottom:6px}

/* Mobile global fixes */
@media(max-width:768px){
  /* Prevent iOS zoom on input focus */
  input,select,textarea{font-size:16px!important}
  /* Prevent horizontal scroll */
  html,body{overflow-x:hidden;max-width:100vw}
}