.s1f { position: relative; padding: 26px 24px 20px; border-radius: 22px; 
  border: 1px solid rgba(255,255,255,0.09); background: rgba(255,255,255,0.035);
  backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
 }
  .light .s1f { border-color: rgba(15,23,42,0.08); background: rgba(255,255,255,0.86); }
  .s1f-line { position: absolute; left: calc(24px + 16.66%); right: calc(24px + 16.66%); top: 48px; height: 2px; border-radius: 2px; background: rgba(148,163,184,0.18); overflow: visible; }
  .light .s1f-line { background: rgba(15,23,42,0.08); }
  .s1f-line::after { content: ""; position: absolute; inset: 0; border-radius: 2px; background: linear-gradient(90deg, #818CF8, #22D3EE); transform: scaleX(0); transform-origin: left; transition: transform 1600ms cubic-bezier(.4,0,.2,1) 200ms; }
  .light .s1f-line::after { background: #1E3A8A; }
  .s1f.is-on .s1f-line::after { transform: scaleX(1); }
  .s1f-runner { position: absolute; top: 50%; left: 0; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #22D3EE; box-shadow: 0 0 0 4px #22D3EE33, 0 0 16px #22D3EE; opacity: 0; }
  .light .s1f-runner { background: #1E3A8A; box-shadow: 0 0 0 4px rgba(30,58,138,0.16); }
  .s1f.is-on .s1f-runner { animation: s1f-run 1600ms cubic-bezier(.4,0,.2,1) 200ms 1 both; }
  @keyframes s1f-run { 0% { left: 0; opacity: 1; } 92% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
  .s1f-stages { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; text-align: center; }
  .s1f-stage { display: flex; flex-direction: column; align-items: center; gap: 6px; }
  .s1f-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; color: var(--mel-text-tertiary); border: 1px solid rgba(148,163,184,0.24); background: var(--mel-surface-card, #0B1020); transition: color 300ms ease, border-color 300ms ease, box-shadow 300ms ease; transition-delay: calc(200ms + var(--i) * 700ms); }
  .light .s1f-ico { background: #FFFFFF; border-color: rgba(15,23,42,0.12); }
  .s1f.is-on .s1f-ico { color: #818CF8; border-color: #818CF888; box-shadow: 0 0 0 1px #818CF833, 0 0 18px -4px #818CF8AA; }
  .light .s1f.is-on .s1f-ico { color: #FFFFFF; background: #1E3A8A; border-color: #1E3A8A; box-shadow: none; }
  .s1f-stage strong { margin-top: 6px; color: var(--mel-text-primary); font: 600 15px/1.3 Poppins, system-ui, sans-serif; }
  .s1f-sub { color: var(--mel-text-secondary); font: 400 13px/1.45 Poppins, system-ui, sans-serif; max-width: 22ch; }
  .s1f-laya { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; width: max-content; max-width: 100%; margin: 18px auto 0; padding: 7px 14px; border-radius: 999px;
    color: var(--mel-text-tertiary); font: 500 12.5px/1.35 Poppins, system-ui, sans-serif; border: 1px dashed rgba(148,163,184,0.35); transition: color 400ms ease, border-color 400ms ease, box-shadow 400ms ease; transition-delay: 1900ms; }
  .s1f-laya svg { color: inherit; flex: 0 0 auto; }
  .s1f.is-on .s1f-laya { color: var(--mel-text-primary); border-color: #F59E0BAA; box-shadow: 0 0 16px -6px #F59E0B; }
  .light .s1f.is-on .s1f-laya { box-shadow: none; }
  .s1f.is-on .s1f-laya svg { color: #F59E0B; }
  .light .s1f.is-on .s1f-laya svg { color: #B45309; }
  .s1f-laya-stem { position: absolute; left: 50%; bottom: 100%; width: 1px; height: 14px; border-left: 1px dashed rgba(148,163,184,0.35); }
  @media (max-width: 640px) {
    .s1f { padding: 20px 16px; }
    .s1f-line { display: none; }
    .s1f-stages { grid-template-columns: 1fr; gap: 14px; text-align: left; }
    .s1f-stage { display: grid; grid-template-columns: 44px 1fr; column-gap: 12px; align-items: center; }
    .s1f-stage .s1f-ico { grid-row: 1 / span 2; }
    .s1f-stage strong { margin: 0; }
    .s1f-sub { max-width: none; }
    .s1f-laya { margin-left: 0; width: auto; justify-content: flex-start; }
    .s1f-laya-stem { display: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .s1f-line::after, .s1f-ico, .s1f-laya { transition: none !important; }
    .s1f.is-on .s1f-runner { animation: none; }
  }