/* Key.ma Integrated v3.1.1 (layout refinements)
   - Header uses grid: icon | title/tag | send icon
   - Better spacing + alignment, less "floating"
   - Steps sit on their own row with consistent padding and centering
*/

.kmni-wrap{ margin: 12px 0 10px; }

.kmni{
  --km-black: #111111;
  --km-text: #111111;
  --km-muted: rgba(17,17,17,.72);
  --km-border: rgba(17,17,17,.10);
  --km-surface: #ffffff;
  --km-surface2: #f7f7f8;

  padding: 12px 12px;
  border-radius: 10px;
  border: 1px solid var(--km-border);
  background: linear-gradient(180deg, var(--km-surface), var(--km-surface2));
  box-shadow: 0 6px 14px rgba(0,0,0,.06);
  position: relative;
  overflow:hidden;
}

/* Left accent bar (native) */
.kmni::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:3px;
  background: var(--km-black);
  opacity: .95;
}

/* Subtle shimmer on the accent bar */
.kmni::after{
  content:"";
  position:absolute;
  left:0; top:-40%;
  width:3px; height:180%;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.55), transparent);
  opacity: .18;
  animation: kmniShimmer 4.8s ease-in-out infinite;
}
@keyframes kmniShimmer{
  0%,100%{ transform: translateY(-10%); }
  50%{ transform: translateY(10%); }
}

/* Header layout */
.kmni-head{
  margin-left: 6px; /* breathe after accent */
  display:grid;
  grid-template-columns: 34px 1fr 44px;
  align-items:center;
  gap: 10px;
}

.kmni-icon{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display:grid;
  place-items:center;
  background: rgba(17,17,17,.04);
  border: 1px solid rgba(17,17,17,.08);
}

.kmni-bolt{
  font-size: 16px;
  line-height: 1;
  display:inline-block;
  transform-origin:center;
  animation: kmniPulse 2.8s ease-in-out infinite;
}
@keyframes kmniPulse{
  0%,100%{ transform: scale(1); opacity:1; }
  50%{ transform: scale(1.06); opacity:.92; }
}

.kmni-headtext{ min-width:0; }

.kmni-title{
  display:flex;
  gap: 8px;
  flex-wrap:wrap;
  align-items:baseline;
  line-height: 1.25;
}

.kmni-title-main{
  font-size: 13.8px;
  font-weight: 900;
  color: var(--km-text);
  letter-spacing: .01em;
}

.kmni-tag{
  font-size: 12px;
  font-weight: 700;
  color: rgba(17,17,17,.70);
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(17,17,17,.10);
  background: rgba(17,17,17,.03);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Body text */
.kmni-text{
  margin-left: 6px;
  margin-top: 8px;
  font-size: 13.4px;
  color: var(--km-muted);
  line-height: 1.45;
}

/* Motion icon */
.kmni-side{
  display:flex;
  justify-content:flex-end;
}
.kmni-send{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(17,17,17,.12);
  background: rgba(255,255,255,.80);
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
  display:grid;
  place-items:center;
  overflow:hidden;
}

.kmni-send-svg{
  width: 26px;
  height: 26px;
  stroke: rgba(17,17,17,.82);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform-origin: 50% 50%;
  animation: kmniPlane 2.9s ease-in-out infinite;
}
.kmni-plane{ fill: none; }
.kmni-trail{
  fill: none;
  stroke-dasharray: 3 5;
  opacity: .55;
  stroke-dashoffset: 28;
  animation: kmniTrail 2.9s linear infinite;
}
@keyframes kmniTrail{
  0%{ stroke-dashoffset: 28; }
  100%{ stroke-dashoffset: 0; }
}
@keyframes kmniPlane{
  0%,100%{ transform: translateX(0) translateY(0); opacity: 1; }
  50%{ transform: translateX(1px) translateY(-1px); opacity: .98; }
}

/* Gamified steps */
.kmni-steps{
  margin-left: 6px;
  margin-top: 10px;
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap:wrap;
}

.kmni-step{
  display:inline-flex;
  align-items:center;
  gap: 7px;
  padding: 7px 11px;
  border-radius: 999px;
  border: 1px solid rgba(17,17,17,.10);
  background: rgba(255,255,255,.78);
  box-shadow: inset 0 0 0 1px rgba(17,17,17,.03);
  font-size: 12.4px;
  color: rgba(17,17,17,.86);
  white-space: nowrap;
}

.kmni-stx{ font-weight: 700; letter-spacing: .01em; }

.kmni-connector{
  width: 22px;
  height: 2px;
  background: rgba(17,17,17,.14);
  border-radius: 999px;
  position: relative;
  overflow:hidden;
}
.kmni-connector::after{
  content:"";
  position:absolute;
  left:-35%;
  top:0;
  height:100%;
  width:35%;
  background: rgba(17,17,17,.30);
  border-radius:999px;
  animation: kmniProg 3.4s ease-in-out infinite;
}
@keyframes kmniProg{
  0%{ transform: translateX(0); opacity:0; }
  15%{ opacity:.85; }
  50%{ transform: translateX(260%); opacity:.85; }
  70%{ opacity:0; }
  100%{ transform: translateX(260%); opacity:0; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .kmni::after, .kmni-bolt, .kmni-connector::after, .kmni-trail, .kmni-send-svg { animation: none !important; }
}

/* Mobile: keep clean, prevent wrap ugliness */
@media (max-width: 768px){
  .kmni-head{ grid-template-columns: 34px 1fr; }
  .kmni-side{ display:none; }

  /* Steps become horizontally scrollable (nice UX) */
  .kmni-steps{
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
    gap: 8px;
  }
  .kmni-steps::-webkit-scrollbar{ height: 6px; }
  .kmni-steps::-webkit-scrollbar-thumb{ background: rgba(17,17,17,.12); border-radius: 999px; }
  .kmni-connector{ width: 16px; }
}

/* Tiny screens */
@media (max-width: 420px){
  .kmni-title-main{ font-size: 13.4px; }
  .kmni-text{ font-size: 13px; }
}