/* HERO ANIMATION */
  #gep-anim-supplier-management-hero,
  #gep-anim-supplier-management-hero * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  #gep-anim-supplier-management-hero {
    --gep-ruby: #D42F5A;
    --gep-dark: #1B1B2F;
    --gep-green: #2ECB71;
    --gep-white: #FFFFFF;
    --gep-light-grey: #F5F6F8;
    --gep-text: #333333;
    --gep-muted: #888888;
    --gep-border: #E5E7EB;
    width: 500px;
    height: 360px;
    background: transparent;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--gep-text);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #gep-anim-supplier-management-hero .win {
    width: 440px;
    background: var(--gep-white);
    border: 1px solid var(--gep-border);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: none;
  }

  #gep-anim-supplier-management-hero .bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--gep-white);
    border-bottom: 1px solid var(--gep-border);
  }

  #gep-anim-supplier-management-hero .title {
    font-size: 13px;
    font-weight: 600;
    color: var(--gep-dark);
  }

  #gep-anim-supplier-management-hero .live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--gep-green);
    animation: gep-supmgmt-hero-pulse 1.6s ease-in-out infinite;
  }

  #gep-anim-supplier-management-hero .body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  #gep-anim-supplier-management-hero .sup-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border: 1px solid var(--gep-border);
    border-radius: 8px;
    background: var(--gep-light-grey);
    opacity: 0;
    transform: translateY(6px);
    animation: gep-supmgmt-hero-rowin 7s ease-in-out infinite;
  }

  #gep-anim-supplier-management-hero .row-a {
    animation-delay: 0s;
  }

  #gep-anim-supplier-management-hero .row-b {
    animation-delay: 0.3s;
  }

  #gep-anim-supplier-management-hero .sup-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--gep-dark);
    margin-bottom: 2px;
  }

  #gep-anim-supplier-management-hero .sup-meta {
    font-size: 10px;
    color: var(--gep-muted);
  }

  #gep-anim-supplier-management-hero .sup-status {
    font-size: 10px;
    font-weight: 700;
    border-radius: 20px;
    padding: 3px 9px;
    letter-spacing: 0.2px;
  }

  #gep-anim-supplier-management-hero .status-dup {
    color: var(--gep-ruby);
    background: rgba(212, 47, 90, 0.08);
  }

  #gep-anim-supplier-management-hero .status-ok {
    color: var(--gep-green);
    background: rgba(46, 203, 113, 0.10);
  }

  #gep-anim-supplier-management-hero .merge-line {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px dashed var(--gep-border);
    border-radius: 8px;
    opacity: 0;
    animation: gep-supmgmt-hero-merge 7s ease-in-out infinite;
    animation-delay: 0.6s;
  }

  #gep-anim-supplier-management-hero .merge-icon {
    font-size: 14px;
    color: var(--gep-ruby);
    font-weight: 700;
  }

  #gep-anim-supplier-management-hero .merge-label {
    font-size: 11px;
    color: var(--gep-muted);
  }

  #gep-anim-supplier-management-hero .result-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--gep-border);
    border-radius: 8px;
    background: var(--gep-white);
    opacity: 0;
    transform: translateY(6px);
    animation: gep-supmgmt-hero-result 7s ease-in-out infinite;
    animation-delay: 1s;
  }

  #gep-anim-supplier-management-hero .check {
    width: 26px;
    height: 26px;
    min-width: 26px;
    border-radius: 50%;
    background: var(--gep-green);
    color: #fff;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
  }

  #gep-anim-supplier-management-hero .result-info {
    flex: 1;
  }

  #gep-anim-supplier-management-hero .result-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--gep-dark);
    margin-bottom: 2px;
  }

  #gep-anim-supplier-management-hero .result-meta {
    font-size: 10px;
    color: var(--gep-muted);
  }

  @keyframes gep-supmgmt-hero-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.4; transform: scale(1.35); }
  }

  @keyframes gep-supmgmt-hero-rowin {
    0%       { opacity: 0; transform: translateY(6px); }
    15%, 55% { opacity: 1; transform: translateY(0); }
    70%, 100%{ opacity: 0; transform: translateY(6px); }
  }

  @keyframes gep-supmgmt-hero-merge {
    0%, 20%  { opacity: 0; }
    35%, 55% { opacity: 1; }
    70%, 100%{ opacity: 0; }
  }

  @keyframes gep-supmgmt-hero-result {
    0%, 40%  { opacity: 0; transform: translateY(6px); }
    55%, 88% { opacity: 1; transform: translateY(0); }
    100%     { opacity: 0; transform: translateY(6px); }
  }

  /* SECTION 1 ANIMATION */

  #gep-anim-supplier-management-sec,
  #gep-anim-supplier-management-sec * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  #gep-anim-supplier-management-sec {
    --gep-ruby: #D42F5A;
    --gep-dark: #1B1B2F;
    --gep-green: #2ECB71;
    --gep-white: #FFFFFF;
    --gep-light-grey: #F5F6F8;
    --gep-text: #333333;
    --gep-muted: #888888;
    --gep-border: #E5E7EB;
    width: 500px;
    height: 360px;
    background: transparent;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--gep-text);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #gep-anim-supplier-management-sec .win {
    width: 440px;
    background: var(--gep-white);
    border: 1px solid var(--gep-border);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: none;
  }

  #gep-anim-supplier-management-sec .bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--gep-white);
    border-bottom: 1px solid var(--gep-border);
  }

  #gep-anim-supplier-management-sec .title {
    font-size: 13px;
    font-weight: 600;
    color: var(--gep-dark);
  }

  #gep-anim-supplier-management-sec .live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--gep-ruby);
    animation: gep-supmgmt-sec-pulse 1.6s ease-in-out infinite;
  }

  #gep-anim-supplier-management-sec .body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  #gep-anim-supplier-management-sec .supplier-header {
    opacity: 0;
    animation: gep-supmgmt-sec-fadein 7s ease-in-out infinite;
    animation-delay: 0s;
  }

  #gep-anim-supplier-management-sec .sup-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--gep-dark);
    margin-bottom: 2px;
  }

  #gep-anim-supplier-management-sec .sup-id {
    font-size: 10px;
    color: var(--gep-muted);
  }

  #gep-anim-supplier-management-sec .alert-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid rgba(212, 47, 90, 0.30);
    border-radius: 8px;
    background: rgba(212, 47, 90, 0.04);
    opacity: 0;
    transform: translateY(5px);
    animation: gep-supmgmt-sec-slideup 7s ease-in-out infinite;
    animation-delay: 0.4s;
  }

  #gep-anim-supplier-management-sec .alert-icon {
    width: 26px;
    height: 26px;
    min-width: 26px;
    border-radius: 50%;
    background: var(--gep-ruby);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #gep-anim-supplier-management-sec .alert-body {
    flex: 1;
  }

  #gep-anim-supplier-management-sec .alert-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--gep-ruby);
    margin-bottom: 2px;
  }

  #gep-anim-supplier-management-sec .alert-desc {
    font-size: 10px;
    color: var(--gep-muted);
  }

  #gep-anim-supplier-management-sec .alert-tag {
    font-size: 9px;
    font-weight: 700;
    color: var(--gep-ruby);
    background: rgba(212, 47, 90, 0.10);
    border-radius: 20px;
    padding: 3px 8px;
    white-space: nowrap;
    letter-spacing: 0.2px;
  }

  #gep-anim-supplier-management-sec .agent-response {
    padding: 12px 14px;
    border: 1px solid var(--gep-border);
    border-radius: 8px;
    background: var(--gep-light-grey);
    opacity: 0;
    transform: translateY(5px);
    animation: gep-supmgmt-sec-slideup 7s ease-in-out infinite;
    animation-delay: 1.2s;
  }

  #gep-anim-supplier-management-sec .agent-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--gep-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 6px;
  }

  #gep-anim-supplier-management-sec .agent-msg {
    font-size: 11px;
    color: var(--gep-text);
    line-height: 1.55;
    margin-bottom: 8px;
  }

  #gep-anim-supplier-management-sec .agent-check {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  #gep-anim-supplier-management-sec .chk {
    width: 18px;
    height: 18px;
    min-width: 18px;
    border-radius: 50%;
    background: var(--gep-green);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #gep-anim-supplier-management-sec .chk-text {
    font-size: 11px;
    font-weight: 600;
    color: var(--gep-green);
  }

  @keyframes gep-supmgmt-sec-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.4; transform: scale(1.35); }
  }

  @keyframes gep-supmgmt-sec-fadein {
    0%       { opacity: 0; }
    14%, 88% { opacity: 1; }
    100%     { opacity: 0; }
  }

  @keyframes gep-supmgmt-sec-slideup {
    0%       { opacity: 0; transform: translateY(5px); }
    20%, 88% { opacity: 1; transform: translateY(0); }
    100%     { opacity: 0; transform: translateY(5px); }
  }