/* HERO ANIMATION */

    #gep-anim-visibility-execution-hero,
    #gep-anim-visibility-execution-hero * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    #gep-anim-visibility-execution-hero p {
      margin: 0;
      padding: 0;
    }

    #gep-anim-visibility-execution-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;
      --gep-amber: #F5A623;
      width: 500px;
      max-width: 500px !important;
      height: auto !important;
      background: transparent;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    #gep-anim-visibility-execution-hero .ve-hero-win {
      width: 460px;
      height: 320px;
      background: var(--gep-white);
      border: 1px solid var(--gep-border);
      border-radius: 10px;
      box-shadow: none;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    #gep-anim-visibility-execution-hero .ve-hero-header {
      background: var(--gep-white);
      border-bottom: 1px solid var(--gep-border);
      padding: 10px 16px;
      display: flex; align-items: center; justify-content: space-between;
    }

    #gep-anim-visibility-execution-hero .ve-hero-header-left {
      display: flex; align-items: center; gap: 8px;
    }

    #gep-anim-visibility-execution-hero .ve-hero-icon {
      width: 22px; height: 22px; border-radius: 5px;
      background: var(--gep-ruby);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }

    #gep-anim-visibility-execution-hero .ve-hero-icon svg { width: 12px; height: 12px; }

    #gep-anim-visibility-execution-hero .ve-hero-title {
      font-size: 12px; font-weight: 600; color: var(--gep-dark);
      display: block;
    }

    #gep-anim-visibility-execution-hero .ve-hero-pill {
      font-size: 9px; color: var(--gep-muted);
      background: var(--gep-light-grey);
      padding: 2px 8px; border-radius: 10px;
      display: block;
    }

    #gep-anim-visibility-execution-hero .ve-hero-body {
      flex: 1; padding: 10px 16px;
      display: flex; flex-direction: column; gap: 7px;
      overflow: hidden;
    }

    #gep-anim-visibility-execution-hero .ve-hero-kpi-row {
      display: flex; gap: 6px;
      opacity: 0; animation: gep-ve-hero-fadeUp 0.4s ease forwards 0.3s;
    }

    #gep-anim-visibility-execution-hero .ve-hero-kpi {
      flex: 1; background: var(--gep-light-grey);
      border-radius: 6px; padding: 5px 6px; text-align: center;
    }

    #gep-anim-visibility-execution-hero .ve-hero-kpi-val {
      font-size: 13px; font-weight: 700; color: var(--gep-dark);
    }

    #gep-anim-visibility-execution-hero .ve-hero-v-green { color: var(--gep-green); }
    #gep-anim-visibility-execution-hero .ve-hero-v-amber { color: var(--gep-amber); }
    #gep-anim-visibility-execution-hero .ve-hero-v-red   { color: var(--gep-ruby); }

    #gep-anim-visibility-execution-hero .ve-hero-kpi-label {
      font-size: 8px; color: var(--gep-muted); margin-top: 1px;
    }

    #gep-anim-visibility-execution-hero .ve-hero-alert {
      background: var(--gep-light-grey);
      border-radius: 8px; padding: 8px 12px;
      display: flex; align-items: center; gap: 10px;
      opacity: 0;
    }

    #gep-anim-visibility-execution-hero .ve-hero-a1 { animation: gep-ve-hero-fadeUp 0.4s ease forwards 0.9s; }
    #gep-anim-visibility-execution-hero .ve-hero-a2 { animation: gep-ve-hero-fadeUp 0.4s ease forwards 1.4s; }

    #gep-anim-visibility-execution-hero .ve-hero-dot {
      width: 8px; height: 8px; border-radius: 50%;
      flex-shrink: 0; font-size: 0; line-height: 0;
    }

    #gep-anim-visibility-execution-hero .ve-hero-dot-red   { background: #F04E5A; }
    #gep-anim-visibility-execution-hero .ve-hero-dot-amber { background: var(--gep-amber); }

    #gep-anim-visibility-execution-hero .ve-hero-alert-content { flex: 1; }

    #gep-anim-visibility-execution-hero .ve-hero-alert-title {
      font-size: 11px; font-weight: 600; color: var(--gep-dark); margin-bottom: 1px;
    }

    #gep-anim-visibility-execution-hero .ve-hero-alert-sub {
      font-size: 9px; color: var(--gep-muted);
    }

    #gep-anim-visibility-execution-hero .ve-hero-badge {
      font-size: 9px; font-weight: 600;
      padding: 2px 8px; border-radius: 6px; flex-shrink: 0;
      display: inline-block;
    }

    #gep-anim-visibility-execution-hero .ve-hero-badge-red   { background: #FEE2E6; color: var(--gep-ruby); }
    #gep-anim-visibility-execution-hero .ve-hero-badge-amber { background: #FEF3C7; color: #B45309; }

    #gep-anim-visibility-execution-hero .ve-hero-rec {
      background: var(--gep-white);
      border: 1px solid var(--gep-border);
      border-left: 3px solid var(--gep-ruby);
      border-radius: 6px; padding: 8px 12px;
      opacity: 0; animation: gep-ve-hero-fadeUp 0.5s ease forwards 2.2s;
    }

    #gep-anim-visibility-execution-hero .ve-hero-rec-label {
      font-size: 9px; font-weight: 700; color: var(--gep-ruby);
      text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px;
    }

    #gep-anim-visibility-execution-hero .ve-hero-rec-row {
      display: flex; align-items: center; gap: 10px;
    }

    #gep-anim-visibility-execution-hero .ve-hero-rec-text {
      font-size: 10px; color: var(--gep-text); flex: 1; line-height: 1.4;
    }

    #gep-anim-visibility-execution-hero .ve-hero-rec-btn {
      font-size: 9px; font-weight: 600;
      background: var(--gep-ruby); color: var(--gep-white);
      border: none; border-radius: 5px; padding: 5px 11px; cursor: pointer;
      white-space: nowrap; display: inline-block;
      opacity: 0; animation: gep-ve-hero-fadeIn 0.3s ease forwards 3.0s;
    }

    @keyframes gep-ve-hero-fadeUp {
      from { opacity: 0; transform: translateY(6px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    @keyframes gep-ve-hero-fadeIn {
      to { opacity: 1; }
    }

    /* Section 1 Animation */

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

    #gep-anim-visibility-execution-sec p {
      margin: 0;
      padding: 0;
    }

    #gep-anim-visibility-execution-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;
      max-width: 500px !important;
      height: auto !important;
      background: transparent;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center; margin: 0 auto;
    }

    #gep-anim-visibility-execution-sec .ve-sec-win {
      width: 460px;
      height: auto;
      background: var(--gep-white);
      border: 1px solid var(--gep-border);
      border-radius: 10px;
      box-shadow: none;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    #gep-anim-visibility-execution-sec .ve-sec-header {
      background: var(--gep-white);
      border-bottom: 1px solid var(--gep-border);
      padding: 10px 16px;
      display: flex; align-items: center; gap: 8px;
      flex-shrink: 0;
    }

    #gep-anim-visibility-execution-sec .ve-sec-header-dot {
      width: 8px; height: 8px; border-radius: 50%;
      background: var(--gep-ruby);
      flex-shrink: 0;
      font-size: 0; line-height: 0;
    }

    #gep-anim-visibility-execution-sec .ve-sec-title {
      font-size: 12px; font-weight: 600; color: var(--gep-dark);
      flex: 1; display: block;
    }

    #gep-anim-visibility-execution-sec .ve-sec-pill {
      font-size: 9px; color: var(--gep-muted);
      background: var(--gep-light-grey);
      padding: 2px 8px; border-radius: 10px;
      display: inline-block; white-space: nowrap;
    }

    #gep-anim-visibility-execution-sec .ve-sec-body {
      flex: 1; padding: 11px 16px;
      display: flex; flex-direction: column; gap: 8px;
      overflow: hidden;
    }

    #gep-anim-visibility-execution-sec .ve-sec-po-header {
      display: flex; align-items: center; justify-content: space-between;
      gap: 8px; flex-shrink: 0;
      opacity: 0; animation: gep-ve-sec-fadeUp 0.4s ease forwards 0.3s;
    }

    #gep-anim-visibility-execution-sec .ve-sec-po-title {
      font-size: 11px; font-weight: 600; color: var(--gep-dark);
    }

    #gep-anim-visibility-execution-sec .ve-sec-po-meta {
      font-size: 9px; color: var(--gep-muted); margin-top: 1px;
    }

    #gep-anim-visibility-execution-sec .ve-sec-po-badge {
      font-size: 9px; font-weight: 600;
      background: #EFF6FF; color: #3B82F6;
      padding: 2px 8px; border-radius: 6px;
      flex-shrink: 0; display: inline-block; white-space: nowrap;
    }

    #gep-anim-visibility-execution-sec .ve-sec-steps {
      display: flex; flex-direction: column; gap: 4px;
    }

    #gep-anim-visibility-execution-sec .ve-sec-step {
      display: flex; align-items: center; gap: 8px;
      padding: 5px 10px;
      background: var(--gep-light-grey); border-radius: 6px;
      opacity: 0;
    }

    #gep-anim-visibility-execution-sec .ve-sec-s1 { animation: gep-ve-sec-fadeUp 0.3s ease forwards 0.8s; }
    #gep-anim-visibility-execution-sec .ve-sec-s2 { animation: gep-ve-sec-fadeUp 0.3s ease forwards 1.2s; }
    #gep-anim-visibility-execution-sec .ve-sec-s3 { animation: gep-ve-sec-fadeUp 0.3s ease forwards 1.6s; }
    #gep-anim-visibility-execution-sec .ve-sec-s4 { animation: gep-ve-sec-fadeUp 0.3s ease forwards 2.0s; }

    #gep-anim-visibility-execution-sec .ve-sec-step-check {
      width: 16px; height: 16px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 8px; font-weight: 700; flex-shrink: 0;
    }

    #gep-anim-visibility-execution-sec .ve-sec-check-done {
      background: var(--gep-green); color: var(--gep-white);
    }

    #gep-anim-visibility-execution-sec .ve-sec-check-active {
      background: var(--gep-ruby); color: var(--gep-white);
      animation: gep-ve-sec-pulse 1.2s ease-in-out 1.8s 3;
    }

    #gep-anim-visibility-execution-sec .ve-sec-check-pending {
      background: var(--gep-light-grey);
      border: 1.5px solid var(--gep-border);
      color: var(--gep-muted);
    }

    #gep-anim-visibility-execution-sec .ve-sec-step-text {
      flex: 1; font-size: 10px; color: var(--gep-text);
      display: inline; white-space: normal;
    }

    #gep-anim-visibility-execution-sec .ve-sec-step-time {
      font-size: 9px; color: var(--gep-muted);
      flex-shrink: 0; display: inline-block; white-space: nowrap;
    }

    #gep-anim-visibility-execution-sec .ve-sec-confirm {
      display: flex; align-items: center; gap: 8px;
      background: #D1FAE5; border-radius: 7px; padding: 7px 12px;
      flex-shrink: 0;
      opacity: 0; animation: gep-ve-sec-fadeUp 0.4s ease forwards 2.8s;
    }

    #gep-anim-visibility-execution-sec .ve-sec-confirm-icon {
      width: 18px; height: 18px; border-radius: 50%;
      background: var(--gep-green);
      display: flex; align-items: center; justify-content: center;
      font-size: 9px; font-weight: 700; color: var(--gep-white); flex-shrink: 0;
    }

    #gep-anim-visibility-execution-sec .ve-sec-confirm-title {
      font-size: 10px; font-weight: 600; color: #065F46;
    }

    #gep-anim-visibility-execution-sec .ve-sec-confirm-sub {
      font-size: 9px; color: #059669; margin-top: 1px;
    }

    @keyframes gep-ve-sec-fadeUp {
      from { opacity: 0; transform: translateY(6px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    @keyframes gep-ve-sec-fadeIn {
      to { opacity: 1; }
    }

    @keyframes gep-ve-sec-pulse {
      0%,100% { box-shadow: 0 0 0 0 rgba(212,47,90,0.3); }
      50%      { box-shadow: 0 0 0 4px rgba(212,47,90,0.15); }
    }