@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

  .gep-unify {
    font-family: 'Inter', sans-serif;
    width: 100%; max-width: 400px;
    padding: 5px;
  }

  /* Header text */
  .gep-unify-header {
    text-align: center; margin-bottom: 20px;
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1.5px;
    position: relative; height: 18px;
  }
  .gep-unify-header span {
    position: absolute; left: 0; right: 0;
  }
  .gep-unify-label-off {
    color: #8892a4;
    animation: labelSwap 6s ease infinite;
  }
  .gep-unify-label-on {
    color: #00c4b4;
    animation: labelSwapAlt 6s ease infinite;
  }
  @keyframes labelSwap {
    0%, 28% { opacity: 1; }
    35%, 95% { opacity: 0; }
    100% { opacity: 1; }
  }
  @keyframes labelSwapAlt {
    0%, 28% { opacity: 0; }
    35%, 95% { opacity: 1; }
    100% { opacity: 0; }
  }

  /* Row container */
  .gep-unify-rows {
    display: flex; flex-direction: column; gap: 10px;
    animation: gapClose 6s ease infinite;
  }
  @keyframes gapClose {
    0%, 28% { gap: 10px; }
    38%, 90% { gap: 0px; }
    100% { gap: 10px; }
  }

  /* Individual rows */
  .gep-unify-row {
    display: flex; align-items: center; gap: 10px;
    background: white;
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 12px;
    padding: 14px 16px;
    position: relative; overflow: hidden;
    animation-duration: 6s;
    animation-timing-function: ease;
    animation-iteration-count: infinite;
  }

  /* Fragmented → unified shape */
  .gep-unify-row:first-child { animation-name: row1; }
  .gep-unify-row:nth-child(2) { animation-name: row2; }
  .gep-unify-row:nth-child(3) { animation-name: row3; }
  .gep-unify-row:nth-child(4) { animation-name: row4; }
  .gep-unify-row:last-child { animation-name: row5; }

  @keyframes row1 {
    0%, 25% { transform: translateX(-10px) rotate(-1.5deg); opacity: 0.5; border-radius: 12px; border-left: 1px solid rgba(0,0,0,0.06); }
    38%, 90% { transform: none; opacity: 1; border-radius: 12px 12px 0 0; border-left: 3px solid #00c4b4; }
    100% { transform: translateX(-10px) rotate(-1.5deg); opacity: 0.5; border-radius: 12px; border-left: 1px solid rgba(0,0,0,0.06); }
  }
  @keyframes row2 {
    0%, 25% { transform: translateX(8px) rotate(0.8deg); opacity: 0.5; border-radius: 12px; border-left: 1px solid rgba(0,0,0,0.06); }
    38%, 90% { transform: none; opacity: 1; border-radius: 0; border-left: 3px solid #00c4b4; }
    100% { transform: translateX(8px) rotate(0.8deg); opacity: 0.5; border-radius: 12px; border-left: 1px solid rgba(0,0,0,0.06); }
  }
  @keyframes row3 {
    0%, 25% { transform: translateX(-6px) rotate(-0.5deg); opacity: 0.5; border-radius: 12px; border-left: 1px solid rgba(0,0,0,0.06); }
    38%, 90% { transform: none; opacity: 1; border-radius: 0; border-left: 3px solid #00c4b4; }
    100% { transform: translateX(-6px) rotate(-0.5deg); opacity: 0.5; border-radius: 12px; border-left: 1px solid rgba(0,0,0,0.06); }
  }
  @keyframes row4 {
    0%, 25% { transform: translateX(12px) rotate(1.2deg); opacity: 0.5; border-radius: 12px; border-left: 1px solid rgba(0,0,0,0.06); }
    38%, 90% { transform: none; opacity: 1; border-radius: 0; border-left: 3px solid #00c4b4; }
    100% { transform: translateX(12px) rotate(1.2deg); opacity: 0.5; border-radius: 12px; border-left: 1px solid rgba(0,0,0,0.06); }
  }
  @keyframes row5 {
    0%, 25% { transform: translateX(-8px) rotate(-0.8deg); opacity: 0.5; border-radius: 12px; border-left: 1px solid rgba(0,0,0,0.06); }
    38%, 90% { transform: none; opacity: 1; border-radius: 0 0 12px 12px; border-left: 3px solid #00c4b4; }
    100% { transform: translateX(-8px) rotate(-0.8deg); opacity: 0.5; border-radius: 12px; border-left: 1px solid rgba(0,0,0,0.06); }
  }

  /* Icons */
  .gep-unify-icon {
    width: 28px; height: 28px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 800; color: white; flex-shrink: 0;
  }
  .gep-unify-row:nth-child(1) .gep-unify-icon { background: #00c4b4; }
  .gep-unify-row:nth-child(2) .gep-unify-icon { background: #6c5ce7; }
  .gep-unify-row:nth-child(3) .gep-unify-icon { background: #1a1f71; }
  .gep-unify-row:nth-child(4) .gep-unify-icon { background: #d97706; }
  .gep-unify-row:nth-child(5) .gep-unify-icon { background: #10b981; }

  .gep-unify-label {
    font-size: 12px; font-weight: 600; color: #2d3748;
    white-space: nowrap;
  }

  /* Status badges — fade in when unified */
  .gep-unify-status {
    margin-left: auto; font-size: 10px; font-weight: 600;
    padding: 3px 8px; border-radius: 6px;
    animation: statusFade 6s ease infinite;
  }
  @keyframes statusFade {
    0%, 35% { opacity: 0; }
    45%, 88% { opacity: 1; }
    96%, 100% { opacity: 0; }
  }
  .gep-status-green { background: rgba(16,185,129,0.1); color: #10b981; }
  .gep-status-blue { background: rgba(79,143,255,0.1); color: #4f8fff; }

  /* Progress bars — fill when unified */
  .gep-unify-bar {
    position: absolute; bottom: 0; left: 0; height: 2px;
    background: #00c4b4; border-radius: 0 2px 2px 0;
    animation-duration: 6s;
    animation-timing-function: ease;
    animation-iteration-count: infinite;
  }
  .gep-unify-row:nth-child(1) .gep-unify-bar { animation-name: bar1; }
  .gep-unify-row:nth-child(2) .gep-unify-bar { animation-name: bar2; }
  .gep-unify-row:nth-child(3) .gep-unify-bar { animation-name: bar3; }
  .gep-unify-row:nth-child(4) .gep-unify-bar { animation-name: bar4; }
  .gep-unify-row:nth-child(5) .gep-unify-bar { animation-name: bar5; }

  @keyframes bar1 { 0%,38% { width: 0; } 50%,88% { width: 100%; } 100% { width: 0; } }
  @keyframes bar2 { 0%,40% { width: 0; } 52%,88% { width: 72%; } 100% { width: 0; } }
  @keyframes bar3 { 0%,42% { width: 0; } 54%,88% { width: 88%; } 100% { width: 0; } }
  @keyframes bar4 { 0%,44% { width: 0; } 56%,88% { width: 55%; } 100% { width: 0; } }
  @keyframes bar5 { 0%,46% { width: 0; } 58%,88% { width: 80%; } 100% { width: 0; } }

  /* Qi badge */
  .gep-unify-qi {
    position: absolute; right: -18px; top: 50%; transform: translateY(-50%);
    width: 36px; height: 36px; border-radius: 50%;
    background: linear-gradient(135deg, #1a1f71, #6c5ce7, #00c4b4);
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 800; color: white;
    box-shadow: 0 4px 16px rgba(108,92,231,0.3);
    animation: qiFade 6s ease infinite;
  }
  @keyframes qiFade {
    0%, 35% { opacity: 0; transform: translateY(-50%) scale(0.6); }
    45%, 88% { opacity: 1; transform: translateY(-50%) scale(1); }
    96%, 100% { opacity: 0; transform: translateY(-50%) scale(0.6); }
  }

  /* Wrapper for positioning Qi badge */
  .gep-unify-rows-wrap { position: relative; }

  /* --- DEMO WRAPPER (remove in production) --- */
  .demo-bg {
    background: linear-gradient(135deg, #f0f0ff, #e8faf8);
    /* min-height: 100vh; display: flex; align-items: center; justify-content: center; */
    padding: 15px;
    display: flex;
    justify-content: center;
    border-radius: 1rem;
  }