/* MK Mission Control v2 — global polish */
[x-cloak] { display: none !important; }
html, body { font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; }
body {
  background-image:
    radial-gradient(circle at 15% -20%, rgba(124,92,255,.18), transparent 50%),
    radial-gradient(circle at 110% 0%, rgba(6,182,212,.10), transparent 55%),
    radial-gradient(circle at 80% 90%, rgba(236,72,153,.07), transparent 50%);
  background-attachment: fixed;
}

/* Scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.06); border-radius: 6px; transition: background .2s; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.12); }

/* Selection */
::selection { background: rgba(124,92,255,.45); color: #fff; }

/* Inputs unified focus */
input:focus, select:focus, textarea:focus, button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(124,92,255,.35);
}

/* Code/kbd */
kbd { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; }

/* Range slider thumbs */
input[type="range"] { accent-color: #7c5cff; }

/* HTMX request indicator on whole page */
.htmx-indicator { opacity: 0; transition: opacity .15s; }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { opacity: 1; }

/* Card glassmorphism utility */
.glass {
  background: rgba(10, 13, 26, 0.6);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.06);
}

/* Subtle gradient border helper */
.gradient-border { position: relative; }
.gradient-border::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit; padding: 1px;
  background: linear-gradient(135deg, rgba(124,92,255,.5), rgba(124,92,255,0) 50%, rgba(6,182,212,.4));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}

/* Smooth fade for swapped content */
[data-htmx-swapping] { opacity: 0; transition: opacity .15s; }

/* Tabular nums everywhere relevant */
.tabular-nums, .font-mono { font-variant-numeric: tabular-nums; }

/* Subtle focus ring on links */
a { transition: color .15s; }

/* Pulse for status dots — slightly more alive */
@keyframes soft-pulse { 0%,100% { opacity:1 } 50% { opacity:.6 } }
.animate-pulse { animation: soft-pulse 2s ease-in-out infinite; }

/* Loading skeleton */
.skel {
  background: linear-gradient(90deg, rgba(255,255,255,.03) 0%, rgba(255,255,255,.08) 50%, rgba(255,255,255,.03) 100%);
  background-size: 200% 100%; animation: skel 1.4s linear infinite;
  border-radius: 6px;
}
@keyframes skel { 0% { background-position: 200% 0 } 100% { background-position: -200% 0 } }

/* Better card hover */
.card-hover { transition: transform .2s, border-color .2s, box-shadow .2s; }
.card-hover:hover { transform: translateY(-1px); border-color: rgba(124,92,255,.4); box-shadow: 0 8px 32px -12px rgba(124,92,255,.3); }

/* Typography rhythm */
h1 { letter-spacing: -0.02em; }
h2, h3 { letter-spacing: -0.01em; }