.st-progress { display: flex; align-items: center; gap: 14px; max-width: 420px; margin: 26px auto 0; font-size: 13px; font-weight: 700; color: var(--text-muted); }
.st-bar { flex: 1; height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.st-bar i { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--accent), #2ecc71); transition: width .4s ease; }
.st-list { list-style: none; margin: 36px auto 0; padding: 0; max-width: 780px; display: grid; gap: 14px; counter-reset: s; }
.st-item { counter-increment: s; display: flex; gap: 16px; align-items: flex-start; padding: 20px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); transition: border-color .2s, opacity .2s; }
.st-item.is-done { border-color: rgba(46,204,113,.5); opacity: .75; }
.st-item[hidden] { display: none; }
.st-item.is-next { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.st-login-note { max-width: 780px; margin: 30px auto 0; padding: 14px 20px; text-align: center; border-radius: 14px; border: 1px dashed rgba(4,157,234,.4); background: var(--accent-soft); font-size: 14px; font-weight: 700; }
.st-check { flex: 0 0 44px; height: 44px; border-radius: 50%; border: 2px solid var(--border); background: var(--surface-2); color: transparent; display: grid; place-items: center; font: 800 16px inherit; transition: all .2s; }
.st-check::before { content: counter(s); position: absolute; color: var(--text-muted); }
.st-check .icon { width: 22px; height: 22px; opacity: 0; }
.st-check { position: relative; }
.st-item.is-done .st-check { background: #2ecc71; border-color: #2ecc71; color: #111; }
.st-item.is-done .st-check::before { display: none; }
.st-item.is-done .st-check .icon { opacity: 1; }
.st-body { flex: 1; min-width: 0; }
.st-body h3 { margin: 4px 0 6px; font-size: 17px; font-weight: 800; }
.st-body p { margin: 0 0 12px; color: var(--text-muted); font-size: 14px; line-height: 1.9; }
.st-body .mk-actions { justify-content: flex-start; margin: 0; }
.st-item.is-done h3 { text-decoration: line-through; text-decoration-color: rgba(255,255,255,.3); }
.st-item.is-done .mk-actions, .st-item.is-done p { display: none; }