/* Shared motion for the UI kit (UcsUi/UcsIdle, shared/ui.js + shared/motion.css). Color and layout stay in each screen's stylesheet. */
.skel-list { display: grid; gap: 12px; padding: 4px 0 8px; }
.skel-row { display: flex; gap: 12px; align-items: center; }
.skel-thumb { width: 56px; height: 56px; border-radius: 12px; flex: none; }
.skel-lines { flex: 1; display: grid; gap: 8px; min-width: 0; }
.skel-line { display: block; height: 12px; border-radius: 8px; }
.skel-line.is-short { width: 58%; }
.skel {
  background-color: color-mix(in srgb, currentColor 10%, transparent);
  background-image: linear-gradient(90deg, transparent, color-mix(in srgb, currentColor 16%, transparent), transparent);
  background-size: 220% 100%;
  background-position: 100% 0;
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.ucs-toasts {
  position: fixed; left: 16px; right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 80; display: grid; gap: 8px; pointer-events: none;
}
.ucs-toast {
  background: #142033; color: #fff; padding: 12px 14px; border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
  font: 600 15px/1.4 Sarabun, sans-serif;
}
.ucs-toast.is-bad { background: #8f2d2d; }
.track > .skel-list { grid-column: 1 / -1; }

@media (min-width: 901px) {
  .ucs-toasts { left: auto; right: 24px; bottom: 24px; width: min(360px, calc(100vw - 48px)); }
}

@media (prefers-reduced-motion: no-preference) {
  .btn, .icon-btn, .pager .pager-nav, .soc-btn {
    transition: transform .16s ease, background-color .16s ease, border-color .16s ease, box-shadow .16s ease, color .16s ease;
  }
  .btn:active, .icon-btn:active, .pager .pager-nav:active, .soc-btn:active { transform: translateY(1px); }
  .media-row { transition: background-color .18s ease, border-color .18s ease; }
  .media-row:hover { background: color-mix(in srgb, currentColor 4%, transparent); }
  .toast, .ucs-toast { animation: ucs-toast-in .28s ease; }
  .skel { animation: ucs-shimmer 1.15s ease-in-out infinite; }
}

@keyframes ucs-toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@keyframes ucs-shimmer {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}

img.blurup { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  img.blurup { filter: blur(12px); transform: scale(1.04); opacity: .8; transition: filter .35s ease, transform .35s ease, opacity .35s ease; }
  img.blurup.in { filter: none; transform: none; opacity: 1; }
  .ucs-enter { animation: ucs-enter .28s ease both; }
}
@keyframes ucs-enter {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .skel, .toast, .ucs-toast, .btn, .icon-btn, .pager .pager-nav, .media-row, .soc-btn, img.blurup, .ucs-enter { animation: none; transition: none; }
  img.blurup { filter: none; transform: none; opacity: 1; }
}