:root {
  --ring: 0 0 0 3px rgba(99, 102, 241, 0.18);
}

* {
  -webkit-tap-highlight-color: transparent;
}

body {
  font-feature-settings: 'tnum' 0;
}

.tabular {
  font-variant-numeric: tabular-nums;
}

/* Focus ring consistency */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: 8px;
}

/* Scrollbars */
.scroll-thin::-webkit-scrollbar {
  height: 8px;
  width: 8px;
}
.scroll-thin::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 999px;
}
.scroll-thin::-webkit-scrollbar-track {
  background: transparent;
}

/* Animations (kept minimal & purposeful) */
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes pop-in {
  from { opacity: 0; transform: translateY(8px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes toast-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes status-flash {
  0% { background-color: rgba(99, 102, 241, 0.22); }
  100% { background-color: transparent; }
}

.anim-fade { animation: fade-in 0.14s ease-out both; }
.anim-pop { animation: pop-in 0.16s ease-out both; }
.anim-toast { animation: toast-in 0.18s ease-out both; }
.flash { animation: status-flash 1.1s ease-out 1; }

@media (prefers-reduced-motion: reduce) {
  .anim-fade, .anim-pop, .anim-toast, .flash { animation: none !important; }
}

/* Lock scroll while modal open */
body.modal-open {
  overflow: hidden;
}

/* Sticky table head */
.tbl thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f8fafc;
}

/* Nav active state */
.nav-item.is-active {
  background: #eef2ff;
  color: #3730a3;
  font-weight: 600;
}
.nav-item.is-active .nav-icon {
  color: #4f46e5;
}

/* Drawer transitions */
#mobile-drawer[data-open='false'] {
  pointer-events: none;
}
#mobile-drawer[data-open='false'] .drawer-panel {
  transform: translateX(-100%);
}
#mobile-drawer[data-open='false'] .drawer-scrim {
  opacity: 0;
}
.drawer-panel {
  transition: transform 0.2s ease-out;
}
.drawer-scrim {
  transition: opacity 0.2s ease-out;
}

/* Skeletons */
.skeleton {
  background: linear-gradient(90deg, #e2e8f0 25%, #eef2f7 37%, #e2e8f0 63%);
  background-size: 400% 100%;
  animation: skeleton 1.2s ease infinite;
  border-radius: 6px;
}
@keyframes skeleton {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* Card art */
.card-art {
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(129, 140, 248, 0.45) 0%, rgba(15, 23, 42, 0) 55%),
    linear-gradient(160deg, #1e293b 0%, #0f172a 100%);
}
.card-art.is-blocked {
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(148, 163, 184, 0.35) 0%, rgba(15, 23, 42, 0) 55%),
    linear-gradient(160deg, #334155 0%, #1f2937 100%);
  filter: saturate(0.5);
}