@keyframes mk-sim-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes mk-sim-caret { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }
@keyframes mk-sim-danger { 0%,100% { border-color: color-mix(in srgb, var(--mk-sim-danger) 36%, transparent); } 50% { border-color: var(--mk-sim-danger); } }
@keyframes mk-sim-spin { to { transform: rotate(360deg); } }
@keyframes mk-sim-buzz { 0%,100% { transform: translateX(0); } 15%,55% { transform: translateX(-7px); } 35%,75% { transform: translateX(7px); } 90% { transform: translateX(-2px); } }
.mk-sim-buzz { animation: mk-sim-buzz .42s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes mk-sim-dot { 0%,100% { opacity: .4; } 50% { opacity: 1; } }
@keyframes mk-sim-breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.035); } }
@keyframes mk-sim-shimmer { 0% { transform: translateX(-150%) skewX(-14deg); } 55%,100% { transform: translateX(260%) skewX(-14deg); } }
@keyframes mk-sim-sweep { 0% { transform: translateX(-25%); opacity: 0; } 14%,78% { opacity: .55; } 100% { transform: translateX(125%); opacity: 0; } }
@keyframes mk-sim-sheen { from { transform: translateX(-100%); } to { transform: translateX(320%); } }
.mk-sim-root { position: relative; overflow: hidden; border-radius: 22px; padding: clamp(18px, 2.6vw, 28px); width: 100%; }
.mk-sim-input { width: 100%; min-width: 0; height: 56px; border-radius: 16px; padding: 0 118px 0 46px; font-size: 15px; font-weight: 600; outline: none; border: 1px solid var(--mk-sim-border); transition: box-shadow .22s ease, border-color .22s ease; }
.mk-sim-input::placeholder { font-weight: 600; }
.mk-sim-input:focus-visible { border-color: var(--mk-sim-accent); box-shadow: var(--mk-sim-inset), 0 0 0 3px color-mix(in srgb, var(--mk-sim-accent) 30%, transparent) !important; }
/* Invalid URL: a red PULSING border so the user senses they must enter a real
   site. The keyframe drives border-color (animations beat normal rules, so it
   shows even while focused); the static red is the reduced-motion fallback, and
   the violet focus ring is dropped while invalid so the signal reads as one. */
.mk-sim-input-danger,
.mk-sim-input-danger:focus-visible { border-color: var(--mk-sim-danger); animation: mk-sim-danger 1.3s ease-in-out infinite; }
.mk-sim-input-danger:focus-visible { box-shadow: var(--mk-sim-inset) !important; }
.mk-sim-go, .mk-sim-cancel { position: absolute; top: 7px; right: 7px; bottom: 7px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border-radius: 12px; padding: 0 17px; font-size: 13px; font-weight: 700; letter-spacing: .01em; cursor: pointer; border: none; transition: transform .2s ease, box-shadow .2s ease, filter .2s ease; }
.mk-sim-go:hover { transform: translateY(-1px); filter: brightness(1.05); }
.mk-sim-cancel:hover { transform: translateY(-1px); }
.mk-sim-go:disabled { opacity: .55; cursor: default; transform: none; }
.mk-sim-go:focus-visible, .mk-sim-cancel:focus-visible, .mk-sim-cta:focus-visible { outline: 2px solid var(--mk-sim-accent); outline-offset: 2px; }
.mk-sim-cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; border-radius: 14px; padding: 0 20px; font-size: 13.5px; font-weight: 700; cursor: pointer; border: none; transition: transform .22s ease, filter .22s ease; }
.mk-sim-cta:hover { transform: translateY(-1px); filter: brightness(1.05); }
.mk-sim-lane { position: relative; display: flex; align-items: center; gap: 11px; border-radius: 13px; padding: 10px 13px; transition: box-shadow .35s ease, opacity .35s ease; }
.mk-sim-chip { display: inline-flex; align-items: center; justify-content: center; gap: 5px; border-radius: 9px; padding: 5px 10px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.mk-sim-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.mk-sim-reduced *, .mk-sim-reduced *::before, .mk-sim-reduced *::after { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .mk-sim-root * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; } }
@media (max-width: 600px) {
  .mk-sim-input { padding-right: 104px; }
  /* clean one input row when idle; the live scan expands, centred, on GO.
     Everything in the card centres on phones. */
  .mk-sim-hide-mobile { display: none !important; }
  .mk-sim-head { justify-content: center; }
  #mk-sim-hint { text-align: center; }
  .mk-sim-scan { justify-content: center; gap: 14px; }
  .mk-sim-lanes { flex: 1 1 100%; min-width: 0; width: 100%; }
  .mk-sim-status { justify-content: center; text-align: center; }
  .mk-sim-ticker { justify-content: center; }
  .mk-sim-think { text-align: center; }
  .mk-sim-cta-row { justify-content: center; text-align: center; }
}